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
ToubeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
please right click on your page, choose view source and post it here. thanks
0
ToubeAuthor Commented:
Hi Leakim,
do you want the source of main page or iframe page or both?
0
leakim971PluritechnicianCommented:
the main page, thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
replace : onclick=\"alertFunction()\"
by : onclick=\"return alertFunction();"
0
ToubeAuthor Commented:
Thanks,

it still closes the highslide iframe window immediately after hitting the submit and answering yes to the confirmation.
0
leakim971PluritechnicianCommented:
if you answer "yes" you don't want to close?
0
ToubeAuthor Commented:
Yes but, I want it to close but it should wait for 3 seconds or so and then it should automatically close.
0
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
Ok will look those through..
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
$(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
ToubeAuthor Commented:
Thanks, ok and how do I call up on it when submitting the form: onclick=\"return dialog-confirm();\" ??
0
leakim971PluritechnicianCommented:
you remove it (the onclick), it's more than useless now you're in jQuery world...
0
ToubeAuthor Commented:
:) 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
ToubeAuthor Commented:
Hold on.. fixing my jquery paths...
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
:) 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
leakim971PluritechnicianCommented:
could you post the javascript/jquery...  a bit hard to found it on your site...
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
don't use << name="submit" >>, rename it
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
no I mean the one to open the dialog not the highslide box
0
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
Thanks again but no dialog showing up using this method.. hmm
0
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
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
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
;)

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ToubeAuthor Commented:
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
ToubeAuthor Commented:
Very nice coding and patience
0
leakim971PluritechnicianCommented:
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
ToubeAuthor Commented:
Nice, much appreciated will try it out.
is it possible to add a page refresh on themain page after highslide autocloses?
0
ToubeAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.