how to trigger jquery call with a variable from a querystring

Question

Have a problem, I'm about to rebuild the search feature on my site, but I can't make it work as I want to. The problem is that when comes to the page with a querystring 'q' I want the search box to be filled in and a search will begin. I have tested back and forth but can't get it to work. The search works if you type in the search box and wait for 500ms but i don’t manage the trigger the call after the search box is automatic filled in.

This is the code that works without the querystring feature.

<script type="text/javascript">
$(document).ready(function () { // 1
    jQuery("abbr.timeago").timeago();
    $("tr:even").addClass("even");
    $("tr:odd").addClass("odd");
    var q = getQuerystring('q', '');

    $("input#q").val(q);
}); // 1

$(document).ready(
    function () { // 1
        // Hide update box  
        $('#updater').hide();

        var retrieveData = function (path, query, funStart, funEnd, funHandleData) 
        { // 2
            // for displaying updater 
            funStart();
            // retrieve JSON result 
            $.getJSON(
                path,
                { name: query },
                function (data) 
                { // 3
                    // handle incoming data 
                    funHandleData(data);
                    // for hiding updater 
                    funEnd();
                } // 3
        ); // 2
    }; // 1

    $(function () 
    { // 1
        var timer;

        $("#q").keyup(function () 
        { // 2
            clearTimeout(timer);
            var ms = 500; // milliseconds
            var val = this.value;
            timer = setTimeout(
            function () 
            { // 3
                retrieveData('/Search/FindPaste/', $('#q')[0].value,
                    function () { $('#updater').show(); },
                    function () { $('#updater').hide(); },
                    function (data) 
                    { // 4
                        $('#codelist > tr').remove();
                        for (s in data) 
                        { // 5
                            var code = data[s];
                            var d1 = new Date(parseInt(code.Created.substr(6)));

                            $('#codelist').append('<tr><td><a href="http://www.pastebucket.com/' + code.CodeID + '">' + code.Title + '</a></td><td><abbr class="timeago" title="' + d1.toString('yyyy-MM-dd HH:mm:ss') + '">' + d1.toString('yyyy-MM-dd HH:mm:ss') + '</abbr></td><td>' + code.Syntax + '</td><td>' + code.Views + '</td><td><a href="http://www.pastebucket.com/User/' + code.Username + '">' + code.Username + '</a></td></tr>');
                            jQuery("abbr.timeago").timeago();
                            $("tr:even").addClass("even");
                            $("tr:odd").addClass("odd");
                        } // 5
                    }) // 4
                }, ms); // 3
            }); // 2
        }); // 1
    }

);

function getQuerystring(key, default_) 
{
    if (default_ == null) default_ = "";
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if (qs == null)
        return default_;
    else
        return qs[1];
}

SOLUTION!

  <script type="text/javascript">
    $(document).ready(function () { // 1

    }); // 1

    $(document).ready(function () {
        // Hide update box  
        $('#updater').hide();

        var retrieveData = function (path, query, funStart, funEnd, funHandleData) { // 2
            // for displaying updater 
            funStart();
            // retrieve JSON result 
            $.getJSON(
                path,
                { name: query },
                function (data) { // 3
                    // handle incoming data 
                    funHandleData(data);
                    // for hiding updater 
                    funEnd();
                } 
            ); 
        }; 

        var timer;

        $("#q").keyup(function () { // 2
            clearTimeout(timer);
            var ms = 500; // milliseconds
            var val = this.value;
            timer = setTimeout(
        function () { // 3
            retrieveData('/Search/FindPaste/', $('#q')[0].value,
                function () { $('#updater').show(); },
                function () { $('#updater').hide(); },
                function (data) { // 4
                    $('#codelist > tr').remove();
                    for (s in data) { // 5
                        var code = data[s];
                        var d1 = new Date(parseInt(code.Created.substr(6)));

                        $('#codelist').append('<tr><td><a href="http://www.pastebucket.com/' + code.CodeID + '">' + code.Title + '</a></td><td><abbr class="timeago" title="' + d1.toString('yyyy-MM-dd HH:mm:ss') + '">' + d1.toString('yyyy-MM-dd HH:mm:ss') + '</abbr></td><td>' + code.Syntax + '</td><td>' + code.Views + '</td><td><a href="http://www.pastebucket.com/User/' + code.Username + '">' + code.Username + '</a></td></tr>');
                        jQuery("abbr.timeago").timeago();
                        $("tr:even").addClass("even");
                        $("tr:odd").addClass("odd");
                    } // 5
                }) // 4
        }, ms); // 3
        }); // 2

        jQuery("abbr.timeago").timeago();
        $("tr:even").addClass("even");
        $("tr:odd").addClass("odd");
        var q = getQuerystring('q', '');

        $('input#q').val(q).keyup()

    }
);

function getQuerystring(key, default_) {
    if (default_ == null) default_ = "";
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if (qs == null)
        return default_;
    else
        return qs[1];
}


</script>

Jason · Accepted Answer · 2012-12-17 20:30:10Z

1

Just populate the box and trigger the change() event on the box.

$('input#q').val(q).change();

EDIT: Or in your case, the keyup event: $('input#q').val(q).keyup()

answered Dec 17, 2012 at 20:30

Jason

52.7k38 gold badges139 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jason Over a year ago

to be fair, your code is a bit mangled. there's no reason to have multiple $(function(){}); calls. it's possible you're calling .keyup() before it's bound

Daniel Björk Over a year ago

Well JS aint my best friend. :P

Daniel Björk Over a year ago

The help I got from you was enough for me the get it working, thanks!

Collectives™ on Stack Overflow

how to trigger jquery call with a variable from a querystring

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related