Javascript Not Working On Page/Form Elements Returned by Ajax 1

[tyhand]

Hi all,

I have a page that's returning Form fields and values from a database (I'm using Ajax with PHP/MySQL; I'm also using JQuery framework).

Everything works perfectly, except that for some reason, I am unable to execute javascript on the form's input fields.

Specifically, I am using the JSColor javascript/html Color Picker Script available here:

http://jscolor.com/

-- Check out the "Demo" section towards the top of page to see what the script can do on the fly. By the way, this script is Framework independent.

The JSColor script works perfectly on any form input field element -- except in the case where the input field element is returned (ie: built) using Ajax.

The script works simply enough: you click inside an input form field and the Color Picker pops up. The "call" to script is made with the "CLASS=Color" attribute inside the Input's Tag. In the case where the input field is built/returned with Ajax - nothing happens.

My guess is that the browser isn't picking up the form input elements on the page (if you view the source code on the page the data returned by Ajax isn't visible).

- So again, I have a page, for example, named: LoadAjaxData.php
- On this page I reference the jscolor script url
- The page returns values from a database using Ajax with PHP/MySQl as back-end
- Form's fields and values are returned properly (NO errors)
- However, javascript doesn't work if you were to click inside input field to make color picker box appear.
- Otherwise, script works as expected on form fields built manually

Has anyone else encountered this or similar issues?

I've browsed the forums and have read posts suggesting the use of eval() and/or Framework-specific functions. However, I'm at a loss as to how to make this work on my page as I'm not really returning any javascript code with my script. I'm only returning the Form's fields and values.

Any and all help, comments, suggestions and insights are welcome.

Thanks!

- T Y H A N D

 

[BigRed1212]

I've got a real similiar question going over in the Javascript forum and don't have any responses yet, either.

Like you, I don't see how to use eval() in the jQuery framework.

The only thing that has worked previously for me is to write the whole javascript in on the AJAX return. So instead of including a script in the base page and then seeing it not be able to find stuff added later by AJAX (which I guess isn't in the DOM at that point or hasn't been registered with javascript or something else I don't understand) I have written the whole script plus the stuff for it to find back in AJAX return and had it work.

Not great advice, I know, but something to try.

I'll watch this one, you watch mine, and maybe we'll figure it out, brother.

 

[tyhand]

Hi BigRed,

Hey, Great Minds really do think alike!

That's pretty much the same route I've taken. In my case, I just had AJAX via PHP return the values I wanted (just raw data, NO html or scripts). Then I used javascript to store and/or operate on those values.

Would have been nice to figure out a solution for the original problem though... I would have saved a few hours of re-coding

By the way, jquery does have those cool functions such as "$.getScript()" for situations more or less like ours; unfortunately I was unable to figure out how to correctly use it for what I was doing.

Here's a quick reference list:

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

I'll keep checking this post from time to time. God willing an answer will show up.

Best to you,
- Tyhand

 

[louisk2]

hey mate, you have to run jscolour.init() everytime you add a new <input class="colour"> to your dom. Jscolor works by binding itself to any input with that class, but only at the start of the page runtime. Any ones added after it doesn't see, or bind to.

 

[tyhand]

Hey Louisk2,

Thanks for the reply. I pretty much forgot about it as I totally re-coded my project : )

At any rate, how does one go about "binding" the script? You say I have to run "jscolor.init()" -- but where do I do that? The script didn't mention anything about doing that.

Do I just put "jscolor.init()" in the beginning of my script?

Thanks buddy!

- Tyhand