Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.




243 posts

Master Geek
+1 received by user: 58


Topic # 193455 11-Mar-2016 16:31
One person supports this post
Send private message

So I have an ajax script for cascading drop down forms.

 

At the moment it's called when the "master" drop down is changed or focused, using the jquery on() function. When the user selects an item from the master dropdown, the ajax script is called to load a php script that checks the sql DB for all the "children" of that master, which then populates the child drop down list.

 

 

 

$("select#master").on("change focus", function(){
var master = $("select#master option:selected").attr('value');
if (master.length > 0 ){

$.post("inc/fetchChild.php",
{
id: master
},
function(data){
$("#child").html( data );
});

};
});

 

 

 

This works all well and good - no dramas. 

 

The problem is I want this script to fire on page load. This is because the form data at the next page is saved as session variables, so the user can go back and forth between the form stages and each form element checks to see if there is a associated session variable, and if there is, loads it up. 

 

Im doing this because the form is very long and broken into 5 sections - so I dont want the customer losing their form data if they go back and forth.

 

 

 

So, I need this above script to fire on page load because if the user has already selected the child and master previous - then php loads the "master" drop down with the user selection already loaded and selected. This once the page has finished loading, the ajax script needs to fire - sees that the master is already loaded, and subsequently loads the children for that master.

 

 

 

So going back to the main problem. If I insert "ready" into the ".on("change focus", function()" function ..... .on("change focus ready", ... it doesn't work.

 

 

 

However If I copy and past the above functions contents into the root $(document).ready(function(){ function, it works fine! Like this:

 

 

 

$(document).ready(function(){


var master = $("select#master option:selected").attr('value');
if (master.length > 0 ){

$.post("inc/fetchChild.php",
{
id: master
},
function(data){
$("#child").html( data );
});

};


$("select#master").on("change focus", function(){
var master = $("select#master option:selected").attr('value');
if (master.length > 0 ){

..........................etc...

 

 

 

 

 

Problem is now I have pretty much a duplicate function, which isn't very efficient and a but ugly.

 

I hope I'm explaining myself clear enough...

 

Can I reconfigure this on function to fire on page load as well as when the user clicks on the master list?

 

 

 

 

 

 


Filter this topic showing only the reply marked as answer Create new topic
525 posts

Ultimate Geek
+1 received by user: 122

Subscriber

  Reply # 1511472 11-Mar-2016 16:37
Send private message

You would put everything in the function into its own function

 

So like follows

 

function reload_list(){

 

var master = $("select#master option:selected").attr('value');
if (master.length > 0 ){

$.post("inc/fetchChild.php",
{
id: master
},
function(data){
$("#child").html( data );
});

 

}

 

$("select#master").on("change focus", function(){

 

reload_list();

 

});

 

$(document).ready(function(){

 

reload_list();

 

});





Geoff E



243 posts

Master Geek
+1 received by user: 58


  Reply # 1512714 14-Mar-2016 08:48
Send private message

ahh of course. cheers!


Filter this topic showing only the reply marked as answer Create new topic



Twitter »

Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:



Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.