[ACCEPTED]-Passing data to a jQuery UI Dialog-jquery-ui-dialog

jQuery provides a method which store data 3 for you, no need to use a dummy attribute 2 or to find workaround to your problem.

Bind 1 the click event:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

And your dialog:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});

You could do it like this:

• mark the <a> with a class, say "cancel"

• set up the dialog 5 by acting on all elements with class="cancel":

  $('a.cancel').click(function() { 
    var a = this; 
    $('#myDialog').dialog({
      buttons: {
        "Yes": function() {
           window.location = a.href; 
        }
      }
    }); 
    return false;
  });
  

(plus 4 your other options)

The key points here are:

• make it as unobtrusive as possible
• if all you need is the URL, you already have it in the href.

However, I 3 recommend that you make this a POST instead 2 of a GET, since a cancel action has side 1 effects and thus doesn't comply with GET semantics...

In terms of what you are doing with jQuery, my 14 understanding is that you can chain functions 13 like you have and the inner ones have access 12 to variables from the outer ones. So is 11 your ShowDialog(x) function contains these 10 other functions, you can re-use the x variable 9 within them and it will be taken as a reference 8 to the parameter from the outer function.

I 7 agree with mausch, you should really look 6 at using POST for these actions, which will 5 add a <form> tag around each element, but make 4 the chances of an automated script or tool 3 triggering the Cancel event much less likely. The 2 Change action can remain as is because it 1 (presumably just opens an edit form).

I have now tried your suggestions and found 3 that it kinda works,

1. The dialog div is alsways written out in plaintext
2. With the $.post version it actually works in terms that the controller gets called and actually cancels the booking, but the dialog stays open and page doesn't refresh. With the get version window.location = h.ref works great.

Se my "new" script below:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

Any 2 clues?

oh and my Action link now looks like 1 this:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>

Looking at your code what you need to do 8 is add the functionality to close the window 7 and update the page. In your "Yes" function 6 you should write:

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

The code to remove the 5 table row isn't fun to write so I'll let 4 you deal with the nitty gritty details, but 3 basically, you need to tell the dialog what 2 to do after you post it. It may be a smart 1 dialog but it needs some kind of direction.

After SEVERAL HOURS of try/catch I finally 5 came with this working example, its working 4 on AJAX POST with new rows appends to the 3 TABLE on the fly (that was my real problem):

Tha 2 magic came with link this:

<a href="#" onclick="removecompany(this);return false;" id="remove_13">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_14">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_15">remove</a>

This is the final 1 working with AJAX POST and Jquery Dialog:

  <script type= "text/javascript">/*<![CDATA[*/
    var $k = jQuery.noConflict();  //this is for NO-CONFLICT with scriptaculous
     function removecompany(link){
        companyid = link.id.replace('remove_', '');
    $k("#removedialog").dialog({
                bgiframe: true,
                resizable: false,
                height:140,
                autoOpen:false,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Are you sure ?': function() {
                        $k(this).dialog('close');
                        alert(companyid);
                        $k.ajax({
                              type: "post",
                              url: "../ra/removecompany.php",
                              dataType: "json",
                              data: {
                                    'companyid' : companyid
                                    },
                              success: function(data) {
                                    //alert(data);
                                    if(data.success)
                                    {
                                        //alert('success'); 
                                        $k('#companynew'+companyid).remove();
                                    }
                          }
                        }); // End ajax method
                    },
                    Cancel: function() {
                        $k(this).dialog('close');
                    }
                }
            });
            $k("#removedialog").dialog('open'); 
            //return false;
     }
    /*]]>*/</script>
    <div id="removedialog" title="Remove a Company?">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        This company will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

This work for me:

<a href="#" onclick="sposta(100)">SPOSTA</a>

function sposta(id) {
        $("#sposta").data("id",id).dialog({
            autoOpen: true,
            modal: true,
            buttons: { "Sposta": function () { alert($(this).data('id')); } }
        });
    }

When you click on "Sposta" in 1 dialog alert display 100

Ok the first issue with the div tag was 4 easy enough: I just added a style="display:none;" to it and then 3 before showing the dialog I added this in 2 my dialog script:

$("#dialog").css("display", "inherit");

But for the post version 1 I'm still out of luck.

Just give you some idea may help you, if 6 you want fully control dialog, you can try 5 to avoid use of default button options, and 4 add buttons by yourself in your #dialog 3 div. You also can put data into some dummy 2 attribute of link, like Click. call attr("data") when 1 you need it.

A solution inspired by Boris Guery that 3 I employed looks like this: The link:

<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>

bind 2 an action to it:

$('.remove').live({
        click:function(){
            var data = $('#'+this.id).metadata();
            var id = data.id;
            var name = data.name;
            $('#dialog-delete')
                .data('id', id)
                .dialog('open');    
            return false;
        }
    });

And then to access the id 1 field (in this case with value of 15:

$('#dialog-delete').dialog({
    autoOpen: false,
    position:'top',
    width: 345,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: {            
        Cancel: function() {

            $(this).dialog('close');
        },
        'Confirm delete': function() {
            var id = $(this).data('id');
            $.ajax({
                url:"http://example.com/system_admin/admin/delete/"+id,
                type:'POST',
                dataType: "json",
                data:{is_ajax:1},
                success:function(msg){

                }
            })
        }
    }
});

i hope this helps

$("#dialog-yesno").dialog({
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    height:180,
    width:350,
    modal: true,
    show: "blind",
    open: function() {
        $(document).unbind('keydown.dialog-overlay');
        },
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
            var dir = $(this).data('link').href;
            var arr=dir.split("-");
            delete(arr[1]);
        },
    "Cancel": function() {
        $(this).dialog("close");
        }
    }
});



<a href="product-002371" onclick="$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>

0