problèmes de publication dans la boîte de dialogue de formulaire modal jQuery
J'ai créé un formulaire jQuery UI Modal et je souhaite que ce formulaire déclenche une publication, mais je ne parviens pas à le faire fonctionner.
Je sais qu'il existe de nombreux articles basés sur l'utilisation du plugin SimpleModal, et j'ai essayé de les adapter et de remplacer la fonction _doPostback, mais sans joie.
Je pense que le problème est dans l'appel à ma fonction __doPostBack et quels paramètres devraient être. Est-ce le cas?
Voici mon formulaire
<form id="summaryForm" runat="server">
<div id="dialog" title="Quick Booking">
<p>Select user from list or enter name in box</p>
<fieldset>
<p><label>Is machine going out of the office?</label></p>
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />
<label for="dropLstUser">User:</label>
<asp:DropDownList ID="dropLstUser" runat="server" />
<input type="text" name="txtUser" id="txtUser" value="" class="text" />
<label for="txtStartDate">Start Date:</label>
<input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
<asp:HiddenField ID="assetField" runat="server" />
<%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
</fieldset>
</div>
//--------------------------------
Voici le code JavaScript:
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm",null);
}
}
});
});
function newDoPostBack(eventTarget, eventArgument)
{
alert("postingback");
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
</script>
Après avoir créé votre boîte de dialogue, replacez-la simplement dans votre formulaire. Exemple:
$("#divSaveAs").dialog({bgiframe:false,
autoOpen:false,
title:"Save As",
modal:true});
$("#divSaveAs").parent().appendTo($("form:first"));
Cela a fonctionné pour moi. Les travaux de publication trouvent.
Sachez qu’il existe un paramètre supplémentaire dans jQuery UI v1.10. Un paramètre appendTo a été ajouté pour résoudre la solution de contournement ASP.NET que vous utilisez pour rajouter l'élément au formulaire.
Essayer:
$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });
L'option "Ajouter à" fonctionne pour moi.
$ ("# dialogue"). dialogue ({..., appendTo: "form"});
Un hack effronté que j’ai utilisé est de créer un bouton .NET normal avec des zones de texte, etc., dans un div de la page, en utilisant jQuery, obtenez le HTML de ce div, ajoutez-le au dans la boîte de dialogue, puis supprimez le code HTML de la division d'origine pour éviter la duplication d'identifiant.
<div id="someDiv" style="display: none">
<p>A standard set of .net controls</p>
<asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
<input id="button1" type="button" value="Confirm" onclick="SomeEvent();" />
</div>
Et le script:
var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true
});
Merci beaucoup pour le post de csharpdev! Le code suivant l'a fait pour ma page:
$("#photouploadbox").dialog({
autoOpen: false,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); } },
draggable: false,
minWidth: 400 });
$("#photouploadbox").parent().appendTo($("form#profilform"));
J'ai réussi à résoudre le problème - ce n'est probablement pas la meilleure solution mais voici ce que j'ai fait.
La boîte de dialogue ne publierait pas, car jQuery UI retire le bouton d'envoi du formulaire et l'ajoute au bas de la balise body. Ainsi, lorsque vous essayez de publier le bouton, il ne sait pas ce qu'il affiche.
J'ai contourné cela en modifiant le code de l'interface utilisateur jQuery en modifiant ceci:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.body)
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
Pour ça:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.forms[0])
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
La modification de la bibliothèque source n’est pas idéale, mais c’est mieux que rien.
Cela fonctionne comme prévu quand j'ai utilisé
$("#divDlg").dialog("destroy");
au lieu de
$("#divDlg").dialog("close").appendTo($("#Form1")).hide();
Lorsque nous avons ajouté au formulaire et rouvert le dialogue, des problèmes de mise en page et d'index z se sont posés.
Je peux le faire fonctionner si j'en ai un de chaque. Un div, un script et un lien. Dans mon cas, la boîte de dialogue permet à l'utilisateur de laisser une "note" par enregistrement de base de données. Je n'ai pas de boutons dans ma boîte de dialogue, juste le "x" en haut à droite par défaut pour fermer la boîte de dialogue.
Mais j'essaie de faire en sorte que cela fonctionne dans une boucle ColdFusion query ... Plusieurs enregistrements, chacun ayant son propre bouton de dialogue, son script associé et son div. Je change les ID de manière dynamique afin qu'ils soient tous uniques (c'est-à-dire, en ajoutant un _XX où XX est la clé d'enregistrement principale de tous les ID).
Lorsque je développe sur ce modèle, ayant plusieurs dialogues, scripts, divs .. Si j'ouvre chaque dialogue pour modifier la "note" correspondante pour cet enregistrement, seule la DERNIÈRE sera sauvegardée. Devrais-je faire le .parent (). AppendTo sur un clic de bouton vs automatiquement? Quelque part, ça devient confus.
Si je n'ouvre aucune boîte de dialogue (n'effectuez aucune modification via la boîte de dialogue) et n'exécute aucune sauvegarde sur les résultats du formulaire, tous les champs de la boîte de dialogue apparaissent comme prévu dans la publication.
Quand je regarde le HTML brut produit ... Tous les identifiants sont uniques et sont appelés de manière appropriée. Je pensais avoir une collision sur un nom/identifiant en conflit quelque part, mais tout semble aller bien à cet égard.
Mon script:
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 500,
resizable: false
});
$('.countable2').jqEasyCounter({
'maxChars': 2000,
});
// Dialog Link
$('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
$('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
return false;
});
//hover states on the static widgets
$('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
});
</script>
Mon div:
<div id="dialog#getALLFacilityEquipOrders.order_id#"
title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
style="display:none;">
<cfquery datasource="#a_dsn#" name="getOrderNotes">
select notebody
from QIP_EquipOrders_Notes
where fk_order_id = #getALLFacilityEquipOrders.order_id#
</cfquery>
<fieldset class="qip_menu">
<label><b>Enter/Edit Notes:</b></label>
<textarea class="countable2"
id="notebody_#getALLFacilityEquipOrders.order_id#"
name="notebody_#getALLFacilityEquipOrders.order_id#"
rows="10"
cols="75">#getOrderNotes.notebody#</textarea>
</fieldset>
</div>
Mon bouton:
<a href="##"
id="dialog_link#getALLFacilityEquipOrders.order_id#"
class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm", null);
}}});});
La fonction __doPostBack prend le contrôle qui provoque la publication et un argument si nécessaire. Vos exemples JavaScript et votre balisage ne semblent pas correspondre. Par exemple, où j'ai cité ci-dessus, vous référencez aspnetForm, remplacez-le par l'ID du formulaire et essayez à nouveau.
Assurez-vous que l'ID utilisé pour le script client est identique à l'ID client du contrôle ASP.NET lors de l'exécution. Si un contrôle réside dans un INamingContainer, il aura un identifiant unique basé sur son conteneur parent. Votre YourControlID deviendra YourINaminContainerID_YourControlID.
Faites-nous savoir le résultat.