1

I have a jQuery Dialog, When you click in a image the dialogs open and you must be confirm if you want to delete. Yes or No.

I do this with three files:

The main file index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aircrafts</title>
    <link rel="stylesheet" type="text/css" href="../../../lib/css/style.css">
    <link rel="stylesheet" href="../../../lib/css/flick/jquery.ui.all.css">
    <script src="../../../lib/js/jquery.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.button.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.core.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.widget.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.mouse.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.button.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.draggable.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.position.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.resizable.js"></script>
    <script src="../../../lib/js/ui/jquery.ui.dialog.js"></script>


<script>
$(function() {
    $( "#loadingdialog" ).dialog({
        autoOpen: false,
        width: 300,
        height: 65
    });

    $("#loadingdialog").dialog('widget').find(".ui-dialog-titlebar").hide();
    $("#loadingdialog").dialog('widget').find(".ui-resizable-se").hide();


    $( "#confirmdialog" ).dialog({
        autoOpen: false
    });

    $("#confirmdialog").dialog('widget').find(".ui-resizable-se").hide();


});

    if (window.XMLHttpRequest)
            {
            ajax=new XMLHttpRequest();
            }
        else
            {
            ajax=new ActiveXObject("Microsoft.XMLHTTP");
            }

    function confirmdelete(str){

    var loading = $("#loadingdialog").dialog('open');
    var confirm = $("#confirmdialog");
        confirm.load("./confirm_dialog.php?icao="+str, function(){
        loading.dialog('close');
        confirm.dialog('open');
        $('#yes').blur();
        });
    }

    function remove(str){

    var loading = $("#loadingdialog").dialog('open');
        confirm.load("./delete_aircarft.php?icao="+str, function(){
        refreshTable(function(){loading.dialog('close');});
        refreshTable(function(){$('#result').fadeIn(); document.getElementById('result').innerHTML=ajax.responseText;});
        setTimeout(function() { $('#result').fadeOut() }, 5000);

        });
    }

    function close(){

    $("#confirmdialog").dialog('close');

    }
</script>
</head>
<body>

<div id="result"></div></br>

<div id="loadingdialog"><center><p><img src="../../../lib/images/loading.gif"></center></p></div>

<div id="confirmdialog"></div>

<img src="../../../lib/images/cross.png" onclick="confirmdelete('B737')">

</body>
</html>

The confirm_dialog.php:

<script>
    $("#yes")
        .button()
        .click(function(event) {
    });

    $("#no")
        .button()
        .click(function(event) {
    });
</script>

<h2><font face="century Gothic">Are you sure?</font><h2><hr size="1">

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<tr><td><input id="yes" type="submit" value="Yes" onclick="remove('<?php echo $_GET["icao"]; ?>')"></td>&nbsp&nbsp&nbsp<td><input id="no" type="submit" value="No" onclick="close()"/></td></tr>

And the delete_aircraft.php (At the moment this file only shows the ICAO that obtain, in the future I´m going to prepare it for delete, but It isn´t a problem):

<?php echo $_GET["icao"]; ?>

The problem is when the dialog opens, you can click Yes or No, but If you click Yes or No there isn´t any action.

7
  • 1
    Put the actions into the empty click handlers you added for #yes and #no
    – bfavaretto
    Jan 18, 2013 at 19:36
  • Ok, but it isn´t the problem! Jan 18, 2013 at 19:37
  • @user1972864 The problem as it was stated is that nothing happens. You haven't implemented anything. So it is normal behaviour.
    – Tchoupi
    Jan 18, 2013 at 19:38
  • 1
    Also, the buttons aren't in the DOM when the script executes. Need Document ready or similar. For my money, instead of document ready, delegate listening to a parent element of some sort. Jan 18, 2013 at 19:39
  • Please Can you put the code that I need to fix it? Jan 18, 2013 at 19:46

2 Answers 2

3

Why not use the Dialog's built-in buttons?

$( "#confirmdialog" ).dialog({
  autoOpen: false,
  buttons: {
    "Yes": function() {
      // YOUR ACTION HERE //
      $( this ).dialog( "close" );
    },
    "No": function() {
      $( this ).dialog( "close" );
    }
  }
});

EDIT: Update your remove function to load the dialog with the buttons and the required variable: no need to load an external PHP file. Also, set the animation when you create the dialog - no need for all these extra handlers.

$( "#confirmdialog" ).dialog({
  autoOpen: false,
  show: "fade",  // Fade In
  hide: "fade"   // Fade Out
});


function remove(str){

  // Set the button action.  str is available here
  $( "#confirmdialog" ).dialog("option", "buttons", {
    "Yes": function() {
      // YOUR ACTION HERE //
      // str has the value of your "icao" variable
      $( this ).dialog( "close" );
    },
    "No": function() {
      $( this ).dialog( "close" );
    }
  });

  // Open the dialog
  $( "#confirmdialog" ).dialog("open");
}
5
  • Because I need to send the ICAO with the button. And the ICAO in the final document is in a PHP while! Jan 18, 2013 at 19:43
  • Ok, I see. In that case, move your <script> block below the HTML, or change it to <script defer>...</script> and that should work. Jan 18, 2013 at 19:46
  • Thought it looks like you have the value when you open the dialog - so you shouldn't need to pass it to the PHP at all (see str): confirm.load("./delete_aircarft.php?icao="+str Jan 18, 2013 at 19:48
  • Does that page have jQuery included? Jan 18, 2013 at 19:56
  • Ok. To me, it looks like you don't need to load confirm_dialog.php at all, and can do it right from the javascript. I'll update my answer with that code. Jan 18, 2013 at 20:05
2

That's because you haven't put anything there..

$("#yes")
        .button()
        .click(function(event) {
    // do something
    });

$("#no")
        .button()
        .click(function(event) {
    // do something
    });
2
  • 1
    Not exactly the problem. Sure, nothing's being done. But it's also that the script is executing before the DOM is built and the nodes probably aren't there to have an event bound to them. Jan 18, 2013 at 19:42
  • I think the problem might also be that the Yes and No buttons do not exist when the handlers are created. The script should be moved to below the HTML, or add defer to the <script> attributes. Jan 18, 2013 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.