CODEWITHSUNDEEP
javascriptjqueryinternet-exploreronclick
user2199437
user2199437

Reputation: 3

onClick event and IE

I am using the jQuery dialog box that is found at this link and I am trying to get it to open with an onClick event, not by use of a button. It works in Firefox and Chrome, but will not work in IE. If you go to my test site and click on the upper left (first one) box, you will see it brings up a dialog in FF and Chrome, but there is no select "hand" cursor in IE8 or IE9. http://calmaps.co.calumet.wi.us/datapopuptest.html I am not proficient in JavaScript, but I am just using an example, so I did not write the code, just changed some of the text to meet my needs.

The javascript im trying to call in the html:

$( "#request-data" )
  //.button()
  .click(function() {
    $( "#dialog-form" ).dialog( "open" );
  });

my html calling the javascript:

<a id="request-data" title="Municipal Boundary Data" onclick= "$('#request-data').click(function() {$('#dialog-form').dialog('open');
    return false;})" href="PleaseEnableJavascript.html"><img src="img/muni.png" alt="Calumet Municipal Boundaries" /></a>

Like I said, this works in Chrome and Firefox, but I get nothing in IE, no error, just nothing. I have spent a day researching this issue and I'm hoping I can get some insight. Thanks!

Upvotes: 0

Views: 5548

Answers (3)

optimisticupdate
optimisticupdate

Reputation: 1689

stuartd already pointed out the different solutions, I created a js fiddle for you with one suggestion to avoid the default a click function.

This is the relevant part:

$( "#create-user" )
      .css('cursor','pointer') //some css for a pointer
      .click(function(event) {
          event.preventDefault();
          $( "#dialog-form" ).dialog( "open" );
});

Here you'll find the js-fiddle: http://jsfiddle.net/JBqzU/

And it was already said, there's no need to include inline js into your a-tag.

Edit:

Here you are, did some jslint standards, but i dont think this will fix the problems as suggested at the comments, you have to run through your whole js code. I think you have problem there, cause testing the snippet at fiddle for ie works fine.

Good Luck anyway.

$(function () {
    "use strict";
    var name = $("#name"),
        email = $("#email"),
        organization = $("#organization"),
        allFields = $([]).add(name).add(email).add(organization),
        tips = $(".validateTips");

    function updateTips(t) {
        tips
            .text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Show Me The Data": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength(name, "name", 3, 25);
                bValid = bValid && checkLength(email, "email", 6, 80);
                bValid = bValid && checkLength(organization, "organization", 5, 25);
                bValid = bValid && checkRegexp(name, /^[a-z\-\s]+$/i, "Name may consist of letters only.");
                // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Email must be valid - eg. [email protected]");
                bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Email must be valid - eg. [email protected]");
                bValid = bValid && checkRegexp(organization, /^([0-9a-zA-Z\-\s])+$/, "Organization field only allows : a-z 0-9");

                if (bValid) {
                    $("#users tbody").append("<tr>" +
                                               "<td>" + name.val() + "</td>" +
                                               "<td>" + email.val() + "</td>" +
                                               "<td>" + organization.val() + "</td>" +
                                               "</tr>");
                    location.href = "ftp://liouser:[email protected]/websitedata/CalumetBoundaries.zip";
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#request-data")
        .css('cursor', 'pointer')
        .click(function (event) {
            event.preventDefault();
            $("#dialog-form").dialog("open");
        });
});

Upvotes: 1

stuartd
stuartd

Reputation: 73313

Given that in onclick you're defining the click handler for the element (ie when you click it you're telling it what to do when it's clicked), the fact that it works in any browser the first time you click it is a testament to Postel's law.

You can either change the onclick to just do what you need:

onclick= "$('#dialog-form').dialog('open') ..

Or make it call a function:

function showDialog() { .. }

onclick= "showDialog()"

Or you could just assign the click handler in document.ready, and then you don't need anything in onclick

$(document).ready(function() {
  $("#request-data").click(function() {
        $("#dialog-form").dialog("open");
     });
});

Upvotes: 2

SDC
SDC

Reputation: 14212

One of the whole points of using jQuery is that you can define your click events without using onclick in the HTML.

The $(...).click() method is not intended for use inside an onclick attribute.

Write the jQuery click handler in your $(document).ready() function and take it out of the HTML.

Hope that helps.

Upvotes: 0

Related Questions