CODEWITHSUNDEEP
jqueryjquery-dialog
dwlorimer
dwlorimer

Reputation: 185

Jquery dialog href variable not updating in buttons

I have a jquery dialog box with three buttons. When a user clicks on a link, I want to grab the href into a variable, prevent the link from executing, and show my dialog box with the options to Save, Discard, or Cancel. On save or discard, I want to navigate to the link they clicked. I'm working in php/jquery.

Everything is working great, except that if a user clicks link "A", and clicks cancel on the dialog box, then clicks link "B" and selects discard on the dialog box, the browser navigates to link "A" instead of "B"!

What am I doing wrong?

Here's my code, which I will explain more below:

        function myFunction(href) {
        if (check == false) {
          alert (href);
          $('#replaceSave').hide();
          $( "#tabWarn" ).dialog( "open" );
           $(function() {
             alert (href);
              $( "#tabWarn" ).dialog({
                  resizable: false,
                  height:240,
                  width:400,
                  modal: true,
                  buttons: {
                    Cancel: function() {
                      check = false;
                      setConfirmUnload(true);
                      $( this ).dialog( "close" );
                    },
                    "Discard": function() {
                            alert(href);
                            check = true;
                            setConfirmUnload(false);
                            alert(href);
                            if (href != 'no') {
                              window.location.href = href;
                            }
                            $( this ).dialog( "close" );
                    },
                    "Save": function() {
                            saveFunction();
                            if (href != 'no') {
                              setTimeout(function() { window.location.href = href; }, 2000);
                            }
                            $('#replaceSave').show();
                            setTimeout(function() { $( '#tabWarn' ).dialog( "close" ); }, 2000);
                    },
                  }
              });
          });
        }
    }

The first alerts of href always show the correct address. When I click link "A" and then select cancel, all of the alerts show "A". But then when I go back and click link "B" and select discard, all the alerts show link "B", Except the alerts inside the discard button -- they show link "A". Thus, the page navigates to link "A" even though I clicked "B".

If I click link "B" first and select discard, it works correctly. It only works incorrectly if I select cancel and then click again and select another link.

FYI, href is always set. Dead links currently pass 'no' to the function. However, all of my problems above are with both live links and dead links.

Here is the code that calls the function:

        $('a.chk').click(function (event) {
          if (check == false) {
                var addressValue = $(this).attr("href");
                //alert(addressValue);
                setConfirmUnload(false);
                event.preventDefault();
                return myFunction(addressValue);
          }
        });

I would appreciate your input!

I have searched for similar problems, and didn't find anything, but I may have missed one as I'm not sure how to search for this issue!

Upvotes: 1

Views: 292

Answers (1)

cernunnos
cernunnos

Reputation: 2806

Try dinamically generating and destroying the dialog

function customConfirm(msg, href) {
  var container = $("<div/>").append(msg);

  $( container ).dialog({
    // your dialog stuff
    close: function () {
       $(this).remove();
    }                
  }); 
}

// If you want to keep your #tabWarn
customConfirm($("#tabWarn").html(),href);

// If you want some custom msg
customConfirm("Are you sure you want to do that?",href);

As to why it was happening: The default behavior of jquery ui dialog is to show or hide the dialog Div once the dialog has been attached to it. You can test this by using your old approach (not destroying), opening it once, then inspecting the DOM, you should see a hidden div at the end of the body.

As a result, the second time you clicked a link you where using the dialog that was created the first time, with the configuration of the first link.

Upvotes: 1

Related Questions