JavaScript will not run a second time

Question

I am running a script using $(document).ready() it is performing the way I want it to on load up, however, the same script needs to be ran when an html select control is changed.

What I need ultimately is for the filter and sort to run on initial load with sorting on Low to High, and then after the page is loading the user should be able to select any select control and filter and sort as they wish.

Go to http://webtest.ipam.ucla.edu to view the code and on the bottom of the page you can download the folder with all of the files.

How do I fix this?

Answer 1

You can put all your reusable logic into a function:

function myPrettyJavaScriptLogic () {
   // All the code that you want to reuse in here
}

Then you can call the above function both from document.ready() and also from the onchange handler of your select control.

Answer 2

put your script in a Named function. call it in domready and select.change().

Answer 3

Create a function outside of your doc ready closure and call it when you need to. Example is jQuery but doc ready is the same event:

var doSomethingCool = function( coolStuff ) {
    // Do cool stuff
}

$(function(){
  doSomethingCool( $(this) );

  $('#selectControlId').change(function(e){
    doSomethingCool();
  });

});

Answer 4

You will need to set up a handler for the select box's onChange event. What I would do is pull out the code you need to execute into a separate function and then do something like

function dostuff(){
//do whatever you need to
}

$(document).ready(function() {
   dostuff();
}

<select onchange"dostuff()" >... </select>

Note this was quick and dirty, just to give you an idea.

Check out this link for more about select's onchange.

Answer 5

Since you are referencing the .ready function I'm assuming you are actually using jQuery.

$(document).ready() or jQuery(document).ready()

Anything within the ready() function will only be called once - when the page is loaded. It waits until the entire DOM is loaded before executing that code.

You can extract out your functionality to a separate function to get kicked off based on your select control changing.

You may benefit from reading a jQuery tutorial I wrote the other week: http://kewlniss.com/post/2010/09/18/jQuery-Goodness.aspx

Also, the actual .change event in the jQuery API is here: http://api.jquery.com/change/

Assuming you want the functionality to be called when the page loads and when the option is changed you will want to create a new function and have that function called inside of both the .ready and the .change functions.

Hope this helps!

Answer 6

If you are using jQuery, which I will assume you are because of this syntax, you just have to bind the event onchange to the element.

$("element").bind("change", function() { /* your logic */ });

You have to run this code after the element is rendered. If you place this code inside the $(document).ready there will be no problem. but the whole page will have to load before the even is bound.

So you can do the following:

<select id="sel">
    <option>A</option>
    <option>B</option>
</select>

Then bind the event change.

$(function() {   /* equivalent to document.ready */
    $("#sel").bind("change", function() {
        /* code that runs when the selection change */
    });
});

Answer 7

Thank you all for your help, this is now fixed. The way i did it was to encapsulate the $(function(){}) in another function (filtersortProcess()) and then created another script that autoselects the Low to High option and calls filtersortProcess() on windows.load.

Within the $(function(){}) I added a variable (complete) and set it to 1 when it goes within the actual filter process, then after the filter process (if the code exits before completing the process) I check for the complete variable and do a simple filter and sort on the data and with all of this it works great.

Thank you again.