How to trigger a JavaScript event on a target page AFTER the user navigates to that page from another

Question

How can I trigger an javascript (or jquery) event when I go to other page?

For exemple:

• I'm at index.html
• At index.html, I clicked on contact.html link;
• When I go to contact.html page, I need to trigger an event

Thanks for for your attention

EDIT:

I will try to explain in other way:

I am working with RubyOnRails. I have a page where I can add contacts. There are a lot of fields but for this example I will use only two:

<select name='type' id='type_select'>
    <option value='0'></option>
    <option value='1'>Home</option>
    <option value='2'>Work</option>
</select>
<input type="text" name="contact_name" id="contact_name_input">

On my Javascript I have:

// this only works if I press CTRL+F5 to refreash the page
$(document).ready(function(){
    $("#contact_name_input").hide();
});
// This Works fine
$('#type_select').change(function(){
    if ($(this).val() == 1 || $(this).val() == 2){
        $("#contact_name_input").show();
    } else {
        $("#contact_name_input").hide();
    }
});

In other words, what I need is to hide the input field when the user visit the page and to show it only if he selected a valid type.

I hope to have been more clearer

Thanks for your attention

Answer 1

It seems like you want to have an event triggered on the target page (after the user has clicked on a link) and is taken to the destination page. If that is the case and you want to trigger a specific event, as others have suggested, your first entry point would probably be document.ready of the new page and you can use a querystring to specify a more specific event.

On Index.html

<a href="contact.html?e=1">Contact</a>

On Contact.html

<script type="text/javascript">
    $(function() {

        $(document).bind("myCustomEvent", function(e, data) {
            alert("Weee, you triggered event id: " + data.EventId + "!");
        });

        var eventId = getParameterByName('e');  // Load the query string specified by the previous page's link
        if(eventId == 1) {
            $(document).trigger("myCustomEvent", {EventId: eventId});
        } else {
        } // end if/else
    });

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>

Credit -- Javascript QueryString function shamelessly taken from here: How can I get query string values in JavaScript?

Posting the solution Given by @xDaevax on chat:

By using the JQuery on $(document).ready(); to hide the input, you will sometimes see a flicker. You may want to consider adding some CSS to the input to hide it then, it will always be hidden when you come to the page. When yo uuse the JQuery show() and hide(), they will change the "display" css attribute from "display: block", to "display: none" depending on whether you call show() or hide() so, in your javascript, you could try:

$("#type_select").change(function(e) {
    var selectedValue = $(this).val();
    if(selectedValue <= 0) {
        $("#contact_name_input").hide();
    } else {
        $("#contact_name_input").show();
    }
});

It works for me