Solved

Highslide on form submit autoclose after 3 seconds

Posted on 2013-01-31
45
1,575 Views
Last Modified: 2013-01-31
Hi,

I'm using Highslides iframe function to update or delete pictures with forms.
Now what I'm looking is when deleting a picture and hitting the submit button it first asks of confirmation and when confirming it, it would wait for 3 seconds and the close the highslide iframe window.

I got working so that when hitting submit button the highslide iframe window closes immediately.

calling the Iframe:
echo "<a href=\"editphotos.php?id=$imageid_\" class=\"highslide\" id=\"delform\" onclick=\"return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )\" title='Image: $filename_ $default'><img src=\"userAlbums/$folder_/$thumbnail_\" style=\"border: none; width: 150px; height: 100px; padding: 5px;\" alt=\"$text_original\" title=\"$text_original\"/></a>";

Open in new window

and in the editphotos.php file I'm using a javascript like this:
<script language="javascript" type="text/javascript">
function alertFunction()
{
	var answer = confirm("Are you sure you?")
		function closeMe() {
       try {
          parent.window.hs.close();
       } catch (e) {}
   }
   setTimeout('closeMe()', 2000); 
	if (answer){

	return closeMe();
	}
	else{
		return false;
	}
	document.getElementById("delphoto").innerHTML=x;

}
</script>

Open in new window

The form looks like this:
echo "<form name=\"Delform_\" enctype=\"multipart/form-data\" method=\"post\" action=\"\">";
	echo ('<input type="hidden" name="delete" value="" /><input type="hidden" name="img" value="'.$imageid_.'" />');
	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_.'"/>');
		echo "<input type=\"image\" id=\"delphoto\" onclick=\"alertFunction()\" onMouseOver=\"this.src='../png/poista_kuva_over.png'\" onMouseOut=\"this.src='../png/poista_kuva.png'\" src=\"../png/poista_kuva.png\" /></div></form>";

Open in new window


Somebody wanna help me get this to work?

Thanks,

Toby
0
Comment
Question by:Toube
  • 25
  • 20
45 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38839261
please right click on your page, choose view source and post it here. thanks
0
 

Author Comment

by:Toube
ID: 38839317
Hi Leakim,
do you want the source of main page or iframe page or both?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38839394
the main page, thanks
0
 

Author Comment

by:Toube
ID: 38839462
Ok here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" >
<head>

<title>Fransmans.net </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta content="Fransmans facebook" name="Fransmans.net" />
    <meta content="MSHTML 6.00.2800.1106" name="GENERATOR" />
	<script language="javascript" type="text/javascript" src="../java/Highslide/highslide/highslide-full.js"></script>
	<link rel="stylesheet" type="text/css" href="../java/Highslide/highslide/highslide.css"/>	
	<link rel="stylesheet" type="text/css" href="../css/reset.css" />
	<link rel="stylesheet" type="text/css" href="../css/fransmans.css" />
	<link rel="icon" type="image/x-icon" href="http://intra.tobiasfransman.net/png/talo.ico" />
<script type="text/javascript">
hs.graphicsDir = '../java/Highslide/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
hs.showCredits = false;
hs.headingId = 'close';
hs.width = 640;
hs.height = 350;
</script>
<script type="text/javascript">
hs.Expander.prototype.onAfterGetHeading = function (sender) {
   if (sender.heading) {
      sender.heading.innerHTML += this.a.title;
   }
}
</script>

</head>

<body>


<a name="sivun_alkuun"></a>
<div class="wrapper">
<div class="banner">
<div class="logout"><span class="logoutLink"><a href="http://intra.tobiasfransman.net/hallinta/logout.php">Kirjaudu ulos</a></span></div>
<div class="pageLinks">

<ul><li style="float: left; padding-right: 10px;"><a href="../"><img onMouseOver="this.src='../png/etusivu_over.png'"
	onMouseOut="this.src='../png/etusivu.png'" src="../png/etusivu.png" style="border: none;" alt="etusivu"/></a></li>
<li style="float: left; padding-right: 5px;"><a href="../uutiset"><img onMouseOver="this.src='../png/uutiset_over.png'"
	onMouseOut="this.src='../png/uutiset.png'" src="../png/uutiset.png" style="border: none;" alt="uutiset"/></a></li>
<li style="float: left; padding-right: 10px;"><a href="index.php"><img src="../png/profiili_active.png" style="border: none;" alt="profiili"/></a></li>
<li style="float: left; padding-right: 10px;"><a href="../foorumi"><img onMouseOver="this.src='../png/foorumi_over.png'"
	onMouseOut="this.src='../png/foorumi.png'" src="../png/foorumi.png" style="border: none;" alt="foorumi"/></a></li>
<li style="float: left; padding-right: 10px;"><a href="../albumi"><img onMouseOver="this.src='../png/albumi_over.png'"
	onMouseOut="this.src='../png/albumi.png'" src="../png/albumi.png" style="border: none;" alt="albumi"/></a></li>
<li style="float: left; padding-right: 5px;"><a href="../kayttajat"><img onMouseOver="this.src='../png/kayttajat_over.png'"
	onMouseOut="this.src='../png/kayttajat.png'" src="../png/kayttajat.png" style="border: none;" alt="käyttäjät"/></a></li>
<li style="float: left; padding-right: 5px;"><a href="../linkit"><img onMouseOver="this.src='../png/linkit_over.png'"
	onMouseOut="this.src='../png/linkit.png'" src="../png/linkit.png" style="border: none;" alt="linkit"/></a></li>
<li style="float: left;"><a href="../hallinta"><img onMouseOver="this.src='../png/hallinta_over.png'"
	onMouseOut="this.src='../png/hallinta.png'"  src="../png/hallinta.png" style="border: none;" alt="hallinta"/></a></li>	
</ul>
</div>
</div>
<div class="topBar">
<div style="padding-top: 5px; margin-left: 10px; float: left;"><img src="../png/profiili_bar.png" style="border: none;" alt="profiili"/></div>
<div style="float: left; margin-left: 500px; padding-left: 15px; width: 120px;"><a href="index.php?id=1"><img src="../png/profiilin_tiedot.png" style="border: none;" alt="Profiilin tiedot"/></a></div><div style="float: left; height: 46px; padding-left: 15px; width: 120px;" class="activeBarBg"><a href="index.php?id=2"><img src="../png/profiilin_kuvat_active.png" style="border: none;" alt="Profiilin kuvat"/></a></div></div>
<a name="sivu_alkuun"></a>




<div class="wrapperPage"><div id="breadCrumbs"><div style="float: left;"><h1>Profiili</h1></div></div><div id="infoBox"><div class="TopInfoBox"><div>Lisää, muokkaa tai poista oman profiilin alla olevia kuvia!</div></div></div><div id="dBar"></div><div id="mainInfo"><div class="PageTopBar"><div style="padding: 5px;"><img src="../png/profiilin_kuvat_bar.png" style="border:none;" alt="Profiilin kuvat" /></div></div><div class="PageSisalto"><div style="margin-left: 13px; padding-top: 10px;">
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=492" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: Eirik_ute_t.jpg '>
<img src="userAlbums/Tobba/tn_Eirik_ute_t.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="Eirik ute och leker vid salpar skola" title="Eirik ute och leker vid salpar skola"/></a>
<div style="margin-left: 5px;">Eirik ute och leker ...</div></div>
<div style="float: left; border: 2px solid #b2222f; padding: 3px 3px 3px 3px; margin: 5px;">
<a href="editphotos.php?id=495" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: eirik_med_bilen.jpg <span style="font-weight: bold;">(Oletuskuva)</span>'>
<img src="userAlbums/Tobba/tn_eirik_med_bilen.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="Eirik med trehjulingen" title="Eirik med trehjulingen"/></a>
<div style="margin-left: 5px; font-weight: bold;">Eirik med trehjuling...</div></div>
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=496" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: rutsa_t.jpg '>
<img src="userAlbums/Tobba/tn_rutsa_t.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="Rutschandet i hoplop" title="Rutschandet i hoplop"/></a>
<div style="margin-left: 5px;">Rutschandet i hoplop</div></div>
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=547" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: eirik_ibilen.jpg '>
<img src="userAlbums/Tobba/tn_eirik_ibilen.png" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="Eirik i bilen" title="Eirik i bilen"/></a>
<div style="margin-left: 5px;">Eirik i bilen</div></div>
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=622" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: 009.jpg '>
<img src="userAlbums/Tobba/tn_009.png" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="" title=""/></a>
<div style="margin-left: 5px;">&nbsp;</div></div>
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=626" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: 012.jpg '>
<img src="userAlbums/Tobba/tn_012.png" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="" title=""/></a>
<div style="margin-left: 5px;">&nbsp;</div></div>
<div style="float: left; border: 1px solid #dadada; padding: 3px 3px 5px 3px; margin: 5px;">
<a href="editphotos.php?id=627" class="highslide" id="delform" onclick="return hs.htmlExpand(this, {contentId: 'iframepop', objectType: 'iframe', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )" title='Kuva: 014.jpg '>
<img src="userAlbums/Tobba/tn_014.png" style="border: none; width: 150px; height: 100px; padding: 5px;" alt="" title=""/></a>
<div style="margin-left: 5px;">&nbsp;</div></div>
<div class="highslide-heading" id="close"><div class="close">
    <a href="javascript:;" onclick="return hs.close(this)" title="Close"></a></div>
	</div>
<div style="clear: both;"></div>
<div style="margin-top: 30px; font-size: 16px; margin-bottom: 10px; width: 545px; border-bottom: 1px solid #dadada;"><h2>Kuvien hallinta</h2></div>
    <div style="margin-top: 10px; margin-bottom: 10px; font-size: 14px;">Lataa <b><span style="font-weight: bold; color: #fff; background-color: #b22331; padding-left: 2px; padding-right: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;">13</span> kpl</b> omia kuvia oman profiilisi alle muiden n&auml;ht&auml;v&auml;ksi</div>

    <!--
        SOME THINGS TO NOTE ABOUT THIS FORM...
        ENCTYPE IN THE HTML <FORM> STATEMENT
        MAX_FILE_SIZE MUST PRECEDE THE FILE INPUT FIELD
        INPUT NAME= IN TYPE=FILE DETERMINES THE NAME YOU FIND IN $_FILES ARRAY
        ABSENCE OF ACTION= ATTRIBUTE IN FORM TAG CAUSES POST TO SAME URL
    -->
	<div style="font-size: 14px;">
    <form name="UploadForm" enctype="multipart/form-data" method="post" action="">
    <input type="hidden" name="MAX_FILE_SIZE" value="250000" />
    <div style="margin-top: 10px;">
	<br />
    </div>

 <div style="float: left; width: 200px; padding-bottom: 3px; padding-top: 3px;">Valitse kuva:</div><div style="float: left; padding-bottom: 3px; padding-top: 3px;"><input name="userfile" type="file" size="40" /></div><div style="clear: both;"></div>
<div style="float: left; width: 200px; padding-bottom: 3px; padding-top: 3px;">Kuvan kommentti:</div><div style="float: left; padding-bottom: 3px; padding-top: 3px;"><input name="text" type="text" size="40" /></div><div style="clear: both;"></div>
<input type="hidden" name="w" value="150" />
		<input type="hidden" name="h" value="100" />
		<div style="float: left; width: 196px; padding-bottom: 3px; padding-top: 3px;">Korvaa olemassa oleva kuva:</div><div style="float: left; padding-bottom: 3px; padding-top: 3px;"><input type="checkbox" name="overwrite" /></div><div style="clear: both;"></div><div style="margin-left: 3px; padding-top: 15px; margin-left: 685px;"><input type="hidden" name="submit" value="" /><input type="image" onMouseOver="this.src='../png/lataa_kuva_over.png'" onMouseOut="this.src='../png/lataa_kuva.png'" src="../png/lataa_kuva.png" /></div>
		</form></div>
<div style="clear: both;">&nbsp;</div></div>
</div>
</div>
</div><div id="footer"></div><div class="onlineUsers"><span class="whosOnlineLinks"><a href="http://intra.tobiasfransman.net/kayttajat/index.php?id=0"><span style="font-weight: bold; font-size: 13px;">Tobba</span></a></span></div></div>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38840381
replace : onclick=\"alertFunction()\"
by : onclick=\"return alertFunction();"
0
 

Author Comment

by:Toube
ID: 38840413
Thanks,

it still closes the highslide iframe window immediately after hitting the submit and answering yes to the confirmation.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38840477
if you answer "yes" you don't want to close?
0
 

Author Comment

by:Toube
ID: 38840524
Yes but, I want it to close but it should wait for 3 seconds or so and then it should automatically close.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38840544
when you use a native javascript modal function (alert, confirm, prompt) you block execution of the next lines of code so it never reach your time
You need to use a css modal box instead native js modal box
for example use this : http://www.bitrepository.com/stylish-javascript-dialog-boxes.html
0
 

Author Comment

by:Toube
ID: 38840812
Ok will look those through..
0
 

Author Comment

by:Toube
ID: 38841047
Ok I'm trying to get this to work:
http://jqueryui.com/dialog/#modal-confirmation

But I'm not sure how to call with the form submit action?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841068
$(function() {

$("form").submit(function(evt) {
     evt.preventDefault();

    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
     
})

  });

Open in new window

0
 

Author Comment

by:Toube
ID: 38841103
Thanks, ok and how do I call up on it when submitting the form: onclick=\"return dialog-confirm();\" ??
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841112
you remove it (the onclick), it's more than useless now you're in jQuery world...
0
 

Author Comment

by:Toube
ID: 38841143
:) ok here how it looks now.. I'm using a input type hidden with name="delete" so I change this $("form").submit(function(evt) { to this $("form").delete(function(evt) { and now the picture is deleted but no warning message appears:

	echo "<form name=\"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 "<input type=\"image\" id=\"dialog-confirm\" title=\"Delete the picture?\" onMouseOver=\"this.src='../png/poista_kuva_over.png'\" onMouseOut=\"this.src='../png/poista_kuva.png'\" src=\"../png/poista_kuva.png\" /></div></form>".PHP_EOL;
		echo ('</div><div style="clear: both;">&nbsp;</div>').PHP_EOL;	

Open in new window

0
 

Author Comment

by:Toube
ID: 38841212
Hold on.. fixing my jquery paths...
0
 

Author Comment

by:Toube
ID: 38841236
the jqury paths were wrong and now it work.. except when saying yes to the confirmation it won't submit the form and the picture is not deleted..
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841264
so replace :
		echo "<input type=\"image\" id=\"dialog-confirm\" title=\"Delete the picture?\" onMouseOver=\"this.src='../png/poista_kuva_over.png'\" onMouseOut=\"this.src='../png/poista_kuva.png'\" src=\"../png/poista_kuva.png\" /></div></form>".PHP_EOL;

Open in new window

by :
		echo "<a href=\"#\"id=\"dialog-confirm\" ><img title=\"Delete the 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;

Open in new window


and submit the form if the user say yes or with the time out
0
 

Author Comment

by:Toube
ID: 38841315
:) thanks now the delete input is now working and now it asks for confirmation when I update the picture

I have to forms, one that update the picture info and one that deletes the picture.
	echo ('<form name="Updateform" enctype="multipart/form-data" method="post" action="#">');
	echo "<div style=\"float: left; width: 180px; padding-bottom: 3px; padding-top: 3px;\">Kuvan kommentti:</div><div style=\"float: left; \"><input name=\"text\" type=\"text\" size=\"35\" value=\"$phototext_\" /></div>".PHP_EOL;
		echo ('<input type="hidden" name="img" value="'.$imageid_.'" />
		<div style="width: 195px; padding-bottom: 3px; padding-top: 3px;">Aseta oletuskuvaksi:<div style="float: right; padding-top: 2px;"><input type="checkbox" name="default" '.$checked.' value="1"/></div></div><div style="clear: both;"></div>').PHP_EOL;
		echo ('<div style="margin-left: 3px; padding-top: 15px; margin-left: 158px;"><input type="hidden" name="submit" value="" />').PHP_EOL;
		echo "<input type=\"image\" onMouseOver=\"this.src='../png/profiili_tallenna_over.png'\" onMouseOut=\"this.src='../png/profiili_tallenna.png'\" src=\"../png/profiili_tallenna.png\" /></div></form></div><div style=\"clear: both;\">&nbsp;</div>".PHP_EOL;	
	
	//Poista kuva tapahtumat
	echo "<form name=\"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=\"dialog-confirm\" ><img title=\"Delete 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><div style="clear: both;">&nbsp;</div>').PHP_EOL;	
echo ('<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Kuva poistetaan kokonaan palvelimelta, oletko varma?</p></div>');

Open in new window


Try it out here so you se it for your self:

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 82

Expert Comment

by:leakim971
ID: 38841523
could you post the javascript/jquery...  a bit hard to found it on your site...
0
 

Author Comment

by:Toube
ID: 38841539
Sure..

the jquery is found on the iframe which is called from Higslide:
http://intra.tobiasfransman.net/profiili/editphotos.php

<link rel="stylesheet" type="text/css" href="../java/jquery-ui/development-bundle/themes/base/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="../java/jquery/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="../java/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css" href="../css/iframe.css" />
<script language="javascript" type="text/javascript">
$(function submitform() {
$("form").submit(function(evt) {
     evt.preventDefault();
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete picture?": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
    
})

  });
</script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841574
try this :
<link rel="stylesheet" type="text/css" href="../java/jquery-ui/development-bundle/themes/base/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="../java/jquery/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="../java/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css" href="../css/iframe.css" />
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete picture?": function() {
          $("form").submit();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
})    
</script>

Open in new window

0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:Toube
ID: 38841604
Thanks, still not working.. it seems to be mixing up the update picture form and delete form actions.

// update
<input type="hidden" name="submit" value="" />

//Delete
<input type="hidden" name="delete" value="" />

Can those two be separed.. mainly concentrating on the delete form?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841621
don't use << name="submit" >>, rename it
0
 

Author Comment

by:Toube
ID: 38841653
Nice getting there..  warming up :)

So now when I click on an image it opens up highslide iframe and the jquery dialog pops up before I even click on the delete button.. Now how can I change so that dialog pops up after clicking delete submit button?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841663
0
 

Author Comment

by:Toube
ID: 38841690
Ok that took care of the autodialog but now the dialog no longer works.. hmm..

<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" );
        }
      }
    });
})    
</script>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841721
what is the html or php code of the button to open it?
the current is just to create a dialog... closed by default
0
 

Author Comment

by:Toube
ID: 38841748
Here's how the editphots.php iframe is called:

echo "<a href=\"editphotos.php?id=$imageid_\" class=\"highslide\" onclick=\"return hs.htmlExpand(this, {objectType: 'iframe', slideshowGroup: 'group2', wrapperClassName: 'draggable-header', outlineType: 'rounded-white', outlineWhileAnimating: true, preserveContent: false} )\" title='Kuva: $filename_ $default'>".PHP_EOL;

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841758
no I mean the one to open the dialog not the highslide box
0
 

Author Comment

by:Toube
ID: 38841765
You mean this:

	//Delete picture form with jquery dialog alert
	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 "<input type=\"image\" onMouseOver=\"this.src='../png/poista_kuva_over.png'\" onMouseOut=\"this.src='../png/poista_kuva.png'\" src=\"../png/poista_kuva.png\" /></div></form>".PHP_EOL;
	
		echo ('</div><div style="clear: both;">&nbsp;</div>').PHP_EOL;	
echo ('<div title="Delete picture?" id="dialog-confirm"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>File will be deleted permanently are you sure?</p></div>');

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841779
not sure I see too much button and image here,
there's a button in the editphotos.php/highslide box once you click on you want to see the jQuery dialog, what is exactly its code (and only this button)
0
 

Author Comment

by:Toube
ID: 38841809
Ok, you mean this:

echo "<a href=\"#\" id=\"dialog-confirm\"><img title=\"Delete the 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><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>File will be deleted permanently are you sure?</p></div>');      

this only places the image in the dialog box.. the image/submit should be on a separate place where you click and the confirmation should the popup and if selectign yes the image should be deleted.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841817
check the example here : http://jqueryui.com/dialog/#animated
the button IS not the dialog OR inside the dialog

but here we go, 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();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#dialog-confirm" ).click(function() {

 $( "#dialog-confirm" ).dialog( "open" );

})


})    
</script>

Open in new window

0
 

Author Comment

by:Toube
ID: 38841853
Thanks again but no dialog showing up using this method.. hmm
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841859
if the dialog is closed, you can click on it : "#dialog-confirm"
<a href=\"#\" id=\"dialog-confirm\"><

I'm not sure how you want to open it...
When you say it don't open, how do you want to open it? You click on what?
0
 

Author Comment

by:Toube
ID: 38841869
The confirmation dialog only show when autoOpen is set to true,
When autoOpen is set to false no link to clicked on is displayed..
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38841871
so you want it closed or open?
previously you said :
Now how can I change so that dialog pops up after clicking delete submit button?
But the delete button is inside the closed dialog???
0
 

Author Comment

by:Toube
ID: 38841882
;)

Both delete and update buttons are shown when opening the highslide
1. Clicking on update picture button no dialog action need here.
2. Clicking on delete button submit (case break)--> dialog should pop up and ask are you sure you want to delete picture.. answering yes to dialog and the dialog closes and picture is deleted.. answering cancel and the dialog just closes no action taken
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38841893
let try this :

This is your delete button :
echo "<a href=\"#\" id=\"delete-button\"><img title=\"Delete the 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;

It CAN'T be your dialog too so, add an id for the dialog alone :
      echo ('<div id="dialog-confirm"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>File will be deleted permanently are you sure?</p></div>');      

<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

0
 

Author Comment

by:Toube
ID: 38841904
Fuc...k yes it works :) Great work!!

Anyway I could implement an autoclose on highslide 3 seconds after submitting the delete show that the popup would autoclose?

parent.window.hs.close();

I can open another question for this :)
0
 

Author Closing Comment

by:Toube
ID: 38841905
Very nice coding and patience
0
 
LVL 82

Expert Comment

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

Open in new window

0
 

Author Comment

by:Toube
ID: 38842516
Nice, much appreciated will try it out.
is it possible to add a page refresh on themain page after highslide autocloses?
0
 

Author Comment

by:Toube
ID: 38842648
Hi,

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

Open in new window


This closes the pop after hitting submit.. so the dialog stops working
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 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

13 Experts available now in Live!

Get 1:1 Help Now