6 Replies - 245 Views - Last Post: 17 March 2014 - 05:37 AM Rate Topic: -----

#1 ben_jamin  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 10-March 14

How to pass value using jquery/ajax

Posted 16 March 2014 - 09:43 AM

I build a site that loads properties and display on screen inside nice list. The code is:

index.php:
<html>
<body onload="javascript:total_properties()">
....
<script>
	function total_properties()
	{
		$.post('ajax/entire_list.php', {}, function(data)
		{
			$('#feedback').html(data);
		});
									
	}
</script>


The $.post should build the list of properties to display- Works fine.

For performance i defined on ajax/entire_list.php a mysqli LIMIT so i will not load entire properties at once but on each <next> click-
"SELECT address FROM properties LIMIT $start,$limit";


$start- Is the start of the counting.
$limit- How many to display on each time. (fix number)


My problems are:
1. Where to define the <next> button (inside ajax/entire_list.php or inside index.php)
2. How to increase the $start.

Is This A Good Question/Topic? 0
  • +

Replies To: How to pass value using jquery/ajax

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,851
  • Joined: 30-April 10

Re: How to pass value using jquery/ajax

Posted 16 March 2014 - 12:55 PM

View Postben_jamin, on 16 March 2014 - 08:43 AM, said:

My problems are:
1. Where to define the <next> button (inside ajax/entire_list.php or inside index.php)
2. How to increase the $start.


1. The button that will cause the function total_properties()
to fire will need to be in your index.php or where ever you are displaying your html.

2. Inside this line: $.post('ajax/entire_list.php', {}, function(data)
You can add some post data to send along to your php script;


var start = // This will hold your start value and can be changed according to what has already been recieved.

$.post('ajax/entire_list.php', {startVal: start}, function(data){
   // Do stuff with returned data
});



In the above code I sent startVal as post data containing the start variable value, this can be used in your php with the $_POST['startVal'] global variable.
Was This Post Helpful? 0
  • +
  • -

#3 ben_jamin  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 10-March 14

Re: How to pass value using jquery/ajax

Posted 17 March 2014 - 12:22 AM

View Postlaytonsdad, on 16 March 2014 - 12:55 PM, said:

View Postben_jamin, on 16 March 2014 - 08:43 AM, said:

My problems are:
1. Where to define the <next> button (inside ajax/entire_list.php or inside index.php)
2. How to increase the $start.


1. The button that will cause the function total_properties()
to fire will need to be in your index.php or where ever you are displaying your html.

2. Inside this line: $.post('ajax/entire_list.php', {}, function(data)
You can add some post data to send along to your php script;


var start = // This will hold your start value and can be changed according to what has already been recieved.

$.post('ajax/entire_list.php', {startVal: start}, function(data){
   // Do stuff with returned data
});



In the above code I sent startVal as post data containing the start variable value, this can be used in your php with the $_POST['startVal'] global variable.


How do I return value from the inner php back to index.php?
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,851
  • Joined: 30-April 10

Re: How to pass value using jquery/ajax

Posted 17 March 2014 - 12:52 AM

Anything you echo/print from your php script will be returned to the "data" argument in your callback function in the $.post call.

I suggest you you read a bit about $.post and see how you can return data.
Was This Post Helpful? 0
  • +
  • -

#5 ben_jamin  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 10-March 14

Re: How to pass value using jquery/ajax

Posted 17 March 2014 - 01:31 AM

As much as i understand i can return only string.
But i want to promote counter so my next button will display the next amount.
Was This Post Helpful? 0
  • +
  • -

#6 ben_jamin  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 10-March 14

Re: How to pass value using jquery/ajax

Posted 17 March 2014 - 03:20 AM

I know something simple is missing here.
How do i promote NEXT NUMBER?
Please look at my code and tell me what. it is last thing i need over here.

index.php file
<div class="center-frame" style="">
	<table class="properties table table-bordered" id="feedback" style="width:100%"></table>
	<script>
		function total_properties(start)
		{
			$.post('ajax/entire_list.php', {start:start}, function(data)
			{
				$('#feedback').html(data);
			});
								
		}
	</script>
								
	<div id="next" style="">
		<a class="button">
			<input type="button" value="next items" onclick="javascript:total_properties(NEXT NUMBER);">
		</a>
	</div>
				
				
</div>




Was This Post Helpful? 0
  • +
  • -

#7 ben_jamin  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 10-March 14

Re: How to pass value using jquery/ajax

Posted 17 March 2014 - 05:37 AM

I found the answer:


<div class="center-frame" style="">
	<table class="properties table table-bordered" id="feedback" style=""></table>
	
	<script type="text/javascript">
	// jump is $limit in mysqli select over the ajax/entire_list.php file
	     var jump  = 0;
	</script>	
				
	<script>
	function total_properties(start)
	{
		$.post('ajax/entire_list.php', {start:start}, function(data)
		{
			$('#feedback').html(data);
									
		});
	}
	</script>
				
	<div id="next" style="">
		<a class="button">
			<button onclick="javascript:total_properties(jump+=4)">NEXT</button>
		</a>
	</div>
				
</div>





Was This Post Helpful? 0
  • +
  • -

Page 1 of 1