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

Question

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)});

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?

Unrelated to the error you are asking about, `data: {"jQuery('#monthForm').serialize()" : "Assignment_"+myValue.id},` is nonsense. Calling `jQuery('#monthForm').serialize()` as a function would give you a string of the data in a form. Using it as a string as a property name in the data you are sending with Ajax makes no sense at all. — Quentin, Mar 27 '20 at 14:43
EDITED my post: my attempt is based on the SO question and answer in the included link. — thefonso, Mar 27 '20 at 15:11

score 3 · Answer 1 · answered Mar 27 '20 at 14:41

3

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

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

answered Mar 27 '20 at 14:41

Quentin

914,110
126
1,211
1,335

Ok, but how do I associate this ajax call with my form? – thefonso Mar 27 '20 at 15:10
it's just in the serialize that you say what data (the form's one) to submit. What you need is an handler on the submit event to trigger this ajax – Lelio Faieta Mar 27 '20 at 15:25
@LelioFaieta Ok, so how would that look. I've updated my question with my attempt but I'm getting nothing. – thefonso Mar 27 '20 at 15:42
what is Assignment_767107?? it's not a class (.) nor an id (#) of any item in the dom so you don't get anything – Lelio Faieta Mar 27 '20 at 15:45
@LelioFaieta oops missed that. – thefonso Mar 27 '20 at 16:11

mplungjan · Accepted Answer · 2020-03-27T15:19:24.157

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);
    }
  })
})

edited Mar 27 '20 at 15:19

answered Mar 27 '20 at 15:13

mplungjan

169,008
28
173
236

1

yours and @LelioFaieta input led me to the correct solution for this question. Thanks all. – thefonso Mar 27 '20 at 16:13

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

2 Answers2