Dynamically loaded Form & datepicker not initializing

Question

The Situation:

I am using jQuery to load different forms(stored in separate php files) based on a radio button selection. Within the separate php files I am initializing a validator and datepicker. The validation seems to work fine, but the datepicker does not initialize.

The Problem:

All of the mark-up is in order, and I have tested it as part of one file and it works fine, it's only why I load the forms from a separate file that I get the problem... and only with the datepicker, not the validation(they initialize in the same function).

Furthermore:

When I try to use firebug to debug the problem, the script tags and jQuery function does not show up in the Dom, but I know it is working because the validation is firing.

The function that loads the external content:

<script type="text/javascript">
                $('#hpbooking_select input[type=radio]').live('change', function() { //Setting up the chenge  event for the radio button
                    var AffectedRegistration = $(this).parents('#hpbooking_select').parent();
                    //alert($(AffectedRegistration).attr('class'));
                    var ID = $(this).attr('id'); //getting the ID of the radio button
                    var IDArray = ID.split('_'); //seperating the ID into an array
                    var regURL = '/wp-content/themes/1000ik/hpbooking/' + IDArray[1] + '.php'; //building a url to load
                    var childPIPR = $(AffectedRegistration).children('.hpbooking_registration');
                    //alert(regURL); FOR TESTING ONLY
                    //$(childPIPR).html(regURL); FOR TESTING ONLY
                     $(childPIPR).load(regURL); //loading the url

                });
                </script>
            <div id="hpbooking_container">
                <div id="hpbooking_select">
                    <h2>What type of adventure are you looking for?</h2>
                    <fieldset>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_guidedtrip" /><label for="bookingselect_guidedtrip">A Guided Trip</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_course" /><label for="bookingselect_course">A Course</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_group" /><label for="bookingselect_group">Tour Group</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_paddlefest" /><label for="bookingselect_paddlefest">Paddlefest 2011</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_paddleplay" /><label for="bookingselect_paddleplay">Paddle and Play</label>
                    </fieldset>
                </div>

The External Code loaded:

<script type="text/javascript">
jQuery(function(){
jQuery("#hpbookingform").validate();
jQuery('.date-pick').datePicker();
}); 
</script>
<form id="hpbookingform" method="post" action="/wp-content/themes/1000ik/engine-hpguidedtrips.php" >
<fieldset><LABEL for="daytrip_date">Date </LABEL><input type="text" value="" class="date-pick dp-applied required" id="daytrip_date" name="daytrip_date" /></fieldset>
</form>

Resources: datepicker plugin: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

possible duplicate of [How to load script with jquery.load() ?](http://stackoverflow.com/questions/5519792/how-to-load-script-with-jquery-load) — DarthJDG, May 26 '11 at 19:22
When you say "load the forms from a separate file", do you mean with ajax? — edwin, May 26 '11 at 19:23
@edwin, it is a jQuery function.. I had edited to post to include it. — patrick, May 26 '11 at 19:28
As a side note, I will probably be able to navigate your entire site using this and get any page to load via it. Via firebug, you can change things like Id. So I could go _../../ — CtrlDot, May 26 '11 at 19:34
@patrick: It's not about live, but about loading content with ` — DarthJDG, May 26 '11 at 19:49
darth, can you please explain that more? I load partial pages via AJAX that have script tags in them and they run fine. — CtrlDot, May 26 '11 at 19:56

score 0 · Answer 1 · answered May 26 '11 at 19:20

0

Usually you would run those jquery commands in a document.ready block which would fire after the page had been fully loaded.

I would move the script tag to the bottom of the page. It should get executed after the html elements have been read in.

answered May 26 '11 at 19:20

CtrlDot

2,463
14
11

Thanks for the input! I had thought of this, and tried it already, it does not seem to make a difference. I just double checked by adding it to a document.ready function and placing below the form... still nothing. – patrick May 26 '11 at 19:24
Are you loading these forms from AJAX? Can you try putting the script markup in the ajax success method? (After the html() call of course) – CtrlDot May 26 '11 at 19:28
@CtrlDot, it is a jQuery function.. I had edited to post to include it. – patrick May 26 '11 at 19:30
Got that. After the load call, add a call to initialize the datePicker – CtrlDot May 26 '11 at 19:35
@CtrlDot, thanks, I tried that and still nothing... The datepicker should grab the input and render an tag if it is working, but it wont. P.S. Thanks for your patience – patrick May 26 '11 at 19:42
Just curious, is there a reason why you used this datePicker over the one that comes with JQuery UI? – CtrlDot May 26 '11 at 19:46
to be honest, I've never ventured into jQuery UI, I'll have a look – patrick May 26 '11 at 19:47

Dynamically loaded Form & datepicker not initializing

1 Answers1