Question

I am able to reverse engineer jQuery, but I now have to learn how to forward engineer. I know how to write JavaScript functions, and I know that within JavaScript functions, you can use jQuery. However, I am really stuck with trying to make a function out of the following code:

$(document).ready(function(){
    function doStuff( bar )
    {
        // Match all <A/> links with a title tag and use it as the content (default).
        $('.graph').qtip({
            content: {
                text: 'Loading...', // The text to use whilst the AJAX request is loading
                ajax: {
                    url: '/foo/' + bar , // URL to the local file
                    type: 'GET', // POST or GET
                    data: {} // Data to pass along with your request
                }
            },
            show: {
                solo: "true",
                delay: 100,
                event: "click",
                adjust : {screen : true}
            },
        });
    }
});

This code works great, but only if I remove the

function doStuff( bar )
{
}

The reason that I want to wrap that stuff in a function is so that I can pass in a parameter. Like I said, I can work with jQuery, but I am far from a master. Any help or advice/critique of my strategy is welcome.

Edit

This is where I call the function. Thanks for all the help too!

<a class="graph" title="a_link_title" href="#" onclick="doStuff('281'); return false;"> a link </a>

Answer 1

First thing

this function shouldn’t be inside document.ready

 function doStuff( bar )
 {

 }

The code is not executing because of htis function , unless you call this function it doesn’t work.

You can do two things. call the function or remove the function and move out of document.ready and call it inside document.ready

$(document).ready(function(){
   doStuff(bar) // pass the value and call it like this
});

    function doStuff( bar )
    {
        // Match all <A/> links with a title tag and use it as the content (default).
        $('.graph').qtip({
            content: {
                text: 'Loading...', // The text to use whilst the AJAX request is loading
                ajax: {
                    url: '/foo/' + bar , // URL to the local file
                    type: 'GET', // POST or GET
                    data: {} // Data to pass along with your request
                }
            },
            show: {
                solo: "true",
                delay: 100,
                event: "click",
                adjust : {screen : true}
            },
        });
    }