Hi Buzz,
ajaxSubmit is the function that actually uses the options and so they
must be passed in by the caller. If you call it yourself, you must
pass the options. When you use ajaxForm it binds the form's submit
event and invokes ajaxSubmit for you, passing in the options that it
has captured in a closure. When you do $(form).submit() you trigger
the execution of the bound submit handler. Tada!
Hope this helps clarify!
Mike
On 4/19/07, Buzzterrier <[EMAIL PROTECTED]> wrote:
Thx Mike that worked. I guess I am confused (ignorant <g>) on why
attaching the options to the form using:
$('#myForm1').ajaxForm(options);
does not work when using ajaxSubmit to submit the form:
$('#myForm1').ajaxSubmit();
but when using this pattern the form does have the options attached:
$('#myForm1').submit();
I am obviously missing something fundamental. I am still pretty new to
jquery.
On Apr 18, 5:18 pm, "Mike Alsup" <[EMAIL PROTECTED]> wrote:
> Oops, yeah, you've got to pass the options arg. You could just prep
> it with ajaxForm and then use the submit event.
>
> $('form.photoForm').ajaxForm(options);
>
> ...
>
> $('input.btnPhotos').click(function(){
> $(this.form).submit();
> return false;
>
> });
>
> That should work.
>
> Mike
>
> On 4/18/07, Buzzterrier <[EMAIL PROTECTED]> wrote:
>
>
>
> > Hi Mike,
>
> > Thanks for the response. When I use this method, it does hit
> > ajaxSubmit() but my options object is void. Aaron's method works,
> > but I know I will have a requirement to do this same type of thing,
> > with anchors instead of submit buttons.
>
> > I tested this on your formTest.html example and got the same behavior
> > below is a snippet.
>
> > ...
> > // bind form using 'ajaxForm'
> > $('#myForm1').ajaxForm(options);
>
> > //create a submit button from an anchor
> > $("#submitAnchor").click(
> > function(){
> > $('#myForm1').submit();
> > });
> > ...
>
> > <a href="#" id="submitAnchor">Submit</a>
>
> > On Apr 18, 3:49 pm, "Mike Alsup" <[EMAIL PROTECTED]> wrote:
> > > Hi Buzz,
>
> > > Try replacing this line:
>
> > > this.form.submit();
>
> > > with this:
>
> > > $(this.form).ajaxSubmit();
>
> > > Mike
>
> > > On 4/18/07,Buzzterrier<[EMAIL PROTECTED]> wrote:
>
> > > > Hello,
>
> > > > I am using the forms plugin, and have a page that dynamically creates
> > > > multiple forms for editing photos. Each form has a button, that has a
> > > > click event is added to it, which submits the form. I am having
> > > > problems getting the click event to submit the form so that the
> > > > ajaxSubmit() fires. Using the method below, the form submits bypassing
> > > > the jquery ajaxSubmit, and does not have any of the options attached
> > > > to it. Any ideas?
>
> > > > <script snippet..
>
> > > > var options = {
> > > > beforeSubmit: showRequest, // pre-submit callback
> > > > success: showResponse, // post-submit callback
> > > > url: "/updatePhotos.html" // override for form's
> > > > 'action' attribute
> > > > type: "post" // 'get' or 'post', override for
> > > > form's 'method' attribute
> > > > };
>
> > > > //attach the form options on all forms with the photoForm class.
> > > > $('form.photoForm').ajaxForm(options);
>
> > > > //create a click even and add submit behavior to all inputs that has
> > > > the btnPhotos class elements
> > > > $("input.btnPhotos").click(
> > > > function(){
> > > > this.form.submit();
> > > > });
> > > > ... more if needed
> > > > </script>
>
> > > > <!-- html snippet-->
> > > > <form class="photoForm">
> > > > <fieldset>
> > > > <div class="photos">
> > > > <div>
> > > > <input type="text" name="photoId" value="4374"/>
> > > > <input type="text" name="registrationId" value="1111"/>
> > > > <input type="text" name="visibleState" value="VISIBLE"/>
> > > > </div>
> > > > <div>
> > > > <img src="4374_display.jpg" width="95" height="140"
alt="Broken
> > > > image"/><br/>
> > > > <input type="button" class="btnPhotos"
value='Show/Hide'/>
> > > > </div>
> > > > </div>
>
> > > > </fieldset>
> > > > </form>
>
> > > > <form class="photoForm">
> > > > <fieldset>
> > > > <div class="photos">
> > > > <div>
> > > > <input type="text" name="photoId" value="4375"/>
> > > > <input type="text" name="registrationId"
value="6050016300"/>
> > > > <input type="text" name="visibleState" value="VISIBLE"/>
> > > > </div>
> > > > <div>
> > > > <img src="4375_display.jpg" width="240" height="240"
alt="Broken
> > > > image"/><br/>
> > > > <input type="button" class="btnPhotos"
value='Show/Hide'/>
> > > > </div>
> > > > </div>
>
> > > > </fieldset>
> > > > </form>
