jQuery Form Plugin

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

jQuery Form Plugin

acej

A nice piece of code, very helpful.

In my application, I'm using jquery and prototype together by using
the

jQuery.noConflict();

The form plugin allows me to upload files using an ajax request.
        jQuery('#CityAddForm').submit(function() {
          var options = {
                target:'#dataContainer',
                url:'<?php echo $html->url('/cities/add/'.$sport_id); ?>',
            };
            jQuery(this).ajaxSubmit(options);
                return false;
        });

The form is saved and the file is uploaded.

After the request though, the returned request does not recognize the
Event.observe method of prototype any longer.

 <div class="cities form">
<form id="CityAddForm" enctype="multipart/form-data" method="post"
action="/livescores/application/cities
/add"><fieldset style="display:none;"><input type="hidden"
name="_method" value="POST" /></fieldset>
        <fieldset>
  <legend>Create New City</legend>
  <div id="data">
                        <div class="input text"><label for="CityName">Name</label><input
name="data[City][name]" type="text"
 maxlength="255" value="" id="CityName" /></div><div class="input
file"><label for="CityImage">Image
</label><input type="file" name="data[City][image]" value=""
id="CityImage" /></div><div class="input
 select required"><label for="CityCompetitionId">Competition</
label><select name="data[City][competition_id
]" onchange="live_p.updateCountries(&quot;City&quot;)"
id="CityCompetitionId">
<option value="4">Super Fourteen</option>
<option value="5">Six Nations</option>
</select></div> <div id="country_update">
                                <div class="input select required"><label
for="CityCountryId">Country</label><select name="data[City]
[country_id]" id="CityCountryId">
<option value="1">Australia</option>
<option value="2">South Africa</option>
<option value="3">New Zealand</option>
</select></div> </div>
                                <div class="input checkbox required"><input type="hidden"
name="data[City][enabled]" value="0" id="CityEnabled_" /><input
type="checkbox" name="data[City][enabled]" checked="checked" value="1"
id="CityEnabled" /><label for="CityEnabled">Enabled</label></div>
<div class="submit"><input id='submit_city' type
="submit" value="Save" class="cms_button"/></div>
                </div>
        </fieldset>
</form></div>
<div id="related_data">
<form id="RelatedAddForm" method="post" action="/livescores/
application/relateds/add"><fieldset style
="display:none;"><input type="hidden" name="_method" value="POST" /></
fieldset> <label>Related Actions
</label>
        <br/>
        <div class="submit"><input type="submit" url="/competitions/radd/
cities" value="New Competition" id
="submit8137" onclick="event.returnValue = false; return false;" /></
div><script type="text/javascript"
>
//<![CDATA[
Event.observe("submit8137", 'click', function(event) { new Ajax.Updater
('related_data','/livescores/application
/competitions/radd/cities', {asynchronous:true, evalScripts:true,
parameters:Form.serialize(Event.element
(event).form), requestHeaders:['X-Update', 'related_data']}) },
false);
//]]>
</script></form></div>

Strangely enough the ajax submit buttons still work, its just that it
throws these errors, which are a nightmare in IE.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---