Newbie to Javascript, jQuery and Ajax

JavaScript and client side scripting.

Moderator: General Moderators

Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

And another question:

Following is the current script for function displaymessage()

Code: Select all

/* This function is called from the button. It does not work if placed inside document.ready */
function displaymessage()
{

$.post("block_data.php",{ 'pass_array[]': [user, block_id]}, function(data) { 
   alert("Data Loaded: " + data); 
});
alert("test");
};
If I take out the alert("test"); line - then NOTHING happens. If I leave the line in - then the $.post executes just fine. Why is that?

Following is block_data.php code:

Code: Select all

<?php
session_start();
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/include/db_connect.php';

if(!empty($_POST['pass_array']))
{
$array = $_POST['pass_array'];
echo json_encode($array);
}
?>
Thanks Much - Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

Pavilion wrote:I've another question:

Why doesn't the following:

Code: Select all

/* This function is called from the button. It does not work if placed inside document.ready */
function displaymessage()
{
alert(user);

        $.post(block_data.php,{bind_user:user.val()},function(data){
                alert("Data Loaded: " + data);
        });
};
work inside the document.ready function of this script?
This is just a function definition; you still need to call it somewhere. Also, because it's only a function definition, it need not go inside the document.ready block.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

This is just a function definition; you still need to call it somewhere. Also, because it's only a function definition, it need not go inside the document.ready block.
OK - but here is my problem. At this point my code does the following:
  1. Creates an array of times selected by the user. This array is generated within the document.ready function. To be specific, the array is generated within an .each function. Code will follow below
  2. Uses the button to post the array generated within the .each function to block_data.php
  3. Block_data.php does receive the post - but NOT in the form of an array
  4. When I post within the .each function, block_data.php receives the whole array
  5. But... I want the user to be intentional about accepting the block of time they've chosen, so putting the post block within the .each block is NOT an option
Following are the applicable code snippets:

script portion of block.php

Code: Select all

<script>
/* Define variables. These variables will passed in an array for INSERT into time tables. */
var timestamp = new Date().getTime();
var user = "<?=$user?>";
var segment_date = "<?=$query_date?>";
var record_date = "<?=$record_date?>";
var unique = "'" + Math.round((timestamp / (user * 10)));
var unique_sub = unique.substr(5); /* unique_sub pulls a substring from var unique */
var block_id = user + "-" + unique_sub; /* var block_id will be used as a unique identifier for all related time records, across multiple tables */


$(document).ready(function() {
	$(function () {
		$( "#selectable" ).selectable({
			stop: function() {
				var result = $( "#select-result" ).empty();
				$( ".ui-selected", this ).each(function() {

				/* isolate, index, and segment_time ARE VARIABLES. By not preceding it them "var" I am allowing the variables to be accessed OUTSIDE this function. */
				isolate = $(this).text();
				index = $("#selectable li" ).index( this );
				segment_time = $(this).text();
					/* Now create an array from the data. The array will be passed to block_data.php.
					/* pass_array IS A VARIABLE. By not preceding it with "var" I am allowing the variable to be accessed OUTSIDE this function. */
					pass_array = new Array();
					pass_array[0] = user;
					pass_array[1] = block_id;
					pass_array[2] = segment_date;
					pass_array[3] = segment_time;
					pass_array[4] = "Blocked";
					pass_array[5] = record_date;

				/* create a result set to show on screen. Will not need this after you are successful in passing an array and sending it back */
				result.append(user + "," + block_id + "," + segment_date + "," + segment_time + ",Blocked," + record_date + "<br />");
				});
			}
		});
	});
});

/* This function is called from the button. It does not work if placed inside document.ready */
function displaymessage()
{
	$.post("block_data.php",{bind_array:pass_array},function(data){
/*	$.post("block_data.php",{bind_user:user, bind_bid:block_id, bind_date:segment_date},function(data){ */
	alert("Data Loaded: " + data);
	});
	
	alert(pass_array);
};
</script>
block_data.php

Code: Select all

<?php
session_start();
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/include/db_connect.php';
echo "Found file";

if (!empty($_POST['bind_array']))
{
	$array = $_POST['bind_array'];
	$user = $array[0];
	$block_id=$array[1];
	$seg_date=$array[2];
	$seg_time=$array[3];
	$status=$array[4];
	$record_date=$array[5];

	echo "user: " . $user . " Time: " . $seg_time;
}
?>
So.... how do I pass the ENTIRE array, if I cannot put the button within the document.ready and .each blocks?

Thanks so much Celauran - your help is greatly appreciated.

Pavilion
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

OH... here's the code snippet for my html button - it does call the function "displaymessage":

Code: Select all

<button id="test" onclick="displaymessage()">Test</button>
Thanks - Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

Why not use a .click() listener? Didn't we already have this working? You say block_data receives the post but not as an array; what is it receiving, then? Can you var_dump the data?
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

OK - here is the crux of my frustrations. I have tried a dozen different ways to Sunday to generate an array, pass the array to block_data.php and output the array in an html table to send back to block.php.

I am failing - following is the applicable script:

from block.php

Code: Select all

<script>
/* Define variables. These variables will passed in an array for INSERT into time tables. */
var timestamp = new Date().getTime();
var user = "<?=$user?>";
var segment_date = "<?=$query_date?>";
var record_date = "<?=$record_date?>";
var unique = "'" + Math.round((timestamp / (user * 10)));
var unique_sub = unique.substr(5); /* unique_sub pulls a substring from var unique */
var block_id = user + "-" + unique_sub; /* var block_id will be used as a unique identifier for all related time records, across multiple tables */

$(document).ready(function() {
	$(function () {
		var pass_array = [];
		$( "#selectable" ).selectable({
			stop: function() {	
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					segment_time = $(this).text();
					if(segment_time) /* this if statement does not allow a push to occur unless there is a value in the var "index" */
					{
					pass_array.push(user, block_id, segment_date, segment_time, "Blocked", record_date); /* creates an array of user_id, blocked status, default date, isolated time passed through each function. */
					}
				});
			}
		});
	$('#test').click(function() {
        $.post("block_data.php",{bind_array:pass_array},function(data){
			/* alert("Data Loaded: " + data); */
			$('#hidden').html(data);
			$('#hidden').css('display', 'inline');
        });
			/* alert(pass_array); */
							alert("now");
		});

	});
});
</script>
from block_data.php

Code: Select all

<?php
session_start();
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/include/db_connect.php';

if (!empty($_POST['bind_array']))
{
	$array = $_POST['bind_array'];

	$user = $array[0];
	$block_id=$array[1];
	$seg_date=$array[2];
	$seg_time=$array[3];
	$status=$array[4];
	$record_date=$array[5];

}
else
{
echo "not accessing data";
}
?>
<!DOCTYPE html>
<html>
<table name='timelist' border='1'>
<tr>
<th>View Time</th>
</tr>

<?php
$i= 0;
 while ($i <=10){   
	echo "<tr>";   
	echo "<td style='border: 1px black solid; text-align: center; width: 100px'>". $user ."</td>";   
	echo "<td style='border: 1px black solid; text-align: center; width: 120px;'>". $block_id ."</td>";   
	echo "<td style='border: 1px black solid; text-align: center; width: 50px'>".$seg_date ."</td>";
	echo "<td style='border: 1px black solid; text-align: center; width: 100px'>". $seg_time ."</td>";   
	echo "</tr>";   
$i++;   
}   
echo"</table>";

?>
</html>
The long and short of it is that the table displays the same $seg_time on every single row. Originally I thought I was only passing the a partial array. However when I print array the WHOLE array is coming through to block_data.php. For some reason I can not assign variables to the elements within the pass_array.

And - just as frustrating - when I try to assign keys WITHIN the push block itself - it mucks up my code. I'm no longer able to select values period.

Celauran - this has to be very frustrating to you. But... trust me... my level of frustration with the situation passed 10 sometime ago.

Any advice you have to offer would be greatly appreciated.

Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

Show me

Code: Select all

var_dump($_POST['bind_array']);
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Well... that brings up another problem I'm having. The output from block_data.php does display on block.php (for a second). But then it goes away. Just now I redirected incoming data - from block_data.php - to show in #standFormRight (and not a hidden div.

Code: Select all

	$('#test').click(function() {
        $.post("block_data.php",{bind_array:pass_array},function(data){
			$('#standFormRight').html(data);
        });
			alert("click event");
		});
And still the data arrives to block.php, shows for a second and is gone again.
__________________________

As long as I'm dumping my problems on you, you may want to know about one other little detail that is driving me bonkers.

Code: Select all

alert("click event");
The $('#test').click(function() { does not work unless I have some kind of alert within it. If I leave the function to ONLY handle the $.post then nothing happens at all.

So... for me to copy and past the output of

Code: Select all

var_dump($_POST['bind_array']);
I first must get it to stay on my block.php page long enough to copy/paste.

As always - your suggestions are welcome.

Pavilion
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

OK - for the time being - I've nested teh $.post block inside the stop.function(). Now the post executes as soon as I "stop" selecting times. And it returns data that stays on the screen. Following is the result of the var_dump($_POST['bind_array']);.

Code: Select all

array(42) { [0]=> string(3) "205" [1]=> string(9) "205-48379" [2]=> string(10) "2012-10-01" [3]=> string(8) "09:15 AM" [4]=> string(7) "Blocked" [5]=> string(10) "2012-04-19" [6]=> string(3) "205" [7]=> string(9) "205-48379" [8]=> string(10) "2012-10-01" [9]=> string(8) "09:30 AM" [10]=> string(7) "Blocked" [11]=> string(10) "2012-04-19" [12]=> string(3) "205" [13]=> string(9) "205-48379" [14]=> string(10) "2012-10-01" [15]=> string(8) "09:30 AM" [16]=> string(7) "Blocked" [17]=> string(10) "2012-04-19" [18]=> string(3) "205" [19]=> string(9) "205-48379" [20]=> string(10) "2012-10-01" [21]=> string(4) ":30 " [22]=> string(7) "Blocked" [23]=> string(10) "2012-04-19" [24]=> string(3) "205" [25]=> string(9) "205-48379" [26]=> string(10) "2012-10-01" [27]=> string(8) "09:45 AM" [28]=> string(7) "Blocked" [29]=> string(10) "2012-04-19" [30]=> string(3) "205" [31]=> string(9) "205-48379" [32]=> string(10) "2012-10-01" [33]=> string(8) "09:45 AM" [34]=> string(7) "Blocked" [35]=> string(10) "2012-04-19" [36]=> string(3) "205" [37]=> string(9) "205-48379" [38]=> string(10) "2012-10-01" [39]=> string(8) "10:00 AM" [40]=> string(7) "Blocked" [41]=> string(10) "2012-04-19" }
Long-term - the $.post needs to run under a button so the user can be intentional about selecting a block of time.

Thanks Celauran. You have no idea how much I appreciate your help.

Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

So just based on the output of the var_dump, I'm seeing one giant array where you probably ought to have a multidimensional array.

Code: Select all

[0]=> string(3) "205"
[1]=> string(9) "205-48379"
[2]=> string(10) "2012-10-01"
[3]=> string(8) "09:15 AM"
[4]=> string(7) "Blocked"
[5]=> string(10) "2012-04-19"
// New time block starts here, right?
[6]=> string(3) "205"
[7]=> string(9) "205-48379"
[8]=> string(10) "2012-10-01"
[9]=> string(8) "09:30 AM"
[10]=> string(7) "Blocked"
[11]=> string(10) "2012-04-19"
[12]=> string(3) "205"
[13]=> string(9) "205-48379"
[14]=> string(10) "2012-10-01"
[15]=> string(8) "09:30 AM"
[16]=> string(7) "Blocked"
[17]=> string(10) "2012-04-19"
// etc
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Celauran wrote:So just based on the output of the var_dump, I'm seeing one giant array where you probably ought to have a multidimensional array.

Code: Select all

[0]=> string(3) "205"
[1]=> string(9) "205-48379"
[2]=> string(10) "2012-10-01"
[3]=> string(8) "09:15 AM"
[4]=> string(7) "Blocked"
[5]=> string(10) "2012-04-19"
// New time block starts here, right?
[6]=> string(3) "205"
[7]=> string(9) "205-48379"
[8]=> string(10) "2012-10-01"
[9]=> string(8) "09:30 AM"
[10]=> string(7) "Blocked"
[11]=> string(10) "2012-04-19"
[12]=> string(3) "205"
[13]=> string(9) "205-48379"
[14]=> string(10) "2012-10-01"
[15]=> string(8) "09:30 AM"
[16]=> string(7) "Blocked"
[17]=> string(10) "2012-04-19"
// etc
Yes - the new time block starts exactly where you noted.

Celauran - is there any way to assign a variable to all string(3) values, or all string(9) values?

And if not... how do I create a multi-dimensional array with .push function?
And... how do I assign variables to values within the resulting .push array?

Thanks so much - Pavilion

Edit - now that I look at the array closer, I see that both my date values are assigned to string(10). Even though the first date value is the time segment date, and the second date value is a record date. So... assigning a variable to the strings will produce nothing but increased headaches.

Celauran - I tried assigning keys to the push. An example follows:

Code: Select all

pass_array.push(bind_user:user, bind_bid:block_id, bind_segdate:segment_date, bind_segtime:segment_time, bind_status:"Blocked", bind_recdate:record_date);
But doing this just solved problems.

I am really stumped here. :?

Pavilion
Last edited by Pavilion on Thu Apr 19, 2012 12:58 pm, edited 1 time in total.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

Pavilion wrote:how do I create a multi-dimensional array with .push function?

Code: Select all

var outer = new Array();
for (var i = 1; i < 4; i++)
{
    var inner = new Array();
    for (var j = 1; j < 4; j++)
    {
        inner.push(j);
    }
    outer.push(inner);
}
You'd make use of .each() instead of a for loop, but something akin to this should do the trick.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Celauran wrote:
Pavilion wrote:how do I create a multi-dimensional array with .push function?

Code: Select all

var outer = new Array();
for (var i = 1; i < 4; i++)
{
    var inner = new Array();
    for (var j = 1; j < 4; j++)
    {
        inner.push(j);
    }
    outer.push(inner);
}
You'd make use of .each() instead of a for loop, but something akin to this should do the trick.
I'm sorry - I know you are really trying to help me, and I must seem quite thick headed at this point. But... I honestly don't know what to do with your example.

I've got to feed the following information to .push:
  • User ID variable: user
  • BlockID variable:block_id
  • SegmentDate variable:segment_date
  • Segment Time variable:segment_time
  • Status value:"Blocked"
  • RecordDate Variable:record_date
Is it necessary to have an inner push nested for each of the above data points?

Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Newbie to Javascript, jQuery and Ajax

Post by Celauran »

Pavilion wrote:Is it necessary to have an inner push nested for each of the above data points?
It should work. Define an array outside the .each() function and another inside. Push the individual elements into the inner array, then push the inner array into the outer.

Something like this

Code: Select all

$(document).ready(function() {
    $(function () {
        var pass_array = [];
        $( "#selectable" ).selectable({
            stop: function() {      
                $( ".ui-selected", this ).each(function() {
                    var inner = [];
                    var index = $( "#selectable li" ).index( this );
                    segment_time = $(this).text();
                    if(segment_time)
                    {
                        inner.push(user, block_id, segment_date, segment_time, "Blocked", record_date);
                        pass_array.push(inner);
                    }
                });
            }
        });
// Etc.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Celauran - THANK YOU SO MUCH!!!!!! I don't understand you example completely - but I think I grasp the gist of it. It is assembling one array at a time and pushing it out of the each to the "main" array for lack of a better word.

I've no idea what to do with the result - but trust we'll cross that bridge when we come to it.

Right now - I want to focus on getting the mult-demensional array working with my application. At this point my head is about ready to explode and I've some client work that has to get done. I will work on this tonight.

Thank you again - Pavilion
Post Reply