Hello Folks:

I am new to using jQuery and am having a problem with the serialized Selectable capabilities.

My form has a button used to test the code. For some reason the following is occurring:

  1. The post function sends data to block_data.php just fine.
  2. Data is returned from block_data.php and populates a table, as expected.
  3. But.... the data only shows for a second and then disappears completely.
  4. However, when I run the same .post function within stop: function() {, then data is returned in the expected table and stays on the page until I refresh.
  5. Following is the applicable code.


Javascript, jQuery code from block.php
Code:
// document.ready function will not allow any functions to execute unless the page is fully loaded.
$(document).ready(function() {
        $(function () {
                /* Outer array. "pass_array" IS A VARIABLE. If it were preceded by "var" then "pass_array" would NOT be available for use outside this function. */
                pass_array = [];
                $( "#selectable" ).selectable({
                        stop: function() {
                                $( ".ui-selected", this ).each(function() {
                                        /* Inner array. "inner" IS A VARIABLE. If it were preceded by "var" then "inner" would NOT be available for use outside this function. */
                    inner = [];
                                        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 "segment_time" */
                                        {
                                       
                                        /* Creates a multidimensional array of user_id, block_id, segment_date, segment_time, "blocked", record_date passed through .each(function()). 1st line assembles the "inner" array and passes it onto the "outer" pass_array.push.*/
                                        inner.push(user, block_id, segment_date, segment_time, "Blocked", record_date);
                                        pass_array.push(inner);
                                        }
                                });
                               
                                $.post("block_data.php",{bind_array:pass_array},function(data){
                                $('#standFormRight').html(data);
                                });

                        }
                });
        });

                                $('#test').click(function() {
                                        $.post("block_data.php",{bind_array:pass_array},function(data){
                                        $('#standFormRight').html(data);
                                        });
                                        alert("click event");
                                });
});
HTML test button snippet

HTML Code:
<button id="test">Test</button>
Block_data.php file (receives selected block times from block.php jquery:
PHP Code:
<?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'];
    
$a $array;
    foreach (
$a as $b
    {
    
$user $b[0];
    
$block_id $b[1];
    
$seg_date $b[2];
    
$seg_time $b[3];
    
$status $b[4];
    
$rec_date $b[5];
    echo 
"seg_time: " $seg_time "<br />";
    }
}
else
?>
<!DOCTYPE html>
<html>
<table name='timelist' border='1'>
<tr>
<th>User</th>
<th>Block_ID</th>
<th>Segment Date</th>
<th>Segment Time</th>
<th>Status</th>
<th>Record Date</th>
</tr>

<?php

foreach ($a as $b
{  
    echo 
"<tr>";   
    echo 
"<td>"$b[0] ."</td>";   
    echo 
"<td>"$b[1] ."</td>";   
    echo 
"<td>".$b[2]."</td>";
    echo 
"<td>"$b[3] ."</td>";   
    echo 
"<td>".$b[4]."</td>";   
    echo 
"<td>".$b[5]."</td>";
    echo 
"</tr>";   
$i++;   
}   
echo
"</table>";
?>
</html>
Can anyone shed some light on why the returned data table disappears if trigger the .post function with the test button, but the same data tables stays on the screen if the .post function is triggered by the stop: function() { routine?

Thank you in advance -

Pavilion