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 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?
Newbie to Javascript, jQuery and Ajax
Moderator: General Moderators
Re: Newbie to Javascript, jQuery and Ajax
Re: Newbie to Javascript, jQuery and Ajax
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?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.
Re: Newbie to Javascript, jQuery and Ajax
OK then, I have my learning exercise for this evening.Celauran wrote:Yes, it should.
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
Re: Newbie to Javascript, jQuery and Ajax
Well - my learning exercise isn't going as smoothly as I had hoped.
blocktime.php function for datepicker and corresponding input field:
Where input id = "datepicker"
Celauran's php script
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
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 />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 />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
Re: Newbie to Javascript, jQuery and Ajax
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>Re: Newbie to Javascript, jQuery and Ajax
Sigh... I must be doing something wrong here, Celauran.
Here is my script for celauran.php
____________________________________________________________________________________
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:
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
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();
}Thanks Much:
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
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.
Also, you can't mix JavaScript and CSS. Won't work.
Re: Newbie to Javascript, jQuery and Ajax
OK here's how things are going:
Ajax.php
Here is celauran.php WITH the datepicker line:
When the datepicker line IS inserted here are the results:
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
Ajax.php
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:<?php
if (!empty($_POST['date1']))
{
$date = new DateTime($_POST['date1']);
echo $date->format('m/d/Y');
}
?>
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>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>- NO calendar pops up upon clicking the input field.
- A date value has to be typed in manually
- After tabbing (or clicking) out of the field NOTHING is returned from ajax.php. No errors, no data....
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.
Re: Newbie to Javascript, jQuery and Ajax
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.
Re: Newbie to Javascript, jQuery and Ajax
OK Celauran - the nesting is working in both celauran.php and blocktime.php.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.
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:
Celauran thanks again. I've learned so much since you started advising me.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.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
I wouldn't worry too much about the efficiency of one over the other; it will be negligible. Go for what affords greater readability.
Re: Newbie to Javascript, jQuery and Ajax
Success
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 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
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>";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
Re: Newbie to Javascript, jQuery and Ajax
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
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:
For my application it makes sense to change the syntax as follows:
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
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>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>
Code: Select all
<script>
$('ul#sortable2 li').each(function(){
var btime = $(this).find('span:first-child').text();
});
</script>
Thanks Much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
How do you mean by 'successfully use it'? What is it you're trying to do?