Page 4 of 8
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:27 am
by Pavilion
Celauran wrote:How do you mean by 'successfully use it'? What is it you're trying to do?
Celauran - Thank you for answering.
I just want to extract times dragged from
<ul id="sortable1"> to
<ul id="sortable2">.
Specifically my goal is to create an array of times dragged into
<ul id="sortable2">, and INSERT that array into a MySQL table for managing selected times.
But... immediately... my goal is to echo or print the array - so that I can test and learn about extracting arrays from <ul> lists.
Again - thank you for answering my question. It is truly appreciated.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:45 am
by Celauran
Looks like you're already most of the way there; you're storing said information in a variable, now you just need to do something with the variable. If it's just to ensure you've grabbed the correct data, alert works fine or you could
.append() to an element.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 12:22 pm
by Pavilion
Celauran wrote:Looks like you're already most of the way there; you're storing said information in a variable, now you just need to do something with the variable. If it's just to ensure you've grabbed the correct data, alert works fine or you could
.append() to an element.
Hello Celauran:
I've tried "alert" - but am mucking something up.
So... as to this script:
Code: Select all
<script>
$('ul#sortable2 li').each(function(){
var btime = $(this).find('span:first-child').text();
});
</script>
I've tried placing this script in test.php, with an "alert". But... if you'll notice the script in test.php queries my table for a list of times and inserts that list in
<ul sortable1>. So running the each.function after dragging times to <ul sortable2> doesn't work. (Or at least not when I've tried).
If the each.function (with an alert) can be in the same script as test.php, then what is the syntax, where do I insert the script (after the html block)?
Or... do I need to run the each.function (with an alert) in a separate php file, and if so, which jquery function do I use to call the file???? The
$.post function????
Again - I know this is probably very basic to you, but it is baffling me beyond measure. Thank you so much for your patience.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 12:59 pm
by Celauran
I have precious little (read: zero) experience with jQuery UI, so I'm learning as I go. Does this look like it does more or less what you're trying to do?
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="css/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#startList').sortable({
connectWith: '#endList'
});
$('#endList').sortable({
connectWith: '#startList'
});
$('#test').click(function() {
$('#endList li').each(function() {
alert($(this).text());
})
});
});
</script>
</head>
<body>
<ul id="startList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<ul id="endList">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<button id="test">Test</button>
</body>
</html>
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 1:17 pm
by Pavilion
Hello Celauran:
Yes - I've been experimenting with the same concept as your code. Following is my attempt:
Code: Select all
<script>
<!---- Document ready function doesn't allow anything to execute unless the page is fully loaded. ------>
$(document).ready(function() {
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
$('#sortable2').click(function() {
$('ul#sortable2 li').each(function(){
var btime = $(this).find('span:first-child').text();
alert(btime);
});
});
});
</script>
Here are some of the issues I've run into.
- Firstly the .click(function) does return some results. Although if I've dragged over three time items, only the first will show up in an alert after clicking on sortable2
- I've tried .change(function) thinking that simply dropping a time selection in sortable2 will trigger a change event. But nothing happens when using .change.
- So... I've tried .receive, out and .update as well. Not only do these events not trigger the .each function, something else happens. I am not allowed to drag from sortable1 to [sortable2]
So... now for more questions
- Why is .click ONLY picking up the first value if I've dropped more than one time value in sortable2?
- Why do some of the other events freeze sortable1 and not allow dragging out of that list? I can multi-select, but I cannot drag from the list.
Thank you so much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 1:28 pm
by Celauran
Using .click() on the list itself seems like a bit of an unusual choice. As a user, I don't know that I'd think of doing that and/or that I might do it unintentionally.
That aside, could it be a browser issue? I copy/pasted your code (changing only the ID to match what I have) and it worked fine. Showed every element in the list.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 3:02 pm
by Pavilion
Celauran wrote:Using .click() on the list itself seems like a bit of an unusual choice. As a user, I don't know that I'd think of doing that and/or that I might do it unintentionally.
That aside, could it be a browser issue? I copy/pasted your code (changing only the ID to match what I have) and it worked fine. Showed every element in the list.
I don't like using .click() either (sigh)....
You mentioned that you have zero experience with jquery. How do you handle situations like this? If you'll look at the blocktime.php file that we worked on together, you'll notice the following:
- The file provides a date picker to the user.
- Once the user chooses a date, a .change function is triggered and blocktime_data.php queries my tables for a timelist.
- The timelist is fed back to block_time.php in a <table>.
- As that table stands right now, I can mult-select a group of times and drag them.
- If I drop my selection on an active input control, the selection drops listing times as follows ... "07:00 AM 07:15 AM 07:30 AM 07:45 AM 08:00 AM
For some reason I can not get an html table to "receive" my dragged list and display it in table format.
So... I thought I'd use jquery UI sortables. But there are problems here as well.
Besides the current problem of extracting data from the sortable list, there are other things.
If you've a way to create drag and drop between html tables without the jquery I would be most appreciative. I've researched a lot , but it always goes back to having to know javascript &/or jquery.
At the end of the day all I want is for my end users to be able to:
- Choose a date
- Be fed a list/table of time slots available
- multi-select a group of 15 minute segments
- drag that group to a receiving list/table
- INSERT chosen time blocks into the table that manages times.
Thanks Celauran - any advice you have in this arena is welcome.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 3:51 pm
by Celauran
Pavilion wrote:I don't like using .click() either (sigh)....
Not quite what I said. I don't like using .click()
on the list itself.
Pavilion wrote:You mentioned that you have zero experience with jquery.
I said I have no experience with jQuery
UI.
Pavilion wrote:If you've a way to create drag and drop between html tables without the jquery I would be most appreciative. I've researched a lot , but it always goes back to having to know javascript &/or jquery.
Not going to happen. You need to use JS here.
Something like this, maybe? (builds on my previous example)
Code: Select all
$(document).ready(function() {
$('#startList').sortable({
connectWith: '#endList'
});
$('#endList').sortable({
connectWith: '#startList',
});
$('#test').click(function() {
var times = [];
$('#endList li').each(function() {
times.push($(this).text());
})
$.post('ajax.php', { endList: times }, function(data) {
$('#debug').html(data);
});
});
});
What you're doing inside ajax.php depends on your needs.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 8:17 pm
by Pavilion
Celauran wrote:
Something like this, maybe? (builds on my previous example)
By "previous example" do you mean the exercise we worked through earlier defined by these two files?
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 src="../jquery/ui/jquery.ui.datepicker.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>
ajax.php
Code: Select all
<?php
if (!empty($_POST['date1']))
{
$date = new DateTime($_POST['date1']);
echo $date->format('m/d/Y');
}
?>
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 8:19 pm
by Celauran
No, I meant the one
a few posts back with .sortable(). I'd repost the code, but it's on my work computer.
Basically, my last JS snippet takes the contents of the "target" ul (I forgot what you had called it) and sends it as a POST request to some PHP page so you can build and execute your query.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 8:48 pm
by Pavilion
OK - following is the script from both my files:
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="css/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#startList').sortable({
connectWith: '#endList'
});
$('#endList').sortable({
connectWith: '#startList',
});
$('#test').click(function() {
var times = [];
$('#endList li').each(function() {
times.push($(this).text());
})
$.post('ajax.php', { endList: times }, function(data) {
$('#debug').html(data);
});
});
});
</script>
</head>
<body>
<ul id="startList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<ul id="endList">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<button id="test">Test</button>
</body>
</html>
Following is the way it appears on my screen

- test.jpg (10.75 KiB) Viewed 3360 times
I can not drag any items from "startlist" to "endlist"
You reference ajax.php in this snippet:
Code: Select all
$.post('ajax.php', { endList: times }, function(data) {
$('#debug').html(data);
But the only ajax.php we've discussed in this thread is the following:
Code: Select all
<?php
if (!empty($_POST['date1']))
{
$date = new DateTime($_POST['date1']);
echo $date->format('m/d/Y');
}
?>
I'm sorry Celauran - this must all seem so dense to you. So.... At this point here is my approach - unless you see me heading in the wrong direction..
- Work with celauran.php to get time data from my tables to fill in startList'
- Ask you how to format endList so that it can receive multiple rows of dropped time data.

- Redo ajax.php to echo a time array from endList
If there is something wrong with my intentions feel free to correct me.
Thanks again Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:02 pm
by Celauran
Remember that I've renamed my jQuery and jQuery UI files to be a little shorter. Replace my link and script tags with your own and you should be good to go.
I mentioned you'd have to set up your ajax.php as per your needs. For testing, I had done something like this:
Code: Select all
if (isset($_POST['endList']))
{
$query = "INSERT INTO table_name (time) VALUES ";
foreach ($_POST['endList'] as $time)
{
$query .= "({$time}), ";
}
rtrim($query, ', ');
echo $query;
}
This will create a mock query and, through the jQuery callback, display it inside <div id="debug">
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:33 pm
by Pavilion
Celauran wrote:Remember that I've renamed my jQuery and jQuery UI files to be a little shorter. Replace my link and script tags with your own and you should be good to go.
OK - at this point I've cleaned up the jQuery and jQuery UI file names and revised the <ul> startList to fill with time values from my database table. Following is the celauran.php script as it sits now:
Code: Select all
<?php
session_start();
if(!isset($_SESSION['user_id'])){
header("Location: login.php");
}
// 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Celauran</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/ui/jquery.ui.core.js"></script>
<script src="../jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#startList').sortable({
connectWith: '#endList'
});
$('#endList').sortable({
connectWith: '#startList',
});
$('#test').click(function() {
var times = [];
$('#endList li').each(function() {
times.push($(this).text());
})
$.post('ajax.php', { endList: times }, function(data) {
$('#debug').html(data);
});
});
});
</script>
</head>
<body>
<ul id="startList">
<?php
while($row = mysql_fetch_array($answer))
{
echo "<li>". $row['newtime'] ."</li>";
}
?>
</ul>
<ul id="endList">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<button id="test">Test</button>
</body>
</html>
The startList <ul> does fill wth time data from mySQL database. I can drag from "startList". But... I can not drop into "endList".
I'm wondering if I'm calling the right jQuery files.
- My assumption is that your <script type="text/javascript" src="js/jquery.js"></script> file is jquery-1.7.1.js?
- And, I'm assuming that your <script type="text/javascript" src="js/jquery-ui.js"></script> is the same as jquery.ui.all.css or jquery.ui.core.js?
At this point I am not creating an ajax.php until the "startList" is properly receiving data.
Celauran - your patience with my struggling is deeply appreciated.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:39 pm
by Celauran
I'm using minified jQuery and jQuery UI files. I don't think you are. According to
this post, it seems you have a separate file for sortable. Try including that as well.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Wed Apr 11, 2012 9:58 pm
by Pavilion
Celauran wrote:I'm using minified jQuery and jQuery UI files. I don't think you are. According to
this post, it seems you have a separate file for sortable. Try including that as well.
OK - I've added links to the other files:
Code: Select all
<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/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>
<script src="../jquery/jquery-1.7.1.js"></script>
And still "endList" is not receiving data (sigh).......
I ran test.php (from the post you referred me to) and I can drop values into the receiving element. All the files from test.php are now included in celauran.php - so I'm really confused as to where the problem is with getting endList to receive.
Pavilion