How can I invoke this javascript when URL contains particular parameter on load?

Question

This function enable it automatically inputs value, and jump to the position of input box when a link is clicked.
It works well.

<% if current_user %>
    <% content_for(:head) do %>
        <%= javascript_tag do %>
            jQuery(document).ready(function () {

                $(document).on('click', 'a#user', function()  {
                    $(".box#input").val($(this).attr('value'));

                    var input = $(".box#input");
                    $(document).scrollTop(input .offset().top - 45);
                    input.focus();          
                });

        <% end %>
    <% end %>
<% end %>

Instead of click, I want exact same action when the page is loaded, and its URL contains this params mode=1 just like this example.com/foo?mode=1

How can I do that?

score 2 · Accepted Answer · edited May 23 '17 at 12:05

First: as you use jQuery(document).ready() your page is already loaded, when the following code is executed.

Second: location.search contains all of the url past th ?.
To parse it, see Get escaped URL parameter.

To sum it all:

    <%= javascript_tag do %>
      function getURLParameter(name) {
        return decodeURI(
          (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
        );
      }

        jQuery(document).ready(function () {

            $(document).on('click', 'a#user', function()  {
                $(".box#input").val($(this).attr('value'));

                var input = $(".box#input");
                $(document).scrollTop(input .offset().top - 45);
                input.focus();          
            });
            if (getURLParameter('mode')==1) {
                var input = $(".box#input");
                $(document).scrollTop(input .offset().top - 45);
                input.focus();          
            }
        });
    <% end %>

after all your comments I wrote an example page with your code snippet in it and it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="includes_js/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function getURLParameter(name) {

    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
      );
    };

      jQuery(document).ready(function () {
        // alert(location.search);
        var mode=getURLParameter('mode');
        // alert(mode);
          if (mode==1) {
              var input = $(".box#input");
              $(document).scrollTop(input .offset().top - 45);
              input.focus();          
          }
      });

</script>
</head>
<body>
<form>
<input name="t1" /><br>
<input name="t2" class="box" id="input" />
</form>
</body>
</html>

For me, your selector is pretty strange. Do you really have a tag with class="box" id="input"? Espessially the id seems strange to me.

Thanks so much. I tried your code but it seems not working. Is there any little mistake in your code? — HUSTEN, Aug 03 '13 at 09:48
I just copied the function `getURLParameter` from http://stackoverflow.com/q/1403888/1065703 . Then I added the `if` statement at the end, which is pretty simple. I don't know what you want to do initially, you have to add your own code there. — Martin M, Aug 03 '13 at 09:52
My initial transaction is exactly the same as what I was doing except auto-filling. I copied 3 lines from my codes and pasted it into your code. But it seems not working:( — HUSTEN, Aug 03 '13 at 09:54
Using your `on('click')` here doesn't work, because at that point, there is no `this` defined, so no `value` and no `input` to scroll to an focus. — Martin M, Aug 03 '13 at 09:55
even if I put `alert("Hi!");` in your ` // do your initial stuff`, it won't pop up:( It means this if statement is not working right — HUSTEN, Aug 03 '13 at 09:59
I used `if(document.URL.indexOf("mode=1") >= 0){` instead. Then it seems calling now. But it won't focus. Is it because this javascript is stated before it renders input box? — HUSTEN, Aug 03 '13 at 10:07
`if(document.URL.indexOf("mode=1") >= 0)` also triggers on `?no_mode=12` — Martin M, Aug 03 '13 at 10:28

woofmeow · Answer 2 · 2013-08-03T11:04:17.587

1

In the body tag you can call a function for the onload attribute. This will work for any webpage including ones with more parameters like "http://xyz.com?mode=1&median=1&nothing=0" eg.

<script type="text/javascript">

//You can use the parameters like this
var parameters = window.location.search;

//Parameters will have the value parameters="?mode=1&median=1&nothing=0" 
//Use this to extract "mode=1" (or split it even further) from the string using regex or string methods 
//Lets call this - var extracted 
if (extracted == "mode=1"){
//do whatever else you want with Javascript
}  

</script>
<body onload="yourJsFunction">
<!--your html goes here-->    
</body>

edited Aug 03 '13 at 11:04

answered Aug 03 '13 at 09:31

woofmeow

2,370
16
13

could you show me an example please? and does it call only for once? – HUSTEN Aug 03 '13 at 09:32
thanks. But what about my function? My function doesn't have name:( – HUSTEN Aug 03 '13 at 09:38
Your "yourJsFunction" could basically be any javascript including Jquery (if you have loaded it) and this will make the function run once only that too when the page is loaded. I will edit the exampla above for an alert popup. But basically the idea is the same. – woofmeow Aug 03 '13 at 09:40
Thanks that'll help. and please include `mode=1` judgement part! – HUSTEN Aug 03 '13 at 09:41
I think that you misunderstood. Please take a look at the other Answer. – HUSTEN Aug 03 '13 at 09:53
I have edited it. I think the answer now reflects more clearly exactly what you want. If you still face any problem let me know :). Hope this is more clear @HUSTEN? – woofmeow Aug 03 '13 at 10:55

How can I invoke this javascript when URL contains particular parameter on load?

2 Answers2