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 »

Celauran:

You mentioned last night...
I'm using minified jQuery and jQuery UI files. I don't think you are.
When I downloaded from jQuery, I worked from this screen and designed a custom theme. I'd download all over again, but fear at the end of the process, we'd still be crossing wires as to what files I should be using.

You mentioned that you renamed your files? Do know the original names of those files - so I can search for them and make sure I'm downloading the correct ones. Or... is there a way to simply attach those files to a post or private message (the way one can attach files to an email.)

I'm not sure if the files are the problem - but it's impossible to know until I get my script lining up with yours (and that includes those files).

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 »

It's all going to be the same code at the end of the day. The look and feel of the components will be different, but that hardly matters for our purposes. The only reason I mentioned that I have minified files is because everything is in one file, whereas you appear to have one file per component. I've attached the jQuery UI package I downloaded, though it's just the default package with the default theme.

EDIT: Actually, I think I see where the difference lies. You're using the files from the development-bundle directory. I'm using just the js and css directories.
Attachments
jquery-ui-1.8.18.custom.zip
(1.06 MiB) Downloaded 154 times
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:Actually, I think I see where the difference lies. You're using the files from the development-bundle directory. I'm using just the js and css directories.
OK - so you're using
  • The js file: jquery-ui-1.8.18.custom.min?
    The css file: jquery-ui-1.8.18.custom?
You've just shortened the names?

If these are correct - please let me know.

Thank you
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, I just shortened them to make them less annoying to type.
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, I just shortened them to make them less annoying to type.
OK then... Here is my script as it stands 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>
		
		<!------- FROM CEL ------>
		<link rel="stylesheet" type="text/css" href="/jquery-basic/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
        <script type="text/javascript" src="/jquery-basic/js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="/jquery-basic/js/jquery-1.7.1.min.js"></script>
		<!---- END CEL -------->
		
        <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>First</li>
		<li>Second</li>
       </ul>

        <button id="test">Test</button>
    </body>
</html>
As you can see - I am using the files you zipped me. They are installed in my FTP under jquery-basic. I left the file names "as is" so that you can either confirm they are the correct files.

And still... endList is not receiving dragged (and trying to drop) values.

I work in Firefox most of the time. But have also checked this in IE. In Firefox I can drag from startList, but am not allowed to drop into endList. In IE, it doesn't appear to be letting me drag, but that may simply be because I can't drop either.

If I am using the same files you are using there HAS to be something off with my script. Any ideas you have are very 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 »

Celauran - you should know one other thing:

Neither startList nor endList are sortable. I was just reading through the <script> functions and it occurred to me that the problem is not only the ability to drag and drop between lists, but extends to being able to sort within a list.

Somehow those functions are not executing.

You've probably deduced this, but I thought I'd give you the info about sortability as well.

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 »

If they aren't sortable, then your jQueryUI file isn't loading. Call up the page, view source, and click on the link to the file in your <script> tag to confirm. You should get a 404.
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:If they aren't sortable, then your jQueryUI file isn't loading. Call up the page, view source, and click on the link to the file in your <script> tag to confirm. You should get a 404.
I called up the page and hit <CTRL> + U. Then I clicked on the lines for each one of the files. All files loaded up and I could read them. NO 404 showed on any of the files.

One other thing you should know.

To step through the script I've been inserting a document.write() at different places. Currently my document.write is at the end of the document.read() function. Following is the syntax:

Code: Select all

        <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);
				});
			});
				<!--
				document.write("document .ready completed execution. <br />")
				//-->
		});
		</script>
When I call up the page the note in document.write does not show on the page.

If I put a document.write note at the beginning of the document.ready function - example follows -

Code: Select all

        <script type="text/javascript">
		
		$(document).ready(function() {
				<!--
				document.write("document .ready started execution. <br />")
				//-->
			$('#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>
Then the document.write note appears on screen - but the rest of the elements will not load up.

Not sure if this information is helpful - but thought I'd pass it along.

Thanks Celauran - I've got to get some work done now - but will check back in later.

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 Celauran - after much research, testing, and playing, etc... I now have the ability to sort and drag and drop. I had to use some different ui files than we were using together and I've changed some of the functions you had. My script (as it stands now follows).

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>
		
		<!----Following files have all been tested and are all needed --->
        <script type="text/javascript" src="/jquery-basic/js/jquery-1.7.1.min.js"></script>
		<script src="/jquery/dev/ui/jquery.ui.core.js"></script> 
		<script src="/jquery/dev/ui/jquery.ui.widget.js"></script>
		<script src="/jquery/dev/ui/jquery.ui.mouse.js"></script>
		<script src="/jquery/dev/ui/jquery.ui.sortable.js"></script>
		<!---- END File call ----->
	
	<style>
	#startList, #endList { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
	#startList li, #endList li { margin: 0 5px 5px 5px; padding: 2px; font-size: 1.2em; width: 120px; }
	</style>		

        <script type="text/javascript">
			$(document).ready(function() {
				$(function() {
					$( "#startList, #endList" ).sortable({
					connectWith: ".connectedSortable"
					}).disableSelection();
				});

				$('#test').click(function() {
					var my_arr=[];
						$('ul#endList li').each(function(){
						var btime = $(this).find('span:first-child').text();
						my_arr.push(btime);
						document.write (my_arr);
					});
				});
			});
		</script>
    </head>
    <body>

        <ul id="startList" class="connectedSortable">
		<?php
		while($row = mysql_fetch_array($answer))
		{
			echo "<li>". $row['newtime'] ."</li>";
		}
		?>
        </ul>
        <ul id="endList" class="connectedSortable">
		<li></li>
       </ul>

        <button id="test">Test</button>
    </body>
</html>
Under your test button is the following script:

[syntax=php$('#test').click(function() {
var my_arr=[];
$('ul#endList li').each(function(){
var btime = $(this).find('span:first-child').text();
my_arr.push(btime);
document.write (my_arr);
});
});[/syntax]

If the above function was working properly it would output the following array:
08:00 AM,
08:00 AM,08:15 AM,
08:00 AM,08:15 AM,08:30 AM,
08:00 AM,08:15 AM,08:30 AM,08:45 AM,
Instead it is outputting:
,
,,
,,,
,,,,
The array is putting in the coma, but no value. So.... I'm assuming the array is either picking up a null value, or generating a null value.

Any ideas you have 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 »

Celauran:

I've been doing so much reading, researching, testing, etc.. that my head starts to swim. And in the process I completely forgot about your suggested script for the .each(function). So... I just now inserted your script for the each.function and got absolutely wonderful results.

The array is returning correct values in the document.write.

Following is the script I inserted:

Code: Select all

$('#test').click(function() {
var times = [];
$('#endList li').each(function() {
times.push($(this).text());
document.write (times);
document.write ("<br />");
});
});
Now - all I have to do is grab the variable array and use it to INSERT times into my table. I do have one question though, how can I add a default date to the array string. For instance, instead of having my array appear as follows:
,08:00 AM
,08:00 AM,08:15 AM
,08:00 AM,08:15 AM,08:45 AM
,08:00 AM,08:15 AM,08:45 AM,09:15 AM
How can I get it to pick up the date entered by the user and have the array output?
10/01/2012, 08:00 AM, 10/01/2012, 08:15 AM, 10/01/2012, 08:30 AM
Celauran - thanks for all your help and patience - Pavilion
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

I found a way to add default values to the .push() function:

Firstly, when I INSERT the blocked times into the table, they need to include the user's selected date - using a variable. The INSERTed record also needs to include a status of "blocked". So... with some experimentation I came up with the following script:

Code: Select all

	</style>		
        <script type="text/javascript">
		var date1 ="<?=$date1?>";
		document.write(date1);
			$(document).ready(function() {
				$(function() {
					$( "#startList, #endList" ).sortable({
					connectWith: ".connectedSortable"
					}).disableSelection();
				});

				$('#test').click(function() {
					var times = [];
					if (null!= times)
					{
					$('#endList li').each(function() {
						times.push("blocked",date1,$(this).text());
					document.write (times);
					document.write ("<br />");
					});
					}
				});
			});
		</script>
What is so exciting to me is that it works, and by using the if statement I am also excluding null values. This script returns the following array:
block,10/01/2012,
block,10/01/2012,,block,10/01/2012,08:00 AM
block,10/01/2012,,block,10/01/2012,08:00 AM,block,10/01/2012,08:15 AM
block,10/01/2012,,block,10/01/2012,08:00 AM,block,10/01/2012,08:15 AM,block,10/01/2012,08:30 AM
block,10/01/2012,,block,10/01/2012,08:00 AM,block,10/01/2012,08:15 AM,block,10/01/2012,08:30 AM,block,10/01/2012,08:45 AM
Now... Celauran... for the million dollar question. How do I grab just the last row, for the INSERT query?

Thank you so much for all of your assistance. It feels so good to get to this point.

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 »

The only reason you're getting multiple rows at all is because you have the document.write inside your .each() block. Add your .post() after .each() and it will only send the final array.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Thanks Celauran - that helped a lot.

I've also added user_Id to the array. And now that I'm extracting an array - I want to work out some other bugs before moving onto INSERTing the data.

The biggest bug I've got right now is that I can not multi-select a block of time and drag the WHOLE block to endList. Do you have any ideas?
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Newbie to Javascript, jQuery and Ajax

Post by Pavilion »

Pavilion wrote:Thanks Celauran - that helped a lot.

I've also added user_Id to the array. And now that I'm extracting an array - I want to work out some other bugs before moving onto INSERTing the data.

The biggest bug I've got right now is that I can not multi-select a block of time and drag the WHOLE block to endList. Do you have any ideas?
Celauran - I've found this resource. It seems to be exactly what I want. Working with all these plugins and downloads is very new to me. In this situation I'm assuming all I need to do is copy/paste the script from the sources tab and trying to rework my existing file to fit their protocol?

Any suggestions you have on using these types of plugins is really appreciated.

________________________

Specifically - I don't even want to copy/paste the source code until I know I have the following jquery files - listed in their viewsource:

Code: Select all

    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.utils.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.ui.js"></script>
    <script type="text/javascript" src="/jquery_jcss_align/jquery.jcss_align.js"></script>
I don't recognize any of these file names and can not find them in my own jquery files (either the ones I downloaded or from the zipped files you sent).

So where (and how) do I get these files?
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 »

Justging by the names, jquery.min.js is just minified jQuery and jquery.ui.js is the minified jQuery UI file. jquery.utils.js is anyone's guess. Where is all this coming from?
Post Reply