Link to home
Start Free TrialLog in
Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery if question

Hello All,

I have a page that loads an iframe which contains the following script -

<html>
<head>
<link href="/css/desktop.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body style="overflow:hidden; width:498px; height:139px;">
<form action="" method="post" name="DeleteCV" class="fancyform" id="DeleteCV">
  <h3>Delete CV</h3>
  <div class="notify">Deleting your CV will permanently remove it from the CV database, please confirm that you want to permanently remove your CV</div>
  <input name="Delete" type="submit" class="cancelbutton" id="DeleteCVSubmit" form="DeleteCV" value="Delete" />
  <input name="Cancel" type="button" onClick="javascript:parent.jQuery.fancybox.close();" class="closefb" id="DeleteCVCancel" form="DeleteCV" value="Cancel" />
  <input name="CVID" type="hidden" id="CVID" value="<%= Request("ID") %>" form="DeleteCV">
</form>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
  $("#DeleteCV").submit(function(e){
      e.preventDefault();
    $.ajax({
		type: "POST",
        url: "/test4.asp",
        data:$(this).serialize(),
		success:function(result){
          if(result==1){
			window.parent.jQuery.fancybox.close();
			 window.parent.location.reload();
          }else {
	      $('#DeleteCVError').html('<p>ErrorMessage here</p>');
          $('#DeleteCVError').fadeIn('slow');
          }
  	  }});
  });
</script>

Open in new window


You can see that the Jquery is postingthe form data to test4.asp. the code on test4,asp is

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
1
</body>
</html>

Open in new window


so the result will always be 1

This part of the original script is not working -

          if(result==1){
			window.parent.jQuery.fancybox.close();
			 window.parent.location.reload();
          }else {
	      $('#DeleteCVError').html('<p>ErrorMessage here</p>');
          $('#DeleteCVError').fadeIn('slow');
          }

Open in new window

If I substitute the jQuery above to just read -

  $("#DeleteCV").submit(function(e){
			window.parent.jQuery.fancybox.close();
			 window.parent.location.reload();
  });

Open in new window


After the form is submitted the iframe closes and the original window reloads, so the issue must be with the if statement...

Any help appreciated.

Thank you
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
some findings:
1. You should not place anything outside of the HTML / BODY in the DOM. Your above source code has a couple of script references OUTSIDE of the DOM which is NOT valid.

2. Your IF checks on the number value - but the returned 1 could also be a string "1".

So could you first move the script stuff inside the Body after the form tag as well as adjusting the condition to
console.log("Return is #" + result + "# and type is " + typeof result);
if(result == "1"){

Open in new window


HTH
Rainer
Avatar of garethtnash

ASKER

Hi Rainer,

So I've updated the code to -

<html>
<head>
<link href="/css/desktop.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body style="overflow:hidden; width:498px; height:139px;">
<form action="" method="post" name="DeleteCV" class="fancyform" id="DeleteCV">
  <h3>Delete CV</h3>
  <div class="notify">Deleting your CV will permanently remove it from the CV database, please confirm that you want to permanently remove your CV</div>
  <input name="Delete" type="submit" class="cancelbutton" id="DeleteCVSubmit" form="DeleteCV" value="Delete" />
  <input name="Cancel" type="button" onClick="javascript:parent.jQuery.fancybox.close();window.parent.location.reload();" class="closefb" id="DeleteCVCancel" form="DeleteCV" value="Cancel" />
  <input name="CVID" type="hidden" id="CVID" value="<%= Request("ID") %>" form="DeleteCV">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
  $("#DeleteCV").submit(function(e){
      e.preventDefault();
    $.ajax({
		type: "POST",
        url: "/test2.asp",
        data:$(this).serialize(),
		success:function(result){
          console.log("Return is #" + result + "# and type is " + typeof result);
		if(result == "1"){{
			window.parent.jQuery.fancybox.close();
			 window.parent.location.reload();
          }else {
	      $('#DeleteCVError').html('<p>ErrorMessage here</p>');
          $('#DeleteCVError').fadeIn('slow');
          }
  	  }});
  });
</script>
</body>
</html>

Open in new window


When i click delete now i get the following in the console -

Uncaught SyntaxError: Unexpected token else

row 27

Any suggestions?

Thanks
Hi,
there is a simple typo in line 24 - one { too much.
SOLUTION
Avatar of mankowitz
mankowitz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Both,

I've updated both files;

the form

<html>
<head>
<link href="/css/desktop.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body style="overflow:hidden; width:498px; height:139px;">
<form action="" method="post" name="DeleteCV" class="fancyform" id="DeleteCV">
  <h3>Delete CV</h3>
  <div class="notify">Deleting your CV will permanently remove it from the CV database, please confirm that you want to permanently remove your CV</div>
  <div id="#DeleteCVError" style="display:none"></div>
  <input name="Delete" type="submit" class="cancelbutton" id="DeleteCVSubmit" form="DeleteCV" value="Delete" />
  <input name="Cancel" type="button" onClick="javascript:parent.jQuery.fancybox.close();window.parent.location.reload();" class="closefb" id="DeleteCVCancel" form="DeleteCV" value="Cancel" />
  <input name="CVID" type="hidden" id="CVID" value="<%= Request("ID") %>" form="DeleteCV">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
  $("#DeleteCV").submit(function(e){
      e.preventDefault();
    $.ajax({
		type: "POST",
        url: "/test4.asp",
        data:$(this).serialize(),
		success:function(result){
          console.log("Return is #" + result + "# and type is " + typeof result);
		if(result == "1"){{y
			window.parent.jQuery.fancybox.close();
			 window.parent.location.reload();
          }else {
	      $('#DeleteCVError').html('<p>ErrorMessage here</p>');
          $('#DeleteCVError').fadeIn('slow');
          }
  	  }});
  });
</script>
</body>
</html>

Open in new window


the recieving page

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<%
   response.write(1)
 %>
</body>
</html>

Open in new window


The console gives me this,

Return is #
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
1
</body>
</html>
# and type is string

and doesn't close the iframe.

Any thoughts?

Thanks
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you Both :)