load base.php content.

[MasterACE14]

I'm using the latest version of jQuery along with the ajaxForm plugin for jQuery. The ajax form plugin documentation can be found here... http://malsup.com/jquery/form/

 

I have the following form and javascript:

	var loginOptions = {
	type: 'POST',
    target: '#contentmain',
	url: 'lib/login.php',
	clearForm: true,
        success: function(html) { 
            $('#contentmain').html(html);
        } 
};

$('#login').submit(function() { 
	$("#loginForm").ajaxSubmit(loginOptions); 
  //  return false;

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});
    
}); 

<form id="loginForm" action="lib/login.php" method="post">

<tr>
<td>Username:</td>
<td>
<input type="text" name="username" />
</td>
</tr>

<tr>
<td>Password:</td>
<td>
<input type="password" name="password" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Login" name="login" id="login" />
</td>
</tr>

</form>

 

The problem I have is... the form submits the data to lib/login.php which is fine. But.... the form acts like a standard link and so goes to the page lib/base.php, rather then just staying on index.php and loading base.php within the #contentmain div I have.

 

Any ideas/help/suggestions are welcome.

 

Regards, Ace

 

[RichardRotterdam]

try adding a "return false" to your submit event.

 

$('#login').submit(function() {
  $("#loginForm").ajaxSubmit(loginOptions);


  $.ajax({
    method: "GET", url: 'rightpanel.php',
    success: function(html){$("#right").html(html);}
  });
  $.ajax({
    method: "GET", url: 'leftpanel.php',
    success: function(html){$("#left").html(html);}
  });
  // return false at the end of the submit event
  return false;
});

[MasterACE14]

still goes to lib/login.php

 

the form is in lib/home.php , but each pages content in the lib directory is loaded within index.php with jQuery AJAX.

 

So... My URL looks like this... http://localhost/newcf/

But when the form is submitted it changes to http://localhost/newcf/lib/login.php

when it should stay the same and just load login.php within my div. Instead of going to the file.

 

So can I remove the action="lib/login.php" from the form somehow? I've removed it and then nothing happens with the form. But maybe with the ajaxForm plugin I can send my form data to lib/login.php without it just changing to that file completely?

 

sorry if that doesn't make much sense, trying my best to explain the problem

[RichardRotterdam]

So can I remove the action="lib/login.php" from the form somehow? I've removed it and then nothing happens with the form. But maybe with the ajaxForm plugin I can send my form data to lib/login.php without it just changing to that file completely?

That would not be the solultion if you remove the action then the form would still be submitted. The page loaded has to stay in the browser and not be reloaded.

 

I notice a ajaxSubmit() function, is that a jQuery plugin and do you have a link to how it is supose to work? I think the solution might be in that function.

[MasterACE14]

http://malsup.com/jquery/form/

[RichardRotterdam]

Ah I see what the problems are

 

1. your selector should be "#loginForm" instead of "#login"

2. the submit event should have a return false

3. not sure if this matters but i see $(this) used instead of re-using the id

 

Your submit event should be something like:

$('#loginForm').submit(function() {
  $(this).ajaxSubmit(loginOptions);

  $.ajax({
    method: "GET", url: 'rightpanel.php',
    success: function(html){$("#right").html(html);}
  });
  $.ajax({
    method: "GET", url: 'leftpanel.php',
    success: function(html){$("#left").html(html);}
  });
  return false;

}); 

[MasterACE14]

still no good :S

 

the form's submitting fine. Still goes to the page. Rather then loading the pages(base.php) content in #contentmain.

 

the form is in lib/home.php with the actual page loaded in the web browser being index.php. lib/home.php is loaded in #contentmain.

so the URL at this point is... http://localhost/newcf/#

 

form is submitted to lib/login.php, That is successful so lib/login.php should be loaded into #contentmain. But instead of loading it within #contentmain in index.php, it just loads the file so the url is... http://localhost/newcf/lib/login.php

[MasterACE14]

sorry for double posting...

 

Would it be easier to submit the form without the ajaxSubmit(); plugin? and if so, how would I modify my current script?

 

I've commented out my code, and tried to rewrite it without ajaxSubmit(); but it all seems to be doing is refreshing the page upon submit.

var username = $("input#username").val();  
var password = $("input#password").val();  
var dataString = 'username='+ username + '&password=' + password;  
$('#login').submit(function() {
		$.ajax({  
			type: "POST",  
			url: "lib/login.php",  
			data: dataString,  
			success: function(html) {  
				$('#contentmain').html(html);
			}	  
	});
});

[RichardRotterdam]

Your code worked fine for me. Here is what I think that went wrong. I thought you only pasted the relevant code but perhaps it was all your code. Did you wrap the events in a document ready event? In order to see the elements in the document the complete DOM should be loaded. That or the javascript events should be underneath the corresponding elements.

 

Here is the complete code I used:

// wait till the dom is loaded
$(document).ready(function(){

  var loginOptions = {
    type: 'POST',
    target: '#contentmain',
    url: 'lib/login.php',
    clearForm: true,
    success: function(html) {
      $('#contentmain').html(html);
    }
  };

  $('#loginForm').submit(function() {
    $(this).ajaxSubmit(loginOptions);

    $.ajax({
      method: "GET", url: 'rightpanel.php',
      success: function(html){$("#right").html(html);}
    });
    $.ajax({
      method: "GET", url: 'leftpanel.php',
      success: function(html){$("#left").html(html);}
    });
    return false;

  }); 
});

[MasterACE14]

yep it's inside the $(document).ready.function() {

that's why I'm stumped  :-\

[MasterACE14]

here's my complete javascript file:

/*function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(err3) {
	req = false;
}
  }
}
return req;
}

var http = getXMLHTTPRequest();
*/

function changeTitle(title) { document.title = title; }

$(document).ready(function(){
$('#loading').hide();

$.ajax({
	method: "GET", url: 'lib/home.php',
	success: function(html){$("#contentmain").html(html);}
});

$('a.liveload').livequery('click', function() {
	$("#contentmain").slideUp();

	var replacement = $(this).attr("title");
	var content_show = $(this).attr("id");

	$.ajax({
		type: "GET", url: "lib/"+replacement+".php", data: content_show,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - "+replacement);
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});


  var loginOptions = {
    type: 'POST',
    target: '#contentmain',
    url: 'lib/login.php',
    clearForm: true,
    success: function(html) {
      $('#contentmain').html(html);
    }
  };

  $('#loginForm').submit(function() {
    $(this).ajaxSubmit(loginOptions);

    $.ajax({
      method: "GET", url: 'rightpanel.php',
      success: function(html){$("#right").html(html);}
    });
    $.ajax({
      method: "GET", url: 'leftpanel.php',
      success: function(html){$("#left").html(html);}
    });
    return false;

  }); 

/*
var username = $("input#username").val();  
var password = $("input#password").val();  
var dataString = 'username='+ username + '&password=' + password;  
$('#login').submit(function() {
		$.ajax({  
			type: "POST",  
			url: "lib/login.php",  
			data: dataString,
			dataType: "html",
			success: function(html) {  
				$('#contentmain').html(html);
			}	  
		});
	return false;
});
*/

});

 

all of it works besides the form.

[MasterACE14]

I've actually changed my Form stuff around again... and omg, it works. kinda...

	$('#login').livequery('click', function() {
	$("#contentmain").slideUp();

	var username = $("input#username").val();  
	var password = $("input#password").val();  
	var dataString = 'username='+ username + '&password=' + password;

	$.ajax({
		type: "GET", url: "lib/login.php", data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});	

 

It works how it should. But... it shows the login.php content for less then a second. Then #contentmain goes blank.

[deth4uall]

You can change the submit but to a Link using Text or Images and it should be able to bring up the same effect WITHOUT submitting the actual event because if you use the .click event with live query you are causing the page to pull up the info via .ajax and after that you are getting the result of the submit which was submitted after the click... So Try changing the button into an image that have say <a href="#" id="submit_me"><img src="image.jpg></a> and have it use the click event to pull up the info you need... I have used that before for an attack script...