datos que pasan a un diálogo jQuery UI

Question

Estoy desarrollando un sitio ASP.Net MVC y en él me enumerar algunas reservas de una consulta de base de datos en una tabla con un ActionLink de cancelar la reserva en una fila específica con una cierta BookingId así:

Mis reservas

<table cellspacing="3"> 
    <thead> 
     <tr style="font-weight: bold;"> 
      <td>Date</td> 
      <td>Time</td> 
      <td>Seats</td>  
      <td></td>    
      <td></td> 
     </tr> 
    </thead>    
    <tr> 
     <td style="width: 120px;">2008-12-27</td> 
     <td style="width: 120px;">13:00 - 14:00</td> 
     <td style="width: 100px;">2</td> 
     <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td> 
     <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td> 
    </tr>    
    <tr> 
     <td style="width: 120px;">2008-12-27</td> 
     <td style="width: 120px;">15:00 - 16:00</td> 
     <td style="width: 100px;">3</td> 
     <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td> 
     <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td> 
    </tr> 
</table> 

lo que sería interesante es si podría utilizar el jQuery Dialog popup un mensaje preguntando si el usuario está seguro de que quiere cancelar la reserva. He estado tratando de conseguir que esto funcione pero sigo quedarse atascado en cómo crear una función de jQuery que acepta parámetros para que pueda reemplazar el

<a href="/Booking.aspx/Cancel/10">cancel</a>

con

<a href="#" onclick="ShowDialog(10)">cancel</a>.

La función ShowDialog se abra el cuadro de diálogo y también pasar el parametro 10 al cuadro de diálogo de modo que si el usuario hace clic en sí, entonces trata sobre todo de la href: /Booking.aspx/Change/10

yo he creado al diálogo jQuery en un guión como esto:

$(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" 
     } 
    }); 
}); 

y el diálogo en sí:

<div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div> 

Así que, finalmente, a mi pregunta: ¿Cómo puedo ac ¿Completar esto? o hay una mejor manera de hacerlo?

Answer 1

Se podía hacerlo de esta manera:

• marcan el <a> con una clase, diga "Cancelar"

• acondicionaron el diálogo, actuando sobre todos los elementos con class = "cancelar":

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

(además de sus otras opciones)

Los puntos clave son:

• que sea lo más discreto posible
• si todo lo que necesita es la dirección URL, ya lo tienes en el href.

Sin embargo, le recomiendo que hacer de este un POST en lugar de un GET, ya que una acción de cancelación tiene efectos secundarios y por lo tanto doesn't comply with GET semantics ...

Answer 2

En términos de lo que está haciendo con jQuery, mi entendimiento es que puedes encadenar funciones como las tienes y las internas tienen acceso a variables de las externas. Entonces, su función ShowDialog (x) contiene estas otras funciones, puede reutilizar la variable x dentro de ellas y se tomará como una referencia al parámetro de la función externa.

Estoy de acuerdo con mausch, realmente debería considerar el uso de POST para estas acciones, que agregará una etiqueta <form> alrededor de cada elemento, pero las posibilidades de que un script automático o una herramienta desencadenen el evento Cancel son mucho menos probables. La acción Cambiar puede permanecer como está porque (presumiblemente solo abre una forma de edición).

Answer 3

ahora han intentado sus sugerencias y encontró que algo funciona,

1. El div diálogo está escrito alsways en texto plano
2. Con la versión $ .post que realmente funciona en términos de que el controlador obtiene llamado y en realidad cancela la reserva, pero el diálogo permanece abierto y la página no se actualiza. Con la versión get window.location = h.ref funciona muy bien.

Se mi "nuevo" guión a continuación:

$('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; 
}); 

});

¿Alguna pista?

ah y mi enlace Acción ahora se ve así:

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

Answer 4

Ok el primer problema con la etiqueta div era bastante fácil: Acabo de añadir un style="display:none;" a él y luego antes de mostrar el cuadro de diálogo que añadió esta en mi secuencia de comandos de diálogo:

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

Pero para la versión de publicación todavía estoy de mala suerte.

Answer 5

En cuanto a su código, lo que necesita hacer es agregar la funcionalidad para cerrar la ventana y actualizar la página. En su función de "Sí" se debe escribir:

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

El código para eliminar la fila de tabla no es divertido de escribir, así que dejaré que usted se ocupa de los detalles Nitty Gritty, pero básicamente, tiene que contar el diálogo qué hacer después de publicarlo. Puede ser un diálogo inteligente, pero necesita algún tipo de dirección.

Answer 6

Solo darte una idea puede ayudarte, si quieres un diálogo de control total, puedes intentar evitar el uso de opciones predeterminadas de botones y agregar botones tú mismo en tu #dialog div. También puede poner datos en algún atributo ficticio de enlace, como Click. llame a attr ("datos") cuando lo necesite.

Answer 7

después de las horas varios de try/catch Finalmente llegué con este ejemplo de trabajo, su trabajo sobre AJAX POST con nuevas filas anexa a la tabla de la mosca (que era mi verdadero problema):

magia Tha vino con vincular esta:

<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> 

este es el final de trabajar con AJAX POST y jquery diálogo:

<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> 

Answer 8

jQuery proporciona un método que almacenan datos para que, sin necesidad de utilizar un du mmy atributo o para encontrar una solución a su problema.

Enlazar el evento click:

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

Y el diálogo:

$("#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); 
     } 
    } 
}); 

Answer 9

una solución inspirada por Boris Guery que he empleado se ve así: El enlace:

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

vincular una acción a él:

$('.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; 
     } 
    }); 

Y a continuación, para acceder al campo id (en este caso con valor de 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){ 

       } 
      }) 
     } 
    } 
}); 

Answer 10

Este trabajo para mí:

<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')); } } 
     }); 
    } 

Al hacer clic en " Sposta "en la pantalla de alerta de diálogo 100

Answer 11

espero que es ayuda

$("#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>