Can anyone know the link for loading jquery-ui-1.7.2.custom.min from j query site like
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>.
what are all the .js files needed for jquery tab.
You may use google api to load jquery:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
You need to make sure that you include the tabs script with your custom build. To do this go to http://jqueryui.com/download and tick the 'tabs' checkbox.
This will out put a zip file containing images, css and js files.
Next, attach the custom jQuery UI file, aswell as the jQuery file and the relevant CSS files.
Then visit http://jqueryui.com/demos/tabs/ and check out the source for that demo (click 'view source'). It'll give you the mark up needed to create the tabs.
Related
I'm trying to add a custom javascript file so I can reference it from a razor page.
I placed this file in the wwwroot/js folder
However, the file is not available client side, and when I check the sources using developer tools in the browser I can only see site.js.
I tried setting the properties of the js file to copy always, but this has no effect.
(site.js has 'do not copy' as standard)
I'm also refreshing the browser with ctrl+R.
What am I missing?
The js site.js is added in _layout.cshtml so that
you can see it in developer tools.If you want to see 'test.js' in developer tools,you need to add
<script src="~/js/jfc/test.js"></script>
to the view which you want to use it or add it to _layout.cshtml.
result:
Update:
You can see the following code in _layout.cshtml:
#await RenderSectionAsync("Scripts", required: false)
And if you want to add js to your view,you can add it to
#section scripts{
<script>
...
</script>
}
Here is an official doc about layout.
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
I have this index.html and login.html and I use a href to link from index to login. and in each index.html and login.html I import the javascript. However, it seems that only the ones come from index.html that is being loaded. so if I place the js in index.html for the login.html, it works fine. but then, we I place it separately ( another js for login.html that is not in index.html) , it doesnt work
TIA
When JQM(jQuery mobile) loads a page it uses ajax to accomplish this. When this happens all code in the <head> section is ignored. JQM looks for the data-role="page" part and inserts it into the same dom as index.html. So basically you are doing it the correct way when you add your js in the index.html page.
If you would like to compartmentalize your js code to work for certain pages use this example:
$(document).on('pageinit', '#page1', function(){
// code for #page1
});
$(document).on('pageinit', '#page2', function(){
// code for #page2
});
$(document).on('pageinit', '[data-role=page]', function(){
// this code will execute for every page that is data-role="page"
});
So go ahead and put all your code in one file. Split your code into appropriate pages like above and include that in your index.html file.
Also if you are using JQM version 1.0.1 with jQuery version 1.6.4(recommended with 1.0.1) use .delegate() instead of .on(). i.e.
$(document).delegate('#page1', 'pageinit', function(){ // notice that pageinit and #page1 are switched around for delegate
// code for #page1
}); // interesting to note that if you use delegate in jQuery 1.7.x it actually just calls the .on() method.
Note If you were making a web application instead of a phonegap app you would be smart to put your javascript in that one file and include that in every page. This way if someone is following a link or bookmarked your page they will still get the correct javascript file they need.
Anyways I hope that helps you out. Good luck!
If you are doing a window.location.href then it will load the new HTML(In you case it is login.html) If you are using this approach then you have to reload all you scripts again and hence add these scripts in all your .html pages.
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
However if you use the approach recommended by #deadlock then you will just need to load the script once. The later approach is the best one.
Please post your code, specifically how the pages link to each other, and the global config settings you set for app, if any. Like much with jQM, there are multiple practices and strategies supported for page arch.
You can also learn by using desktop browser tools and view the "Resources" to see what and when your resources are being loaded.
I am trying to hide/show elements in a view using following code:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});
However, I am keep getting
Microsoft JScript runtime error: '$' is undefined
What might be the issue and how do I fix it?
This thread is pretty old, but I think an answer in the thread would be nice. I agree with the previous two answers - it's likely because jQuery wasn't loaded. You can load it this way (usually toward the top of the file):
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
(or whatever the current version of jQuery is).
Hope it helps.
It sounds like jQuery hasn't been loaded yet.
did you make sure download the jquery javascript file and link in to your html/aspx page before attempting to use jquery scripting?
you need to:
download the jquery code/file from:
http://jquery.com/
copy the file (jquery-1.8.3.min.js) you just downloaded somewhere into your web project directory/folder
then insert the link to this file into html/aspx page:
now try to run webpage
references:
www.youtube.com/watch?v=Bf9Gs-09uzQ
www.ajaxtutorials.com/javascript/introduction-to-jquery-learn-jquery-from-scratch-in-asp-net-4-0/
$ is defined by default when you load jquery. I would try and use jquery() to see if somehow $ is being unloaded etc. You can also load up firebug and hit the page. It should show up as a global variable/function. NOTE: You can also setup jquery to not setup the short hand "$".
since it looks like your trying to target classes and ID's - try this
$('.buttonClass #IDhere').click(function (){
$('.theDivYouWantToShowClass #IDhere').toggle();
});
This is a definite case of jQuery module not being loaded. In my case, common.js had a jQuery related script
$( document ).ready(function() {
var divSessionWarning = $("#idivWarn");
divSesWarning.load(divSesWarning.data("src"));
});
This was called in header.jsp. Swapping the sequence of loading the jQuery followed by the common.js resolved the issue.
<script language="javascript" type="text/javascript" src="/JAVASCRIPT/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/JAVASCRIPT/mod/common.js"></script>
Hope this helps.
If jQuery is called then make sure jQuery is loaded before the stylesheet as its likely that calls it
I am using JQuery themes in my html. ThemeRoller works correctly and applies right themes. However I want to change the default theme that it sets when Page loads. For example, I want to use the 'Start' theme when html loads. Can anybody please help?
You can use the "loadTheme" option like that:
$("#themeSwitcher").themeswitcher({
"loadTheme": "Start"
});
You need to download the generated CSS and images from the ThemeRoller and reference the CSS in your page.
As SLaks suggests, you need do the following:
Download a new theme (jquery theme downloader)
Unzip the files and put them into your website (south-street theme gets copied to: MyWebproject\Content\themes\south-street)
Make a reference in your html to the css:
<link href="Content/themes/south-street/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />