We help IT Professionals succeed at work.

JQuery if question

garethtnash
garethtnash asked
on
95 Views
Last Modified: 2016-01-10
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
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012

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

Author

Commented:
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
CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,
there is a simple typo in line 24 - one { too much.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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
CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thank you Both :)

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.