Page 1 of 1

Jquery GET issue

Posted: Thu Sep 06, 2012 9:07 pm
by bob_the _builder
Hi,

Cant figure out what is wrong with the code below.. The entire page reloads, instead of just the div area.. <div id="content"> </div>

Code: Select all

$("#clickme").click(function(){
		 $("#content").html('Retrieving...');
			 var url = $(this).attr('href');
		 $.get(url, function(response){
		 $("#content").html(response);
	 },'text');
	 });
Link I beleave should work to access above function?:

Code: Select all

<a href="jqueryget.php?pid=$pid" id="clickme" onclick="#content">Show Details</a>


Thanks

Re: Jquery GET issue

Posted: Fri Sep 07, 2012 8:41 am
by social_experiment
You want to prevent the default action of the anchor which is to go to the href value when clicked;

I tested this with two html pages; one the jqueryget.html page i had text which would then display in the #box div. Also, the onclick="#content" gives a 'syntax' error somewhere so i removed it. Ironically i'm getting a syntax error but the code does retrieve the content from the other page without going to it.

Code: Select all

<a href="jqueryget.html?id=5" id="clickme" >Show Details</a>
 <div id="box" ></div>
 <script>
 $("#clickme").click(function(event){
	   event.preventDefault();
       $("#box").html('Retrieving...');
          var url = $(this).attr('href');
       $.get(url, function(response){
       $("#box").html(response);
    },'text');	 
    });
 </script> 
Hope this helps

Re: Jquery GET issue

Posted: Sat Sep 08, 2012 12:20 am
by bob_the _builder
It would appear you cant u run a jquery function from within the div you are loading it into?

Example

This works..

Code: Select all

   	<input id="email" type="text" value="" />
	<input id="password" type="text" value="" />
	<input type="button" id="clickme" value="submit" />

    <div id="content"></div>    

<script type="text/javascript">
	$("#clickme").click(function(){
	$("#content").html('<img src="./loading.gif">');
		var data = {email: $('#email').val(), password: $('#password').val()};
	$.post("jqueryget.php", data, function(response){
	$("#content").html(response);
	},'text');
});
</script>  
This doesnt work..

Code: Select all

    <div id="content">

   	<input id="email" type="text" value="" />
	<input id="password" type="text" value="" />
	<input type="button" id="clickme" value="submit" />

</div>

<script type="text/javascript">
	$("#clickme").click(function(){
	$("#content").html('<img src="./loading.gif">');
		var data = {email: $('#email').val(), password: $('#password').val()};
	$.post("jqueryget.php", data, function(response){
	$("#content").html(response);
	},'text');
});
</script>  
I am wanting the login process complete within the div tag id #content, not by placing the form outside of it?

Re: Jquery GET issue

Posted: Sat Sep 08, 2012 2:01 am
by bob_the _builder
So i think the anwer to the above question is the .live() function.. this seems to work great for GET data, but using POST no data seems to arrive after being submited..

Here is what I have now:

Code: Select all

<!-- Div to load content in -->
<div id="content"> </div>

<!-- To populate the #content div when page first loads -->
<script type="text/javascript">

$('#content').load('jqueryresult.php'); 

</script>

<!-- The query to process and pass on the form data -->
<script type="text/javascript">

$("#clickme").live('click',function(){
		$("#content").html('Retrieving...');
        	var data = {data1: $('#data1').val(),data2: $('#data2').val(),data3: $('#data3').val()};
		$.post("jqueryresult.php", data, function(response){
		$("#content").html(response);
		},'text');
});

</script>
jqueryresult.php layout:

Code: Select all

<input id="data1" type="text" value="" />
<input id="data2" type="text" value="" />
<input type="button" id="clickme" value="Submit" />
<hr />


<?php

echo ''.$_POST['data1'].' -- '.$_POST['data2'].'';

 ?>
What am I missing for the variables not to be captured? If I place the button and fields outside the #content div it works fine..

Maybe

Code: Select all

<script type="text/javascript">

$('#content').load('jqueryresult.php'); 

</script>
Maybe the above cancelling it out again?