Question posted in
You can find the official documentation here.

Jquery is installed so why is my ajax not a function? – Jquery ajax

A little background is needed to explain this:

I have an old rails 2 app that has a form in a modal. when I submit this form it should update the database and close the modal. the generated form looks like so..


> <form action="/assignments/doattendance/767107" id="modalForm_767107"
> method="post" onsubmit="jQuery('.modal-backdrop').fadeOut(200,
> function(){jQuery(this).remove();});; new
> Ajax.Updater('Assignment_767107', '/assignments/doattendance/767107',
> {asynchronous:true, evalScripts:true,
> parameters:Form.serialize(this)}); return false;">

If you look closely you will see a prototype Ajax call on this form. This is generated by the rails remote_form_for call in the erb file. Now. For “reasons” I can not use remote_form_for on the second page displaying this form and need to build the form normaly outside of rails using a <form id="monthForm> tag. But I need this prototype Ajax. I have jQuery installed and it is working on the site. So…

I have some prototype code I need to convert to jquery. But I keep running into an “.ajax is not a function” error…

Prototype code:


> new Ajax.Updater('Assignment_767107',
> '/assignments/doattendance/767107', {asynchronous:true,
> evalScripts:true, parameters:Form.serialize(this)});
  1. HOW DO I CONVERT THE ABOVE prototype code INTO JQUERY for my form?

I’ve read a similar question here…

What is the equivalent of Ajax.updater in Jquery?

…on this subject on StackOverflow and have built this based on that answer…

jQuery('#monthForm').submit(function(event){
                        event.preventDefault();

                        jQuery.ajax({
                            url: '/assignments/doattendance/'+myValue.id,
                            type: "post",
                            dataType: "html",
                            data: {"Form.serialize(this)" : "Assignment_"+myValue.id},
                            success: function(returnData){
                                jQuery("#Assignment_767107").html(returnData);
                            },
                            error: function(e){
                                alert(e);
                            }
                        })
                    })

Again, the form the ajax should be attached to is this…

<form id="monthForm">
...
</form>

BUT … I keep getting nothing, what am I doing wrong?

Tags:

2

Answers


  1. 0

    ajax is a method on the jQuery object itself, not on an instance of it.

    You need jQuery.ajax() and not jQuery('#monthForm').ajax().

    Login or Signup to reply.
  2. 0

    You want 

    $("#monthForm").on("submit",function(e) { 
  e.preventDefault(); // stop the actual submission
  const data = $(this)-serialize()+"&Assignment_"+myValue.id; // or similar
  $.ajax({
    url: '/assignments/doattendance/'+myValue.id,
    type: "post",
    dataType: "html",
    data: data ,
    success: function(returnData){
      $("Assignment_"+myValue.id).html(returnData);
    },
    error: function(e){
      alert(e);
    }
  })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search