preventdefault() not working in IE8

Question

I'm working on a page that makes fairly heavy use of ajax. All the ajax forms appear to be working fine across browsers but one final step on the page is broken in IE8 and below.

Here is a demo page showing the problem: http://jolora.com/~fwm/

To reproduce the issue please fill in the final form (email name etc) - a list of markers will be shown on the map. The 'Request Appointment' button should fire an ajax function but instead it actually submits the form in IE7 and IE8 so it appears preventDefault isn't working.

Here's the relevant jQuery:

// Request appointment
$('#map').on('submit', 'form', function(event) {
    event.preventDefault();
    var solicitorID = $(this).attr('id');
    solicitorRequest(solicitorID,applicationID);
});

function solicitorRequest(requestedSolicitor,currentApplication) {
$.ajax({
    url: siteurl + 'wp-admin/admin-ajax.php',
    data:{
        'action':'do_ajax',
        'fn':'request_solicitor',
        'solicitor': requestedSolicitor,
        'application': currentApplication       
    },
    dataType: 'JSON',
    success:function(data){
        alert('Please check your email - this success function needs improving');
    },
    error: function(errorThrown){
        alert('error');
        //console.log(errorThrown);
    }
});
}

The popups are built using Leaflet's bindPopup method http://leafletjs.com/reference.html#popup and here's the structure of the content I insert into the popup:

var popupContentBegin = '<form id="'
+ solicitor.id + '">'
+ '<h3>' + solicitor.name + '</h3>'
+ '<div class="contact-details">'
+ '<span class="addr">' + solicitor.address + '</span>';

var popupContentTel = '';

if(solicitor.telephone != false) {
    popupContentTel = '<span class="tel">'
    + solicitor.telephone
    + '</span>';
}

var popupContentEnd = '</div>'
+ '<button type="submit">Request appointment</button>'
+ '</form>';

var popupContent = popupContentBegin + popupContentTel + popupContentEnd;

var marker = L.marker([lat, lng], {icon: solicitorIcon}).bindPopup(popupContent, popupOptions);

Any help would be greatly appreciated! Thanks.

Have you tested whether it actually gets into that function to begin with? IE8 could be ignoring that function altogether (and ultimately ignoring the `.preventDefault()`). — James Donnelly, Feb 13 '13 at 11:17
Hope it will help http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie — arjuncc, Feb 13 '13 at 11:21
Hi James, thanks for your input. It had crossed my mind that it wasn't even getting that far but I'm not sure how I can check this to be honest. — Joe Spurling, Feb 13 '13 at 11:21
@arjuncc - I've updated my code to use returnValue if preventdefault is not available but I don't think this should make a difference as jQuery accounts for it. preventdefault() works fine for the other forms in IE8 and below. — Joe Spurling, Feb 13 '13 at 11:25
Can you explain that your form is dynamically generated or not. — Jai, Feb 13 '13 at 11:27
@Jai - yes, when submitting the "request appointment" form (any of them) inside the dynamically generated leafet map popups. This problem is only in IE8 and below - Chrome and Firefox are working fine. — Joe Spurling, Feb 13 '13 at 11:29
I feel like @JamesDonnelly is the closest in suggesting that the function is actually being totally ignored. So it's probably something wrong with my .on() method — Joe Spurling, Feb 13 '13 at 11:30
have you tested with `return false;` instead of `.preventDefault()` — Jai, Feb 13 '13 at 11:31
@arjuncc: Since OP is using jQuery, [`event.preventDefault()`](http://api.jquery.com/event.preventDefault/) is enough - the jQueryEvent object has no `returnValue` at all — Bergi, Feb 13 '13 at 11:48

ZippyV · Answer 1 · 2013-02-13T11:45:09.760

0

Try changing your selector to:

$(document).on('submit', '#map form', function(event) {...

http://api.jquery.com/live/

EDIT: You need to call this function inside a ready function so that you can be sure the DOM was completely loaded:

$(function () {
  // Put code here
});

edited Feb 13 '13 at 11:45

answered Feb 13 '13 at 11:32

ZippyV

12,540
3
37
52

I've tried it. It still worked in Chrome but not in IE8. Same problem. Using #map in the selector shouldn't be a problem as it exists originally in the DOM (it's not added later). – Joe Spurling Feb 13 '13 at 11:34
1

@JoeSpurling Added another possible solution – ZippyV Feb 13 '13 at 11:45

preventdefault() not working in IE8

1 Answers1