La boîte de dialogue jQuery ne se ferme pas (avec les données .load)

Sur ma page (appelons-la la page A) j'ai une boîte de dialogue jQuery avec l'ID customOrderEdit. Dans la boîte de dialogue, je charge une autre page (appelons la page B) en utilisant $ ("# customOrderEdit"). Load ("/ url/to/page.php").La boîte de dialogue jQuery ne se ferme pas (avec les données .load)

Maintenant je veux fermer la boîte de dialogue en utilisant un bouton personnalisé, mais il ne se fermera pas. J'ai essayé tant de choses (trouvées sur google, stackoverflow, etc.) mais aucune d'entre elles ne semble fonctionner. Peu importe si le code pour fermer la boîte de dialogue est sur la page A ou B, tant qu'il se ferme, je suis heureux.

code J'ai essayé à la page A:

$("body").on('click', '.cancelUpdateOrder', function(){ 
    console.log("Test"); //it displays the test console log, but it doesn't close 
    $("#customOrderEdit).dialog("close"); 
    return false; 
});

code J'ai essayé à la page B:

$(".cancelUpdateOrder").on('click', function(){ 
     $('#customOrderEdit').dialog('close'); 
     return false; 
});

J'ai aussi essayé d'appeler la fonction de clic différemment:

$(".cancelUpdateOrder").click(function(){ }});
$(".cancelUpdateOrder").live('click', function(){ }});
$(".cancelUpdateOrder").on('click', function(){ }});.

Et la partie de fermeture:

$(".ui-dialog").dialog("close");
window.parent.$('#customOrderEdit').dialog('close');
$('#customOrderEdit', window.parent).dialog("close");

Et probablement un peu plus que je ne me souviens pas.

Est-ce que quelqu'un sait ce que je fais mal et peut me fournir le bon code?

Source

2015-09-18 Femke

Vous manque probablement un guillemets ** ** par exemple ' "'en page A en se référant' dialogue box' -> '$ (" # customOrderEdit) .dialog ('aurait dû' $ ("#customOrderEdit"). dialog. ( –

Le sélecteur de classe peut retourner une liste d'objets, vous pouvez essayer de les utiliser avec itérer chaque:

$('.cancelUpdateOrder').each(function() { 
    $(this).on('click', function() { 
     $('#customOrderEdit').dialog('close'); 
     return false; 
    }) 
});

Si ne fonctionne pas, vous pouvez essayer de mettre un console.log à suivre si vous atteignez les bons éléments.

Hope it helps

Source

2015-09-18 14:13:31

qui ne fonctionne pas pour moi @Ricardo. L'élément est atteint dans mon cas dans l'événement click button et j'obtiens une sortie 'console.log' mais la référence à' $ ('#myDialogName'). dialog ('close'); 'n'a aucun effet sur la boîte de dialogue tristement :(Similaire à Femke, j'ai essayé plusieurs approches, j'ai obtenu une référence d'objet à la boîte de dialogue juste après l'avoir initialisée puis reliée un clic sur le bouton, dans ce cas ça marche bien *, mais seulement la première fois que j'ouvre la boîte de dialogue *, la prochaine fois que le dialogue est lancé, le bouton * fermer * ne répond pas, il n'atteint même pas l'événement gestionnaire s'il vous plaît aider ! – Anurag

J'ai eu ce problème et commenté les jquery.js inclus dans le fichier en cours de chargement (fichier B), même si elle était le même fichier jquery.js exact qui avait été inclus dans l'appel fichier (fichier A). L'exemple suivant va PAS à moins que vous ne commentiez la balise <script src...> dans le fichier test.php chargé dans la boîte de dialogue.

test.html (J'utilise jquery-3.2.1 et jquery-ui 1.12.1) Test

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css"> 
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script> 
    <script src="../js/test.js" type="text/javascript"></script> 
    <script src="../js/jquery-ui.js" type="text/javascript"></script> 

</head> 
<body> 
<div id="contentsContainer"> 
    <button id="btnAddClient" name="btnAddClient">Add</button> 
</div> 
</body> 
</html>

test.js

$(document).ready(function() { 

    $("#contentsContainer").on('click', '#btnAddClient', function() { 
     var dlg = $("<div id=\"btnAddClientDlg\"/>").dialog({ 
      title: 'Add New Client', 
      modal: true, 
      autoOpen: false, 
      width: 720, 
      height: 420, 
      buttons: { 
       Save: function() { 
        $.post("../php/test.php"); 
        $('#btnAddClientDlg').dialog('destroy').remove(); 

       }, 
       Close: function() { 
        $('#btnAddClientDlg').dialog('close'); 
       } 
      } 
     }); 
     dlg.load("../php/test.php"); 
     dlg.dialog('open'); 
    }); 
});

.php

<!DOCTYPE html> 
<header> 
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script> 
</header> 
<?php 
    echo "hello"; 
?>

Source

2017-05-22 17:44:04 rob

La boîte de dialogue jQuery ne se ferme pas (avec les données .load)

Répondre

Questions connexes