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
jQueryAJAXHTML

Avatar of undefined
Last Comment
garethtnash

8/22/2022 - Mon
Rainer Jeschor

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
ASKER
garethtnash

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
Rainer Jeschor

Hi,
there is a simple typo in line 24 - one { too much.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
SOLUTION
mankowitz

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
garethtnash

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
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
garethtnash

Thank you Both :)