Re: [jQuery] Re: A different approach to parsing XML, and a little help on processing attributes more efficiently
I don't know why Google Groups keeps inserting those semi-random blank lines
in the code! Now I'm curious, so I'm trying something a bit different -
let's see what happens..
function parseXml( xml ) {
var html = [];
html.push( '' );
$(xml).find('sites').$each( function( $site ) {
$site.find('>element').$each( function( $parent, i ) {
html.push( '', $parent.attr('label'), i + 1, '' );
$parent.find('>element').$each( function( $child ) {
html.push( $child.attr('label'), '' );
$child.find('>element').$each( function( $inner ) {
html.push( $inner.attr('label'), ': ', $inner.text(),
'' );
});
});
});
});
html.push( '' );
$('#container').append( html.join('') );
}
On Tue, Feb 2, 2010 at 10:54 PM, Michael Geary wrote:
> Cool, it will be good to see your continued work. We may be among the last
> holdouts in this mailing list - but I figure since the thread started here
> we can carry on.
>
> BTW you may notice one bit of annoying repeated boilerplate in that last
> version. See how the callback functions for all the .each() loops begin with
> something like:
>
> var $foobar = $(foobar);
>
> Why don't we extend jQuery with a better version of .each() that does that
> for us?
>
> Let's call it .$each() as a reminder that it gives the callback a DOM
> element that's already been wrapped with a $(). It would look like this:
>
> jQuery.fn.$each = function( callback ) {
> for( var element, i = -1; element = this[++i]; )
> callback( jQuery(element), i );
> };
>
> Note that in addition to calling jQuery(element), it also reverses the
> callback arguments - in most cases you only need the element inside the
> callback - it's much less often that you need the index. (In your code, only
> one of the four loops uses the index.)
>
> So, using that function, the code can be written as:
>
>
> function parseXml( xml ) {
> var html = [];
> html.push( '' );
> $(xml).find('sites').$each( function( $site ) {
> $site.find('>element').$each( function( $parent, i ) {
>
> html.push( '', $parent.attr('label'), i + 1, '' );
> $parent.find('>element').$each( function( $child ) {
>
> html.push( $child.attr('label'), '' );
> $child.find('>element').$each( function( $inner ) {
>
> html.push( $inner.attr('label'), ': ', $inner.text(),
> '' );
> });
> });
> });
> });
> html.push( '' );
>
> $('#container').append( html.join('') );
> }
>
> That's getting pretty clean!
>
> Note that the code still uses the naming convention of $foobar for a jQuery
> object - it helps make it clear which variables are jQuery objects.
>
> -Mike
>
>
> On Tue, Feb 2, 2010 at 10:27 PM, augur <312...@gmail.com> wrote:
>
>> OK, so this is much better than a lesson in parsing XML. Showing the
>> errors that I had made in my process, you have also shown sound jQuery
>> which I was having a hard time picking up from the documentation. I
>> tend to learn best by doing and getting feedback. Mike, thank you. I
>> am going to keep this chain going with my mods as I make them.
>>
>
>
Re: [jQuery] Re: A different approach to parsing XML, and a little help on processing attributes more efficiently
Cool, it will be good to see your continued work. We may be among the last
holdouts in this mailing list - but I figure since the thread started here
we can carry on.
BTW you may notice one bit of annoying repeated boilerplate in that last
version. See how the callback functions for all the .each() loops begin with
something like:
var $foobar = $(foobar);
Why don't we extend jQuery with a better version of .each() that does that
for us?
Let's call it .$each() as a reminder that it gives the callback a DOM
element that's already been wrapped with a $(). It would look like this:
jQuery.fn.$each = function( callback ) {
for( var element, i = -1; element = this[++i]; )
callback( jQuery(element), i );
};
Note that in addition to calling jQuery(element), it also reverses the
callback arguments - in most cases you only need the element inside the
callback - it's much less often that you need the index. (In your code, only
one of the four loops uses the index.)
So, using that function, the code can be written as:
function parseXml( xml ) {
var html = [];
html.push( '' );
$(xml).find('sites').$each( function( $site ) {
$site.find('>element').$each( function( $parent, i ) {
html.push( '', $parent.attr('label'), i + 1, '' );
$parent.find('>element').$each( function( $child ) {
html.push( $child.attr('label'), '' );
$child.find('>element').$each( function( $inner ) {
html.push( $inner.attr('label'), ': ', $inner.text(),
'' );
});
});
});
});
html.push( '' );
$('#container').append( html.join('') );
}
That's getting pretty clean!
Note that the code still uses the naming convention of $foobar for a jQuery
object - it helps make it clear which variables are jQuery objects.
-Mike
On Tue, Feb 2, 2010 at 10:27 PM, augur <312...@gmail.com> wrote:
> OK, so this is much better than a lesson in parsing XML. Showing the
> errors that I had made in my process, you have also shown sound jQuery
> which I was having a hard time picking up from the documentation. I
> tend to learn best by doing and getting feedback. Mike, thank you. I
> am going to keep this chain going with my mods as I make them.
>
Re: [jQuery] Re: A different approach to parsing XML, and a little help on processing attributes more efficiently
No worries on the XML vs. JSON. It's been interesting to watch your progress
in refactoring the code. I hope it's useful for other people too.
A few notes on the latest version...
* Avoid using ALLCAPS or PARTIALcaps in a variable name. Many JavaScript
programmers will think you intend such variables to be used as "constants".
(That is, a variable whose content is not intended to be changed.)
* You don't need all those makeArray calls.
* It's a bit confusing to mix the use of $ and jQuery in the same code. Use
one or the other consistently.
* Stop appending to $('div') Very bad habit! What happens when you
add another DIV to your page? Use a $('#container') selector instead.
* Even though you're still doing XML parsing, you will get much faster
performance by building an HTML string, and make sure the entire HTML
content is enclosed in one wrapper DIV.
* Watch out for all the duplicate $(something) selectors. If you use the
same $(something) more than once, than do this instead:
var $something = $(something);
$something.whatever(); // instead of $(something).whatever();
Putting those tips together, you get something like this:
function parseXml( xml ) {
var html = [];
html.push( '' );
$(xml).find('sites').each( function() {
$(this).find('>element').each( function( i, parent ) {
var $parent = $(parent);
html.push( '', $parent.attr('label'), i + 1, '' );
$parent.find('>element').each( function( j, child ) {
var $child = $(child);
html.push( $child.attr('label'), '' );
$child.find('>element').each( function( k, inner ) {
var $inner = $(inner);
html.push( $inner.attr('label'), ': ', $inner.text(),
'' );
});
});
});
});
html.push( '' );
$('#container').append( html.join('') );
}
-Mike
On Tue, Feb 2, 2010 at 4:10 PM, augur <312...@gmail.com> wrote:
> function parseXml(xml) {
>$(xml).find('sites').each(function(){
>var PARENTarr = jQuery.makeArray($(this).find('>element'));
> $(PARENTarr).each(function(i){
> $("div").append(""+
> $(this).attr("label")+(i+1) +"");
> var CHILDarr =
> jQuery.makeArray($(PARENTarr[i]).find
> ('>element'));
> $(CHILDarr).each(function(p){
>
> $("div").append($(this).attr("label") +"");
>var CHILDattrs =
> jQuery.makeArray($(CHILDarr[p]).find
> ('>element'));
>
> $(CHILDattrs).each(function(){
> var CHILDid =
> $(this).attr('label') +": "+ $(this).text();
>
> $("div").append(CHILDid +"");
> p=0;
>});
> });
> });
> });
>}
> });
Re: [jQuery] JQuery + TableSorter + TableSorterPager + (Container != Div) = undefined error
~ BigDog I really wish you'd posted a clue to how you fixed this BigDog, I'm been wrestling with it for hours :( -- View this message in context: http://old.nabble.com/JQuery-%2B-TableSorter-%2B-TableSorterPager-%2B-%28Container-%21%3D-Div%29-%3D--undefined-error-tp15580200s27240p27370491.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] Re: A different approach to parsing XML, and a little help on processing attributes more efficiently
No offense, but that code is really frightening. Not your fault though.
JSON is not only much faster than all this XML/DOM garbage, but it is *much*
easier to understand and use too!
If you're coding JavaScript, you need to know how to use ordinary JavaScript
objects and arrays, yes?
If you know how to work with those, then you *already know JSON*. Because
JSON is just JavaScript objects. (D'oh! JavaScript Object Notation!)
So here's your XML file transcribed fairly faithfully into JSON:
{
"sites": [
{
"label": "site",
"id": 2,
"lat": 27,
"lng": 305,
"location": {
"city": "Las Vegas",
"state": "NV",
"region": "West"
}
},
{
"label": "site",
"id": 3,
"lat": 106,
"lng": 35,
"location": {
"city": "Pittsburgh",
"state": "Penn",
"region": "North East"
}
}
]
}
I only included a couple of the entries to keep the example short. As you
can see, that's just a JavaScript object. This JavaScript object contains a
single property called 'sites'. That property is an array of objects, each
one representing a single site. Those site objects have the same properties
as your XML file.
So here's how you use it. I didn't try to exactly duplicate what your code
is doing - I wasn't sure what it was trying to do with all the $('div')
calls. Wouldn't those append to every DIV in your page? Oh - is there only a
single DIV that you're appending everything to? You should give it an ID and
reference it that way instead.
Also I realized I didn't quite duplicate what you're doing with those
label="Location" elements. It looks like you might have other kinds of
label="Something" elements as well? I didn't notice that, but tell you what,
here's the code as I understood it:
$.getJSON( 'sites.json', function( json ) {
var html = [];
html.push( '' );
var sites = json.sites;
for( var site, i = -1; site = sites[++i]; ) {
var location = site.location;
html.push(
site.label, ' ', site.id, '',
'Lat: ', site.lat, ' Lng: ', site.lng, '',
location.city, ', ', location.state, '',
location.region
);
}
html.push( '' );
$('#container').html( html.join('') );
});
As you can see, that is many times simpler - and *much* easier to understand
- than the XML parsing.
Some other speed notes...
* The for loop uses a slightly unusual form that is faster than the usual
numeric incrementing.
* Instead of appending elements to the HTML DOM as we go, we construct a
single HTML string and append it in one operation.
* That HTML string has an outermost DIV that wraps all the elements inside
it.
* We construct the HTML string not with += but by pushing the elements onto
an array and joining it at the end.
There is actually a way to speed this up a slight bit more in IE, but let's
leave that for the next installment. :-) As it is now, this code will be
many times faster than the XML code - at least one order of magnitude
faster, and maybe two.
Let me know what the real deal is with those label="location" elements and I
can suggest how to handle them.
-Mike
On Thu, Jan 28, 2010 at 11:31 AM, augur <312...@gmail.com> wrote:
> Funny thing is, my lead engineer said the same thing...
>
> Mostly this was an experiment to gain a better understanding of DOM
> outside of HTML. This is about as exciting as a SAX parser when it
> comes to speed (<5sec in safari for 20K lines, slightly longer in
> FireFox, and noticeably longer in Chrome), though it is fairly
> efficient, and gives me exactly the results I was wanting to see.
> There are some practical applications.
>
> Realizing that there is only so much memory out there more efficiency
> is what I am going for, so any input on this script is helpful. I have
> approached it this way because I get XML and DOM, and I am getting
> decent at jQuery. Thus this method was in my range of current
> understanding. JSON is something that I am just now becoming more
> familiar with.
>
Re: [jQuery] A different approach to parsing XML, and a little help on processing attributes more efficiently
Are you required to use XML? Why not use JSON and avoid all the parsing?
If you have to use XML I can make some suggestions to speed up the code a
bit. But let's see if that is a requirement or not first.
-Mike
On Thu, Jan 28, 2010 at 10:32 AM, augur <312...@gmail.com> wrote:
> I spent a couple days looking all over the web for how to do this
> well. I did some picking and choosing of methods, and I came up with
> this. It works best in Safari, then FireFox, and then Chrome. I have
> not tested in IE (do I have to?). It runs up to just over 20,000 lines
> of XML well, over that memory is working too hard.
>
> It is a very linear parser that descends from parent to child nodes as
> it goes. I commented my code heavily so that it should be pretty
> understandable. The one place that I could be a bit more efficient is
> in the processing of the node attributes at each level. I would like
> to parse out node attributes without specifying them (label and id are
> pretty acceptable I guess), so any suggestions there would be great.
>
> :The FrameWork::
>
> jquery-1.4.min.js
>
>
> :The code
>
> $(function(){
> $.ajax({
>type: "GET",
>url: "sites.xml",
>dataType: "xml",
>success: parseXml
> });
>function parseXml(xml) {
>//get root element //
>$(xml).find('sites').each(function(){
>//get descentdent element = "$(this).find('>element').each(function(){
>//set variable as this item to pass to the
> next function //
>var PARENT = $(this);
>//get a bunch of attributes of the PARENT
> element. THIS COULD BE
> MORE EFFICIENT //
>parentLabel = $(this).attr('label');
>parentID = $(this).attr('id');
>siteLAT = $(this).attr('lat');
>siteLNG = $(this).attr('lng');
>//set variable as string of PARENT
> variables//
>var parentBLOCK = "" +parentLabel +" "
> + parentID + "";
>//set variable to post parentBLOCK//
>var siteBLOCK =
> $("div").append(parentBLOCK);
>//get descentdent element of PARENT //
>$(PARENT).find('>element').each(function(){
>//set variable as this item to pass
> to the next function //
>var THISis = $(this);
>//get attributes of the THISis
> element. THIS COULD BE MORE
> EFFICIENT //
>thisLabel = $(this).attr('label');
>//set variable as string of THISis
> variables//
>var thisBLOCK = thisLabel +": Has
> this latitude "+ siteLAT +" &
> this Longitude "+siteLNG;
>//set variable to post thisBLOCK//
>siteBLOCK =
> $("div").append(thisBLOCK + "");
> //get descentdent element
> = THISis//
>
> $(THISis).find('>element').each(function(){
>//get a bunch of
> attributes of the child elements. THIS COULD
> BE MORE EFFICIENT //
>childLabel =
> $(this).attr('label');
>//get text from
> nodes of THISis chlidren elements //
>childCopy =
> $(this).text();
>//set variable as
> string of THISis child variables//
>var childBLOCK =
> childLabel + ": " + childCopy + "";
>//set variable to
> post childBLOCK//
>siteBLOCK =
> $("div").append(childBLOCK);
> });
> });
>
> });
>
> });
>}
>
> });
>
> :The XML
>
>
>
>
>
> SF
> CA
> West Coast
>
>
>
>
>
> Las Vegas
> NV
> West
>
>
>
>
>
> Pittsburgh
> Penn
> North East
>
>
>
>
>
> Toledo
> Ohio
> North Mid
>
>
>
>
>
[jQuery] Multi-line tabs plugin
'lo all, Is there a tabs plugin out there, or a recommended method / piece of CSS which can gracefully handle when the tabs go onto more than one line? I'm using UI 1.7.2 tabs at the moment and the tabs go a little odd when there are enough of them to go multi-line. All suggestions appreciated J Regards, Michael Price
Re: [jQuery] Re: Call ajax on sucess response from a previous ajax
Well, one thing you could do is to put your other ajax call on an interval.
You have a boolean that says whether or not authentication was successful.
Each time the interval tries to run your second ajax call, it first checks
to see if this boolean is true, if it is, make the call. If its not, do
nothing. Once it has been run, disable your interval.
cheers
Michael Lawson
Development Lead, Global Solutions, ibm.com
Phone: 1-276-206-8393
E-mail: mjlaw...@us.ibm.com
'When seen from outer space, our beautiful blue planet has no national
boundaries.'
http://www.givesmehope.com/
From: Bonji
To: "jQuery (English)"
Date: 01/20/2010 12:43 PM
Subject:[jQuery] Re: Call ajax on sucess response from a previous ajax
Ok basically on click of any anchor tag this ajax script calls a php
script called sessions.php
//data
var data = 'do=update';
//run ajax
$.ajax({
//post rather than get (default)
type: "POST",
//pass to php script
url: "/php-bin/sessions.php",
//send data
data: data,
//data type
dataType: 'json',
//timeout
timeout: 5000,
//cache
cache: true,
//success function
success:
//result function
function(result){
//if result.error
if(result.error)
{
//redirect
location.href=result.redirect;
}
},
//error function
error:
//error function
function(){
//load facebox internal error
faceboxURL
('php-bin/alert.php?do=internalError');
}
});//ajax
It posts 'do=update' as data to the php script which selects the
correct php switch.
The php script then checks if the user is logged in and updates the
users timestamp. All session data is stored in a mysql database.
The datatype returned is in a json array.
So on success the ajax checks the array value 'result.error' and if
set to true it currently redirects the user to the 'result.location'
value which is defined in the json array.
In other words... if the user was not found or their session has
expired it redirects the user to the location set in the php script as
they need to be authenticated to use the site.
However this means that the anchor tag is only checking user data.
What about its original function which is also an ajax call?
I thought i might be able to add the second ajax call as an else
statement to the if(result.error) statement.
In other words... if the user is authenticated and the timestamp was
updated run the origianl anchor tag function (which is also an ajax
call)
At the moment the two ajax calls run at the same time which is fine
except the second ajax is used to load content to the page. The first
ajax call completes half way through the second ajax call cycle.
In other words... if the user was not found or their session has
expired the second ajax still loads content to the page but gets cut
off half way through loading while the first one is redirecting.
This is ok but it is scrappy looking to see the page trying to load
content into a div (second ajax) while the first is redirecting.
I hope i havn't lost you. I've tried to explain as clearly as i can.
Ben
On Jan 20, 4:53 pm, Michael Lawson wrote:
> Do you have any code to share?
>
> cheers
>
> Michael Lawson
> Development Lead, Global Solutions, ibm.com
> Phone: 1-276-206-8393
> E-mail: mjlaw...@us.ibm.com
>
> 'When seen from outer space, our beautiful blue planet has no national
> boundaries.'
>
> http://www.givesmehope.com/
>
> From: Bonji
>
> To: "jQuery (English)"
>
> Date: 01/20/2010 11:46 AM
>
> Subject: [jQuery] Call ajax on sucess response from a previous ajax
>
> Hi.
>
> Im not sure if this is the correct way of going about this so i
> thought i'd ask the experts...
>
> I have a jquery ajax script which simply returns true
Re: [jQuery] Call ajax on sucess response from a previous ajax
Do you have any code to share? cheers Michael Lawson Development Lead, Global Solutions, ibm.com Phone: 1-276-206-8393 E-mail: mjlaw...@us.ibm.com 'When seen from outer space, our beautiful blue planet has no national boundaries.' http://www.givesmehope.com/ From: Bonji To: "jQuery (English)" Date: 01/20/2010 11:46 AM Subject:[jQuery] Call ajax on sucess response from a previous ajax Hi. Im not sure if this is the correct way of going about this so i thought i'd ask the experts... I have a jquery ajax script which simply returns true or false based on the response from a php script. This works just fine. However i want to know if it is possible to load a second ajax call if the first returns true? I've tried placing the second $.ajax inside the success fuction of the first $.ajax but the second call never triggers or doesn't return anything. Is there a way of queuing $.ajax functions so they fire on after another? <><>
Re: [jQuery] how to get href value
But that would give you the href for the first A element in the document,
not necessarily the one you clicked.
Going back to the OP's code, this.href would be the easiest way to get it:
$(document).ready(function() {
$("a").click(function(event) {
alert( "You clicked
Re: [jQuery] Reduce Image Quality
Thanks for that, Uploadify <http://www.uploadify.com/> is exactly what I was looking for! -- Michael Kubler *G*rey *P*hoenix *P*roductions <http://www.greyphoenix.biz> Mobile : 0433483008 I believe in a better world. I support the Zeitgeist Movement <http://www.zeitgeistsa.com>. German Bortoli wrote: I just found too uploadify, that use JQuery... :D Will test both. Thanks a lot for answer. -- - Bortoli German - Web: http://ventalocal.com.ar Blog: http://www.geoks.com.ar
Re: [jQuery] Passing in a parameter
If your current code in the body tag is literally:
onload="getStuff(data)"
then 'data' must be a global variable. You can reference this global
variable directly in any of your JavaScript code. For example:
$(document).ready( function() {
getStuff( data );
});
If that's not exactly what your code looks like, give a more specific
example and it will be easy to come up with some suggestions.
-Mike
On Sat, Jan 16, 2010 at 8:57 PM, Patrick wrote:
> Hi all,
> I have a newbie question. You know how you can pass a variable to a
> JavaScript function like this:
>
> onload="getStuff(data)"
>
> Which is done via the BODY tag. Now, jQuery uses $(document).ready
> (function() });
>
> My problem is simple: I want to pass in a variable to the ready
> (function(). When the page is first loaded, how can I pass in a
> variable to this function, or what strategy should I imploy to do
> such?
>
> Thanks for the pointers. Pat
>
Re: [jQuery] jQuery 1.4 cross domain post bug?
You can't do a cross-domain POST, nor a cross-domain GET either. It doesn't
matter what kind of data it returns, you can't do a POST at all. It's not a
jQuery limitation; the browser won't allow it for any JavaScript code.
Cross-domain JSONP works because it uses a dynamic script element, not a GET
or POST.
-Mike
On Fri, Jan 15, 2010 at 5:14 PM, David P wrote:
> I have a webservice sitting on my https server that accepts the POST
> verb and responds with some JSON.
> If I build a simple html form like
>
> https://myserver.com/myWS";>
>
>
>
>
>
> it will return the correct json data, with content type "application/
> json", and the browser will ask to save the result. When I look at the
> data it is 100% correct
>
> if I try to access it with jquery using
> $.post("https://myserver.com/myWS";, { emailAddress: "a...@a.com",
> password: "uk" }, function(data) { alert("hi!"); }, "json");
>
> the call back will never execute. When I check firebug, in the net
> panel, I can see the call go out (first the OPTIONS call which
> completes successfully, then the POST) however I cannot view the
> actual results. In the Console panel, the call is in red so firebug
> thinks there is some kind of error.
>
> Is there something I'm missing with how to handle cross domain POSTs
> that return json data?
>
[jQuery] Re: autocomplete: extra fields
If you want the extraParams passed to your data url to include other
form input values then you need to define the values as a function.
In that function use jquery to get the values of the other inputs.
$("#addressCity").autocomplete('http://www.example.com/api/
getcities/', {
minChars: 1,
autoFill:false,
extraParams: {
country: function() {
return $('#country').val();
},
region: function() {
return $('#region').val();
}
}
});
In this example the other input box IDs were 'country' and 'region'.
Both which need to filter the list of cities.
On Dec 18 2009, 7:27 pm, Simon Matthews
wrote:
> I have a number of fields in a grid which are all using auto
> complete. I want the extraParams function to be able to work out
> which field I am in so that I can return a differently filtered list.
> I don't seem to have access to the input variable? Any clues?
>
> Thanks
>
> Simon
Re: [jQuery] javascript loaded via ajax
Removing a element just removes the script's *source code* from the
DOM. It doesn't undo any actions that the script has already performed, such
as defining functions or variables or creating other DOM elements. It
doesn't change their availability for garbage collection at all.
In your example, the hello function will never be garbage collected, because
the window object has a property named 'hello' that holds a reference to the
function.
As Ami mentioned you can null out that window.hello property or use the
delete operator on it, or better, use the (function() { /* code here */
})(); wrapper to avoid setting global properties.
-Mike
On Wed, Jan 13, 2010 at 2:40 PM, Nathan Klatt wrote:
> On Wed, Jan 13, 2010 at 1:53 PM, nihal wrote:
> > is there anyway to remove the newly added function from the dom?
>
> Wrap the code you want to be removeable in its own