Search jQuery

jQuery Forum

Using jQuery Form Plugin with .load()

in Using jQuery Plugins • 2 years ago

EDIT: Login to the jQuery forums to see my private post at the end of this post for my answer! Forums marked it as spam, so you won't be able to read it unless you log in.

I have a problem where the .ajaxForm() method provided by the jQuery form plugin cannot see (or does nothing) with matched elements that are loaded dynamically by the jQuery .load() method (which returns HTML in the matched selector's space).

So, here's what I have in a nutshell. In the HTML page, I have the jquery and jquery.form script includes (both working OK) in the head. I have a separate script block for the document.ready that encapsulates my jquery.

Now, normally I use jquery .load() to load dynamic HTML into my page (a bunch of images), the URL I hand it has a dynamic item ID that it uses to talk to my database, and returns the HTML that I want in this HTML page.

The selector .load() uses is normally an empty div with a unique ID ("#images"). when I have a form element from within this dynamic HTML, any ajaxForm event I attempt to bind to it never occurs.

However, if I statically load the page with HTML first, the form plugin can see it and responds to events regarding these items.

Both sets of HTML that I have in #images are identical, both static and dynamic. The only difference is that when it's dynamic, I use jquery to replace HTML on the page once the document is deemed "ready".

The entire reason why I load it this way is because I have an upload form at the bottom of the page that dynamically (through Ajax form upload) adds images, and re-loads my HTML to add the new image. The forms I'm attempting to run within this HTML deal with removing these images one-by-one.

Snapshot:
<script src="jquery-latest.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
...
<script type="text/javascript">
      $(document).ready(function() {
            $("#images").load('get_my_html.php?something=dynamic_value');

            $("#delete_image_uniqueID").ajaxForm(function() {
                  $("#images").load('get_my_html.php?something=dynamic_value');
            });
      });
</script>
...
<div id="images"></div>
...
And my HTML looks something like this:

<div id="delete_image_1234">
      <form action="delete_this_image.php?something=1234">
            <input type="submit" value="Delete Image">
      </form>
</div>

Replies(7)

dominique..

Réf.: Using jQuery Form Plugin with .load()

2 years ago

Hi,

You have to wait for the end of the load, and then apply your ajaxForm process.
With your code, the following should happen :
1- ask to load your dynamic
2- try to add form process on your dynamic that is not already loaded (nothing happens)
3- your dynamic is loaded (without your form process)

Put a link if you want more help.

Regards,
Dominique VINCENT
http://www.toitl.com/
http://twitter.com/toitl

tdxdave

Re: Using jQuery Form Plugin with .load()

1 years ago

Here is the code

            $('#attachments-tabs').tabs({selected:0,ajaxOptions: {
                error: function(xhr, status, index, anchor) {

                }
            }
});
            $('#attachments-dialog').dialog({
                 autoOpen:false,
                 title:'Upload File',
                 width:400,
                 height:400});
            $('#attachments-btn').click(function(event) {
                event.preventDefault();
                $('#attachments-dialog').show();
                $('#attachments-dialog').dialog('open');
                $('#tab1').load('${upload_url}',function() {
                  //someting goes here?
                 });
             });

So the form is loaded when the tab is selected and the dialog is opened. There form in the content of the tab that was loaded is the one that needs ajaxForm. I am not sure how to translate your code. Any hints?

mattygabe

Re: Using jQuery Form Plugin with .load()

1 years ago

Dave, I don't completely understand your code, however I think I have an idea of what you need to do here:

function load_attachments() {
            $('#attachments-btn').click(function(event) {
                event.preventDefault();
                $('#attachments-dialog').show();
                $('#attachments-dialog').dialog('open');
                $('#tab1').load('${upload_url}',function() {
                  load_attachments();
                 });
             });
};
Wrap any binding (here, you're binding .show, .dialog and .load to #attachments-btn's .click function) that involves the items you're dynamically loading with .load() in a function (i called load_attachments()) and call it as your callback. I don't know what is part of #tab1 (if #attachments-btn is a child node of #tab1 or not).

Where is ajaxForm being used?

mattygabe

Re: Using jQuery Form Plugin with .load()

1 years ago

Dave,

Just so you understand, the ajaxForm() plugin is very helpful in that it allows you to first design a form that is handled completely server-side only (using PHP to validate the input, and then handle it as it needs, for instance adding a record to MySQL), and then simply bind the ajaxForm() event to the form's ID. Then, JQuery steps in once the form has been submitted, allows the server-side processes to complete (validates the input, adds MySQL record), and then stops the page reload, at which point you're free to update the browser window as you see fit.

In my example, I had images on-screen, and used a single form per each image, when the user clicked the button for that image, it was deleted from the database. Each time ajaxForm was done, I would use .load() to re-load all images, so essentially the user was able to delete images in real time with no page reloads. If they happened to disable Javascript, the page would still work 100% without any detriment.

If you don't need to do any server-side processing involving form input, might be easiest to not use ajaxForm() at all.

tdxdave

Re: Using jQuery Form Plugin with .load()

1 years ago

Hi,

I am doing a ajax submittied file upload, so I am pretty sure I need ajaxform. I had this working previously where the form loaded in an iframe inline to the page. This worked ok. Now I have a requirement for the upload form to appear in a dialog.

I'll check out your suggestion and see if I can get it working. Thanks for your help.

kazulet

Re: Using jQuery Form Plugin with .load()

1 years ago

Is the JQuery plugin used for creating PHP Form?

mattygabe

Re: Using jQuery Form Plugin with .load()

1 years ago

The Jquery plugin "ajaxForm" is not used to create PHP Form that you mentioned.

ajaxForm is supposed to be used with a PHP Form that is already created. If you have access to the HTML page that submits a form to a PHP script, then ajaxForm allows you to use AJAX (Asynchronous Javascript and XML, or a design method using javascript to make user feedback more intuitive and responsive) with Jquery to handle the events of a form.

Here's a simple use-case:

Before ajaxForm, I have form.html, a document with an HTML form that allows the user to enter their user information to register for my excellent website. Right now they fill the information out, then hit "submit". The form takes this data and sends it to whatever PHP file I designate, the PHP processes this input however I need it to, and then shows the user the next page they need to see (forwards them to say, success.html, which tells them they've successfully registered). This involves a page reload, and if the user uses the back button, they may lose the data they've typed into the form.

Using ajaxForm, you still use the EXACT same form, except by inserting jQuery utiliziing ajaxForm() the Javascript allows the form data to be submitted (possibly some client-side error-detection), but stops any page forwards. The data is submitted, but then it is up to you to define what happens next.

In my original example, user submits the request, but after the request is submitted the PHP would just redirect the user to the same page, just with one more or one less item. So, I use ajaxForm, and then once the data is sent, I re-load the changing portion of the page. Result: user gets instant gratification of their actions, use less bandwidth (portion of page reloads instead of entire page), and they don't lose any of the information they entered into the page.

Top Reply

Response title

Attachments

jQuery Forum

Using jQuery Form Plugin with .load()

Replies(7)

Réf.: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Re: Using jQuery Form Plugin with .load()

Statistics

Tags

Actions

Related Posts