Lorsque certains contrôles ASP.NET sont dans une boîte de dialogue jQuery, leurs valeurs ne sont pas en postback

Question

J'ai une série de boîtes de dialogue jQuery qui contiennent des champs de formulaire ASP.NET. J'ai un bouton ASP.NET caché qui est déclenché lorsque l'utilisateur clique sur un bouton dans l'une des boîtes de dialogue jQuery. Je peux entrer des données (listboxes et textboxes) et cliquer sur le bouton qui déclenche l'événement du bouton caché (onClick) et la page sera publiée. Mais, quand je mets un point d'arrêt dans l'événement onClick dans mon codebehind, je vois que les champs de formulaire (reportTypeListBox.SelectedValue, etc.) ont juste les valeurs par défaut au lieu de celles que j'ai entrées. Cela se produit à moins que je ne sorte les champs de formulaire de la boîte de dialogue jQuery, alors cela fonctionne parfaitement.

J'ai une autre boîte de dialogue jQuery qui contient une zone de texte ASP.NET qui fait essentiellement la même chose (en déclenchant un bouton ASP.NET caché avec un événement onClick) qui fonctionne correctement. La seule différence est que sa boîte de dialogue jQuery n'est pas dans une fonction javascript séparée. C'est dans le "$ (document). Ready (function() {}." Alors que, la série de boîtes de dialogue qui ont des problèmes sont dans une fonction appelée "openDialog (sélecteur)."

Voici mon .js fichier:

$(document).ready(function() { 

drawSpeedometerRound("chartdiv"); 
drawSpeedometerLine("chartdiv"); 

//create main column tabs 
$("#tabs").tabs(); 

//NEW REPORT DIALOG 
//hide wizard dialog divs 
$("#wizardPg1").hide(); 
$("#wizardPg2").hide(); 
$("#wizardFlat").hide(); 

//hide wizard onClick buttons 
$("[id$='_reportWizardTypeChoose']").hide(); 

//open wizard dialog pg 1 to begin creation of new report 
$("#newReport").click(function() { 
    openDialog("#wizardPg1"); 
}); 

//NEW CHART DIALOG 
//hide chart wizard dialog divs 
$("#chartWizardPg1").hide(); 
$("#chartWizardPg2").hide(); 

//wizard dialog page 1. Walks user through creation of new report 
$("#chartWizardPg1").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    height: 400, 
    width: 400, 
    title: "New Chart Wizard", 
    buttons: { 
     "Next >": function() { 
      $(this).dialog("close"); 
      $("#chartWizardPg2").dialog("open"); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$("#chartWizardPg2").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    height: 400, 
    width: 400, 
    title: "New Chart Wizard", 
    buttons: { 
     "Next >": function() { 
      $(this).dialog("close"); 
     }, 
     "< Back": function() { 
      $(this).dialog("close"); 
      $("#chartWizardPg1").dialog("open"); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 

}); 

//open wizard dialog pg 1 to begin creation of new report 
$("#newChart").click(function() { 
    $("#chartWizardPg1").dialog("open"); 

}); 

//NEW QUERY DIALOG 
//hide new query dialog 
$("[id$='_querySubmit']").hide(); 
$("#queryDialog").hide(); 

//dialog for entering custom SQL query 
$("#newQueryButton").click(function() { 
    $("#queryDialog").dialog({ 
     modal: true, 
     title: "Enter Sql Query", 
     width: 500, 
     buttons: { 
      "Submit Query": function() { 
       $(this).dialog("close"); 
       $("[id$='_querySubmit']").trigger("click"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }).parent().appendTo($("form")); 
}); 

$("#exportDialog").hide(); 
$("[id$='_exportPDF']").hide(); 
$("[id$='_exportPrinter']").hide(); 
$("[id$='_exportDoc']").hide(); 

$("#export").click(function() { 
    $("#exportDialog").dialog({ 
     title: "Export", 
     buttons: { 
      "PDF": function() { 
       $(this).dialog("close"); 
       $("[id$='_exportPDF']").trigger("click"); 
      }, 
      "Word": function() { 
      }, 
      "Excel": function() { 
      }, 
      "Printer": function() { 
      }, 
      "Close": function() { 
       $(this).dialog("destroy"); 
      } 
     } 
    }); 
}); 

//display "message" p tags as popups 
function messageDialog() { 
    if ($("[id$='_message']").text() != "") { 
     $("[id$='_message']").dialog({ 
      modal: true, 
      resizable: false, 
      title: $("[id$='_messageTitle']").text() 

     }); 
    } 
} 

//alternate row colors 
$("#reportTable tbody tr:even").addClass("even"); 
$("#reportTable tbody tr:odd").addClass("odd"); 

messageDialog(); 

//calculate number of cols in report 
//var columns = ($("#firstCol").nextAll().length + 1); 

//$("[id$='_sqlQuery']").val(""); 

});

fonction openDialog (sélecteur) { $ (document) .ready (function() {

//wizard dialog page 1. Walks user through creation of new report 
    $("#wizardPg1").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     height: 400, 
     width: 400, 
     title: "New Report Wizard", 
     buttons: { 
      "Next >": function() { 
       $(this).dialog("close"); 
       $("#wizardPg2").dialog("open"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }).parent().appendTo($("form")); 

    $("#wizardPg2").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     height: 400, 
     width: 400, 
     title: "New Report Wizard", 
     buttons: { 
      "Next >": function() { 
       $(this).dialog("close"); 
       $("[id$='_reportWizardTypeChoose']").trigger("click"); 
      }, 
      "< Back": function() { 
       $(this).dialog("close"); 
       $("#wizardPg1").dialog("open"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 

    }).parent().appendTo($("form")); 

    $("#wizardFlat").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     height: 400, 
     width: 400, 
     title: "New Report Wizard - Flat Table", 
     buttons: { 
      "Next >": function() { 
       $(this).dialog("close"); 
      }, 
      "< Back": function() { 
       $(this).dialog("close"); 
       $("#wizardPg2").dialog("open"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("destroy"); 
      } 
     } 

    }).parent().appendTo($("form")); 

    $(selector).dialog("open"); 

}); 

}

Désolé pour la mise en forme du code, nous espérons que vous obtenez ce que je parle

Answer 1

Je l'ai eu aussi parce qu'ils ont été déplacés de la balise <form>! Doh! Je viens d'utiliser jQuery pour les replacer à leur place d'origine dans le DOM à proximité.

EDIT: Désolé oui le appendTo ($ ("forme")) a été peu <form> retiré du poste

Answer 2

essayer d'ajouter $ (this) .parent();. juste avant l'événement de clic.

$("#wizardPg2").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     height: 400, 
     width: 400, 
     title: "New Report Wizard", 
     buttons: { 
      "Next >": function() { 
       $(this).dialog("close"); 

       $(this).parent().appendTo($("form")); //ADD HERE! 

       $("[id$='_reportWizardTypeChoose']").trigger("click"); 
      }, 
      "< Back": function() { 
       $(this).dialog("close"); 
       $("#wizardPg1").dialog("open"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 

    }) 

Answer 3

Il suffit d'ajouter

open: function(type, data) { 
$(this).parent().appendTo("form"); 
} 

dans votre code comme:

var dialogId="#dialog-form"; 
$(function() { 
    $(dialogId).dialog({ 
     autoOpen: false, 
     height: 200, 
     width: 150, 
     modal: true, 

     open: function(type, data) { 
        $(this).parent().appendTo("form"); 
       }, 
     buttons: { 
      "Submit": function() { 
       __doPostBack('<%=ASPBTN.ClientID %>', ''); 
       $(this).dialog("close"); 

      } } }); });