how to retrieve an href value from the link that opened a dialogue box Jquery UI

Question

Hello , I have just started learning Jquery and am new to writing javascript (I am too old to write noob it feels wrong).

Scenario: I have a hyperlink that opens a dialogue box and sets a cookie. The dialogue box is asking something like "would you like to visit this page are you sure? " it has Yes/No buttons on it.

If the user clicks yes i would like the script to retrieve the link originally clicked and go to that page. I have done it by retrieving the value of the cookie. Although this works i am sure i could do it with a variable but i do not know how as the dialog box is in a separate function.

So my Question: Can i use the variable that sets the cookie and bind it to the yes button in the dialogue? What would the syntax look like?

thanks in advance

Hairby

Code is below

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("a").click(function () {
      var cookieset = $(this).attr("href");
      $.cookie("redirectcookie", cookieset, { path: '', expires: 7 });
      $('#dialog').dialog('open');
        $(".ui-dialog-titlebar-close").hide();
        return false;   

});

$('#dialog').dialog({
        autoOpen: false,
        width: 600,
        buttons: {
         "Yes": function() { 
       window.location = 'http://www.mysite.com'+ $.cookie("redirectcookie")  
        }, 
         "Cancel": function() { 

         } 
        }

       });
    });
    </script>

Answer 1

You could use jQuery's data function to store the data instead of using a cookie

Answer 2

There is the method option you can use, to add the buttons when the link is clicked instead of adding them while creating the dialog:

$("a").click(function () {

    var $link = $(this);

    $('#dialog').dialog('option', 'buttons', {
        "Yes": function() { 
            window.location = $link.attr("href");          
        }, 
        "Cancel": function() { 
            $('#dialog').dialog( 'close' );
        } 
    });

    $('#dialog').dialog('open');
    $(".ui-dialog-titlebar-close").hide();
    return false;
});


$('#dialog').dialog({
    autoOpen: false,
    width: 600
});

Note, i saved "$(this);" in a variable called "$link", because "this" has another meaning, inside the callback functions, it points to the dialog-Object.

EDIT:
What happens is the following: When the document is ready, "a" gets selected an a click-Function is bound to it. The function itself is not executed, but will when the user clicks the link. Secondly, still in the ready event, "#dialog" is selected and a new dialog is created. The only argument is an Object that contains the two properties "autoOpen" and "width". That's it, ready is done.
When the user now clicks the link, the given function is executed. It does the following things:

1. save a reference to "this", what is the clicked link. Note, I saved "$(this)" instead of "this" and therefore named the variable "$link" instead of "link". This is kind of jQuery convention.
2. set the option "buttons" on the dialog. The argument is an Object, that contains the properties "Yes" and "Cancel" and both's value is an function that will be called when they are clicked. The first changes the location to the links' href, the second closes the popup
3. "dialog('open')" opens up the dialog.
4. ".ui-dialog-titlebar-close" gets hidden
5. the click functions returns false, so so links href isn't executed