Need a jQuery expert!

Hello!

I’m pretty new to jQuery but I’m attempting to make a backend administration panel.

I’m using the load() function to load a form that edits the details of a music artist (name, phone number, etc). The load() function is loading a PHP file (edit_artist_form.php), since I need to pre-populate the form fields using PHP variables. Other than a database query, the file I’m loading is just an HTML form.

Now, once the form is submitted, I need to refresh a div on the driver page (AKA not the file I loaded). However, I can’t use the load() function to refresh that div since I’m not on index.php anymore, I’m on edit_artist_form.php.

In short, is there a way to make modifications to the parent file from the file that’s been loaded?

i dont really get you. but i seem to see where the problem is

I’m not on index.php anymore

u loaded a form via AJAX into a div, ok. but did u submit the form via AJAX too? or u used a normal post back that brought u to another page? if u used AJAX , u shld be able access the div still? since all the while u are working on 1 page as far as the browser is concerned, loading content into that page?

Yeah, I’m submitting via AJAX .

I did a really terrible job of explaining it, sorry.

I’ll try to draw a little diagram

---------------------------------------
#list div:
John Smith   -   555-8382
Lady Gaga   -   745-34933
-----------------------------------------

   #form div:
      ------------------------------------------------------------------------
     |   edit_artist_form.php (loaded via load() in jquery):
     |   Name: _______________
     |   Phone #: _______________
      --------------------------------------------------------------------------

-----------------------------------------------

So after the form in edit_artist_form.php gets submitted and processed via AJAX , I want to refresh the #list div. And for some reason it’s not working.

Also, the JS files loaded in index.php don’t work in edit_artist_form.php :\

You are submitting it via $.post , after you have submitted the values, in the response you can a li items list of new updated table to your script, then you can update your #list div ul ,

in the php code if query is successful just echo the new details as li items ,

I’ve experienced this problem as well.. I hope I can clarify the situation.

- You have a page.

- Using jQuery you ‘load’ a form.

- You want to submit the form using jQuery ‘post’ but this won’t work.

The problem is jQuery loads the DOM when jQuery loads, you have then changed the DOM (adding a form) and jQuery doesn’t know this.
So if you are using something like: $('form').submit(function(){ it will fail.

I think you should have a look at livequery.

I’ve experienced this problem as well.. I hope I can clarify the situation.

- You have a page.

- Using jQuery you ‘load’ a form.

- You want to submit the form using jQuery ‘post’ but this won’t work.

The problem is jQuery loads the DOM when jQuery loads, you have then changed the DOM (adding a form) and jQuery doesn’t know this.
So if you are using something like: $('form').submit(function(){ it will fail.

I think you should have a look at livequery.

This looks like it would work like a charm but I’m simply not experienced enough at jQuery to implement it.

However, I fixed the problem! I ended up embedding some more javascript code inside the file I’m load, and that in turn processes the form.

Maybe I’m missing something, but if I understand right:

• You’re loading your form via AJAX
• This modifies the DOM

I get around this by attaching my jQuery handler after the form is loaded. This can be done from the “original” page (index.php); the logic does not have to be in the child page.

Example:

I’m assuming ’#form’ is your div container (based on what I read above). In the load callback function, I’m going to find any forms within the div and bind to their submission.

$('#form').load('edit_artist_form.php', function() {
     $('#form > form').submit(function() {
          alert('form submitted!');
     });
});