ajax form submit not working

Question

I am using jquery.form.js (version: 2.84) and in the below code, I see that it's getting stuck just before $('imageform').ajaxSubmit.. If I remove preventDefault, the form gets submitted as usual and the page gets refreshed. When preventDefault is present, I do see the loader.gif, but in the server side I do not see any data and also the alert is never fired..

google.maps.event.addDomListener($('photoimg'), 'change', function(e){
            e.preventDefault(); // <-- important
            $("preview").innerHTML = ("<img src=\"loader.gif\" alt=\"Uploading....\"></img>");
            $('imageform').ajaxSubmit({
                target: 'preview'
            });
            alert('after submit');
        });

I am also using a function as below and that's why I am using $('imageform') and not $('#imageform')...

function $(element) {
  return document.getElementById(element);
}

Answer 1

No, because you've overwritten $ with the getElementById function.

$('imageform').ajaxSubmit

will execute ajaxSubmit on the DOM element, where you need a jQuery object. You'd either need to remove your $ or use:

jQuery('#imageform').ajaxSubmit

---

$("#foo") is not the same as document.getElementById("foo") .

• The jQuery function returns a jQuery object which has all the jQuery functions like .bind and .ajaxSubmit present.

• document.getElementById , on the other hand, returns a naked DOM element which does not have any functions of jQuery.

The jQuery object is like an array of DOM elements, so:

$("#foo")[0] === document.getElementById("foo")

Answer 2

Your $ function is clobbering the meaning of that same variable for jQuery. You could mess around with lots of compatibility stuff in jQuery, or take the simple route: rename your $ function to something else, or just call document.getElementById() straight out since your function is only saving you from typing out that call. Or, better yet, use jQuery to take care of that call.