Passing data to a jQuery UI Dialog

Question

I m developing an ASP Net MVC site and on it I list some bookings from a database query in a table with an ActionLink to cancel the booking on a specific row with a certain BookingId like this      My bookings   lt table cellspacing  3  gt       lt thead gt           lt tr style  font-weight  bold   gt               lt td gt Date lt  td gt               lt td gt Time lt  td gt               lt td gt Seats lt  td gt                     lt td gt  lt  td gt                             lt td gt  lt  td gt           lt  tr gt       lt  thead gt                   lt tr gt           lt td style  width  120px   gt 2008-12-27 lt  td gt           lt td style  width  120px   gt 13 00 - 14 00 lt  td gt           lt td style  width  100px   gt 2 lt  td gt           lt td style  width  60px   gt  lt a href   Booking aspx Cancel 15  gt cancel lt  a gt  lt  td gt           lt td style  width  80px   gt  lt a href   Booking aspx Change 15  gt change lt  a gt  lt  td gt       lt  tr gt                   lt tr gt           lt td style  width  120px   gt 2008-12-27 lt  td gt           lt td style  width  120px   gt 15 00 - 16 00 lt  td gt           lt td style  width  100px   gt 3 lt  td gt           lt td style  width  60px   gt  lt a href   Booking aspx Cancel 10  gt cancel lt  a gt  lt  td gt           lt td style  width  80px   gt  lt a href   Booking aspx Change 10  gt change lt  a gt  lt  td gt       lt  tr gt     lt  table gt    What would be nice is if I could use the jQuery Dialog to popup a message asking if the user is sure he wants to cancel the booking  I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the    lt a href   Booking aspx Cancel 10  gt cancel lt  a gt    with    lt a href     onclick  ShowDialog 10   gt cancel lt  a gt     The ShowDialog function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the href   Booking aspx Change 10  I have created the jQuery Dialog in a script like this     function             dialog   dialog           autoOpen  false          buttons                 Yes   function                     alert  a Post to   Booking aspx Cancel 10 would be so nice here instead of the alert                   No   function      this  dialog  close                        modal  true          overlay                opacity  0 5              background   black                             and the dialog itself       lt div id  dialog  title  Cancel booking  gt Are you sure you want to cancel your booking  lt  div gt    So finally to my question  How can I accomplish this  or is there a better way of doing it

User · Answer

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

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

bind 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 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){

                }
            })
        }
    }
});

User · Answer

Looking at your code what you need to do is add the functionality to close the window and update the page  In your  Yes  function 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 table row isn t fun to write so I ll let you deal with the nitty gritty details  but basically  you need to tell the dialog what to do after you post it  It may be a smart dialog but it needs some kind of direction

User · Answer

I have now tried your suggestions and found that it kinda works    The dialog div is alsways written out in plaintext 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 clues   oh and my Action link now looks like this    lt    Html ActionLink  Cancel    Cancel   new   id   v BookingId    new     class    cancel      gt

User · Answer

jQuery provides a method which store data for you  no need to use a dummy attribute or to find workaround to your problem   Bind 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

User · Answer

Just give you some idea may help you  if you want fully control dialog  you can try to avoid use of default button options  and add buttons by yourself in your  dialog div  You also can put data into some dummy attribute of link  like Click  call attr  data   when you need it

User · Answer

In terms of what you are doing with jQuery  my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones  So is your ShowDialog x  function contains these other functions  you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function   I agree with mausch  you should really look at using POST for these actions  which will add a  lt form gt  tag around each element  but make the chances of an automated script or tool triggering the Cancel event much less likely  The Change action can remain as is because it  presumably just opens an edit form

User · Answer

Ok the first issue with the div tag was easy enough  I just added a style  display none   to it and then before showing the dialog I added this in my dialog script       dialog   css  display    inherit      But for the post version I m still out of luck

User · Answer

In terms of what you are doing with jQuery  my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones  So is your ShowDialog x  function contains these other functions  you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function   I agree with mausch  you should really look at using POST for these actions  which will add a  lt form gt  tag around each element  but make the chances of an automated script or tool triggering the Cancel event much less likely  The Change action can remain as is because it  presumably just opens an edit form

User · Answer

This work for me    lt a href     onclick  sposta 100   gt SPOSTA lt  a gt   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 dialog alert display 100

User · Answer

After SEVERAL HOURS of try catch I finally came with this working example  its working on AJAX POST with new rows appends to the TABLE on the fly  that was my real problem     Tha magic came with link this    lt a href     onclick  removecompany this  return false   id  remove 13  gt remove lt  a gt   lt a href     onclick  removecompany this  return false   id  remove 14  gt remove lt  a gt   lt a href     onclick  removecompany this  return false   id  remove 15  gt remove lt  a gt    This is the final working with AJAX POST and Jquery Dialog        lt script type   text javascript  gt    lt   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                  gt    lt  script gt       lt div id  removedialog  title  Remove a Company   gt           lt p gt  lt span class  ui-icon ui-icon-alert  style  float left  margin 0 7px 20px 0   gt  lt  span gt          This company will be permanently deleted and cannot be recovered  Are you sure  lt  p gt       lt  div gt

User · Answer

jQuery provides a method which store data for you  no need to use a dummy attribute or to find workaround to your problem   Bind 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

User · Answer

Looking at your code what you need to do is add the functionality to close the window and update the page  In your  Yes  function 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 table row isn t fun to write so I ll let you deal with the nitty gritty details  but basically  you need to tell the dialog what to do after you post it  It may be a smart dialog but it needs some kind of direction

User · Answer

Ok the first issue with the div tag was easy enough  I just added a style  display none   to it and then before showing the dialog I added this in my dialog script       dialog   css  display    inherit      But for the post version I m still out of luck

User · Answer

In terms of what you are doing with jQuery  my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones  So is your ShowDialog x  function contains these other functions  you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function   I agree with mausch  you should really look at using POST for these actions  which will add a  lt form gt  tag around each element  but make the chances of an automated script or tool triggering the Cancel event much less likely  The Change action can remain as is because it  presumably just opens an edit form

User · Answer

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                            lt a href  product-002371  onclick       dialog-yesno    data  link   this  dialog   open     return false   gt Delete lt  a gt

User · Answer

You could do it like this    mark the  lt a gt  with a class  say  cancel  set up the dialog 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 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 recommend that you make this  a POST instead of a GET  since a cancel action has side effects and thus doesn t comply with GET semantics

User · Answer

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                            lt a href  product-002371  onclick       dialog-yesno    data  link   this  dialog   open     return false   gt Delete lt  a gt

User · Answer

Ok the first issue with the div tag was easy enough  I just added a style  display none   to it and then before showing the dialog I added this in my dialog script       dialog   css  display    inherit      But for the post version I m still out of luck

User · Answer

After SEVERAL HOURS of try catch I finally came with this working example  its working on AJAX POST with new rows appends to the TABLE on the fly  that was my real problem     Tha magic came with link this    lt a href     onclick  removecompany this  return false   id  remove 13  gt remove lt  a gt   lt a href     onclick  removecompany this  return false   id  remove 14  gt remove lt  a gt   lt a href     onclick  removecompany this  return false   id  remove 15  gt remove lt  a gt    This is the final working with AJAX POST and Jquery Dialog        lt script type   text javascript  gt    lt   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                  gt    lt  script gt       lt div id  removedialog  title  Remove a Company   gt           lt p gt  lt span class  ui-icon ui-icon-alert  style  float left  margin 0 7px 20px 0   gt  lt  span gt          This company will be permanently deleted and cannot be recovered  Are you sure  lt  p gt       lt  div gt

User · Answer

I have now tried your suggestions and found that it kinda works    The dialog div is alsways written out in plaintext 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 clues   oh and my Action link now looks like this    lt    Html ActionLink  Cancel    Cancel   new   id   v BookingId    new     class    cancel      gt

User · Answer

You could do it like this    mark the  lt a gt  with a class  say  cancel  set up the dialog 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 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 recommend that you make this  a POST instead of a GET  since a cancel action has side effects and thus doesn t comply with GET semantics

User · Answer

Ok the first issue with the div tag was easy enough  I just added a style  display none   to it and then before showing the dialog I added this in my dialog script       dialog   css  display    inherit      But for the post version I m still out of luck

User · Answer

In terms of what you are doing with jQuery  my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones  So is your ShowDialog x  function contains these other functions  you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function   I agree with mausch  you should really look at using POST for these actions  which will add a  lt form gt  tag around each element  but make the chances of an automated script or tool triggering the Cancel event much less likely  The Change action can remain as is because it  presumably just opens an edit form

User · Answer

Looking at your code what you need to do is add the functionality to close the window and update the page  In your  Yes  function 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 table row isn t fun to write so I ll let you deal with the nitty gritty details  but basically  you need to tell the dialog what to do after you post it  It may be a smart dialog but it needs some kind of direction

User · Answer

Just give you some idea may help you  if you want fully control dialog  you can try to avoid use of default button options  and add buttons by yourself in your  dialog div  You also can put data into some dummy attribute of link  like Click  call attr  data   when you need it

User · Answer

You could do it like this    mark the  lt a gt  with a class  say  cancel  set up the dialog 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 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 recommend that you make this  a POST instead of a GET  since a cancel action has side effects and thus doesn t comply with GET semantics

User · Answer

Looking at your code what you need to do is add the functionality to close the window and update the page  In your  Yes  function 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 table row isn t fun to write so I ll let you deal with the nitty gritty details  but basically  you need to tell the dialog what to do after you post it  It may be a smart dialog but it needs some kind of direction

User · Answer

You could do it like this    mark the  lt a gt  with a class  say  cancel  set up the dialog 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 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 recommend that you make this  a POST instead of a GET  since a cancel action has side effects and thus doesn t comply with GET semantics

User · Answer

This work for me    lt a href     onclick  sposta 100   gt SPOSTA lt  a gt   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 dialog alert display 100

User · Answer

I have now tried your suggestions and found that it kinda works    The dialog div is alsways written out in plaintext 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 clues   oh and my Action link now looks like this    lt    Html ActionLink  Cancel    Cancel   new   id   v BookingId    new     class    cancel      gt

User · Answer

I have now tried your suggestions and found that it kinda works    The dialog div is alsways written out in plaintext 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 clues   oh and my Action link now looks like this    lt    Html ActionLink  Cancel    Cancel   new   id   v BookingId    new     class    cancel      gt

User · Answer

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

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

bind 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 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){

                }
            })
        }
    }
});

[javascript] Passing data to a jQuery UI Dialog

Examples related to javascript

Examples related to jquery

Examples related to asp.net-mvc

Examples related to jquery-ui

Examples related to jquery-ui-dialog