0

hi, i am new to jquery though im learning,together with ajax.
I have the following script that displays a modal login form after cliking on login_link.
But for my web page, i used the .load to load content in the main content div, so whenever this code is placed the the document.ready, the modal form dont wont, but if i comment it, it works fine, please help, tkx
here is the code

img2 = new Image(220, 19);  
img2.src="images/ajax-loader.gif";

// When DOM is ready
$(document).ready(function(){

//$('#center_content').load('content.php');


// Launch MODAL BOX if the Login Link is clicked
$("#login_link").click(function(){
    //alert("sdfsdfadgf");
$("#login_form").modal();
});

// When the form is submitted
$("#status > form").submit(function(){  

// Hide 'Submit' Button
$("#submit").hide();

// Show Gif Spinning Rotator
$("#ajax_loading").show();

// 'this' refers to the current submitted form  
var str = $(this).serialize();  

// -- Start AJAX Call --

$.ajax({  
    type: "POST",
    url: "do-login.php",  // Send the login info to this page
    data: str,  
    success: function(msg){  

$("#status").ajaxComplete(function(event, request, settings){  

 // Show 'Submit' Button
$('#submit').show();

// Hide Gif Spinning Rotator
$('#ajax_loading').hide();  

 if(msg == 'OK') // LOGIN OK?
 {  
 var login_response = '<div id="logged_in">' +
     '<div style="width: 350px; float: left; margin-left: 70px;">' + 
     '<div style="width: 40px; float: left;">' +
     '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
     '</div>' +
     '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
     "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";  

$('a.modalCloseImg').hide();  

$('#simplemodal-container').css("width","500px");
$('#simplemodal-container').css("height","120px");

 $(this).html(login_response); // Refers to 'status'

// After 3 seconds redirect the 
setTimeout('go_to_private_page()', 3000); 
 }  
 else // ERROR?
 {  
 var login_response = msg;
 $('#login_response').html(login_response);
 }  

 });  

 }  

  });  

// -- End AJAX Call --

return false;

}); // end submit event

});

function go_to_private_page()
{
window.location = 'private.php'; // Members Area
}
2
Contributors
3
Replies
4
Views
4 Years
Discussion Span
Last Post by blocblue
0

If you're loading the page content with AJAX, then the problem might be that the element to which the click event is applied on line #11 no longer exists (i.e. it has been replaced when the page content loaded).

Try using the live function to bind click events to all current and future DOM elements with the id login_link. To do this change line #11 to:
$("#login_link").live('click', function() {

Edited by blocblue

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.