How can I get a jQuery event to fire on a direct link to http://www.website.com/#id?

Question

Trying to figure out how I can get jQuery to detect a hyperlink referencing a unique ID on the page. I want to load the event not only when the element is clicked on the page, but also if someone direct links to the page using the unique #id assigned to that #div.

UPDATE:

OK, this is what I have so far and it’s not firing.

    function opencontact() {
        $("#first-name-check").hide();
        $("#last-name-check").hide();
        $("#phone-number-check").hide();
        $("#email-address-check").hide();
        $("#customer-message-check").hide();
        $("#send").button("disable");
        $("#email-form").dialog("open");
    }

    $(".email").click(opencontact);

    var hash = window.location.hash.substring(1);
        alert(hash);
        if (hash == "contact") {
            opencontact();
        }

Alert is returning the correct #hash so I don’t know what’s wrong.

Dialog initialized like this:

   $(function() {
        $("#email-form").dialog({
            autoOpen: false,
            resizable: false,
            draggable: false,
            closeOnEscape: false,
            height: 600,
            width: 540,
            modal: true,
            buttons: {
                "Send Joe Your Message": {
                    text: "Send Joe Your Message",
                    id: "send",
                    click: function() {
                        $.post("email.php", $(this).find('input, textarea').serialize());
                        $(this).find('input, textarea').val("");
                        $(this).dialog("close");
                    },
                },
                Cancel: function() {
                    $(this).find('input, textarea').val("");
                    $(this).dialog("close");
                }
            }
        });

    });

I'm thinking you would want to grab the query string from the url and then fire your event on the dom ready event checking the string values then calling your function. You may want to check this link http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url — vikingben, May 15 '13 at 02:50
In your update, you are passing the `hash` to a function which doesn't accept a parameter.. — Mathijs Flietstra, May 15 '13 at 03:14
@user1846192: fair enough, but ignore that, I was just testing something .. it doesn’t work without it either — Phillip Berger, May 15 '13 at 03:14
@hayonj: jQuery UI as seen here: http://api.jqueryui.com/dialog/ — Phillip Berger, May 15 '13 at 03:20
What is not firing? none of it? have you put an alert on the first line of `opencontact()`? PS. Seeing your example code I've modified my answer to something which I believe will work in your case, unless you are deliberately calling `opencontact()` when `.email` is clicked? — Mathijs Flietstra, May 15 '13 at 03:23
@user1846192: good idea.. you’re right.. I put the alert in the function and it is firing correctly but the .dialog() isn’t… don’t know what to do now — Phillip Berger, May 15 '13 at 03:28
Have you set the dialog **before** you are trying to open it? Something like `{dialogClass: "no-close", buttons: [{text: "OK", .. ]}`. — Mathijs Flietstra, May 15 '13 at 03:33
Way up in the JavaScript I do that. See my update for the whole dialog code. — Phillip Berger, May 15 '13 at 03:38
And is your other code inside the same but at the end of the `$(function() { });` code block? Because that is where it should be. `$(function()..` is a shorthand for the `$(document).ready(function()..` in my answer below. It should be in there to ensure that it is called after the document is fully loaded and at the end of if (or anywhere after the dialog setting code) to ensure that the dialog is set. — Mathijs Flietstra, May 15 '13 at 03:41
It is inside the same `$(function() { }` but I have a `$(document).ready(function() { }` block still further up above this which encloses the whole file. I’m not really trying to fire on click of `$('.email')`. Is there anyway to fire the function nakid without relying on an artificial click of another item which in term fires the function? — Phillip Berger, May 15 '13 at 03:47
I think whatever you already have should work if you take the dialog out of the extra `$(function() { });`. So get rid of the first line and the last line in the dialog code block of your question. — Mathijs Flietstra, May 15 '13 at 03:49

MeanMatt · Answer 1 · 2013-05-15T03:09:16.530

2

Something like this should do the trick :

//this will grab the url from the address bar
var oldUrl = document.location.href;
//now we need to find just the part after the #
var urlSlice = oldUrl.split('#',oldUrl.length);
//urlSlice is now an array of two items (one before the '#' one after)
//from which we can grab the div id
var divId = urlSlice[1];

//then if it is the id you want
if( divId === 'desiredID' ) {
    clickHandler();
}

function clickHandler() {
    //do stuff
}

Personally I would put all of that in a function to be cleaner but it will work outside of one too.

edited May 15 '13 at 03:09

answered May 15 '13 at 03:02

MeanMatt

1,545
3
12
23

This works for me. Are you sure it is passing the if statement? – MeanMatt May 15 '13 at 13:22

Mathijs Flietstra · Accepted Answer · 2013-05-15T03:38:58.103

You could do this:

$(document).ready(function() {
  // Attach click handlers and set your dialog here..
  if(window.location.hash.length > 1) {
    switch(window.location.hash) {
      case '#contact':
        $('.email').click();
        break;
      case '#anyotheridyouvegot':
        $('.classoftheelementtobeclickedon').click();
        break;
    }
  }
});

This will check if there is a hash in the url at page load and then trigger a click on an element with its id depending on the hash value.

How can I get a jQuery event to fire on a direct link to http://www.website.com/#id?

2 Answers2