I have the following form: <form action="delete.php" method="post"> <input type="hidden" name="id" value="<{$pid}>" /> <input type="hidden" name="picture" value="<{$lang_del_pic}>" /> <input type="image" src="<{xoImgUrl}>img/del-icon.gif" width="16" height="16" align="bottom" border="0" alt="Delete media" name="pictured" value="<{$lang_del_pic}>" onclick="javascript: return confirm('<{$lang_confirm_del}>');" /> </form> Code (markup): which calls standard confirmation window to delete file. Now I want it to be jQuery modal confirmation pop-up. I manage to call the popup, and it all works, but when I hit, "Confirm Delete" button - nothing happens - nothing ! Here is my scripts and new from: <form name="dialog-confirm" id="dialog-confirm" method="post"> <input type="hidden" name="id" value="<{$pid}>" /> <input type="hidden" name="picture" value="<{$lang_del_pic}>" /> <input type="image" src="<{xoImgUrl}>img/del-icon.gif" width="16" height="16" align="bottom" border="0" alt="Delete media" name="pictured" value="" id="opener" /> </form> Code (markup): and the script: <script type="text/javascript"> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! $("#dialog").dialog("destroy"); $("#dialog-confirm").html('This dialog will show every time!'); $("#dialog-confirm").dialog({ autoOpen: false, title: 'Kur za berbatov', resizable: false, height:140, modal: true, buttons: { 'Delete all items': function() { document.location = 'delete.php'; }, Cancel: function() { $(this).dialog('close'); } } }); $('form#dialog-confirm').submit(function(){ $("input#pictured").html($("input#pictured").val()); $('#dialog').dialog('open'); return false; }); $('input#opener').click(function() { $('#dialog-confirm').dialog('open'); }); }); </script> Code (markup): I have replaced document.location = 'delete.php'; Code (markup): with $('#dialog-confirm').submit(); Code (markup): and even tried this: document.dialog-confirm.submit(); Code (markup): but still nothing... Can anyone help here ?
I would go with Firebug and see if your $('#dialog-confirm').submit() fires. If it does, I would put a breakpoint in $('form#dialog-confirm').submit(function(){} and see whats going on there... I suspect that since you return false on that function the form won't submit....
Don't you mind that the id of the FORM and the DIV of the dialog share the same id? The following piece of your code will replace the INPUT children of the FORM $("#dialog-confirm").html('This dialog will show every time!'); Code (markup): Even if you leave that out, the following will also replace the childs of that FORM $("#dialog-confirm").dialog({ ..}); Code (markup): Maybe there is an odd rule that i dont get atm, but i think the problem is that you share the same id with FORM and dialog DIV tag (which i dont see you have posted) Regards
ok, here is the div: shoud I change the ID ? the breakpoint $('form#dialog-confirm').submit(function(){} deletes the file with now modal dialog at all...
I would say yes because your form.. <form name="dialog-confirm" id="dialog-confirm" method="post"> Code (markup): ..has the same id
I would change the id of the form including the selector where you submit that form. <form id="myform"> .. </form> Code (markup): buttons: { 'Delete all items': function() { $('#myform').submit(); }, Code (markup): I'm wondering why you are not using an ajax request to delete that file? Thats far easier to maintain and even better to handle w/o page transitions. $.getJSON('/delete.php',{filename:$('#filename'), token:'mysecrettokenhere'}, function(data) { var options = {}; if (data.result == 'ok') { alert('ok') } else { alert(data.msg); } } ); Code (markup): at delete.php add a return with json encoded array('result'=>'ok'); or array('result'=>'nada', 'msg' => 'permission denied'); Code (markup): Ok ok, you are new to jquery. I was not sure if you are but now its clear. No problem Hope you can trace what path i opened for you and if not just ask. I will answer tomorrow.
I do not just ask. I did DIG a lot in the net unfortunatelly, I can not manage to put it together even with what you have suggested. Could you spare some time to put the entire code together ? I will pay if you want
Its simple to get how it could work with ajax, just look at this example i made specially for you: test.php <?php /* * this php code checks a token */ function checktoken($t) { // token could be validated if needed or leaved out return true; } function deletefile($fn) { // delete your file here return true; } if (isset($_GET['token'])) { // getting in control of the cache header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // setting up json content type header('Content-type: application/json'); // retrieve token $token = $_GET['token']; $msg = ''; $result = 'ok'; if (!checktoken($token)) { $msg = 'invalid token'; $result = 'failed'; } else { // retrieve filename while removing illegal characters $filename = preg_replace('%[\\\\/:"*?<>|\r\n]+%', '', @$_GET['filename']); // check length if (strlen($filename) == 0) { $msg = 'invalid filename'; $result = 'failed'; } else { // delete the file if (deletefile($filename)) { $msg = 'The file ' .$filename. ' has been deleted'; } else { $msg = 'The file ' .$filename. ' can not be deleted'; } } } // preparing result container $aResults = array( 'result' => $result ,'msg' => $msg ); // sending result container echo json_encode($aResults); // bb exit; } ?> <!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" /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <style> .button {border: 1px solid gray } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> </head> <body> <!-- confirmation dialog --> <div id="delete-dialog" style="display:none"> <p> <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> These items will be permanently deleted and cannot be recovered. Are you sure? </p> </div> <!-- file remover formular --> <div id="delete-message"></div> <input type="hidden" id="delete-token" value="aTokenTheDatabaseKnowAbout"/> <input type="text" id="delete-filename" /><br /> <button id="delete-button">Delete</button> <script type="text/javascript"> /* starting when dom is ready */ $(function() { /* preparing the deletion dialog */ $("#delete-dialog").dialog({ autoOpen: false, title: 'Kur za berbatov', resizable: false, height:240, modal: true, buttons: { 'Delete all items': function() { /* doing the ajax call */ $.getJSON('test.php',{filename:$('#delete-filename').val(), token:$('#delete-token').val()}, function(data) { var options = {}; $('#delete-message').html(data.msg); if (data.result != 'ok') { $('#delete-message').css({'color':'red'}); } else { $('#delete-message').css({'color':'green'}); } } ); $(this).dialog('close'); }, Cancel: function() { // canceling out $(this).dialog('close'); } } }); /* bind of the delete button the button */ $("#delete-button").click(function(){ $("#delete-dialog").dialog('open'); }); // make it a real good looking button $("#delete-button").button(); }); </script> </body> </html> Code (markup):
I can not use the php. Please, can it be done without the token ? I have a build PHP wich checks if the filename exists and deletes the file, it works perfect. I can not just send fire it up with the jQuery dialog delete button. Please if you can do it without the php, as I said , I will pay some small ammount for this
The token isnt really necessary, just leave it out. Sure, you can use your own "delete.php" if you like, just change $.getJSON('test.php',{filename:$('#delete-filename').val(), token:$('#delete-token').val()}, Code (markup): to $.getJSON('delete.php',{filename:$('#delete-filename').val()}, Code (markup): and the filename of the input field gies straight to your delete.php. Remind to add the correct json result to your delete.php.
It works good. I did replace everything as you have sugegsted and the form is: <div id="delete-message"></div> <input type="hidden" name="id" id="delete-token" value="<{$pid}>" /> <input type="hidden" name="picture" id="delete-filename" value="<{$lang_del_pic}>" /> <button id="delete-button">Delete</button> Code (markup): The only thing is that when I hit Delete button (on the modal dialog) it just closes the dialog - does not fire the delete php, and I have placed this: $.getJSON('delete.php',{filename:$('#delete-filename').val()}, Code (markup): instead of: $.getJSON('test.php',{filename:$('#delete-filename').val(), token:$('#delete-token').val()}, Code (markup): I assume the delete <{$pid}> from "delete-token" is not passed.
1. Check that 'delete.php' is requested (use "firebug" -> network pane or lookup your apache log) 1.1 when delete.php is requested: check that the correct filename is at the argumentlist eg. "file_put_contents('debug.log', print_r($_GET));" at delete.php first line) 1.2 when delete.php is not requested: check if anything happend when you press "Delete" button .. eg. put alert('bang') into the button block before the ajax call 2. ask again
Here is what happens when I delete the usual working way: 15.203.137.73 - - [26/May/2010:15:18:05 +0300] "GET /js/jquery/development-bundle/ui/jquery.ui.mouse.js HTTP/1.1" 404 329 "http://7est2.mqsto.com/photo/delete.php" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:18:04 +0300] "POST /photo/delete.php HTTP/1.1" 200 95880 "http://7est2.mqsto.com/photo/27655" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:18:05 +0300] "GET /js/jquery/development-bundle/ui/jquery.ui.button.js HTTP/1.1" 404 330 "http://7est2.mqsto.com/photo/delete.php" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:18:05 +0300] "GET /js/jquery/development-bundle/ui/jquery.ui.draggable.js HTTP/1.1" 404 333 "http://7est2.mqsto.com/photo/delete.php" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" Code (markup): And here is when I press the jQuery dialog delete: 15.203.137.73 - - [26/May/2010:13:33:16 +0300] "GET /photo/delete.php?filename=%D0%98%D0%97%D0%A2%D0%A0%D0%98%D0%99+%D0%A2%D0%90%D0%97%D0%98+%D0%A1%D0%9D%D0%98%D0%9C%D0%9A%D0%90&token=27654 HTTP/1.1" 200 2493 "http://7est2.mqsto.com/photo/27658?album=621&pos=2&pid=27655" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" Code (markup): Seems I do not post the variables to the delete.php
GET could work also! No need to use a POST request unless really necessary and if "ИЗТРИЙ ТÐЗИ СÐИМКÐ" ist the name of the file everything should be fine then. $filename = $_GET['filename'] Code (markup):
nope, it is not the name of the file. Actually there are few files as you can see in the example above. "ИЗТРИЙ ТÐЗИ СÐИМКÐ" is this <{$lang_del_pic}> This means Delete this picture... nothing special. The filename is not provided in the form, only the picture ID <{$pid}> is passed to delete.php, delete.php aquires info from DB what files to be deleted and then all files deleted (2-3 files - thimbs normal and original sizes) from delete.php file
Ok , then just pass that ID and remove all about the filename yourhtml.html $.getJSON('delete.php',{token:$('#delete-token').val()}, Code (markup): delete.php $pid = $_GET['token']; Code (markup):
nothing. I have in my delete.php this $pid = (int)$_POST['id']; replaced it with: $pid = $_GET['token']; Can we just submit the original form with the jQuery delete button ?
did you $.getJSON('delete.php',{token:$('#delete-token').val()}, Code (markup): ? Please post firebug output
<script type="text/javascript"> 158/* starting when dom is ready */ 159$(function() { 160 161 162 /* preparing the deletion dialog */ 163 164 $("#delete-dialog").dialog({ 165 autoOpen: false, 166 title: 'Kur za berbatov', 167 resizable: false, 168 height:240, 169 modal: true, 170 buttons: { 171 'Delete all items': function() { 172 173 /* doing the ajax call */ 174 $.getJSON('delete.php',{token:$('#delete-token').val()}, 175 function(data) { 176 var options = {}; 177 $('#delete-message').html(data.msg); 178 if (data.result != 'ok') { 179 $('#delete-message').css({'color':'red'}); 180 } else { 181 $('#delete-message').css({'color':'green'}); 182 } 183 } 184 ); 185 186 $(this).dialog('close'); 187 }, 188 Cancel: function() { 189 // canceling out 190 $(this).dialog('close'); 191 } 192 } 193 }); 194 195 /* bind of the delete button the button */ 196 $("#delete-button").click(function(){ 197 $("#delete-dialog").dialog('open'); 198 }); 199 // make it a real good looking button 200 $("#delete-button").button(); 201 202}); 203</script> 204<!-- jQuery UI modal end --> Code (markup): and access info: 15.203.137.73 - - [26/May/2010:15:41:28 +0300] "GET /photo/undefined HTTP/1.1" 200 2490 "-" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:29 +0300] "GET /themes/exnews/js/jquery/development-bundle/themes/base/images/ui-bg_diagonals-thick_20_666666_40x40.png HTTP/1.1" 304 - "http://7est2.mqsto.com/themes/exnews/js/jquery/development-bundle/themes/base/jquery.ui.theme.css" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:29 +0300] "GET /themes/exnews/js/jquery/development-bundle/themes/base/images/ui-bg_gloss-wave_35_f6a828_500x100.png HTTP/1.1" 304 - "http://7est2.mqsto.com/themes/exnews/js/jquery/development-bundle/themes/base/jquery.ui.theme.css" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:29 +0300] "GET /themes/exnews/js/jquery/development-bundle/themes/base/images/ui-icons_ffffff_256x240.png HTTP/1.1" 304 - "http://7est2.mqsto.com/themes/exnews/js/jquery/development-bundle/themes/base/jquery.ui.theme.css" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:29 +0300] "GET /themes/exnews/js/jquery/development-bundle/themes/base/images/ui-bg_glass_100_fdf5ce_1x400.png HTTP/1.1" 304 - "http://7est2.mqsto.com/themes/exnews/js/jquery/development-bundle/themes/base/jquery.ui.theme.css" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:30 +0300] "GET /themes/exnews/js/jquery/development-bundle/themes/base/images/ui-icons_ef8c08_256x240.png HTTP/1.1" 304 - "http://7est2.mqsto.com/themes/exnews/js/jquery/development-bundle/themes/base/jquery.ui.theme.css" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" 15.203.137.73 - - [26/May/2010:15:41:30 +0300] "GET /photo/delete.php?token=27653 HTTP/1.1" 200 2493 "http://7est2.mqsto.com/photo/27653" "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9" Code (markup):