[jQuery] Re: Horizontal image carousel w/scrollbar plugin for jQuery?
Hi wshawn, Yes - I checked out Flowplayer but didn't see a scrollbar progression along the base of the carousel like in the Dyn-web interface. Unless I am missing something in the options? I just saw filled or empty dots to reflect the progress - not a 'slideresque' bar like my client requires. Please correct me if I am wrong in that assumption. On Nov 5, 11:18 am, wshawn sh...@sanityllc.com wrote: Have you considered:http://flowplayer.org/tools/demos/scrollable/index.html I is one of the most flexible ones I have seen. On Nov 5, 11:54 am, tatlar robertlnew...@gmail.com wrote: Hi Karl, Thanks for the response. Wow - those solutions are pretty tight. The Highpoint site JS source code is slightly easier to read that the Fusionary site, so I will study that. Best regards, - Rob On Nov 5, 5:32 am, Karl Swedberg k...@englishrules.com wrote: The jQuery UI Slider is great for this sort of thing. It's not an out- of-the-box solution, but if you're willing to write some of your own code, it can make doing this sort of thing a lot easier. Here are two implementations that I've put together. Nothing spectacular, and probably not exactly what you're looking for, but it should give you an idea of what can be done: http://www.fusionary.com/http://www.highpointre.com/ --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Nov 5, 2009, at 12:39 AM, tatlar wrote: Hi jQuery gurus, Has anyone seen an equivalent of dyn-web's scrollbar but written on top of jQuery? http://www.dyn-web.com/code/scroll/horiz.php I have a client who wants this functionality, but I cannot use the dyn- web as it conflicts with the jQuery plugins that I am currently using. I assume it is due to how events are registered and handled. I have searched all over but cannot find (a) an image carousel that is controlled with an onmouse event (they are all onclick events), and (b) the scrollbar progression beneath the carousel as the user moves horizontally through the gallery. I am more than happy to attempt to write my own, but if anyone knows of any pointers to get me started I would be most grateful. FWIW I am currently using the jCarouselLite plugin, which is great, but just not _exactly_ what the client wants. Thanks in advance.
[jQuery] Re: search list in a div for attribute value
Oops. This sentence:
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Should be:
I want to traverse the list, looking at the title attribute, and if
it is in the array $search I want the style changed.
On Aug 28, 1:27 pm, tatlar robertlnew...@gmail.com wrote:
i think this is a pretty simple question, but i can't seem to figure
it out.
i have a list in a div:
div id=gallery
ul
li title=foofoo/li
li title=barbar/li
li title=unicornunicorn/li
/ul
/div
I have an array with values in it:
var $search = [ foo, bar ] ;
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Note that #gallery has about 450 list items - the one above is
abridged for this post.
The array $search will at most have 5 items.
So, is it faster to do a $.each() on the list items, or do a $.each()
on the $search items. I am pretty sure it is faster to do the latter,
but I am not sure how to get the title attribute from the list items
for the match.
Something like?
$.each( $search, function(i, value) {
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
});
Can someone refine this for me? Thanks in advance.
[jQuery] Re: search list in a div for attribute value
Hmm. Would this be expected to work?
$gallery.find('li[title='+$title_to_searchl+']').css('color','red');
On Aug 28, 1:31 pm, tatlar robertlnew...@gmail.com wrote:
Oops. This sentence:
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Should be:
I want to traverse the list, looking at the title attribute, and if
it is in the array $search I want the style changed.
And this:
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
Should be:
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title_to_search).css('background-
color','red');
On Aug 28, 1:27 pm, tatlar robertlnew...@gmail.com wrote:
i think this is a pretty simple question, but i can't seem to figure
it out.
i have a list in a div:
div id=gallery
ul
li title=foofoo/li
li title=barbar/li
li title=unicornunicorn/li
/ul
/div
I have an array with values in it:
var $search = [ foo, bar ] ;
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Note that #gallery has about 450 list items - the one above is
abridged for this post.
The array $search will at most have 5 items.
So, is it faster to do a $.each() on the list items, or do a $.each()
on the $search items. I am pretty sure it is faster to do the latter,
but I am not sure how to get the title attribute from the list items
for the match.
Something like?
$.each( $search, function(i, value) {
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
});
Can someone refine this for me? Thanks in advance.
[jQuery] search list in a div for attribute value
i think this is a pretty simple question, but i can't seem to figure
it out.
i have a list in a div:
div id=gallery
ul
li title=foofoo/li
li title=barbar/li
li title=unicornunicorn/li
/ul
/div
I have an array with values in it:
var $search = [ foo, bar ] ;
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Note that #gallery has about 450 list items - the one above is
abridged for this post.
The array $search will at most have 5 items.
So, is it faster to do a $.each() on the list items, or do a $.each()
on the $search items. I am pretty sure it is faster to do the latter,
but I am not sure how to get the title attribute from the list items
for the match.
Something like?
$.each( $search, function(i, value) {
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
});
Can someone refine this for me? Thanks in advance.
[jQuery] Re: search list in a div for attribute value
Oops. This sentence:
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Should be:
I want to traverse the list, looking at the title attribute, and if
it is in the array $search I want the style changed.
And this:
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
Should be:
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title_to_search).css('background-
color','red');
On Aug 28, 1:27 pm, tatlar robertlnew...@gmail.com wrote:
i think this is a pretty simple question, but i can't seem to figure
it out.
i have a list in a div:
div id=gallery
ul
li title=foofoo/li
li title=barbar/li
li title=unicornunicorn/li
/ul
/div
I have an array with values in it:
var $search = [ foo, bar ] ;
I want to traverse the array, looking at the title attribute, and if
it is in the array $search I want the style changed.
Note that #gallery has about 450 list items - the one above is
abridged for this post.
The array $search will at most have 5 items.
So, is it faster to do a $.each() on the list items, or do a $.each()
on the $search items. I am pretty sure it is faster to do the latter,
but I am not sure how to get the title attribute from the list items
for the match.
Something like?
$.each( $search, function(i, value) {
var $title_to_search = value;
// pseudo code I know this is junk
$gallery.find('li').attr('title',$title).css('background-
color','red');
});
Can someone refine this for me? Thanks in advance.
[jQuery] Re: Using namespaced event bindings for multiple $.ajax() calls.
This thread helped me solve the problem, in particular Mike Alsups
awesome comment on adding new properties to the .ajax() method. Very
nice Mike!
http://groups.google.com/group/jquery-en/browse_thread/thread/f6b723f6119f1ada/9ceea36b6e0f0e06?hl=enlnk=gstq=multiple+ajax+calls#9ceea36b6e0f0e06
On Apr 16, 3:10 pm, tatlar robertlnew...@gmail.com wrote:
Hi there,
I have an application with multiple $.ajax() calls:
(1) When the page loads, an $.ajax() call grabs and parses a JSON
object.
(2) When a link is clicked, an $.ajax() call sends a query to a PHP
page, which returns a JSON object, which is then parsed and displayed.
I have been having problems because both these events have little
spinning icons in different parts of the page to show that an AJAX
query is taking place. I am doing this using the bind() function to a
ajaxSend() namespaced event. I have the (#2) working, by doing the
following:
$(a).bind( 'click.getReport', function() {
$.ajax({
type: GET,
url: my.php,
dataType: json,
global: true,
data: { var1:a, var2:b, var3:c },
success: function() {},
error: function() {}
});
}
and
$(#report).bind(ajaxSend.getReport,function(){
$(this).html('h3Selected report/h3pimg src=/images/ajax-
loader_gray.gif /br/LOADING.../p');
});
where #report is the DIV that shows the status on the page.
However, I have not solved the issue of applying a namespaced event
handler to a low-level $.ajax() call that occurs when the page loads
(#1). I have searched online for this, but to no avail - everything
seems to relate to if you are writing you own plugin or just binding
to a click event. I need to somehow bind the $.ajax call to a
namespaced event. The $.ajax() options list does not seem to have an
entry for namespacing, so where do I add it?
Here is the code I currently have:
$(document).ready(function(){
$.ajax({
type: GET,
url: /cachexml/json/stalist.json,
dataType: json,
global: false,
success: function() {},
error: function() {}
});
});
and
$(#dynamicReport).bind(ajaxSend.getList,function(){
$(this).html('img src=/images/small_ajax_loader.gif /');
});
You can see I have the getList class in the binding - but where in the
jQuery $.ajax() code do I reference this? Notice also that I have
global set to true in the 'getReport' namespaced event and set to
false in the 'getList' namespaced event. If I set 'getReport' to
global: false, it no longer works. Clearly I am not doing something
right!
Thanks for any help - I have given up searching online and am getting
desperate!
[jQuery] Re: clueTip plugin - onClose option in the API?
Brilliant! Thanks Karl! Have a great weekend and thanks for writing
such a sweet jquery plugin.
On Apr 16, 6:38 pm, Karl Swedberg k...@englishrules.com wrote:
Hi there,
The plugin already has an onHide option. I just fixed it so that
within onHide's anonymous function this will be the invoking element.
so, your additional option would be :
onHide: function() {
$(this).parent().removeClass('selectedCell');
})
You can grab the updated plugin on GitHub:
http://github.com/kswedberg/jquery-cluetip/tree/master
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Apr 16, 2009, at 1:51 PM, tatlar wrote:
Hi there,
I am using Karl's clueTip plugin in a table. When the user clicks a
link in the table, the clueTip pops up, and the CSS of the table cell
changes using the addClass method (adds a class called
'selectedCell'). This is all well and groovy, but what I want to do in
addition, is that when the user closes the clueTip window, the CSS of
the selected table cell reverts to its previous class. I was looking
for an onClose in the clueTip API options list and could not find
one.
Does anyone know how I could achieve this desired behavior? What I
have right now is that when the user clicks one cell all the current
table cells are reset (have the class removed) and then a class is
applied ('selectedCell'). When another a link is clicked in the table,
all the current table cells with that class have it removed, and the
newly clicked cell has the class applied:
$(a.jTip).click( function() {
$('table tbody tr td').removeClass('selectedCell');
$(this).parent().addClass('selectedCell');
}
clueTip is called thus:
$(a.jTip).cluetip({
cluetipClass: 'jtip',
arrows: true,
hoverIntent: false,
mouseOutClose: true,
sticky: true,
activation: 'click',
splitTitle: '|',
closeText: 'X',
closePosition: 'title',
tracking: true,
showTitle: true
}) ;
I want to add another option (in pseudo-code):
onClose: function(e) {
e.parent().removeClass('selectedCell')
}
Is this worth modifying the plugin for? Am I even going about this the
right way? Thanks in advance.
[jQuery] clueTip plugin - onClose option in the API?
Hi there,
I am using Karl's clueTip plugin in a table. When the user clicks a
link in the table, the clueTip pops up, and the CSS of the table cell
changes using the addClass method (adds a class called
'selectedCell'). This is all well and groovy, but what I want to do in
addition, is that when the user closes the clueTip window, the CSS of
the selected table cell reverts to its previous class. I was looking
for an onClose in the clueTip API options list and could not find
one.
Does anyone know how I could achieve this desired behavior? What I
have right now is that when the user clicks one cell all the current
table cells are reset (have the class removed) and then a class is
applied ('selectedCell'). When another a link is clicked in the table,
all the current table cells with that class have it removed, and the
newly clicked cell has the class applied:
$(a.jTip).click( function() {
$('table tbody tr td').removeClass('selectedCell');
$(this).parent().addClass('selectedCell');
}
clueTip is called thus:
$(a.jTip).cluetip({
cluetipClass: 'jtip',
arrows: true,
hoverIntent: false,
mouseOutClose: true,
sticky: true,
activation: 'click',
splitTitle: '|',
closeText: 'X',
closePosition: 'title',
tracking: true,
showTitle: true
}) ;
I want to add another option (in pseudo-code):
onClose: function(e) {
e.parent().removeClass('selectedCell')
}
Is this worth modifying the plugin for? Am I even going about this the
right way? Thanks in advance.
[jQuery] Using namespaced event bindings for multiple $.ajax() calls.
Hi there,
I have an application with multiple $.ajax() calls:
(1) When the page loads, an $.ajax() call grabs and parses a JSON
object.
(2) When a link is clicked, an $.ajax() call sends a query to a PHP
page, which returns a JSON object, which is then parsed and displayed.
I have been having problems because both these events have little
spinning icons in different parts of the page to show that an AJAX
query is taking place. I am doing this using the bind() function to a
ajaxSend() namespaced event. I have the (#2) working, by doing the
following:
$(a).bind( 'click.getReport', function() {
$.ajax({
type: GET,
url: my.php,
dataType: json,
global: true,
data: { var1:a, var2:b, var3:c },
success: function() {},
error: function() {}
});
}
and
$(#report).bind(ajaxSend.getReport,function(){
$(this).html('h3Selected report/h3pimg src=/images/ajax-
loader_gray.gif /br/LOADING.../p');
});
where #report is the DIV that shows the status on the page.
However, I have not solved the issue of applying a namespaced event
handler to a low-level $.ajax() call that occurs when the page loads
(#1). I have searched online for this, but to no avail - everything
seems to relate to if you are writing you own plugin or just binding
to a click event. I need to somehow bind the $.ajax call to a
namespaced event. The $.ajax() options list does not seem to have an
entry for namespacing, so where do I add it?
Here is the code I currently have:
$(document).ready(function(){
$.ajax({
type: GET,
url: /cachexml/json/stalist.json,
dataType: json,
global: false,
success: function() {},
error: function() {}
});
});
and
$(#dynamicReport).bind(ajaxSend.getList,function(){
$(this).html('img src=/images/small_ajax_loader.gif /');
});
You can see I have the getList class in the binding - but where in the
jQuery $.ajax() code do I reference this? Notice also that I have
global set to true in the 'getReport' namespaced event and set to
false in the 'getList' namespaced event. If I set 'getReport' to
global: false, it no longer works. Clearly I am not doing something
right!
Thanks for any help - I have given up searching online and am getting
desperate!
[jQuery] Re: Autocomplete plugin for multiple form fields from a JSON source [autocomplete]
Hi Tom,
Thanks for the ideas. Unfortunately there is a fundamental issue with
my JSON file that I returning and how the autocomplete plugin handles
input.
The JSON file is an object. Jorn's autocomplete plugin only handles
arrays (see here:http://docs.jquery.com/Plugins/Autocomplete). Notice
this sentence in particular:
For local autocomplete, just pass the data as an array to the
autocomplete plugin.
Passing autocomplete a complex object (such as my JSON file) causes
the browser to hang with multiple queries, due to how autocomplete
automagically parses the information it is given to a URL string, and
it expects an array. I checked a couple of times, and the console log
just spins wildly! :)
It is not the fault of the plugin - it is just me putting the wrong
data type into it.
So, I got around this by creating another JSON file that is just an
array of station names. Autocomplete now parses this just fine, and my
first field is completed. The next part was more tricky - how to
populate the second input field based on the number of report types (I
actually ended up using a select element with the option list
populated with the reports available. My solution is pretty inelegant,
but uses a nice option in Jorns plugin, the result() option (http://
docs.jquery.com/Plugins/Autocomplete/result#handler). Using this, I
can get the match from the first autocomplete call, and write a
callback function that then goes via AJAX to my original complex JSON
object to just get the matching stations object. It is a little long
winded (I iterate over every station in the original JSON object) and
I am sure John Resig would write it much much more nicely, but it
works in about 20ms!
Here is the code:
$(function(){
$.ajax({
type: GET,
url: /path/to/simple_array_of_station_names.json,
dataType: json,
global: false,
success: function(data) {
$.each(data, function() {
$(#stacode).autocomplete(this).result( function
( event, data, mysta ) {
$(#dynamicReport).html( ) ;
// Check I am getting the correct station as
selected by autocomplete plugin
// console.log( mysta ) ;
// Use that in the larger JSON object that has all
the report types and times
$.ajax({
type: GET,
url: /path/to/reports.json,
dataType: json,
global: false,
success: function( reports ) {
/*
NOTE:
Not sure why $.each(reports.stations.mysta,
function( repSta,repStaObj ) {} ) ;
does not work - any ideas anyone? It is a
valid way to get the matching station
in the JSON structure, right? Oh well, lets
just iterate over the whole thing with $.each()
*/
$.each(reports.stations, function
( repSta,repStaObj ) {
// The matching station
if( repSta === mysta ) {
// Quick and dirty DOM markup,
purists look away
var selection =
'nbsp;nbsp;nbsp;label for=reportTypeReport /labelselect
id=reportType' ;
$.each(repStaObj, function
( repStaRepsTypes, repStaRepsTimes ) {
console.log( Type is:
+repStaRepsTypes+ Time is: +repStaRepsTimes );
selection +=
option+repStaRepsTypes+/option ;
});
selection += '/
selectnbsp;nbsp;nbsp;input type=submit value=Go! /' ;
// Update the span element with
the select box
$(#dynamicReport).html
( selection ) ;
}
});
},
error: function() {
alert( Could not load the available
report list ) ;
}
});
});
});
},
error: function() {
alert( Could not load station list for form
autocomplete ) ;
}
});
});
The inline HTML looks like:
div id=form_autocomplete style=none
form id=autorep autocomplete=off
pstrongShortcut to view a stations reports:/strong
label for=stacodeStacode /label
input id=stacode type=text class=auto maxlength=4
size=8/
span id=dynamicReport/span
/p
/form
/div
So that is my solution. Not pretty. But it works. If anyone would like
to pipe in and tell me where I could improve it, I am all ears!!!
Thanks for the ideas and feedback.
On Apr 15, 5:40 pm, Tom Worster
[jQuery] Autocomplete plugin for multiple form fields from a JSON source [autocomplete]
Hi there,
I have a nicely formatted JSON file that looks like:
{
stations : {
F07A : {
calibration : 1212797922,
construction : 1152736320,
calibrationplot : 158922,
service : [
1186011098,
1209718352,
1213577558,
1214081337,
1220576523
],
installation : 1157069307
},
snip
S08C : {
dlevent : 1196697107,
removal : 1192723069,
service : [
1127293181,
1154632570,
1157479149
],
installation : 1123277295
}
}
}
It consists of the 'stations' object, with keys that are station
names, then an object that has station visit type and an associated
timestamp. If there is more than one visit, then an array is created
(such as 'service' in my snippet above).
I am using Jorn's awesome autocomplete plugin in one form field to
allow a user to quickly narrow down which station they wish to view
visit times for. However, it would be really cool to extend this so
that when the selection is narrowed to one station, there is another
form input field listing all the available visit types that is
populated from the JSON file as well. I have seen this with simple
javascript arrays from way back (eg:
http://www.plus2net.com/php_tutorial/dd3.php)
but I was wondering if anyone has implemented such as setup using the
autocomplete plugin (or another plugin).
I see in the plugin API there is a 'multiple' option, but that appears
to be for the same text field. I guess I will have to write a call-
back function when autocomplete narrows the search to one in the first
input field, but I am not sure how to bind them. Any ideas?
Thanks in advance.
[jQuery] Re: A little help needed with form processing and page redirects
You want an event fired when the user clicks the submit button.
Look here: http://docs.jquery.com/Events/submit#fn
That example should get you going.
Now there are two scenarios for you to choose from:
(1) When the submit button is clicked, you want to call an ajax
method, passing all the form parameters, with the method GET or POST,
to a PHP page that determines which answers are correct, returning a
data structure that you can then parse.
Look here: http://docs.jquery.com/Ajax
There is a method for just using POST (jQuery.post()) but I would be
inclined to use the main jQuery.ajax() method - it gives you more
control, with timeout and error handling.
When the data is successfully returned, you parse the data structure
using jQuery.each().
(2) All the correct answers are in an object already on your page in
the header, something like:
var answers = {
q1:2,
q2:3,
q3:1,
q4:4
}
Then this is just a question of using $.each() (http://docs.jquery.com/
Utilities/jQuery.each#objectcallback) to iterate over this 'answers'
object, comparing with what was sent when the submit button was
clicked.
When you have your result, create a div element with the score. See
the Manipulation section of the help: http://docs.jquery.com/Attributes/html
You can get fancy with fade in effects (http://docs.jquery.com/
Effects) if you like.
If you need to redirect to one of four pages, use replaceWith()
(http://docs.jquery.com/Manipulation/replaceWith#content) and
everything, although I don't think this is a particularly elegant
approach.
My preference would be to go for the AJAX solution, since you can use
the same PHP code you have already, but just pass an extra variable in
the query string, like returnStatus=True for a Javascript query and
returnStatus=False for a PHP query. Then in your PHP logic, if you see
returnStatus=True you return a PHP array to the initial form page, and
if not, you echo out the result as normal.
HTH
On Apr 15, 8:32 am, poundcommapo...@gmail.com
poundcommapo...@gmail.com wrote:
Hi. I have what I feel like should be a simple problem, but I'm having
a hard time sorting it out. The page is located
here:http://staging.pixelluxe.com/tbs/
I apologize in advance that all the code is on one line - client
request (also, the inline styles are their requirement).
Anyway, this is a simple quiz. There are 8 multiple-choice questions
in sets of radio groups. Each radio group has four possible answers
with values of 1, 2, 3, or 4.
On submit, I need a script to add up the user's selections and
redirect the user to 1 of 4 pages depending on the total score. I'm
currently doing it with a simple PHP script and meta-refresh, but the
client wants a client-side solution, with the PHP only as a backup if
JavaScript is disabled.
Anyone know how to make that happen? Thanks so much.
[jQuery] Re: Autocomplete plugin for multiple form fields from a JSON source [autocomplete]
Hi Tom, Thanks for the reply. It is the former. I am perfectly comfortable with parsing JSON formatted data. I would be very happy to read what you have been working on. Best regards. On Apr 15, 4:47 pm, Tom Worster f...@thefsb.org wrote: On 4/15/09 2:27 PM, tatlar robertlnew...@gmail.com wrote: I am using Jorn's awesome autocomplete plugin in one form field to allow a user to quickly narrow down which station they wish to view visit times for. However, it would be really cool to extend this so that when the selection is narrowed to one station, there is another form input field listing all the available visit types that is populated from the JSON file as well. is your question more to do with how to trigger and control the display of suggestions for the another form input field when a selection in the one form field is made? or is it more about using json formatted data? if the former, i've been working on that recently and could discuss what i've found.
[jQuery] Re: Autocomplete plugin for multiple form fields from a JSON source [autocomplete]
Thanks Tom! Digesting now feedback after checking it out. Much
obliged.
On Apr 15, 5:40 pm, Tom Worster f...@thefsb.org wrote:
i have an ajax backend onto a mysql table with about 25 million rows,
including three searchable indexed text columns. i want a form with three
text input fields, each with autocomplete.
1) if all fields are blank when the user starts to type into one of them
then normal autocomplete happens on that field, independent of the others.
2) but if the user focuses on an empty field after an autocomplete selection
has been made in one or both of the other fields then a list of all distinct
values in that column of the big table, constrained by the selection(s)
already made, is immediately displayed without any typing.
each of the three fields has class 'auto' and there are three blocks like
this one:
$('#field1').autocomplete('suggest.php', {
extraParams: {
p: 'field1',
field2: function() { return $('#field2').data('chosen')
? $('#field2').val() : ''; },
field3: function() { return $('#field3').data('chosen')
? $('#field3').val() : ''; } } });
so the back end can figure what's being looked for and what the constraints
are, if any.
to make a list of suggestions display on focus for 2) i have:
var lastfocus = '';
$('.auto').setOptions({ minChars: 2}).focus(function(){
if ( lastfocus != $(this).attr('id')
$(this).val() == ''
( $('#field').data('chosen')
|| $('#field2').data('chosen')
|| $('#field3').data('chosen') ) )
$(this).data('chosen', false).setOptions(
{minChars: 0}).trigger('click').trigger('click');
else
$(this).setOptions({minChars: 2});
lastfocus = $(this).attr('id');}).change(function(){
$(this).data('chosen', false);
lastfocus = $(this).attr('id');}).result(function(){
$(this).data('chosen', true);
});
lastfocus is a hack: the focus event on a field triggers after a selection
is made by clicking. i.e. with mouse selection focus moves to the list and
then back to the text field. lastfocus deals with that.
the 'chosen' data on each field indicates if the value in that field is one
selected from the big table.
two clicks are needed after setting minChars to 0 to display the list of
suggestions. this is a quirk of the plugin.
this is my first version of a script that seems to work in a way that
wouldn't be too surprising to an unprepared user. i haven't given it much
testing yet. comments and improvements would be welcomed.
tom
[jQuery] Re: Autocomplete plugin for multiple form fields from a JSON source [autocomplete]
Thanks Tom! Digesting now feedback after checking it out. Much
obliged.
On Apr 15, 5:40 pm, Tom Worster f...@thefsb.org wrote:
i have an ajax backend onto a mysql table with about 25 million rows,
including three searchable indexed text columns. i want a form with three
text input fields, each with autocomplete.
1) if all fields are blank when the user starts to type into one of them
then normal autocomplete happens on that field, independent of the others.
2) but if the user focuses on an empty field after an autocomplete selection
has been made in one or both of the other fields then a list of all distinct
values in that column of the big table, constrained by the selection(s)
already made, is immediately displayed without any typing.
each of the three fields has class 'auto' and there are three blocks like
this one:
$('#field1').autocomplete('suggest.php', {
extraParams: {
p: 'field1',
field2: function() { return $('#field2').data('chosen')
? $('#field2').val() : ''; },
field3: function() { return $('#field3').data('chosen')
? $('#field3').val() : ''; } } });
so the back end can figure what's being looked for and what the constraints
are, if any.
to make a list of suggestions display on focus for 2) i have:
var lastfocus = '';
$('.auto').setOptions({ minChars: 2}).focus(function(){
if ( lastfocus != $(this).attr('id')
$(this).val() == ''
( $('#field').data('chosen')
|| $('#field2').data('chosen')
|| $('#field3').data('chosen') ) )
$(this).data('chosen', false).setOptions(
{minChars: 0}).trigger('click').trigger('click');
else
$(this).setOptions({minChars: 2});
lastfocus = $(this).attr('id');}).change(function(){
$(this).data('chosen', false);
lastfocus = $(this).attr('id');}).result(function(){
$(this).data('chosen', true);
});
lastfocus is a hack: the focus event on a field triggers after a selection
is made by clicking. i.e. with mouse selection focus moves to the list and
then back to the text field. lastfocus deals with that.
the 'chosen' data on each field indicates if the value in that field is one
selected from the big table.
two clicks are needed after setting minChars to 0 to display the list of
suggestions. this is a quirk of the plugin.
this is my first version of a script that seems to work in a way that
wouldn't be too surprising to an unprepared user. i haven't given it much
testing yet. comments and improvements would be welcomed.
tom
[jQuery] Re: Block UI modal window message incremental update
Hi Mike,
Thanks for the help, and for writing a great plugin (blockUI).
Unfortunately this didn't work.
I am using a modulus operator so the content does not update on every
row, but even so, I just get the browser loading icon while the AJAX
content is added. I get one change to the message window when 380 rows
have been added, and this is right before the table has finished
loading all its content.
The code I have is as follows:
function showLoading(){
$(#status).show(fast);
$.blockUI({ message:'img src=/images/ajax-loader.gif
alt=Loading... /h3App is loading span id=loaderCounter/
span.br/Please be patient.../h3'});
}
function hideLoading(){
$(#status).hide(1000);
$.unblockUI();
}
These are called as the table loads and when it finishes loading:
var incr = 0;
showLoading();
$.ajax({
type: GET,
url: /path/to/jsonfile.js,
datatype: json,
success:
// lots of code to parse and display
$.each(json.object, function(key,array){
// lots of code to parse and display
incr++;
if( incr % 10 === 0 ) {
$('#loaderCounter').text(' (loaded '+incr+' rows)');
}
});
hideLoading();
});
Any ideas? I can give you a URL if that helps, although the relevant
(simplified) code is pasted above.
Thanks in advance
- Rob
On Mar 5, 6:39 pm, Mike Alsup mal...@gmail.com wrote:
What I really want is for the user to see how many rows have been
added out of the total number of rows in the BlockUI message. This
would look like:
Application has loaded 1 of 400 rows
Application has loaded 2 of 400 rows
...
Application has loaded n of 400 rows
It might even be better as increments of ten so it is not constantly
updating.
Application has loaded 10 of 400 rows
Application has loaded 20 of 400 rows
...
Application has loaded n of 400 rows
Right now I have a variable with the total number of rows and also a
variable that get incremented with the row number, but I can't see how
to bind the BlockUI message with these variables. The BlockUI API
documentation says that the message can be a jQuery object, but I
cannot see how to make the bind().
Any ideas? Thanks in advance.
Sure. Just do something like this:
$.blockUI({
message: $('div id=counter/div')
});
Then in your loop that increments the rows, do this:
$('#counter').html('App has loaded '+rows+ ' rows');
[jQuery] Re: Block UI modal window message incremental update
Okay - thanks. I am still getting my head around how jQuery adds to
the DOM, and where and when I can inject messages to make the user-
interface slightly more pleasant. I appreciate you taking the time to
help me out.
Regards,
- Rob
On Mar 6, 11:47 am, Mike Alsup mal...@gmail.com wrote:
$.ajax({
type: GET,
url: /path/to/jsonfile.js,
datatype: json,
success:
// lots of code to parse and display
$.each(json.object, function(key,array){
// lots of code to parse and display
incr++;
if( incr % 10 === 0 ) {
$('#loaderCounter').text(' (loaded '+incr+' rows)');
}
});
hideLoading();
});
The problem with that is that changing DOM content while in a tight
loop isn't necessarily going to be honored by the browser (until the
current thread returns). If you want a reliable x-browser solution
you need to introduce an asynchronous step so that the browser takes
time to render the change.
[jQuery] Block UI modal window message incremental update
Hi All, I am adding table rows to a table via an AJAX call using $.each(). While the table rows are appended to the table, I am using the BlockUI plugin to display a message saying 'Application is loading'. BlockUI is unblocked when the table displays all the rows. Great - all is working as expected. What I really want is for the user to see how many rows have been added out of the total number of rows in the BlockUI message. This would look like: Application has loaded 1 of 400 rows Application has loaded 2 of 400 rows ... Application has loaded n of 400 rows It might even be better as increments of ten so it is not constantly updating. Application has loaded 10 of 400 rows Application has loaded 20 of 400 rows ... Application has loaded n of 400 rows Right now I have a variable with the total number of rows and also a variable that get incremented with the row number, but I can't see how to bind the BlockUI message with these variables. The BlockUI API documentation says that the message can be a jQuery object, but I cannot see how to make the bind(). Any ideas? Thanks in advance.
[jQuery] Re: Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
Thanks Stephan - I will take a look at your suggestion. Thanks for the
heads up about the return statement - PHP function habits die hard
On Feb 27, 12:38 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
first of all, AJAX is _asynchronous_, do you have any mechanism that
ensures that the stations callback is executed _before_ the
_dataloggers_ callback? (e.g. requesting datalogger once myStations
has been filled)
If you use myStations in both callbacks is should be a global
variable. (I know, global variables are no good programming practice.
So either put all your global variables into one global object to
reduce namespace pollution or have it global in the scope of the
callbacks).
Would the additional snet: TA variable hurt in myStations?
If not, simply link the json result to myStations:
var myStations = {} ;
$.getJSON(path/to/stations.js, function(stalist) {
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
myStations[myStaTitle] = stavalues;
});
});
I also noticed that you have a return statement in your callback. For
whom this return should be? The callback is executed within jQuery on
success of your AJAX request. jQuery does not know of your return
value.
by(e)
Stephan
2009/2/27 tatlar robertlnew...@gmail.com:
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:
$.getJSON(path/to/stations.js, function(stalist) {
var myStations = {} ;
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
var myStaVals = { commtype: stavalues.commtype, provider:
stavalues.provider } ;
var staObj.push(myStaTitle
[jQuery] Re: Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
Huh. I am still getting zero values added to the myStations object. I
think my syntax for adding to an object is wrong. Any suggestions
anyone?
On Feb 27, 8:43 am, tatlar robertlnew...@gmail.com wrote:
Thanks Stephan - I will take a look at your suggestion. Thanks for the
heads up about the return statement - PHP function habits die hard
On Feb 27, 12:38 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
first of all, AJAX is _asynchronous_, do you have any mechanism that
ensures that the stations callback is executed _before_ the
_dataloggers_ callback? (e.g. requesting datalogger once myStations
has been filled)
If you use myStations in both callbacks is should be a global
variable. (I know, global variables are no good programming practice.
So either put all your global variables into one global object to
reduce namespace pollution or have it global in the scope of the
callbacks).
Would the additional snet: TA variable hurt in myStations?
If not, simply link the json result to myStations:
var myStations = {} ;
$.getJSON(path/to/stations.js, function(stalist) {
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
myStations[myStaTitle] = stavalues;
});
});
I also noticed that you have a return statement in your callback. For
whom this return should be? The callback is executed within jQuery on
success of your AJAX request. jQuery does not know of your return
value.
by(e)
Stephan
2009/2/27 tatlar robertlnew...@gmail.com:
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object
[jQuery] Re: Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
I found this Async plugin that I think might do the trick:
http://plugins.jquery.com/project/async
On Feb 27, 9:18 am, tatlar robertlnew...@gmail.com wrote:
Huh. I am still getting zero values added to the myStations object. I
think my syntax for adding to an object is wrong. Any suggestions
anyone?
On Feb 27, 8:43 am, tatlar robertlnew...@gmail.com wrote:
Thanks Stephan - I will take a look at your suggestion. Thanks for the
heads up about the return statement - PHP function habits die hard
On Feb 27, 12:38 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
first of all, AJAX is _asynchronous_, do you have any mechanism that
ensures that the stations callback is executed _before_ the
_dataloggers_ callback? (e.g. requesting datalogger once myStations
has been filled)
If you use myStations in both callbacks is should be a global
variable. (I know, global variables are no good programming practice.
So either put all your global variables into one global object to
reduce namespace pollution or have it global in the scope of the
callbacks).
Would the additional snet: TA variable hurt in myStations?
If not, simply link the json result to myStations:
var myStations = {} ;
$.getJSON(path/to/stations.js, function(stalist) {
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
myStations[myStaTitle] = stavalues;
});
});
I also noticed that you have a return statement in your callback. For
whom this return should be? The callback is executed within jQuery on
success of your AJAX request. jQuery does not know of your return
value.
by(e)
Stephan
2009/2/27 tatlar robertlnew...@gmail.com:
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers
[jQuery] Re: Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
Okay - I have figured it out. I needed to reformat the first JSON
query into a $.ajax() query, and then ONLY call the second $.getJSON()
query on an AJAX.success() method.
Thanks for the pointers
On Feb 27, 9:53 am, tatlar robertlnew...@gmail.com wrote:
I found this Async plugin that I think might do the
trick:http://plugins.jquery.com/project/async
On Feb 27, 9:18 am, tatlar robertlnew...@gmail.com wrote:
Huh. I am still getting zero values added to the myStations object. I
think my syntax for adding to an object is wrong. Any suggestions
anyone?
On Feb 27, 8:43 am, tatlar robertlnew...@gmail.com wrote:
Thanks Stephan - I will take a look at your suggestion. Thanks for the
heads up about the return statement - PHP function habits die hard
On Feb 27, 12:38 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
first of all, AJAX is _asynchronous_, do you have any mechanism that
ensures that the stations callback is executed _before_ the
_dataloggers_ callback? (e.g. requesting datalogger once myStations
has been filled)
If you use myStations in both callbacks is should be a global
variable. (I know, global variables are no good programming practice.
So either put all your global variables into one global object to
reduce namespace pollution or have it global in the scope of the
callbacks).
Would the additional snet: TA variable hurt in myStations?
If not, simply link the json result to myStations:
var myStations = {} ;
$.getJSON(path/to/stations.js, function(stalist) {
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
myStations[myStaTitle] = stavalues;
});
});
I also noticed that you have a return statement in your callback. For
whom this return should be? The callback is executed within jQuery on
success of your AJAX request. jQuery does not know of your return
value.
by(e)
Stephan
2009/2/27 tatlar robertlnew...@gmail.com:
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
[jQuery] Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:
$.getJSON(path/to/stations.js, function(stalist) {
var myStations = {} ;
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
var myStaVals = { commtype: stavalues.commtype, provider:
stavalues.provider } ;
var staObj.push(myStaTitle) = myStaVals ; // could be very
wrong to use the push() array method??
});
return myStations ;
});
I would have thought that I could then pass this newly created jQuery
object ('myStations') to the processing of the 'dataloggers' JSON
object, using the 'myStaTitle' match with the 'dlname' key. But every
attempt I have made has failed. For whatever reason (very likely my
syntax) I cannot create my custom jQuery object and then pass it on.
Something like?:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
// insert here?? why does this not work??
tBodyRow += 'tdcommtype: '+myStations.dlname.commtype+'/
td' ;
tBodyRow += 'tdprovider: '+myStations.dlname.provider+'/
td' ;
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
I hope this all makes sense. If anyone could give me a shove in the
right direction, I would be much obliged. All help much appreciated
and thanks in advance.
[jQuery] Multiple JSON objects - using results from one JSON object within a parse of another JSON object
Third time a charm
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function.
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:
$.getJSON(path/to/stations.js, function(stalist) {
var myStations = {} ;
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
var myStaVals = { commtype: stavalues.commtype, provider:
stavalues.provider } ;
var staObj.push(myStaTitle) = myStaVals ; // could be very
wrong to use the push() array method??
});
return myStations ;
});
I would have thought that I could then pass this newly created jQuery
object ('myStations') to the processing of the 'dataloggers' JSON
object, using the 'myStaTitle' match with the 'dlname' key. But every
attempt I have made has failed. For whatever reason (very likely my
syntax) I cannot create my custom jQuery object and then pass it on.
Something like?:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
// insert here?? why does this not work??
tBodyRow += 'tdcommtype: '+myStations.dlname.commtype+'/
td' ;
tBodyRow += 'tdprovider: '+myStations.dlname.provider+'/
td' ;
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
I hope this all makes sense. If anyone could give me a shove in the
right direction, I would be much obliged. All help much appreciated
and thanks in advance.
[jQuery] Multiple JSON objects - using the parsing results from one JSON object within another $.getJSON $.each() parse of another JSON object
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:
$.getJSON(path/to/stations.js, function(stalist) {
var myStations = {} ;
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
var myStaVals = { commtype: stavalues.commtype, provider:
stavalues.provider } ;
var staObj.push(myStaTitle) = myStaVals ; // could be very
wrong to use the push() array method??
});
return myStations ;
});
I would have thought that I could then pass this newly created jQuery
object ('myStations') to the processing of the 'dataloggers' JSON
object, using the 'myStaTitle' match with the 'dlname' key. But every
attempt I have made has failed. For whatever reason (very likely my
syntax) I cannot create my custom jQuery object and then pass it on.
Something like?:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
// insert here?? why does this not work??
tBodyRow += 'tdcommtype: '+myStations.dlname.commtype+'/
td' ;
tBodyRow += 'tdprovider: '+myStations.dlname.provider+'/
td' ;
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
I hope this all makes sense. If anyone could give me a shove in the
right direction, I would be much obliged. All help much appreciated
and thanks in advance.
[jQuery] jQuery dynamic image replacement in a div overlays later content in the page - help needed
Hi there, I have a page (http://anf.ucsd.edu/spevents/2008/255/b/) that has a series of tabs. If you click on the 'Waveforms' tab you will see a list of three plots to select from. Before clicking on any of the plot links, notice that the content after the waveform image (starting with the title 'Further information'). This is displayed directly beneath the plot. Lets call this content 'next' Now, clicking on one of the plot links causes the image and title to be replaced. However, when the image is larger than the original image height, it displays over content 'next'. The behavior I am looking for is that when the image that gets switched in is larger than the original image, the content 'next' does not get overwritten. Instead it gets pushed down the page, so it is beneath the image. I feel like this should be a simple CSS display or height property for the div that the image lies in, but I can't seem to figure out what. Basically I want the behavior to replicate the UI tabs behavior - when the tab section is large you don't see it overwrite 'next' in the page. I have picked apart the UI-tabs source but not seen where this is set. All help appreciated. Thanks in advance.
[jQuery] Custom sort on table cell attribute value in tablesorter plugin rather than innerHTML value: help please!
Hi there jQuery folks,
I am using the tablesorter plugin, which I really like. However, in
several of my table cells I have oddly formatted time values that look
like the following:
1d 12h 34m 25s
Which maps to:
1 day, 12 hours, 34 mins and 25 seconds
I cannot change how these values are displayed - they have to be in
that format. However, in my code I also create an attribute to the
table cell called sorttable_customval in which I insert the raw number
format as a float:
td sorttable_customkey=dlt sorttable_customval=65.093 1m 5s/
td
I have tried to write my own add-on to the tablesorter source code to
get this attribute value in the confines of the tablesorter
textExtraction method:
Javascript at the top of my webpage with the table
==
(#monitor).tablesorter({
textExtraction: 'customattribute',
debug: true,
widgets:['zebra']
})
The modified part of tablesorter.js (rows 233 and 234)
=
221 function getElementText(config,node) {
222
223 if(!node) return ;
224
225 var t = ;
226
227 if(config.textExtraction == simple) {
228 if(node.childNodes[0]
node.childNodes[0].hasChildNodes()) {
229 t = node.childNodes[0].innerHTML;
230 } else {
231 t = node.innerHTML;
232 }
233 } else if(config.textExtraction ==
customattribute) {
234 t = $(node).attr('sorttable_customval');
235 } else {
236 if(typeof(config.textExtraction) ==
function) {
237 t = config.textExtraction(node);
238 } else {
239 t = $(node).text();
240 }
241 }
242 return t;
243 }
I thought this would work, but I get the following error in Firebug:
s is undefinedjquery.tablesorter.js (line 703)
return $.trim(s.toLowerCase());
The corresponding lines in jquery.tablesorter.js:
696 // add default parsers
697 ts.addParser({
698 id: text,
699 is: function(s) {
700 return true;
701 },
702 format: function(s) {
703 return $.trim(s.toLowerCase());
704 },
705 type: text
706 });
So it looks like to me that my float gets treated as text and tries to
get parsed as such. I added the column number and forced a sort type
when I call tablesorter:
(#monitor).tablesorter({
headers: {
7:{sorter:'digit'}
},
textExtraction: 'customattribute',
debug: true,
widgets:['zebra']
});
However, this is a custom table, where a client's cookies can define
the order of the columns displayed. So defining a whole load of
headers based on column number won't work. Does anyone have any idea
how I can implement this custom attribute sort and ensure the
addParser function parses it as a digit? Or am I going about this in
totally the wrong fashion? I also tried writing my own parser:
$.tablesorter.addParser({
id: 'dlt',
is: function(s) {
return s.parentNode.getAttribute('sorttable_customval') ;
},
type: 'numeric'
});
Then adding it to the tablesorter call:
$(#monitor).tablesorter({
headers: { 7:{sorter:'dlt'} },
debug: true,
widgets:['zebra']
})
However, I got a Firebug error that parentNode is undefined. So then I
tried:
return s.attr('sorttable_customval') ;
Still failed. Then finally:
return $(s).attr('sorttable_customval') ;
which also failed.
I feel like I am pretty close to figuring it out, but I just can't
seem to get the final piece in place. All help appreciated!!
Thanks in advance!
[jQuery] clueTip plugin: Passing values via AJAX to the clueTip, then passing values back to the parent page to update div content
Hi there,
First up a big thanks to Karl for writing a great jQuery plugin. And
sorry if this is a bit of a newbie issue. My question is related to
AJAX content. I have a page that has a variety of links, that look
like the following:
a class=jTip title=TITLE href=this.php?
construction=1155492714online=1160506275installation=1161683112
rel=this.php?
construction=1155492714online=1160506275installation=1161683112
This is just a series of key-value pairs that list the type of action
and the epoch time that action took place.
There is a div on this page that I want to insert content into, lets
call it 'mydynamiccontent':
div id=mydynamiccontent
pThis content will get replaced/p
/div
My clueTip call looks like:
$(document).ready(function() {
$('a.jTip').cluetip({
cluetipClass: 'jtip',
arrows: true,
hoverIntent: false,
mouseOutClose: true,
sticky: true,
activation: 'click',
closeText: 'X',
closePosition: 'title',
ajaxCache: true
});
)};
When the user clicks on the link, the clueTip window pops up and show
the content that looks like (using the example above, the source of
'this.php' with the GET parameters passed):
this.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=Content-Type content=text/html; charset=utf-8/
/head
body
ul class=reportlist
li class=constructionconstruction: a href=#1155492714/
a/li
li class=onlineonline: a href=#1160506275/a/li
li class=installationinstallation: a href=#1161683112/a/
li
/ul
/body
/html
Great. This works as expected. What I now want is for those links in
the unordered list in the clueTip window to have an onClick event that
updates the contents of the 'mydynamiccontent' div on the initial
page. So my question is, do I define that in a clueTip ajax call? Or
do I define it in some jQuery code in 'this.php'? If the latter, how
can I ensure I load the content back into the correct div on the main
page?
Thanks in advance!
[jQuery] Plugin clash? accordion and treeview
Hi jQuery folks, I am using both the Accordion and Treeview plugins developed by Jörn Zaefferer in a web application. I am having trouble when I place a div (or definition list, dl) containing an instance of Treeview inside an Accordion div. The Accordion works fine, however the Treeview 'tree' gets misaligned (the list items no longer align vertically and are all indented right, each parent li is further right than the previous li). When I comment out the CSS stylesheet includes for the Accordion plugin, the Treeview works fine. I think there is either a div or parent/child clash in these plugins related to unordered lists (ul and li). Has anyone else seen this? Thanks in advance, - Rob
[jQuery] Re: calling a php function with jquery
jQuery is client side, PHP is server side. What exactly are you trying
to do? If you wish to call and use the return of a PHP function within
your jQuery code you will need to use the AJAX functions. However, if
you are already getting the variable $user before your jQuery is run
by the client you should just be able to do (in your Javascript):
?php
$myuser = helloUser( $theuser ) ;
?
script language=Javascript type=text/javascript
var jQueryUser = ?php echo $myuser ? ;
/script
I think that will work. Good luck!
On Mar 5, 9:18 am, everdream [EMAIL PROTECTED] wrote:
Hello !
I have a php function : helloUser in the file : myFunctions.php.
This is my function :
...
function helloUser($user)
{
return Welcome $user !;}
...
I'm using jquery for an application but i don't know how to call a php
function and give parameter (here :$user) and recover the result (here :
welcome ...).
Can somebody help me?
Thanks a lot.
--
View this message in
context:http://www.nabble.com/calling-a-php-function-with-jquery-tp15853808s2...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
