Problem in adding script

Nov 2, 2010 at 11:58 AM
  1. I had created module say MyTestModule
  2. in one of my view (i.e. .cshtml) I wrote script in script Tag

example:-

<script>
$(document).ready(function () {
        var data = $("#NameTXT").val();
    });
</script>

 3.on the top of my page I have added

@using Orchard.UI.Resources;
@Script.Require("jQuery");

 

 4.but I get script error as

$ is not defined

 

5. But if I include jquery-1.4.2.js in script folder of my module
And in my code/view if I add @Script.Include("jquery-1.4.2.js ");
It works fine 
Coordinator
Nov 2, 2010 at 3:17 PM

This might be because scripts are added at the end of the file by default. You can add it in the header by typing this:

@Script.Include("jquery-1.4.2.js ").AtHead();

Coordinator
Nov 2, 2010 at 7:29 PM

You may also include your own script at the end of the page this way:

@using(Script.Foot()) {
<script type="text/javascript">
  $(function() {
    // Your startup script goes here
  });
</script>

}
Coordinator
Nov 2, 2010 at 7:34 PM

We triggers a new question …. Which one of them will be at the foot of the foot ;)

From: bertrandleroy [mailto:notifications@codeplex.com]
Sent: Tuesday, November 02, 2010 11:30 AM
To: Sebastien Ros
Subject: Re: Problem in adding script [orchard:233143]

From: bertrandleroy

You may also include your own script at the end of the page this way:

@using(Script.Foot()) {
<script type="text/javascript">
  $(function() {
    // Your startup script goes here
  });
</script>
 
}

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com

Coordinator
Nov 2, 2010 at 7:43 PM

Depends on the order in whcih they are registered, but by doing your own registration of jQuery, you are ensuring that the order that you care about is going to be respected.

Coordinator
Nov 2, 2010 at 9:04 PM

Answer accepted ;)

From: bertrandleroy [mailto:notifications@codeplex.com]
Sent: Tuesday, November 02, 2010 11:44 AM
To: Sebastien Ros
Subject: Re: Problem in adding script [orchard:233143]

From: bertrandleroy

Depends on the order in whcih they are registered, but by doing your own registration of jQuery, you are ensuring that the order that you care about is going to be respected.

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com

Nov 3, 2010 at 6:12 AM

All,

Thanks A lot Now it work I have done this way 

 

@Script.Require("jQuery").AtFoot();

@using(Script.Foot()) {
<script type="text/javascript">    
    $(function () {
        })
</script>
}

 

Thanks,

Rajan J Dmello

Mar 25, 2011 at 2:27 AM
Edited Mar 25, 2011 at 2:27 AM

Hello,

I am attempting add a JavaScript Slider to my Orchard installation. Below is my HTML code that I have added to an Html Widget.

 

<script src="Themes/h1/Scripts/jquery.js" type="text/javascript"></script>
<script src="Themes/h1/Scripts/script.js" type="text/javascript"></script>
<div id="feature">
<div class="slideWrap">
<div class="slide"><!-- FEATURED IMAGE TEXT AND BUTTONS -->
<div class="text">
<h3>New Wordpress theme</h3>
<h1>LUNA - Crisp and dark</h1>
<p>Integer porttitor faucibus felis, eu fermentum odio  							hendrerit quis. Pellentesque habitant morbi tristique  							senectus et netus et malesuada fames ac turpis egestas.  							Mauris semper facilisis leo, nec sodales ante pretium  							at.</p>
<ul class="post-bt">
<li><a href="post.html"><span>Read more</span></a></li>
<li><a class="forward" href="#"><span>Next item</span></a></li>
</ul>
</div>
<!-- FEATURED IMAGE CONTAINER -->
<div class="image">
<div class="inner"><!-- This is the featured image --> <img src="images/dummyfeatureimage.jpg" alt="something" width="480" height="260" /> <!-- This is the "reflection" on the featured image --></div>
</div>
<!-- End image --></div>
<!-- End slideshow item -->
<div class="slide"><!-- FEATURED IMAGE TEXT AND BUTTONS -->
<div class="text">
<h3>New Wordpress theme</h3>
<h1>LUNA - Crisp and dark</h1>
<p>Integer porttitor faucibus felis, eu fermentum odio  							hendrerit quis. Pellentesque habitant morbi tristique  							senectus et netus et malesuada fames ac turpis egestas.  							Mauris semper facilisis leo, nec sodales ante pretium  							at.</p>
<ul class="post-bt">
<li><a href="post.html"><span>Read more</span></a></li>
<li><a class="forward" href="#"><span>Next item</span></a></li>
</ul>
</div>
<!-- FEATURED IMAGE CONTAINER -->
<div class="image">
<div class="inner"><!-- This is the featured image --> <img src="images/content/480_01.jpg" alt="something" width="480" height="260" /> <!-- This is the "reflection" on the featured image --></div>
</div>
<!-- End image --></div>
<!-- End slideshow item -->
<div class="slide"><!-- FEATURED IMAGE TEXT AND BUTTONS -->
<div class="text">
<h3>New Wordpress theme</h3>
<h1>LUNA - Crisp and dark</h1>
<p>Integer porttitor faucibus felis, eu fermentum odio  							hendrerit quis. Pellentesque habitant morbi tristique  							senectus et netus et malesuada fames ac turpis egestas.  							Mauris semper facilisis leo, nec sodales ante pretium  							at.</p>
<ul class="bt">
<li><a href="post.html"><span>Read more</span></a></li>
<li><a class="forward" href="#"><span>Next item</span></a></li>
</ul>
</div>
<!-- FEATURED IMAGE CONTAINER -->
<div class="image">
<div class="inner"><!-- This is the featured image --> <img src="images/content/480_02.jpg" alt="something" width="480" height="260" /> <!-- This is the "reflection" on the featured image --></div>
</div>
<!-- End image --></div>
<!-- End slideshow item --></div>
</div>

 

As you can see at the top, it references 2 Scripts. I have added those to the Scripts at the root of the theme. I am not sure of what further additions I need to make in order to make it function. Any ideas?

Regards,

TJ Havens

Coordinator
Mar 25, 2011 at 3:35 AM

Use Script.Include.

Mar 25, 2011 at 4:06 AM

I added that to the layout.chtml, are you suggesting that I use that for the script files path?

Coordinator
Mar 25, 2011 at 4:15 AM

I'm not sure I understand the question but here's what I'd do: replace those two script tags with Script.Require("jQuery") and Script.Include("~/Themes/h1/Scripts/script.js"). I would also use a more descriptive name for that second script file.

Mar 25, 2011 at 4:29 AM
Edited Mar 25, 2011 at 4:29 AM

Here is the site: http://www.h1imprints.com, I am really not sure whats going on. When you view page source you can see the references...

Coordinator
Mar 25, 2011 at 4:32 AM

Oh wait, I just noticed you were in an Html widget. That can't work. You'll have to do some programming to make this work, or keep the scripts as they were (but remove jquery, you probably already have it).

Mar 25, 2011 at 4:36 AM

 

When reviewing the Contoso theme, the header used HTMLWidget also?

Coordinator
Mar 25, 2011 at 5:07 AM

Precisely: the Script.Require and Script.Include APIs can't work in a Html Widget, and Contoso is not using them either. Instead, it injects the script tags in the Html widget, which is plain ugly but gets the job done. The problem with that approach is that if you had two widgets doing the same thing, you'd have your scripts included twice, which can lead to all kinds of nasty side effects.