jquery

[bob_the _builder]

Hi,

 

Whats the correct way to add more post fields into:

 

data: "data=" + $("#data").val()&"data2=" + $("#data2").val(),

 

Thanks

[gristoi]

data:{
    data1 :$('#data1').val(),
    data2 :$('#data2').val(),
    data3 :$('#data3').val(),
    data4 :$('#data4').val(),
},

[bob_the _builder]

Worked great thanks..

 

So with the get method.. I think I have got the following code correct?.. but I can figure out how to access it via a link method?

 

<script type="text/javascript">

$(document).ready(function(){
	$("#clickme").click(function () {
		$("#content").html('Retrieving...');

		$.ajax({
		type:"GET", 
  			data:{ "fname":"12345","lname":"test" }, 
		url: "jqueryresponce.php", 
  			success: function(msg){
		$("#content").html(msg)
		 }
		}
		); 
            				
	});
});

</script>

 

Thanks

[Adam]

What do you mean by "access it via a link method"?

[bob_the _builder]

I guess i mean,  send the variable(s) via a link so i can query the database based on the variable(s) received within the div.. Opposed to doing it via a form and posting the variables..

[bob_the _builder]

Not sure how to explain it.. But lets say via ajax I would send a request to be loaded in the div using:

 

<a href="javascript: testAjax('myDIV')">Show Name</a>

 

Not sure how to acheive the same thing using the jquery function above..

 

Thanks

[Adam]

jQuery provides a simplified method for making GET requests; jQuery.get(). Have a look through the documentation. I would personally wrap the functionality inside an object or a couple of functions, and re-use it for every link. With a simple selector you can match each anchor and hijack the normal behaviour.

[bob_the _builder]

Yea and from my understading the code below should work..

 

<script type="text/javascript">

$(document).ready(function(){
	$("#clickme").click(function () {
		$("#content").html('Retrieving...');

		$.ajax({
			type:"GET", 
  					data:{ "data1":"12345","data2":"test" }, 
				url: "jqueryresponce.php", 
  				success: function(msg){
				$("#content").html(msg)
		 	}

		}); 
            				
	});
});

</script>

 

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

 

In the page jqueryresponce.php, I have echoed out the get variables but noting loads in the div..

[trq]

What does dev tools or firebug show in regards to your request / response ?

[bob_the _builder]

Never really used FireBug.. Have installed it.. not seeing any issue, where should I be looking to find them within firebug?

 

Thanks

[bob_the _builder]

I know this works..

 

$(document).ready(function () {
$('#code').load('jqueryresponce.php?data1=Some&data2=Data');
}
);

 

But I want to click a link holding the variables and parse them to the div that way.. Im totally new to Jquery.

[.josh]

Okay, you need to be a little bit more proactive in a) explaining what you actually want, b) being our eyes as far as what is actually happening. 

 

Do you see your div update with that 'Retrieving...' message?

 

In firebug there is a Net tab. Do you see a request being made to your script when you click the button?

 

If so, does the request show your data?

 

Don't just tell us "It doesn't work," tell us what you DO see happening.

 

 

[bob_the _builder]

I dont know how to explain it any better..

 

Another attempt:

 

$("#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?:

 

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

 

Problem:

 

The entire page reloads, instead of just the div area.. <div id="content"> </div>

 

Thanks

[Adam]

Look into event.preventDefault().

[bob_the _builder]

Ahh yes.. thats did the trick.. hard to explain some times 

 

 

Thanks..

[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..

 

   <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..

 

<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?

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

 

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

 

<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

 

<script type="text/javascript">

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

</script>

 

Maybe the above cancelling it out again?

[Adam]

The moment you click the #clickme button, this line is fired:

 

$("#content").html('Retrieving...');

 

That removes all the content within #content, and replaces it with a text node. That means the form and buttons cease to exist any more, which is why you can't access them.

[bob_the _builder]

Hmm strugling to put this together.. It doesnt seem to do it when using get method..

 

I thought that  $("#content").html('Retrieving...'); is just a loading screen while it processes the request.. assuming that it would still grab the posted variables and reload the div with the new data..

 

How should it be so I can have the entire script within the #content div without having to place the form outside the div?

 

Thanks

[Adam]

I thought that  $("#content").html('Retrieving...'); is just a loading screen while it processes the request..

 

Well that's what you get in-effect, but really you're just setting the HTML of #content to "Retrieving..." Essentially to:

 

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

 

So forms, inputs and all other elements are lost. To make it work you can simply capture the data before you set the HTML (i.e. switch around the lines). Although it may make more sense from a usability perspective just to move the form out of #content.

[Adam]

It doesnt seem to do it when using get method..

 

I can't see how it wouldn't. Can you show the whole code for each situation as it is when it's working / not working?

[bob_the _builder]

The form in this case is for login.. I really need it in the same div..

 

Basically the page called into the div: jqueryresult.php holds the php code to check against the email and password, relaod the form if match fails or set session data and show member panel..

 

If I shift the form to another div it will stay visable after successful login..

 

[Adam]

Makes sense, so..

 

To make it work you can simply capture the data before you set the HTML (i.e. switch around the lines). Although it may make more sense from a usability perspective just to move the form out of #content.

[bob_the _builder]

By switch around do you mean:

 

<script type="text/javascript">
   $("#clickme").click(function(){

         var data = {email: $('#email').val(), password: $('#password').val()};

   $("#content").html('<img src="./loading.gif">');

   $.post("jqueryget.php", data, function(response){
   $("#content").html(response);
   },'text');
});

 

?

 

Is it possible that upon successful login I could clear the div holding the login form?

[Adam]

Yes that's what I mean. An if #content holds the login form, then you're already clearing it.