function won't fire inside ajax-loaded box - new to jquery

[transpar3nt]

Hello, I am fairly new to jQuery so if this is obvious please be
gentle :P

I am currently trying to get a plugin script (or any script for that
matter) to fire when used inside of a div that contains content that
was loaded using AJAX.

In this case I have a page that onLoads a user input form into a div
using AJAX.  The jQuery plugin I am using is Autotab (http://
www.lousyllama.com/sandbox/jquery-autotab) which is used to
automatically tab through the phone number fields (555 'tab' 321 'tab'
4567).  This works flawlessly when used on a non-ajax page, but I
cannot get it working here.

Logic:

Container page:
     loads the jQuery and plugin scripts in html head
     body onLoads the form page using ajax into the div

ajax-loaded script:
    prepares the script to fire (using jQuery document.ready) as
below:
       $(document).ready(function() {
         $('#ph1').autotab({ target: 'ph2', format: 'numeric' });
         $('#ph2').autotab({ target: 'ph3', format: 'numeric',
previous: 'ph1' });
         $('#ph3').autotab({ previous: 'ph2', format: 'numeric' });
       });
    below that is the form with the text inputs id=ph1, ph2, ph3

The only thing I can attribute to this not working is the fact that
the form is loaded after the document is technically 'ready'.  Oh and
I have tried putting the document.ready part in the header of the
container page and still doesn't work.  And if this matters, the AJAX
scripts I am using are from my own ajax modules library (not jQuery
ajax) that I built, and work flawlessly to do their part... so far.

I really appreciate any help any of you gurus may provide,,, my
background is more in the back-end scripting (php, mysql, etc.) and
javascript, although fascinating, is still quite foreign to me!

THANKS!

 - Keith

[Charlie Tomlinson]

"The only thing I can attribute to this not working is the fact that
the form is loaded after the document is technically 'ready'."

That is it exactly, there is a live() function in jquery with limited event handling as well as livequery plugin that binds events to future data

transpar3nt wrote:

Hello, I am fairly new to jQuery so if this is obvious please be
gentle :P

I am currently trying to get a plugin script (or any script for that
matter) to fire when used inside of a div that contains content that
was loaded using AJAX.

In this case I have a page that onLoads a user input form into a div
using AJAX.  The jQuery plugin I am using is Autotab (http://
www.lousyllama.com/sandbox/jquery-autotab) which is used to
automatically tab through the phone number fields (555 'tab' 321 'tab'
4567).  This works flawlessly when used on a non-ajax page, but I
cannot get it working here.

Logic:

Container page:
     loads the jQuery and plugin scripts in html head
     body onLoads the form page using ajax into the div

ajax-loaded script:
    prepares the script to fire (using jQuery document.ready) as
below:
       $(document).ready(function() {
         $('#ph1').autotab({ target: 'ph2', format: 'numeric' });
         $('#ph2').autotab({ target: 'ph3', format: 'numeric',
previous: 'ph1' });
         $('#ph3').autotab({ previous: 'ph2', format: 'numeric' });
       });
    below that is the form with the text inputs id=ph1, ph2, ph3

The only thing I can attribute to this not working is the fact that
the form is loaded after the document is technically 'ready'.  Oh and
I have tried putting the document.ready part in the header of the
container page and still doesn't work.  And if this matters, the AJAX
scripts I am using are from my own ajax modules library (not jQuery
ajax) that I built, and work flawlessly to do their part... so far.

I really appreciate any help any of you gurus may provide,,, my
background is more in the back-end scripting (php, mysql, etc.) and
javascript, although fascinating, is still quite foreign to me!

THANKS!

 - Keith

  

[Rick Faircloth]

Hi, Keith...

 

I'm not sure what the final solution will be for your particular issue, especially since

your are using "home-grown ajax", but I will say that I deal with DOM-injected code

all the time by using the livequery plug-in available for jQuery.  It's designed for just

this purpose...to apply previous functionality to newly injected DOM code.

 

I tried using the new .live() function available in the more recent versions of jQuery,

but that function is more limited in its application from triggers such as blur, etc.

 

Check the livequery plug-in for jQuery...it just may make your day.

 

Rick

On Fri, Jul 3, 2009 at 2:52 AM, transpar3nt <casperghosty@...> wrote:

Hello, I am fairly new to jQuery so if this is obvious please be
gentle :P

I am currently trying to get a plugin script (or any script for that
matter) to fire when used inside of a div that contains content that
was loaded using AJAX.

In this case I have a page that onLoads a user input form into a div
using AJAX.  The jQuery plugin I am using is Autotab (http://
www.lousyllama.com/sandbox/jquery-autotab) which is used to
automatically tab through the phone number fields (555 'tab' 321 'tab'
4567).  This works flawlessly when used on a non-ajax page, but I
cannot get it working here.

Logic:

Container page:
    loads the jQuery and plugin scripts in html head
    body onLoads the form page using ajax into the div

ajax-loaded script:
   prepares the script to fire (using jQuery document.ready) as
below:
      $(document).ready(function() {
        $('#ph1').autotab({ target: 'ph2', format: 'numeric' });
        $('#ph2').autotab({ target: 'ph3', format: 'numeric',
previous: 'ph1' });
        $('#ph3').autotab({ previous: 'ph2', format: 'numeric' });
      });
   below that is the form with the text inputs id=ph1, ph2, ph3

The only thing I can attribute to this not working is the fact that
the form is loaded after the document is technically 'ready'.  Oh and
I have tried putting the document.ready part in the header of the
container page and still doesn't work.  And if this matters, the AJAX
scripts I am using are from my own ajax modules library (not jQuery
ajax) that I built, and work flawlessly to do their part... so far.

I really appreciate any help any of you gurus may provide,,, my
background is more in the back-end scripting (php, mysql, etc.) and
javascript, although fascinating, is still quite foreign to me!

THANKS!

 - Keith

--
--------------------------------------------------------------------------------------------------------------------------------------------------
"Ninety percent of the politicians give the other ten percent a bad reputation."  Henry Kissinger