My HTML is using  a lot of js files (10 js files) including jquery js .  There are 4 js files which are not needed instantly ,but later that is when clicked on some button .  Could you please let meknow if is it possible to load js file at required time only ??  My html looks this way   &lt;html&gt;    &lt;head&gt;       &lt;script type="text/javascript" src="js/accordian/jquery-1.9.1.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/accordian/jquery-ui.js"&gt;&lt;/script&gt;       &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/customerscreen_sub.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/toppings.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/crusts.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/customerorders.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/common.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript" src="js/url.js"&gt;&lt;/script&gt;       &lt;script type="text/javascript"&gt;
49974
How can you reliably and dynamically load a JavaScript file?  This will can be used to implement a module or component that when 'initialized' the component will dynamically load all needed JavaScript library scripts on demand.  The client that uses the component isn't required to load all the library script files (and manually insert &lt;script&gt; tags into their web page) that implement this component - just the 'main' component script file.  How do mainstream JavaScript libraries accomplish this (Prototype, jQuery, etc)?  Do these tools merge multiple JavaScript files into a single redistributable 'build' version of a script file?  Or do they do any dynamic loading of ancillary 'library' scripts?  An addition to this question: is there a way to handle the event after a dynamically included JavaScript file is loaded?  Prototype has document.observe for document-wide events. Example:  document.observe("dom:loaded", function() {   // initially hide all containers for tab content   $$('div.tabcontent').invoke('hide'); });   What are the available events for a script element?
104708
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:   &lt;div&gt;   &lt;!-- some html --&gt;   &lt;script type="text/javascript"&gt;     /** some javascript */   &lt;/script&gt; &lt;/div&gt;   I'm inserting the whole thing into the DOM, but the JavaScript isn't being run.  Is there a way to run it?    Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed.  I can't call eval on the response because the JavaScript is within a larger block of HTML.  I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky.  Anyone know a better way?
73955
I am having a little trouble figuring out how to make this work properly, I am trying to put a small countdown clock in the left column and one in the right column, which will show a countdown to two separate dates. I was able to create a single countdown clock using the below code and was hoping to be able to be able to tweak the code enough to allow it to run on a second CEWP with a different date. Is it possible to run two Javascript files on the page without them interferring with eachother? Thank you anyone that can lend a quick hand.      &lt;style type="text/css"&gt; .container{     text-align: center;     background: #f63536;   font-family: sans-serif;   font-weight: 100;   height:115px;   width:215px; }  h3{   color: #FFFFFF;   font-weight: 100;   font-size: 16px;   margin: 0px 0px 5px;   padding-top:3px; }  #clockdiv{     font-family: sans-serif;     color: #fff;     display: inline-block;     font-weight: 100;     text-align: center;     font-size: 20px; }  #clockdiv &gt; div{     padding: 5px;     border-radius: 3px;     background: #ff5b5b;     display: inline-block; }  #clockdiv div &gt; span{     padding: 5px;     border-radius: 3px;     background: #ab0202;     display: inline-block; }  .smalltext{     padding-top: 5px;     font-size: 13px; }  &lt;/style&gt;  &lt;div class="container"&gt;  &lt;h3&gt;Countdown Clock Left&lt;/h3&gt; &lt;div id="clockdiv"&gt;   &lt;div&gt;     &lt;span class="days"&gt;&lt;/span&gt;     &lt;div class="smalltext"&gt;Days&lt;/div&gt;   &lt;/div&gt;   &lt;div&gt;     &lt;span class="hours"&gt;&lt;/span&gt;     &lt;div class="smalltext"&gt;Hrs.&lt;/div&gt;   &lt;/div&gt;   &lt;div&gt;     &lt;span class="minutes"&gt;&lt;/span&gt;     &lt;div class="smalltext"&gt;Min.&lt;/div&gt;   &lt;/div&gt;   &lt;div&gt;     &lt;span class="seconds"&gt;&lt;/span&gt;     &lt;div class="smalltext"&gt;Sec.&lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;&lt;/div&gt;  &lt;script&gt; function getTimeRemaining(endtime){   var t = Date.parse(endtime) - Date.parse(new Date());   var seconds = Math.floor( (t/1000) % 60 );   var minutes = Math.floor( (t/1000/60) % 60 );   var hours = Math.floor( (t/(1000*60*60)) % 24 );   var days = Math.floor( t/(1000*60*60*24) );   return {     'total': t,     'days': days,     'hours': hours,     'minutes': minutes,     'seconds': seconds   }; }  function initializeClock(id, endtime){   var clock = document.getElementById(id);   var daysSpan = clock.querySelector('.days');   var hoursSpan = clock.querySelector('.hours');   var minutesSpan = clock.querySelector('.minutes');   var secondsSpan = clock.querySelector('.seconds');    function updateClock(){     var t = getTimeRemaining(endtime);      daysSpan.innerHTML = t.days;     hoursSpan.innerHTML = ('0' + t.hours).slice(-2);     minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);     secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);      if(t.total&lt;=0){       clearInterval(timeinterval);     }   }    updateClock();   var timeinterval = setInterval(updateClock,1000); }  var deadline = 'October 31 2015 00:00:50'; initializeClock('clockdiv', deadline); &lt;/script&gt;
51168
I have an LWC template like this: &lt;input list=&quot;counties&quot;&gt; &lt;datalist id=&quot;counties&quot;&gt;   &lt;template for:each={counties} for:item=&quot;county&quot;&gt;     &lt;option key={county.Id}&gt;{county.Name}&lt;/option&gt;   &lt;/template&gt; &lt;/datalist&gt;  I load the county records from the server. There are about 3,000 of them. When the counties are loaded and the template updates, it hangs the entire page for 10-20 seconds. This is a fairly small amount of elements to insert into the DOM.  Why are LWCs so slow when updating the DOM? What about them under the hood makes this such an inefficient operation? How can I speed this up, so that my autocomplete input can be populated by accurate information without hanging the entire page for 20 seconds?
63292
I develop Joomla websites/components/modules and plugins and every so often I require the ability to use JavaScript that triggers an event when the page is loaded.  Most of the time this is done using the window.onload function.  My question is:    Is this the best way to trigger JavaScript events on the page loading or is there a better/newer way? If this is the only way to trigger an event on the page loading, what is the best way to make sure that multiple events can be run by different scripts?
120812
I'm working on a site where I am being asked to implement a loading animation on page loads. Essentially, the site will display a loading animation as soon as possible, which will go away once all of the assets (images, essentially) have been loaded.   I'm worried that this will actually reduce usability, but am very interested in any data on this. I want to know the "right" answer.  Essentially I have two feelings:   If images further down the page are still loading, I as a user, don't care. I want to start consuming any content as soon as it's available. From this perspective, hiding the site until everything is loaded would actually reduce perceived performance.  The browser already gives a good indication that the site is still loading. Users are at least subconsciously aware of this and are used to some things appearing after the initial render.    I've seen this sort of thing often on single page javascript applications where I think it makes a lot more sense. The user has an initial loading page, and afterwards the application is ready to go with all assets loaded. But, seeing a loading image every time you click a link feels a bit off to me.   I am very interested in opinions or data from people more knowledgeable and experienced in UX than myself.
10283
I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important.  I saw this here ():  function complexLoad(config, fileNames) {   for (var x = 0; x &lt; fileNames.length; x++) {     $("&lt;img&gt;").attr({       id: fileNames[x],       src: config.imgDir + fileNames[x] + config.imgFormat,       title: "The " + fileNames[x] + " nebula"     }).appendTo("#" + config.imgContainer).css({ display: "none" });   } };   But, it looks a bit over-the-top for what I want!  I know there are jQuery plugins out there that do this but they all seem a bit big (in size); I just need a quick, easy and short way of preloading images!
88861
I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?  If so, where can I find information/tutorial on it?
85862
This page does it the way I want it to:   But I want to find a better way using jQuery, can anyone point me to a good script that uses jQuery to accomplish this?
81684
I am trying to find a way to load a JSON page to display my content, which I currently have. But I am trying to fade in each element one after another? Is anyone familiar with a way to do that?  Fade in each element with a slight delay?  Here is an example of my code, I am using the jquery framework.  CODE:
56249
I have a web app that has a universal HTML header include, so I'd like to put page-specific scripts in each page instead of having it load for everything. I tried putting document.ready() near the end of the &lt;body&gt; of a page and it seems to be working fine. Are there any potential hazards to putting it there instead of inside the &lt;head&gt;?
69703
Is there any tool that enables you to "hot swap" JavaScript contents while executing a webpage?   I am looking for something similar to what HotSpot does for Java, a way to "hot deploy" new JS code without having to reload the whole page.  Is there anything like that out there?  Clarifying in case people don't understand "hot swap", as indicated by lock:  By "hot swap" I mean allowing me to change parts of the code contained on the page itself and its .js files.   Then this framework would detect the change - either automagically or by some indication from my end - and reload the code dynamically, avoiding the new server-side post (reload).   That kind of approach would simplify debugging and error fixing, since you don't need to reload the page and start the interaction all over again, from scratch.
11501
We are currently working in a private beta and so are still in the process of making fairly rapid changes, although obviously as usage is starting to ramp up, we will be slowing down this process.  That being said, one issue we are running into is that after we push out an update with new JavaScript files, the client browsers still use the cached version of the file and they do not see the update.  Obviously, on a support call, we can simply inform them to do a ctrlF5 refresh to ensure that they get the up-to-date files from the server, but it would be preferable to handle this before that time.  Our current thought is to simply attach a version number onto the name of the JavaScript files and then when changes are made, increment the version on the script and update all references.  This definitely gets the job done, but updating the references on each release could get cumbersome.  As I'm sure we're not the first ones to deal with this, I figured I would throw it out to the community.  How are you ensuring clients update their cache when you update your code?  If you're using the method described above, are you using a process that simplifies the change?
71210
What is the best place (which folder, etc) to put view-specific javascript files in an ASP.NET MVC application?    To keep my project organized, I'd really love to be able to put them side-by-side with the view's .aspx files, but I haven't found a good way to reference them when doing that without exposing the ~/Views/Action/ folder structure.  Is it really a bad thing to let details of that folder structure leak?  The alternative is to put them in the ~/Scripts or ~/Content folders, but is a minor irritation because now I have to worry about filename clashes.  It's an irritation I can get over, though, if it is "the right thing."
26508
I have an SP2013 wiki page that I want to use a jQuery accordion on.  Just with some static content, not pulling any information from anywhere in SharePoint.  I created the page, inserted a script editor web part at the top, and inserted this snippet:  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script&gt;     $(function () {         $("#accordion").accordion({collapsible: true, active: false, icons:false });     }); &lt;/script&gt;   Then, I put the cursor under the script editor web part, and clicked on "Edit Source".  Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):  &lt;div id="accordion"&gt;    &lt;h3&gt;       Section 1    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 2    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 3    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 4    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.&lt;/p&gt;       &lt;p&gt;Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/p&gt;    &lt;/div&gt; &lt;/div&gt;   After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section.  If I go back into edit mode for the page, it works as expected - clicking a header expands the section.  Save it again, and it stops working.  What am I missing?  I don't think what I'm trying to do is all that complicated...  EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode.  Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode.  The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.  So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code.  Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.  Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox?  (Because apparently in Chrome it works fine.)
22893
I would like to reload an &lt;iframe&gt; using JavaScript. The best way I found until now was set the iframe’s src attribute to itself, but this isn’t very clean. Any ideas?
67262
There are a few ways to include jQuery and jQuery UI and I'm wondering what people are using?   Google JSAPI jQuery's site your own site/server another CDN   I have recently been using Google JSAPI, but have found that it takes a long time to setup an SSL connection or even only to resolve google.com. I have been using the following for Google:  &lt;script src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script&gt; google.load('jquery', '1.3.1'); &lt;/script&gt;   I like the idea of using Google so it's cached when visiting other sites and to save bandwidth from our server, but if it keeps being the slow portion of the site, I may change the include.  What do you use? Have you had any issues?  Edit: Just visited jQuery's site and they use the following method:  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;   Edit2: Here's how I've been including jQuery without any problems for the last year:  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;   The difference is the removal of http:. By removing this, you don't need to worry about switching between http and https.