Submitting a Rails form with jQuery and Ajax
Solution 1
Working! I just tried to mimic the railscast 136. I threw my table into a file called _unapproved.html.erb. In my index I replaced the table with:
<div id="unapproved">
<%= render :partial => "unapproved" %>
</div>
And then in my create.js.erb, I had:
$("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>");
Game over. GG!
Solution 2
My guess (because your "submit" button isn't in the HTML above is that your "business_submit" button is just an input and not a submit button.
This code:
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this; };
doesn't tell the form to submit. It says when "submit" occurs, go do something.
From the jQuery documentation, submit(fn) is used to "Bind a function to the submit event of each matched element. The submit event fires when a form is submitted."
You're never actually submitting the form. I'm willing to bet (can't be sure because I don't have all the code) that is you change the submitWithAjax method to this:
jQuery.fn.submitWithAjax = function() {
$.post(this.action, $(this).serialize(), null, "script");
return false; };
it should work. It's at least closer to what you're trying to do.
Mike
Updated on June 09, 2022Comments
-
Mike almost 2 years
EDIT: Figured it out so asking a related question.
here's my Javascript
jQuery.ajaxSetup({ 'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") } }) jQuery.fn.submitWithAjax = function() { this.submit(function() { $.post(this.action, $(this).serialize(), null, "script"); return false; }) return this; }; $('.error').hide(); $("#business_submit").click(function() { // validate and process form here $('.error').hide(); var name = $("input#business_name").val(); if (name == "" || name == "Required Field") { $('#namelabel').show() $("#business_name").focus(); return false; } var address = $("#business_address").val(); if (address == "" || address == "Required Field") { $('#addresslabel').show(); $("#business_address").focus(); return false; } var city = $("#business_city").val(); if (city == "" || city == "Required Field") { $('#citylabel').show(); $('#business_city').focus(); return false; } var state = $("#business_state").val(); if (state == "" || state == "Required Field") { $('#statelabel').show(); $("#business_state").focus(); return false; } var zip = $("#business_zip").val(); if (zip == "" || zip == "Required Field") { $('#ziplabel').show(); $("#business_zip").focus(); return false; } var phone = $("#business_phone").val(); if (phone == "" || phone == "Required Field") { $('#phonelabel').show(); $("#business_phone").focus(); return false; } var category = $("#business_business_category_id").val(); if (category == " - Choose one - ") { $('#categorylabel').show(); $("#business_business_category_id").focus(); return false; } $.ajax ({ type: "POST", data: form.serialize() }); return false; })
the .ajax code fires my create.js.erb file which contains
$("#new_business").submitWithAjax(); $("#new_business")[0].reset(); $("#new_business").hide();
Here's the table below the form.
<div id="unapproved"> <table width="650" align="center" cellpadding="6" cellspacing="0"> <tr> <td width="150"><a class="Contact<%=h @business.id %>" href="#"><%=h @business.name %></a></td> <td width="150"><%=h @business.address %></td> <td width="100"><%=h @business.business_category.name %></td> <td width="200"><%=h @business.description %></td> <td width="50"><%= link_to(image_tag('/images/accept.png', :alt => 'Approve'), :id =>@business.id, :action => 'approve') %> <a class="Edit<%=h @business.id %>" href="#"><img src="/images/pencil.png" alt="Edit" /></a> <%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :confirm => 'Are you sure?', :method => :delete) %></td> </tr> </table> </div>
Now my only problem is that the table below my form isn't getting refreshed dynamically. It adds the data to the database fine and all the validation works great. But I have to refresh the page. I tried adding something like
$("#unapproved").append("<%= escape_javascript(render(:file => 'business')) %>");
but that just breaks it.