[jQuery] Re-implementing Ext-js webapp using jQuery

[Kynn Jones]

I want to use jQuery to re-implement a webapp that was originally
implemented (by someone else) using Extjs.
The only things I like about Extjs are the uniform look of its widgets and
the broad range of widgets it supports.  But I find Extjs too big to find my
way around, and often slow.

I know that I probably can find a jQuery plugin for any widget I could want,
but, from what I've seen, there is not much uniformity of appearance (let
alone implementation) across these widgets.

For the app in question i need at least the following:

1. tabs
2. grids (with and without paging)
3. combo boxes
4. radio button sets
5. checkbox sets
6. container panels

...and a layout mechanism for arranging these GUI elements.

Is there a *visually uniform* suite of jQuery widgets that would provide all
the above?

TIA!

Kynn

[jQuery] Re: How to uninstall the

[Kynn Jones]

Thanks for your suggestion!  (And sorry for the botched subject line!)
Kynn


On Tue, Oct 7, 2008 at 8:03 AM, Rene Veerman [EMAIL PROTECTED] wrote:


 add a global variable somewhere that your onready callback checks? if true:
 execute, if false:dont.
 then manipulate that global var instead of the callback itself?


 Kynn Jones wrote:

 I have a jQuery-based script that performs some updates on the current
 page (using the load method), and eventually visits a second page, by
 resetting window.location.

 This works fine, but if the user hits the back button, the whole sequence
 is repeated, including the re-loading of the second page.

 I'd like to prevent this behavior.  Is it possible?

 I tried removing the script with $( 'script[src*=/path/to/script]'
 ).remove(), but this did not prevent the whole sequence from running again.

 Then I thought that the reason for this was that using remove() does not
 get rid of the callback that was originally installed at the very end of the
 script with jQuery( MyScript.sleep ).  So I tried to uninstall the callback
 with $( 'document' ).unbind( 'ready', ... ), but this didn't do anything
 either.

 How can uninstall the onready callback?  If this is not possible, is there
 some other way that I can block the sequence from running a second time when
 the user the BACK button?

 The script has the following form:

 var MyScript = ( function ( $ ) {
  var SELF_URL = location.pathname + location.search;

  var $$; $$ = {
check: function () {
  if ( $$.results_ready() ) {
$( 'script[src*=/path/to/script]' ).remove();
$( 'document' ).unbind( 'ready', $$.sleep );  // is this right???
window.location = SELF_URL + 'results=1';
  }
  else {
$$.sleep();
  }
},

sleep: function () {
  setTimeout( $$.refresh, 2000 );
},

refresh: function () {
  $( 'body' ).load( SELF_URL, $$.check );
},

results_ready: function () {
  // etc., etc.
}
  };

  return $$;
 } )( jQuery );

 jQuery( MyScript.sleep );



 Thanks in advance!

 Kynn

[jQuery] How to uninstall the

[Kynn Jones]

I have a jQuery-based script that performs some updates on the current page
(using the load method), and eventually visits a second page, by resetting
window.location.

This works fine, but if the user hits the back button, the whole sequence is
repeated, including the re-loading of the second page.

I'd like to prevent this behavior.  Is it possible?

I tried removing the script with $( 'script[src*=/path/to/script]'
).remove(), but this did not prevent the whole sequence from running again.

Then I thought that the reason for this was that using remove() does not get
rid of the callback that was originally installed at the very end of the
script with jQuery( MyScript.sleep ).  So I tried to uninstall the callback
with $( 'document' ).unbind( 'ready', ... ), but this didn't do anything
either.

How can uninstall the onready callback?  If this is not possible, is there
some other way that I can block the sequence from running a second time when
the user the BACK button?

The script has the following form:

var MyScript = ( function ( $ ) {
  var SELF_URL = location.pathname + location.search;

  var $$; $$ = {
check: function () {
  if ( $$.results_ready() ) {
$( 'script[src*=/path/to/script]' ).remove();
$( 'document' ).unbind( 'ready', $$.sleep );  // is this right???
window.location = SELF_URL + 'results=1';
  }
  else {
$$.sleep();
  }
},

sleep: function () {
  setTimeout( $$.refresh, 2000 );
},

refresh: function () {
  $( 'body' ).load( SELF_URL, $$.check );
},

results_ready: function () {
  // etc., etc.
}
  };

  return $$;
} )( jQuery );

jQuery( MyScript.sleep );



Thanks in advance!

Kynn

[jQuery] Re: Basic AJAX Q: how to replace current with XHR-fetched page?

[Kynn Jones]

On Fri, Oct 3, 2008 at 3:53 AM, Thomas Danemar [EMAIL PROTECTED]wrote:



 Did that answer your question?


Did it ever!  That's awesome.  Thanks!

Kynn

[jQuery] filter vs find

[Kynn Jones]

Could someone explain to me the difference between filter and find.  Their
descriptions sound very similar to me.  What are the criteria to choose one
over the other?

TIA!

kynn

[jQuery] Data-inspection jQuery plugin?

[Kynn Jones]

Hello.
I've been looking for a data-inspector plugin for jQuery, to use during
debugging.

The functionality I'm interested in is similar to the one offered by
Firebug's data inspection window.  I.e. it should let one inspect an
arbitrarily deep JavaScript data element.  (It would be great if it could
detect cyclic data structures to avoid the infinite recursion in the
display.  But the fact that Firebug doesn't do this tells me that the
problem may be somewhat non-trivial.)

I have not been able to find such a plugin, but if you know of one, please
let me know.

But, assuming that such plugin isn't publicly available yet, I'll have to
roll my own.  If you know of any other plugins that may facilitate this
task, please let me know.  In particular, any plugin that implements the
display of nested structures (with collapsible/expandable elements) would be
helpful.

Thanks in advance!

kynn

[jQuery] How to logically AND selectors?

[Kynn Jones]

Hi.  The docs describe selectors of the form

  selector1, selector2, selector3

as matching the combined results of all the specified selectors, by
which they mean the set union of all the individual selections.  In
other words, the ',' here behaves like a logical OR.

Is there a succinct way to perform the correspond logical AND?  I.e.
what's the best way to obtain the set intersection of multiple
selections?

TIA!

kynn

[jQuery] How to add item directly to $ ?

[Kynn Jones]

Hi.
I'm just getting started with jQuery and I'm still trying to figure out how
to do some common tasks.  Here's one of them.

Suppose I have something like:
  var opts = $( 'option', select );

...where select is some select DOM element, and later I create a new
option

  var o = document.createElement( 'option' );

Now, to add this new option element, I'd do something like this:

  $( select ).append( o );

and I'd have to update opts:

  opts = $( 'option', select );

For some reason I have the feeling that one should be able to do this more
elegantly with jQuery, but I can't hit upon the right way to do it...

What I mean is that opts already holds all the options in select.  I'd like
to add one more item to it, in a way that affects both the jQuery object
*and* the context of the original query (i.e. the select element).  At the
very least I'd like to be able to append one item to the jQuery object, but
I found that the following naive approach does not work:

  opts[ opts.length ] = o;

Yes, the new item is added to the opts array, but it is not treated as part
of the selection.  And, of course, even if it did, the original select item
would remain unchanged (i.e. o would not have been appended to it).

I feel I'm missing something pretty fundamental here, and I'd appreciate any
pointers you may have (especially to documentation).

kynn

[jQuery] Re: How to add item directly to $ ?

[Kynn Jones]

On Jan 28, 2008 1:23 PM, Klaus Hartl [EMAIL PROTECTED] wrote:

 Try this:

 var opts = $( 'option', select );
 opts = opts.add( $('optionNew option/option').appendTo(select)[0] );


Ah!  I see what I was doing wrong.  I thought mistakenly that the add method
modified opts in situ, so I was not assigning its returned value to opts...

So this is what I have now (CE below is my own bit of syntactic sugar):


  var opts = $( 'option', select );
  var cur_length = opts.length;

  // add options to select element if necessary
  if ( new_length  cur_length ) {

// array of newly created option elements
var os = $.map( new Array( new_length - cur_length ),
function () { return CE( 'option' ) } );

opts = opts.add( $( os ).appendTo( select ) );
  }

Boy, I like this!  (The dummy array in the map is a bit of a waste,
though...)

Anyway...  thank you!

kynn

[jQuery] Re: Q: on handling GET JSON

[Kynn Jones]

Thanks, but I don't follow what you write here.  The test
!s.url.indexOf(http) evaluates to !0 == TRUE when the s.url begins with
http.  It is then that script is used, not when s.url begins with
file.
In fact, what the post does is to inject a script from a potentially
external URL.  If anything this would increase the possibility of an XSS
attack, not reduce it.  In fact, I'm now beginning to wonder whether I
should have titled this thread something like XSS vulnerability in
jQuery...

I remain as puzzled as ever.

Kynn

On Jan 22, 2008 5:47 PM, h0tzen [EMAIL PROTECTED] wrote:


 i think the key-check is this: !s.url.indexOf(http)

 file://foo/bar cant be requested via XHR, so script-tag is used...

 On 22 Jan., 23:20, Kynn Jones [EMAIL PROTECTED] wrote:
  I understand what the test at the top is testing for, but I don't
 understand
  the policy implemented by the code that runs when the test evaluates to
  true.

[jQuery] Q: on handling GET JSON

[Kynn Jones]

I'm confused by something I found in the definition of $.ajax in the jQuery
source, and would greatly appreciate it if someone could shed some light on
the matter.  The part of the code in question is this (I've made a couple of
minor formatting changes for clarity):

// If we're requesting a remote document

// and trying to load JSON or Script with GET

if ( (!s.url.indexOf(http) || !s.url.indexOf(//)) 

 ( s.dataType == script || s.dataType ==json ) 

 s.type.toLowerCase() == get ) {


  var head = document.getElementsByTagName(head)[0];
  var script = document.createElement(script);

  /*
   * definition of script omitted
   */

  head.appendChild(script);


  // We handle everything using the script element injection
  return undefined;
}


I understand what the test at the top is testing for, but I don't understand
the policy implemented by the code that runs when the test evaluates to
true.

Couldn't a script be requesting simple JSON data ( e.g. the JSON string '[
foo ]') via GET?  I think the code shown above would cause such a script
to fail.

This code suggests to me that jQuery expects such data to come only from
relative URLs, but I don't understand what justifies this expectation.

TIA!