Newbie to Javascript, jQuery and Ajax

JavaScript and client side scripting.

Moderator: General Moderators

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:Now for one last question about your hidden div. I am making the assumption that my data table should be placed within <div id="hidden"></div>? Is this correct? Or... and this is where I am somewhat confused, should I place the data table in the new blocktime_data.php file?
Yes, place it in the hidden div. Inside blocktime_data.php (if that is the page called by jQuery and not the one containing the form) display the table. The jQuery callback will grab that output and write it to the hidden div.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Inside blocktime_data.php (if that is the page called by jQuery and not the one containing the form) display the table. The jQuery callback will grab that output and write it to the hidden div.
For the user, will there be a table to tab to? I know this sounds extremely basic, but if I put the table in blocktime_data.php - the jQuery callback will grab the table as well as the data, correct?
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 »

Yes, it should.
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:Yes, it should.
OK then, I have my learning exercise for this evening.

Thank you so much Celauran. Easter weekend is upon us so I'm not sure when I'll get back to you with results, but I will put as much time in as I can.

Again - please know how much I appreciate your patience and assistance.

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

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Well - my learning exercise isn't going as smoothly as I had hoped.

blocktime.php function for datepicker and corresponding input field:

Code: Select all

<script>
$(function() {
$("#datepicker").datepicker();
});
</script>


<input tabindex="2" type="date" id="datepicker" name="date1" /><br />
Where input id = "datepicker"

Celauran's php script

Code: Select all

<script type="text/javascript">
            $(document).ready(function() {
                $('#date1').change(function() {
                    $.post('ajax.php', { date1: $(this).val()}, function(data) {
                        $('#hidden').html(data);
                        $('#hidden').css('display', 'inline');
                    });
                });
            });
        </script>

<input tabindex="1" type="date" name="date1" id="date1" /><br />
Where input id = 'date1'.

I tried nesting the two different sets of functions into one so that I could assign just one input id. It didn't work. So... how can I assign the datepicker to <input date1> and still call the #date1 .change(function()?

Thanks in advance - 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 »

Not sure why yours isn't working. I just threw this together and it works fine.

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Debug</title>
        <link rel="stylesheet" type="text/css" href="assets/css/ui-lightness/jquery-ui.css" />
        <script type="text/javascript" src="assets/js/jquery.js"></script>
        <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#date').datepicker();
                $('#date').change(function() {
                    alert($(this).val());
                });
            });
        </script>
    </head>
    <body>
        <input id="date" type="text" />
    </body>
</html>
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Sigh... I must be doing something wrong here, Celauran.

Here is my script for celauran.php

Code: Select all

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Foo</title>
        <link rel="stylesheet" type="text/css" href="../schedule/include/formats.css"/>
		<link rel="stylesheet" href="../jquery/themes/custom-theme/jquery.ui.all.css">
		<script src="../jquery/jquery-1.7.1.js"></script>
        <style type="text/css">
            div#hidden
            {
                display: none;
            }
        </style>
		<script src="../jquery/ui/jquery.ui.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#date1').datepicker();
                $('#date1').change(function() {
                    $.post('ajax.php', { date1: $(this).val()}, function(data) {
                        $('#hidden').html(data);
                        $('#hidden').css('display', 'inline');
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="someForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <fieldset>
				<label tabindex="1.5" >Choose Date</label>
                <input tabindex="1" type="date" name="date1" id="date1" /><br />
            </fieldset>
        </form>
        <div id="hidden">

        </div>

    </body>
</html>
____________________________________________________________________________________
On another (but related) note. Since I would want to use a datepicker with every single date input in my project, would it be possible to do something in my formats.css with datepicker? I tried putting the following in my formats.css file:

Code: Select all

input[type=date]
{
$().datepicker();
}
But my date input did not pick up the datepicker. I'm assuming this is because of language conflicts???? Or is there some way to include the datepicker in my formating files so that I don't have to call it everytime I create an input type="date"???

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 »

I copy/pasted your script that isn't working, changed only the paths to the css/js files, and it works just fine for me. Have you checked your error console? Have you tested ajax.php independently?

Also, you can't mix JavaScript and CSS. Won't work.
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's how things are going:

Ajax.php
<?php
if (!empty($_POST['date1']))
{
$date = new DateTime($_POST['date1']);

echo $date->format('m/d/Y');
}
?>
This file is working fine. Because when I run celauran.php WITHOUT the datepicker line, data is returned from ajax.php. Here is celauran.php WITHOUT the datepicker line:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Foo</title>
        <link rel="stylesheet" type="text/css" href="../schedule/include/formats.css"/>
		<link rel="stylesheet" href="../jquery/themes/custom-theme/jquery.ui.all.css">
		<script src="../jquery/jquery-1.7.1.js"></script>
        <style type="text/css">
            div#hidden
            {
                display: none;
            }
        </style>
		<script src="../jquery/ui/jquery.ui.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
<!----- remove datepicker ----->
                $('#date1').change(function() {
                    $.post('ajax.php', { date1: $(this).val()}, function(data) {
                        $('#hidden').html(data);
                        $('#hidden').css('display', 'inline');
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="someForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <fieldset>
				<label tabindex="1.5" >Choose Date</label>
                <input tabindex="1" type="date" name="date1" id="date1" /><br />
            </fieldset>
        </form>
        <div id="hidden">

        </div>

    </body>
</html>
Here is celauran.php WITH the datepicker line:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Foo</title>
        <link rel="stylesheet" type="text/css" href="../schedule/include/formats.css"/>
		<link rel="stylesheet" href="../jquery/themes/custom-theme/jquery.ui.all.css">
		<script src="../jquery/jquery-1.7.1.js"></script>
        <style type="text/css">
            div#hidden
            {
                display: none;
            }
        </style>
		<script src="../jquery/ui/jquery.ui.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
				$('#date1').datepicker();
                $('#date1').change(function() {
                    $.post('ajax.php', { date1: $(this).val()}, function(data) {
                        $('#hidden').html(data);
                        $('#hidden').css('display', 'inline');
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="someForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <fieldset>
				<label tabindex="1.5" >Choose Date</label>
                <input tabindex="1" type="date" name="date1" id="date1" /><br />
            </fieldset>
        </form>
        <div id="hidden">

        </div>

    </body>
</html>
When the datepicker line IS inserted here are the results:
  1. NO calendar pops up upon clicking the input field.
  2. A date value has to be typed in manually
  3. After tabbing (or clicking) out of the field NOTHING is returned from ajax.php. No errors, no data....
I'm thinking the problem is with syntax in celauran.php because the calendar is not popping up. So the script is not even acting upon the datepicker line.

On another, but related note, in reading about the datepicker I learned that it too has event properties. Specific to this situation it has an OnClose event property. Now... I really do want to solve the immediate problem, it is important to learn proper nesting techniques.

But... I also want to learn the most efficient way to write script and use tools available. If it is more efficient to use the datepicker OnClose event to trigger the $.post() functions, then I'd like to learn about that as well.

Thanks so much - Pavilion
Last edited by Pavilion on Sat Apr 07, 2012 9:34 am, 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 »

View source, click on the links to the JavaScript files. You'll either see the file, or some 404 text. This will make sure your path info is correct. Assuming you're using Firefox, Ctrl+Shift+J is your friend.
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:View source, click on the links to the JavaScript files. You'll either see the file, or some 404 text. This will make sure your path info is correct. Assuming you're using Firefox, Ctrl+Shift+J is your friend.
OK Celauran - the nesting is working in both celauran.php and blocktime.php.

Now I have to break out my process php script from the blocktime.php and create the processing blocktime_data.php file. I'll keep you posted.

Also... I'm just asking ... what are your thoughts about my last question in the previous post:
On another, but related note, in reading about the datepicker I learned that it too has event properties. Specific to this situation it has an OnClose event property. Now... I really do want to solve the immediate problem, it is important to learn proper nesting techniques.

But... I also want to learn the most efficient way to write script and use tools available. If it is more efficient to use the datepicker OnClose event to trigger the $.post() functions, then I'd like to learn about that as well.
Celauran thanks again. I've learned so much since you started advising me.

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 »

I wouldn't worry too much about the efficiency of one over the other; it will be negligible. Go for what affords greater readability.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Success :D

blocktime_data is processing just as I hoped it would and returning data (and the table) to blocktime.php. THANK YOU!!!!

Now for my next challenge... :)

Firstly - I want to hide

Code: Select all

echo "<td>" . $row['newdate'] . "</td>";
in my table. The field only exists to process data. Users should only be able to see and multi-select a block of times. But... here's the question, if I hide the $row['newdate'] will it be selected when users multi-select times?

Also... I am exploring some of jQueries drag and drop lists. I affirm I can use these lists, allow users to drag and drop multiple blocks of time from list1 to list2 and then pick that data up for insertion into tables?

Every example I've found of the drag and drop lists uses variables for populating the lists. There is no demo of picking up data from a sql statement, populating a list and then inserting selections into a table.

Thanks Celauran - 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 - I've figured out how to use a jquery drag-drop sortable ui. I've also figured out how to populate the jquery <ul> list with time data from my table. But... I'm up against another brick wall.

Following is the script for test.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';

    $date1 = "10/01/2012";
	echo $date1;
	
// strtotime() will convert nearly any date format into a timestamp which can be used to build a date with the date() function.
$timestamp = strtotime($date1);
$start_date = date("Y-m-d", $timestamp);

$result="SELECT DATE_FORMAT(List_Dates.DB_Date, '%m/%d/%Y') as newdate, DATE_FORMAT(List_Time.TFM_Time,'%h:%i %p') as newtime
FROM List_Dates, List_Time
WHERE DATE(DATE_FORMAT(List_Dates.DB_Date,'%Y-%m-%d')) LIKE '" . $start_date . "%'
ORDER BY List_Time.TFM_Time";

$answer = mysql_query($result);

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Connect lists</title>
	<link rel="stylesheet" type="text/css" href="../schedule/include/formats.css"/>
	<link rel="stylesheet" href="../jquery/themes/custom-theme/jquery.ui.all.css">
	<script src="../jquery/jquery-1.7.1.js"></script>
	<script src="../jquery/ui/jquery.ui.core.js"></script>
	<script src="../jquery/ui/jquery.ui.widget.js"></script>

	<script src="../jquery/ui/jquery.ui.mouse.js"></script>
	<script src="../jquery/ui/jquery.ui.sortable.js"></script>
	<script src="../jquery/ui/jquery.ui.selectable.js"></script>
	<style>
	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable({
			connectWith: ".connectedSortable"
		}).disableSelection();
	});
	</script>
</head>
<body>

<div>
<ul name="timelist" id="sortable1" class="connectedSortable">
<?php
while($row = mysql_fetch_array($answer))
{
	echo "<li class='ui-state-default'>". $row['newtime'] ."</li>";
}
?>
</ul>

<ul name="blocklist" id="sortable2" class="connectedSortable">
	<li id="blocked" type="date" class="ui-state-highlight"></li>
</ul>
</div>

</body>
</html>
As I mentioned earlier, the script is successfully populating a sortable drag-drop list with times from my database. I can drag and drop one time from the left side timelist to the right side blocklist. Now I need to extract an array from the blocklist. I found the following:

Code: Select all

<script>
$('ul#myList li').each(function(){
var number = $(this).find('span:first-child').text();
var fruit = $(this).find('span:first-last').text();
});
</script>
For my application it makes sense to change the syntax as follows:

Code: Select all

<script>
$('ul#sortable2 li').each(function(){
var btime = $(this).find('span:first-child').text();
});
</script>
But... I can't figure out how to succesfully use it and echo the results. Everything I've tried results in failure. Any advice is welcome.

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 »

How do you mean by 'successfully use it'? What is it you're trying to do?
Post Reply