Solved

Jquery highslide combo autoclose window

Posted on 2013-02-01
29
652 Views
Last Modified: 2013-02-01
Hi,

Thanks to Leakim I almost got my setup using jquery and Highslide working as wanted.

I'm using highlide to open an iframe where I have a picture that can be updated or deleted with two different forms.

Now I'm using Jquery dialog to confirmation of when user clicks the delete submit button. Jquery then ask are you sure you want to delete the picture, accepting this closes jquery dialog window and php takes care of the deleting the picture. Now the only thing I like to achieve here after the picture is deleted the highslide windows stays open, but I would like it to autoclose after 3 seconds and update the main page with a and url like: index.php?id=2&success=1.

here some info:
jquery script for dialog confirmation:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


and here how I call it using php on highslide iframe with form:
	//Delete picture form with jquery dialog
	echo "<form name=\"delForm\" id=\"delForm\" enctype=\"multipart/form-data\" method=\"post\" action=\"\">";
	echo ('<input type="hidden" name="delete" value="" /><input type="hidden" name="img" value="'.$imageid_.'" />').PHP_EOL;
	echo ('<div><input type="hidden" name="folder" value="'.$folder_.'" /><input type="hidden" name="filename" value="'.$filename_.'" /><input type="hidden" name="thumb" value="'.$thumbnail_.'" /><input type="hidden" name="default" value="'.$defaultphoto_.'"/>').PHP_EOL;
	
echo "<a href=\"#\" id=\"delete-button\"><img title=\"Remove picture?\" onMouseOver=\"this.src='../png/poista_kuva_over.png'\" onMouseOut=\"this.src='../png/poista_kuva.png'\" src=\"../png/poista_kuva.png\" /></a></div></form>".PHP_EOL;
                                            
   echo ('<div id="dialog-confirm"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Picture will be deleted permanently, are you sure?</p></div>'); 

Open in new window


Any way to do this?

Regards,

Toby
0
Comment
Question by:Toube
  • 15
  • 13
29 Comments
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          setTimeout(function(){
            $( this ).dialog( "close" );
               window.location.href = '/index.php?id=2&success=1';
           }, 3000);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
 

Author Comment

by:Toube
Comment Utility
Hi, thanks for you suggestion, no luck though. Highslide windows stays opened when it should be closed after 3 seconds and main page should be refreshed.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Try this:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          setTimeout(function(){
           console.log('timeout was triggered'); // debugging: see if the timeout is triggered in console
            $( '#dialog-confirm' ).dialog( "close" );
               window.location.href = '/index.php?id=2&success=1';
           }, 3000);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

debugging: see if the timeout is triggered in your console
0
 

Author Comment

by:Toube
Comment Utility
Hi you mean firebug console? It's not giving any messages when deleting the pictures?
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Yeah, I mean firebug console or IE developer tools console, or safari/chromes developer tools console.

Do you mean the modal window when you refer to the "highslide window"?
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
The form submit should provoke a page refresh or a redirect to the action attribute in your form, does that happen?
0
 

Author Comment

by:Toube
Comment Utility
Ok, no I mean the highslide iframe popup window itself.
no refresh or redirects happens.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Yeah well, this is important information which was missing in your question. Highslide is an Iframe and as such it only can be addressed in a certain way. This jquery you posted here: is it within the iframe or on the parent page?

A full working example either as a zip or an online testing version would be great to help you out.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Or are you confusing the terms here? iframe is not equal to modal window which is an element within the same dom. The iframe instead represents a seperate dom itself.
0
 

Author Comment

by:Toube
Comment Utility
Hi, thanks for quick replies:
it's withing the Iframe itself file editphotos.php

Here see it for yourself:

http://intra.tobiasfransman.net/profiili/index.php?id=2
user: guest
pass: guest321

add some pictures that are under 250kb of size.

the red button is for deleting and the gray button is for updating.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Ok so try this:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          setTimeout(function(){
           console.log('timeout was triggered'); // debugging: see if the timeout is triggered in console
            $( '.closebutton-red' ).trigger( "click" );
               window.location.href = '/index.php?id=2&success=1';
           }, 3000);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
 

Author Comment

by:Toube
Comment Utility
No go yet.. should the $( '.closebutton-red' ).trigger( "click" ); be called with an id?
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Your iframe is in a modal. In that iframe another modal is created. That's pretty funky to think of how to address the right elements in there.

Try if that works:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          setTimeout(function(){
           console.log('timeout was triggered'); // debugging: see if the timeout is triggered in console
               parent.$(".closebutton-red").trigger('click');
               parent.window.location.href = '/index.php?id=2&success=1';
           }, 3000);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
 

Author Comment

by:Toube
Comment Utility
Jeps.. could be hard to get it working.. no iframe still stays open :)
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Ok try to leave out the form submit function on line 10 in the block of code above. If that line is causing the timeout not to trigger then you'll have to submit your form via ajax instead of just submitting it, because this causes the script to refresh the iframe within the modal and so every running javascript will be discarded and so the timeout.
0
 

Author Comment

by:Toube
Comment Utility
If I leave out the submit.. it won't accept the dialogs confirmation and the dialogs cancel button only works..
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
I've tried the modified code and the timeout is triggered correctly although it says jquery is not defined. See screenshot.

Your only way of workaround this problem is to send the form via ajax, so the timeout can finish to countdown as supposed. Then debugging how to close the winsow won't be so much trouble.

The ajax solution:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
                    setTimeout(function(){
           console.log('timeout was triggered'); // debugging: see if the timeout is triggered in console
               $(".closebutton-red").trigger('click');
               parent.window.location.href = '/index.php?id=2&success=1';
           }, 3000);
           }
           });

         
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
 

Author Comment

by:Toube
Comment Utility
Nice,
Will try it out in a while and see if it works:)
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Try this too :
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( "#delete-button" ).click(function() {
       $( "#dialog-confirm" ).dialog( "open" );
       parent.window.setTimeout(new function() { try { hs.close(); } catch(e) {} }, 2000); 
    })

})   

Open in new window

0
 

Author Comment

by:Toube
Comment Utility
Thanks for both of your answers. The ajax solution is closer to solving my problem.
No the refresh is working and refreshing the main page but dialog accept button is not working and picture is not deleted, only cancel button closes the dialog..

Still if I select delete picture it refreshes the main page but no picture deletion :) Getting there.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
It helps to look in the data which the server sends back within the success function. Write that out in the console, too. The deletion failure may be on the php side of code.

Just do a console.log(data); within the success function.
0
 

Author Comment

by:Toube
Comment Utility
Did a console log.. but the deletion is not going forward when clicking on the dialogs button Delete picture (dialog does not close) it just triggers the automatic refresh in the background.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Did you do this:
$.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
                    setTimeout(function(){
           console.log(data); // see what your php is sending back
               $(".closebutton-red").trigger('click');
               parent.window.location.href = '/index.php?id=2&success=1';
           }, 3000);
           }
           });

Open in new window


This php image deletion, where is it happening, we havn't seen this code yet.
0
 

Author Comment

by:Toube
Comment Utility
Yes I tried this whole script:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           console.log('timeout was triggered'); // debugging: see if the timeout is triggered in console
               $(".closebutton-red").trigger('click');
			   console.log(data);
			   parent.window.location.href = '/profiili/index.php?id=2&success=1'; 
           }, 2000);
           }
           });
        
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


That almost works but the only problem is still that the confirmation of the deletion is not working... jquery deletion dialog stays open and doesn't go forward when clicking yes to delete picture question.
0
 

Author Comment

by:Toube
Comment Utility
the php deletion is on same editphotos.php iframe:

if(isset($_POST['delete']))
{
$default= $_POST["default"];
$img= $_POST["img"];
$folder= $_POST["folder"];
$filename= $_POST["filename"];
$thumb= $_POST["thumb"];

//Delete photo from database
$delete="delete from userphotos WHERE user_='$user' AND id='$img'";
mysql_query($delete);

//Delete photo from server

$target_path = "/home/tobiasfr/public_html/intra/profiili/userAlbums/$folder/";

$deletephoto_ = $target_path.$filename;
$deletethumb_ = $target_path.$thumb;
$fh = fopen($deletephoto_, 'w') or die("can't open file");
fclose($fh);
unlink($deletephoto_);

$ft = fopen($deletethumb_, 'w') or die("can't open file");
fclose($ft);
unlink($deletethumb_);
}

Open in new window

0
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
Comment Utility
Ok, one last attempt from my side:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           console.log(data); // debugging: see if the timeout is triggered in console
               $(this).dialog('close');
               parent.refreshWindow();  // this function must be declared two levels above this window
               parent.$('.closebutton-red').trigger('click'); // this closes the modal window
               
           }, 2000);
           }
           });
        
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


// you have to declare another function outside the iframe which handles the refresh


function refreshWindow() {
setTimeout(function(){
  window.location.href = "/index.php?yourgetparameter=success";
}, 500);
}

Open in new window


The reason why you must declare another function outside the iframe you're closing, is when it is closed it cannot fire the refresh, and if you fire the refresh before closing it, ti will force the iframe to close before the ajax method can be successful in some circumstances. If you're happy with just closing the modal by forcing the refresh then you're closing problem will be solved immediatley, but kind of a ugly hack.

Better will be to debug your deletion first, then make the iframe window close work, then writing the refresh callback on the parent window of the iframe.

Good Luck and bye bye,
mcnute
0
 

Author Comment

by:Toube
Comment Utility
Thanks for helping me out.. couldn't get it to work it still doesn't delete the picture when accepting the dialog.. my coding skills kind of suck sry about that :)
0
 

Author Comment

by:Toube
Comment Utility
this part seems to be the stopper with dialog not closing and form not getting the information for deletion..
success: function(data) {
          setTimeout(function(){
           console.log(data); // debugging: see if the timeout is triggered in console
               $(this).dialog('close');
0
 

Author Comment

by:Toube
Comment Utility
Firebug console:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
error()jquery-1.8.3.js (line 477)
msg = 

"cannot call methods on ... to call method 'close'"

(?)()jquery...stom.js (line 492)
each()jquery-1.8.3.js (line 611)
obj = 

Object[Window editphotos.php?id=752#]

callback = function()
args = 

undefined

each()jquery-1.8.3.js (line 241)
callback = function()
args = 

undefined

bridge()jquery...stom.js (line 487)
options = 

"close"

success()

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now