Start Free Trial

asked on

Highslide on form submit autoclose after 3 seconds

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

please right click on your page, choose view source and post it here. thanks

ASKER

Hi Leakim,
do you want the source of main page or iframe page or both?

the main page, thanks

ASKER

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

replace : onclick=\"alertFunction()\"
by : onclick=\"return alertFunction();"

ASKER

Thanks,

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

if you answer "yes" you don't want to close?

ASKER

Yes but, I want it to close but it should wait for 3 seconds or so and then it should automatically close.

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

ASKER

Ok will look those through..

ASKER

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?

$(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

ASKER

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

you remove it (the onclick), it's more than useless now you're in jQuery world...

ASKER

:) 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

ASKER

Hold on.. fixing my jquery paths...

ASKER

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..

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

ASKER

:) 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.

could you post the javascript/jquery... a bit hard to found it on your site...

ASKER

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

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

ASKER

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?

don't use << name="submit" >>, rename it

ASKER

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?

add : autoOpen: false
http://api.jqueryui.com/dialog/#option-autoOpen

ASKER

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>

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

ASKER

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

no I mean the one to open the dialog not the highslide box

ASKER

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

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)

ASKER

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.

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

ASKER

Thanks again but no dialog showing up using this method.. hmm

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?

ASKER

The confirmation dialog only show when autoOpen is set to true,
When autoOpen is set to false no link to clicked on is displayed..

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???

ASKER

;)

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

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

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 :)

ASKER

Very nice coding and patience

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

ASKER

Nice, much appreciated will try it out.
is it possible to add a page refresh on themain page after highslide autocloses?

ASKER

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