Page 2 of 8
Re: Newbie to Javascript, jQuery and Ajax
Posted: Thu Apr 05, 2012 10:52 am
by Pavilion
Celauran - I really am thankful for all your help. Words can not even begin to convey...
Today I've a few deadline database projects that I have to pay attention to. But, I will go through your sample script this evening. At this point (baby-steps) I may have to have you walk me through it one line at a time. As much reading as I've done on jQuery and ajax - it is all still "french" to me.
On top of that - my VB background seems to be getting in the way here. In a typical application I'd simply call the function, there would be one (maybe two lines of code) with in the function
Me.Requery
Or
[Date1].Requery
It just works so differently. Every control has properties, functions are executed from one of the many event properties. It's literally a right-click to open up the VB Module, write the function, Close the module and the function becomes part of the control properties. As odd as it may seem the simplicity of VB is getting in the way here.
Even the word "object" has a different meaning in VB than it does in this context. When you said....
Rather than creating a DateTime object, you'd run your query here, but I think this demonstrates the general principle well enough.
I wasn't sure what you were referring to in the phrase "DateTime object" (sigh). It's not you... it's the terminology I've been using for two decades getting in the way of the same use in a different context.
But... I must go back to work. I will look at your example and I am VERY grateful for your patience and willingness to walk me through the most basic concepts here.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Thu Apr 05, 2012 5:18 pm
by Pavilion
OK - question and answer time. ...
OK - this explanation from jquery.com makes sense. "Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code. ..... To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:"
I assume that you are calling a function after the input "date" is "changed"? If I'm wrong - please correct me.
Code: Select all
$.post('ajax.php', { date: $(this).val()}, function(data)
Here you lose me. The whole script snippet completely confuses me. I can't even break the snippet into parts and determine what the different parts are doing
Code: Select all
$('#hidden').html(data);
$('#hidden').css('display', 'inline');
Again I don't understand what the #hidden parts are. I assume #hidden is referencing <div id="hidden"> below. But why and and what is the <div id="hidden"> for?
One snippet is "css" the other one is html(data). If <div id="hidden"> is infact "hidden" what data are you storing there? and why do you need to display it "inline"?
Thank you for your patience in my learning Celauran. It is deeply appreciated.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Thu Apr 05, 2012 5:59 pm
by Celauran
Pavilion wrote:
I assume that you are calling a function after the input "date" is "changed"? If I'm wrong - please correct me.
That's right.
Pavilion wrote:Code: Select all
$.post('ajax.php', { date: $(this).val()}, function(data)
Here you lose me. The whole script snippet completely confuses me. I can't even break the snippet into parts and determine what the different parts are doing
jQuery.post()
I'm sending a POST request to ajax.php with $_POST['date'] = the value of #date (ie. the text box with id 'date'). ajax.php returns a string, which I've called data.
Pavilion wrote:Code: Select all
$('#hidden').html(data);
$('#hidden').css('display', 'inline');
Again I don't understand what the #hidden parts are. I assume #hidden is referencing <div id="hidden"> below. But why and and what is the <div id="hidden"> for?
One snippet is "css" the other one is html(data). If <div id="hidden"> is infact "hidden" what data are you storing there? and why do you need to display it "inline"?
Now I'm using the data returned by the POST request to populate the div #hidden. This div is initially left empty and hidden via CSS; we'll fill it and display its contents only when we have content to display. The second line unhides it, basically. I could have used display: block instead.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Thu Apr 05, 2012 10:11 pm
by Pavilion
Code: Select all
$.post('ajax.php', { date: $(this).val()}, function(data)
OK - let me try and break this snippet down:
Excuse me while I slaughter standard terminology in an attempt to communicate my understanding. But the above string portion seems to be "Posting to ajax.php". You named the file "ajax.php", so this string portion could just as easily have been...
__________________________________________________________________________
- "date" is referencing the input named "date" below.
- date: (with a colon behind the input name) means that you are "binding" the value posted in the "date" input object.
- $(this) refers to the current object. Similar to "ME" in VB - as in Me.requery, Me.refresh, Me.Close - although I'm not sure what "object" $(this) is referencing. I assume because it is followed by .val(), that $(this) refers to the value returned by ajax.php?
I'm not sure what is happening here. My guess is that the function is returning data within the ().
So... how did I do in figuring the snippet out?
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 6:29 am
by Celauran
date: is JSON format. It adds the 'date' key to the $_POST array, basically. $(this) is the element that triggered the call, in this case #date. val() is the method to retrieve that element's value. So all in all, you pretty much had it.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 7:22 am
by Pavilion
date: is JSON format. It adds the 'date' key to the $_POST array,
OK - if I'm understanding you correctly,
date: is NOT related to the INPUT named "date". In the string above
date: is instructing the bound
$(this).val() to format JSON?
$(this) is the element that triggered the call, in this case #date.
So $(this) refers to
? OK - but ....
- Where is the
Code: Select all
<input type="text" name="date" id="date" />
referenced?
- How is the value pulled. I don't see any $_POST['date1']?
- Is it simply assumed because the form method is "post" and this script string is $.post?
- And if it is assumed... then what does one do when there is more than one input on the form (which may happen, because I may provide the ability to set time constraints)?
So all in all, you pretty much had it.
Thank you - it is starting to make sense, but I know there is a long way to go...
________________________________________________________________________________________________________
On the nuts and bolts level.
I attempted to re-produce your exercise in my own FTP, but go no real results. Right now the biggest problem I am having is this file reference:
Code: Select all
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
That file is NO WHERE in my jquery files. I did a search and found absolutely no
jquery-ui.css. I did find
jquery.ui.all.css, and I incorporated it into the script.
Neither can I find the following two files:
Code: Select all
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
Still when I run the file, named cel.php (for Celauran), I get a white screen with an input. When I enter a date and hit enter, the screen and input return with no data and no date value in the input. I assume this is (at least partly) because the referenced files are needed to run functions and handle the hidden div?
So... that causes me to wonder what files I downloaded from jQuery - I used this
custom download. Did I miss something in my download?
Thanks so much Celauran. With your help I am starting to pick this up.
OH... one last question... is the jQuery language a sort of sub-language to php?
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 7:53 am
by Celauran
Pavilion wrote:date: is JSON format. It adds the 'date' key to the $_POST array,
OK - if I'm understanding you correctly,
date: is NOT related to the INPUT named "date". In the string above
date: is instructing the bound
$(this).val() to format JSON?
JSON notation expects key : value rather than $array['key'] = value. I could have called it cheese instead, it would have made no difference. My ajax.php page would then have to look for $_POST['cheese'] though.
Pavilion wrote:$(this) is the element that triggered the call, in this case #date.
So $(this) refers to
? OK - but ....
- Where is the
Code: Select all
<input type="text" name="date" id="date" />
referenced?
- How is the value pulled. I don't see any $_POST['date1']?
- Is it simply assumed because the form method is "post" and this script string is $.post?
- And if it is assumed... then what does one do when there is more than one input on the form (which may happen, because I may provide the ability to set time constraints)?
#date (ie. the input with id date) is the element referenced by $(this). .change() is the event that triggered the function to be called. You don't see $_POST['date'] because we haven't submitted the form. I thought that was the whole point.
$.post() is jQuery sending the POST request to ajax.php. As far as ajax.php is concerned, it's dealing with a regular form submission, but doing it asynchronously allows us to update the original form before actually submitting it. The original form's action won't point to ajax.php
Pavilion wrote:On the nuts and bolts level.
I attempted to re-produce your exercise in my own FTP, but go no real results. Right now the biggest problem I am having is this file reference:
Code: Select all
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
That file is NO WHERE in my jquery files. I did a search and found absolutely no
jquery-ui.css. I did find
jquery.ui.all.css, and I incorporated it into the script.
Neither can I find the following two files:
Code: Select all
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
Still when I run the file, named cel.php (for Celauran), I get a white screen with an input. When I enter a date and hit enter, the screen and input return with no data and no date value in the input. I assume this is (at least partly) because the referenced files are needed to run functions and handle the hidden div?
So... that causes me to wonder what files I downloaded from jQuery - I used this
custom download. Did I miss something in my download?
No, that's my bad. The jQuery/jQueryUI package I downloaded had unwieldy filenames like jquery-1.7.2-min-something-something-way-too-long-to-be-reasonable.js
I renamed it. Ditto jQuery UI. Update the filenames in your script to match whatever you've got.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 12:10 pm
by Pavilion
Firstly - thank you for your patience in answering all of my questions.
No, that's my bad. The jQuery/jQueryUI package I downloaded had unwieldy filenames like jquery-1.7.2-min-something-something-way-too-long-to-be-reasonable.js
I renamed it. Ditto jQuery UI. Update the filenames in your script to match whatever you've got.
You're right - jQuery has very unwieldy filenames. I included the following in my
<head></head>.
Code: Select all
<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() {
$('#date').change(function() {
$.post('ajax.php', { date: $(this).val()}, function(data) {
$('#hidden').html(data);
$('#hidden').css('display', 'inline');
});
});
});
</script>
</head>
I'm still getting nothing upon entering a date. I get no error messages, and neither do I get the output of the ajax.php.
What am I doing wroing?
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 12:56 pm
by Celauran
onchange will fire when you leave the element and its contents are different. Try clicking in the input field, entering a date, then clicking out or pressing tab or something. Date should show up beneath.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 1:37 pm
by Pavilion
onchange will fire when you leave the element and its contents are different. Try clicking in the input field, entering a date, then clicking out or pressing tab or something. Date should show up beneath.
OK - that is a lesson in php events, or jquery events (I'm not sure what I'm dealing with here). My experience with events is that OnChange is triggered by even one key-stroke in a field. The closest thing to php/jquery OnChange in VB would be AfterUpdate. That event is simply triggered by tabbing out of a field, clicking out of a field, etc..
However on the page I just tested.. tabbing is NOT sufficient, it produces nothing. However, if I click out of the field, you are right a date shows up beneath. So.. note to self... always provide something for the user to click.
How do you handle this? What innocuous thing can I provide to cause a user to click out of a field?
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 1:49 pm
by Pavilion
OK - if I'm understanding you correctly, date: is NOT related to the INPUT named "date". In the string above date: is instructing the bound $(this).val() to format JSON?
JSON notation expects key : value rather than $array['key'] = value. I could have called it cheese instead, it would have made no difference. My ajax.php page would then have to look for $_POST['cheese'] though.
So the
date: key is referencing
Code: Select all
<input type="text" name="date" id="date" />
In my blocktime.php file the input is as follows:
Code: Select all
<input tabindex="1" type="date" id="datepicker" name="date1" /><br />
If I were to do the same thing with my input it would look as follows:
Code: Select all
$(document).ready(function() {
$('#date1').change(function() {
$.post('ajax.php', { date1: $(this).val()}, function(data) {
$('#hidden').html(data);
$('#hidden').css('display', 'inline');
});
});
});
.... where
#date is replaced with
#date1, and
date: is replaced with
date1:.
Is this correct?
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 1:56 pm
by Celauran
Yes, precisely.
As for your previous question, you could change the onchange event for onkeyup, which will fire as soon as a key is pressed and then released within that field. In order to not send junk dates, you'd want to check that the length of the string contained in that field is sufficient to contain a date.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 3:23 pm
by Pavilion
As for your previous question, you could change the onchange event for onkeyup, which will fire as soon as a key is pressed and then released within that field. In order to not send junk dates, you'd want to check that the length of the string contained in that field is sufficient to contain a date.
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
$('#date').onkeyup(function() {
$.post('ajax.php', { date: $(this).val()}, function(data) {
$('#hidden').html(data);
$('#hidden').css('display', 'inline');
});
});
});
</script>
I changed the syntax to
.onkeyup(function(){/b] and now nothing happens. When Itab out nothing happens, when I click off nothing happens. Just asking here, but could part of the problem be that there is no other object on the form to tab to, when one tabs out of this input?
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 3:28 pm
by Pavilion
That was the problem. I did the following:
- took onkeyup out and put .change(function) back in.
- Put a second input in the fieldset - this way when a user tabs - there is someplace for the tab to "land"
Then tabbing out triggered the event.
Re: Newbie to Javascript, jQuery and Ajax
Posted: Fri Apr 06, 2012 3:40 pm
by Pavilion
Now that I have a small understanding of what is happening this script, and how to write the syntax in my blocktime.php then I should be able to do the following:
- Add your functions - just as I outlined in my previous post
- Create a separate php file (in place of ajax.php), I'll call it blocktime_data.php instead.
- Run my SELECT statement from bloctktime_data.php?
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?
Thanks so much Celauran - Pavilion