Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Ajax form will not work with spry menu bar

    Hi all,

    I have an ajax request for a php login form, this works on it's own but when implemented onto my page with a spry horizontal menu bar it doesn't work.

    I have tried using jQuery.noConflict() and to replace all the $ symbols with jQuery on the below code but with no success.

    This is the code for my page, I have included the whole login section as I have js mixed with PHP and HTML that I have on my page.

    Code:
    <?php
    if(isset($_POST['logout']))
      {
      session_destroy();
      header("Location: http://www.mysite.co.uk/Membership/index.php");
      }
    ?>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    
            
    <script>
    		
    $(document).ready(function(){
    	
    	<?php
    if ($_SESSION['checkreset'] == "yes"){
    	?>
    	
    $('.error').hide();
    
    $(".toggled_content").slideToggle();
    $(this).parent().children().toggle();
    
      $(".toggler").click(function(){
      $(this).parent().children().toggle();
      $(".toggled_content").slideToggle();
      });
      
      $("#divselectchange").hide();
      $("label#title").hide();
      $("label#createpass").show();
    		
    		
    		
      <?
    	  ;}
    	  else
    	  {
    
      ?>
    		$('.error').hide();
    		$(".toggled_content").hide();
    		$(".toggler").click(function(){
    		$(this).parent().children().toggle();
    		$(".toggled_content").slideToggle();
    		});
      <?
       }
       ?>
    
    
    	<?php
    	if ($_SESSION['checkreset'] == "yes"){
    	?>
    	
    	   
    		$("#divchangepass").show();
    		$("#divselectchange").click(function(){
    		$("#divchangepass").slideToggle();
    		});
    		
            <?
    		;}
    		else
    		{
    
    		?>
    	
    
    	  $("#divchangepass").hide();
    	  $("#divselectchange").click(function(){
    	  $("#divchangepass").slideToggle();
    	  });
      
    	  <? 
    	  } 
    	  ?>
      
    	$("#divresetpass").hide();
    	
    	$("#divselectreset").click(function(){
    	$('#loginform').hide();
    	$('.error').hide();
    	$("#divresetpass").slideToggle();
    	});
    	
    	$("#divselectresetclose").click(function(){
    	$("#divresetpass").hide();
    	$('#hidereset').show();
    	$('#loginform').show();
    	
    	});
    	});
    
    
    
    
    $(function () {
    
    
    $(".button").click(function () {
    
    	$('.error').hide();
       
    	
    	var name = $("input#newpass").val();
    	var conf = $("input#confnewpass").val();
    
    	if (name == conf) {
    		$.ajax({
    
    				type: 'post',
    				dataType: 'text',
    				url: "http://www.mysite.co.uk/Membership/login/updatepassword.php",
    				data: $("form").serialize(),
    
    			success: function(output) {
    		$('#always').text(output);
      
    		if (output === 'correct') {
    			$("label#title").hide();
    			$("label#sent").show();
    			$("#divselectchange").show();
    			$("#form")[0].reset();
    			
    			setTimeout(function() { 
    			$(".toggled_content").slideToggle();
    			
    			
    			}, 1500);
    		   
    		}
    		else if (output === 'incorrect') {
    		   $("label#title").hide();
    		   $("label#wrongpass").show();
    			$("input#oldpass").focus();
    		}
      
    		},
    
    				
    				
    	  error: function(data) {
    	  $("label#title").hide();
    	  $("label#notsent").show();
    					  
    				  
    					  
    	  }
    			  
    	  });
    	return false;
      
    		  
    	} 
    	else 
    	{
      
      $("label#title").hide();
      $("label#space").hide();
      $("label#match_error").show();
      $("input#newpass").focus();
      return false;
    		 
      
      
      }
      
      });
    });
    				
    </script>
    <style>
    .toggle_parent {
    width:940px; z-index:100;position:absolute;
    }
    
    .toggleHolder {
    min-width: 160px; background: #000; border-bottom-left-radius:10px; border-bottom-right-radius:10px; color: #FFF; margin-left: 630px; margin-right:30px; border-left: solid 1px #F30; border-bottom: solid 1px #F30; border-right: solid 1px #F30; padding:3px; padding-left: 8px; display:block;
    }
    
    .toggled_content {
    background: #000; color:#FFF;
    }
    
    .toggler:hover {
        cursor: pointer;
    }
    
    .toggler {
    display:block;	
    }
    
    .left {
    float:left; height: 200px; width:260px; margin-left:50px; border-right: solid 1px #CCC;
    }
    
    .left-details {
    float:left; width: 260px; height: 200px; padding-left: 5px; border-right: solid 1px #CCC;
    }
    
    .right-details {float:right; width: 200px; height: 200px; text-align: center; margin-right:80px; margin-top:30px;
    }
    
    /***** clearfix *****/
    .clear {clear: both;height: 0;line-height: 0;}
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix {height: 1%;}
    .clearfix {display: block;}
    
    #divchangepass {
    margin-top:20px;	
    }
    
    #divselectchange:hover {
    color: #FFF;	
    }
    
    h1{
    	font-size:28px;
    	font-weight:bold;
    	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    	letter-spacing:1px;
    }
    
    h2{
    	font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    	font-size:10px;
    	font-weight:normal;
    	letter-spacing:1px;
    	padding-left:2px;
    	text-transform:uppercase;
    	white-space:nowrap;
    	margin-top:4px;
    	color:#888888;
    }
    
    
    </style>
    <div class='toggle_parent'>
      <div class='toggled_content' style='display:none;'>
          <div class="clearfix">
          <div class="left-details">
              
              <h1>Championship</h1>
              <h2>section</h2>		
              
          </div>
    
        <div class="left">
    	  <?php echo $_SESSION['firstname'] ? '<div class="font4" id="divchangepass">
          <label name="title" class="font 4" id="title">Change Password</label>
          <label name="sent" class="error" id="sent">*Password was updated*</label>
          <label name="notsent" class="error" id="notsent">*There was an error*</label>
          <label name="wrongpass" class="error" id="wrongpass">*Your old password is incorrect*</label>
          <label name="createpass" id="createpass" class="error">Please create your new password</label>
          <label name="space" id="space"><br /><br /></label>
            <form class="form" id="form" action="" method="post" name="form">
                <label class="font12" for="oldpass">Old Password:</label>
                <br />
                <input style="margin-bottom: 8px;" name="oldpass" id="oldpass" type="password" size="25" />
                <label name="match_error" id="match_error" for="oldpass" class="error"><br />*Your passwords do not match*</label>
                <br />
                <label class="font12" for="newpass">New Password:</label>
                <br />
                <input style="margin-bottom: 8px;" id="newpass" name="newpass" type="password" size="25" />
                <br />
                <label for="confnewpass" class="font12">Confirm New Password:</label>
                <br />
                <input name="confnewpass" id="confnewpass" type="password" size="25" />
                <br />
                <br />
                <input name="username" id="username" value="' . $_SESSION['username'] . '" type="hidden" />
                <input name="submit" class="button" value="submit" type="submit" />
            </form>
    	  </div>' : ' 
    		<div id="divresetpass">
    		  <br />
    		  <span class="font4">PASSWORD RESET<br /><br /></span><label class="font8">Enter your details below to reset<br /></label>
    		  <label name="passreset" id="passreset" class="error">Your password has been reset, an email containing your temporary password has been sent to you<br /></label>
    		  <label name="passerror" id="passerror" class="error">There was an error, please try again<br /></label>
    		  <label name="ajerror" id="ajerror" class="error">There was an error with the function, please try again<br /></label>
    		  <label name="notvalid" id="notvalid" class="error">Your email address is not in our system<br /></label>
    		  <label name="notentered" id="notentered" class="error">No email address was entered<br /></label>
    		  <label name="noenter" id="noenter" class="error">No username was entered<br /></label>
    
    			<div id="hidereset">
    			  <form name="changepass" id="changepass" method="post" action="">
    				<label>Email:</label><br /><input name="current_email" id="current_email" type="text" /><br />
    				<label>Username:</label><br /><input name="current_user" id="current_user" type="text" /><br /><br />
    				<input name="Reset" type="submit" class="buttonreset" value="Reset Password" />
    			  </form>
    			</div>
    			<br />
    			<div id="divselectresetclose" class="font12">Close</div>
    		</div>
    
    <script>
    $(".buttonreset").click(function () {
    
    	var val = $("input#current_email").val(); // \'this\' is the form 
        if (val==null || val.trim()=="") { 
    			$(\'.error\').hide();
    			$("label#titlereset").hide();
    			$("label#notentered").show();
    			$("input#current_email").focus();
    			return false;
        }
    	  var uval = $("input#current_user").val(); // \'this\' is the form 
    	  if (uval==null || uval.trim()=="") { 
    			  $(\'.error\').hide();
    			  $("label#titlereset").hide();
    			  $("label#noenter").show();
    			  $("input#current_user").focus();
    			  return false;
    	  }
    
    	
    $.ajax({
    
    	type: \'POST\',
    	dataType: \'text\',
    	url: "http://www.mysite.co.uk/Membership/login/forgotten-pass.php",
    	data: $("form#changepass").serialize(),
    
    	  success: function(output) {
    	  $(\'#always\').text(output);
    
            if (output === \'empty\') {
    			$(\'.error\').hide();
    			$("label#titlereset").hide();
    			$("#hidereset").hide();
    			$("label#passerror").show();
               return false;
            }
            else if (output === \'success\') {
    			$(\'.error\').hide();
    			$("label#titlereset").hide();
    			$("#hidereset").hide();
    			$("label#passreset").show();
    			return false;
            }
    		else if (output === \'notvalid\') {
    			$(\'.error\').hide();
    			$("label#titlereset").hide();
    			$("#hidereset").hide();
    			$("label#notvalid").show();
    			return false;
            }
    
    	  },
    
                        
    					
    	error: function(data) {
    		$(\'.error\').hide();
    		$("label#titlereset").hide();
    		$("#hidereset").hide();
    		$("label#ajerror").show();
    
    		return false;
    	}
    					
    				
      });
      return false;
      });
    				
    </script>
     
    
    <div id="loginform">
    	<!-- Login Form -->
    	<form class="clearfix" name="loginform" id="loginform" action="" method="post">
    		<h1 id="logintitle" name="logintitle">Member Login</h1>
    		<div class="font4">
    		<label name="loginerror" id="loginerror" class="error"><br />There was an error, please try again<br /></label>
    		<label name="notrec" id="notrec" class="error"><br />Your username and/or password was not recognised on our system<br /></label>
    		<label name="noenterlogin" id="noenterlogin" class="error"><br />One of the fields has been left empty<br /></label>
    		</div>
    		Username: <br />
    		<input style="margin-top:4px; margin-bottom:4px;" type="text" name="username" id="username" size="23" /><br />
    		Password: <br />
    		<input style="margin-top:4px; margin-bottom:4px;" type="password" name="password" id="password" size="24" /><br />
    		
    	   
    		<input style="margin-top:4px;" class="buttonlogin" type="Submit" value="Go!!" />
    		 <script>
      $(".buttonlogin").click(function () {
    
    var vallogin = $("input#username").val(); // \'this\' is the form 
        if (vallogin==null || vallogin.trim()=="") { 
    			$(\'.error\').hide();
    			  $("#logintitle").hide();
    			  $("label#noenterlogin").show();
    			  $("input#username").focus();
    			return false;
        }
    	  var uvallogin = $("input#password").val(); // \'this\' is the form 
    	  if (uvallogin==null || uvallogin.trim()=="") { 
    			  $(\'.error\').hide();
    			  $("#logintitle").hide();
    			  $("label#noenterlogin").show();
    			  $("input#password").focus();
    			  return false;
    	  }
    
         $.ajax({
    
             type: \'POST\',
             dataType: \'text\',
             url: "http://www.mysite.co.uk/Membership/login/login.php",
             data: $("form#loginform").serialize(),
    
             success: function (outputlogin) {
                 $(\'#formlogin\').text(outputlogin);
    
                 if (outputlogin === \'nologin\') {
                     $(\'.error\').hide();
    				 $("#logintitle").hide();
                     $("label#loginerror").show();
    				 return false;
    			  
                 } else if (outputlogin === \'notrecognised\') {
                     $(\'.error\').hide();
    				 $("#logintitle").hide();
                     $("label#notrec").show();
                     return false;
                
    			 } else if (outputlogin === \'success\') {
                     $(\'.error\').hide();
                     window.location.replace = ("http://www.mysite.co.uk/secure/index.php");
                     
                 }
    			 
    
             },
    
             error: function (datalogin) {
                 $(\'.error\').hide();
    			 $("#logintitle").hide();
                 $("label#loginerror").show();
    				return false;
                 
             }
    
         });
         return false;
     });				  
      </script>
    	</form>
    	<br />
    	<div id="divselectreset" class="font12">Forgotten password?</div></div>
     
      
      ' ;
    				  
      
      ?>
                    
    </div>
                
                
    <div class="right-details">
      <?php
                            
      echo $_SESSION['firstname'] ? '<div style="text-align:left;"><span class="font4">Welcome '.$_SESSION['firstname'].' '. $_SESSION['surname']. '</span><br /><br />Username: '. $_SESSION['username']. /* '<br /><br />Membership Number: '. $_SESSION['memberid'] .*/ '<br /><br /><form style="margin:auto;" method="post" action=""><input name="logout" type="submit" value="logout" /></form>'. '</div>' 
      
      : 
      
      'Not yet a member?<br />Call us to join'; 
      
                    
        echo $_SESSION['firstname'] ? '<div style="margin-top:30px;" id ="divselectchange" class="font4">Change password</div>' 
        
        :
        
        '';
      ?>
      </div>     
      <div style="clear:both"></div>
      
      
    <div style="width:100%; height:4px; background: #F30"></div>
    </div>
    </div>
      
      
    <div class='toggleHolder'>
      <span class='toggler'><a>Hello <?php echo $_SESSION['firstname'] ? $_SESSION['firstname'] : 'Guest';?>! | <?php echo $_SESSION['username']?' Open Panel':'Log In';?></a></span>
      <span class='toggler' style='display:none;'><div id="close"><a>Close</a></div></span>
    </div>
    
    </div>
    Thanks

    Sean Markham
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development

  • #2
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Have managed to solve the issue, hopefully this will help someone else in the future.

    I changed

    Code:
    window.location.replace = ("http://www.mysite.co.uk/secure/index.php");
    to

    Code:
    var url = "http://www.mysite.co.uk/secure/index.php";    
    $(location).attr(\'href\',url);
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 600 Times in 599 Posts
    Maybe
    Code:
    window.location.href=
    instead of
    Code:
    window.location.replace =
    would have worked also?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    seanmarkham (10-03-2013)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    location.replace is a method not a property.

    Code:
    location.replace("http://www.mysite.co.uk/secure/index.php");
    Or as sunfighter suggested:

    Code:
    location.href =  "http://www.mysite.co.uk/secure/index.php";
    No need for jQuery. Both redirect to the specified url but location.replace replaces the current page in the browser history while the other adds a new entry to the history.

  • Users who have thanked glenngv for this post:

    seanmarkham (10-03-2013)

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    location.replace is a method not a property.

    No need for jQuery. Both redirect to the specified url but location.replace replaces the current page in the browser history while the other adds a new entry to the history.
    why is it replaced to that?
    explain me
    thanks

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by alaba View Post
    why is it replaced to that?
    explain me
    thanks
    Sorry, I don't understand your question.

    But here's the MDN reference to location.replace: https://developer.mozilla.org/en-US/...cation.replace

  • #7
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Changed from the JQuery method back to window.location.href and that method works fine also.

    Thank you!!!!!
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •