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

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.