[jQuery] Re: Plugin design pattern (common practice?) for dealing with private functions
I posted a resolution to this discussion here:
http://stackoverflow.com/questions/2061501/jquery-plugin-design-pattern-common-practice-for-dealing-with-private-function
On Jan 14, 2:08 am, Matt Maxwell leftwithoutli...@gmail.com wrote:
Also, more information on the call function (if you're not familiar with it)
can be found
here:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...You
could also use the apply
function:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...If
you need any other help with that or don't understand my example, let me
know.
Thanks,
Matt
On Wed, Jan 13, 2010 at 7:04 PM, Matt Maxwell
leftwithoutli...@gmail.comwrote:
Maybe try using something like:
$.myplugin.fill.call( this, red );
On Wed, Jan 13, 2010 at 6:47 PM, Tim Molendijk
taw.molend...@gmail.comwrote:
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
[jQuery] Plugin design pattern (common practice?) for dealing with private functions
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
[jQuery] Cycle Plugin -- Multiple Divs manipulated with one pager
Hey all -- I've built a site that has two divs with variable content
(eventually this will become 3, but I assume it will scale up to that
with no major issues). I'd like to be able to change content with each
of them using the same pager.
I found a similar post in this group concerning that, but it didn't
work for me, though it did manage to remove the second set of pagers
(it was appearing twice, each one controlling one element). That
discussion is here:
http://groups.google.com/group/jquery-en/browse_thread/thread/0b8490d9c724ffc0
here's my code, I know it's a little tricky to understand. After cycle
handles hiding the multiple elements, it builds the blurb div, which
is nested within the header. If you have questions, feel free to ask.
script type=text/javascript
$.fn.cycle.defaults.timeout = 6000;
$(function() {
$('#headerContainer').after('div id=blurbContainer'+
'div class=blurb id=blurbHome/div'+
'div class=blurb id=blurbAbout/div'+
'div class=blurb id=blurbWork/div'+
'div class=blurb id=blurbClients/div'+
'div class=blurb id=blurbBlog/div'+
'div class=blurb id=blurbContact/div'+
'/div'+
'div id=nav').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
pager: '#nav'
});
});
$(function() {
$('#blurbContainer').cycle({
fx: 'scrollLeft',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '#thumbNav a:eq(' + idx + ')';
}
});
});
/script
/head
body
div id=headerContainer
div class=header id=headerHome/div
div class=header id=headerAbout/div
div class=header id=headerWork/div
div class=header id=headerClients/div
div class=header id=headerContact/div
div class=header id=headerBlog/div
/div
div id=content/div
div id=footer/div
/body
/html
[jQuery] Creating a tabbed UI
Can someone post a simple example of creating a tabbed UI with JQUERY?
[jQuery] Re: Pop-up, hover or focus -problem
Adapt the code to something like this:
$(#search).hover(function() { //On hover...
$(#Google).show();
} , function() { //On hover out...
$(#Google).hide();
});
Tim :o]
On Aug 5, 6:53 am, Charlie charlie...@gmail.com wrote:
what if user shows the box on mouseover but doesn't use it?
Geir wrote:Thanks! On Aug 5, 1:12 pm,
Charliecharlie...@gmail.comwrote:hover requires 2 functions
hover(over,out)Ok, so can I use mouseOver instead?take the * if* out logic
not making sense on the focus part. If you can focus on element it's already
showingThe focus is for if $('#Search').hover is activated and the #Google-
div is focused. If then the user moves his/her mouse from #Search/ #Google, I
want the #Google to show until #Google.blur (user clicks something outside
#Google).
[jQuery] Re: Basic questions about jQuery validation plugin.
Also, you might have a missing curly-bracket after
rules: {
score_1 : {required: true}
unless you just mis-typed it.
Tim :o]
On Jul 30, 7:57 am, Anoop kumar V anoopkum...@gmail.com wrote:
I think the validation plugin depends only on the name and not the id.
On 7/29/09, Leon leon...@gmail.com wrote:
Hello,
I have a form with a set of input fields. I am going to validate the
form with jQuery Validation. The field has the value of its ID
different from the value of its name. I've looked around and tried
several times with the form validate method. But, it seems like the
validation got trigged only if the id and the name have the same
value. But I want to keep the input fields that way. My validation
function is simple.
$(document).ready(function() {
$('#myform').validate({
rules: {
score_1 : {required: true}
});
})
My input's
input id=score_1 type=text name=score[1] /
input id=score_2 type=text name=score[2] /
input id=score_3 type=text name=score[3] /
The validate is not trigged in this way.
Can you help me on this?
Thank you.
Leon
--
Thanks,
Anoop
[jQuery] Ajax Failing in Firefox 3.0.10
I have the following code (actually, this is stripped down for clarity
though the functionality is the same):
a id=delete_item_2delete/a
script type=text/javascript
$(#delete_item_2).click(function(e){
alert(before post);
$.post(/items/delete/2/);
alert(after post);
});
/script
This works in IE and Safari but bombs in Firefox (though both alerts
are triggered). However, it works OK in Firefox to just enter the post
url in the browser (i.e., www.example.com/items/delete/2/).
Further, this works locally on my dev server but not on my production
host; I am running under Apache with jQuery 1.3.2.
Just on the off chance that someone else has noticed this, I am
running under Django on a Webfaction shared host.
Any thoughts?
- Tim
[jQuery] $ajax does not send all data
The following function is used as the onsubmit handler for a form:
//
---
function checkCPForm1(theform) {
if(ValidateCPForm(theform)){
var data = $(theform).serialize();
alert(data: + data); // DEBUG GLOBAL
$.ajax({
type: theform.method,
url: theform.action,
data: $(theform).serialize(),
datatype: 'html',
success: function(html){$('#dynamic_content').html(html)},
error: function(XMLHttpRequest,textStatus,error){
alert(ERROR:\n + textStatus, + \n + error)
}
});
return false;
} else return false;
}
//
-
Not all the form data is included in the data string.
What _is_ missing is
1)the name and value for the submit button itself.
In traditional CGI programming, I've found that names and values for
submit buttons are always sent. And I've gotten used to strategies
where more than one submit button is included in a form
2)The name and value for a radio button _when_ the button is named
'someType' as in 'licenseType'. If the name is changed to say, 'license_type',
data is transmitted as expected.
I've encountered this problem with another ajax library, so I don't think this
is particular to jquery.
Any comments are welcome. Pointers to relevant documents, RFCs,
dicussions welcome as well.
thanks
tim
[jQuery] image for public usage
Since jQuery is one of my tools - I'd like an appropriately public image to use on my website. Are any available? thanks tim
[jQuery] Re: image for public usage
On Monday 04 May 2009, Sam Sherlock wrote: http://docs.jquery.com/Design_and_Identity Thanks a lot! Does the trick.. tj
[jQuery] Change text items in URL
I have three radio boxes set up where each one is a different value. - red - blue - green I'd like when one of them is clicked to change the value of the url. So for example --Changethisvalue-- would be actively updated on each click. http://domain.com/ad/campaign/g/--Changethisvalue--/dck/35
[jQuery] IE display issue
i am setting reducing a tbody height when the user clicks a row and then showing content below the table. in IE7 when i show() or set display to block for the content below the table, IE resets the tbody height to the original size such that it overlaps my content. i've put the code in to reset the height again, but it doesn't do anything at that point. any ideas?
[jQuery] Re: IE display issue
you can go to the following link. http://dev.inflatableoffice.com/myaccount/leads.php username: thanks password: thanks when you click on a row in IE you will see the issue. for some reason, after i use the following code: $(table#leadheader).show(); $(#leadControls).show(); $(div#edittab).css(display,block); $(div#tabs).css(display,block); $(#savecopy).show(); this code doesn't have any affect: $(.tableContainer tabletbody).css(height,130px); this still works: $(.tableContainer).css(height,178px); however, if i put the last two lines first, they both work and then IE reverts the tbody height back to its original value and i can't change it.
[jQuery] Re: IE display issue
sorry, try this: username: thankyou password: thankyou may take 30 minutes to work
[jQuery] Re: .load of content does not always include DB connection
Unfortunately it's in a cms, that I can't really expose. My host company is looking at the problem as I expect there are server issues. Tim On Mar 24, 5:49 pm, James james.gp@gmail.com wrote: This sounds more like a server-side issue. Are you running into highloadissues on yourdatabase, or some kind of connection limit? Every AJAX request is just a single request and are completely separate of each request and the page that it's called from. Do you have some kind of demo page that we can look at? On Mar 24, 12:58 pm, Tim tim.myer...@gmail.com wrote: I have a website where I pull a lot of different pages into one CMS page. The problem is the loaded page will occasionaly say Nodatabase selected. But if I click the link andloadthe page again the content will show correctly. Is there a way to check if connection has been made or a way to delay theloadby milliseconds? Thanks.
[jQuery] .load of content does not always include DB connection
I have a website where I pull a lot of different pages into one CMS page. The problem is the loaded page will occasionaly say No database selected. But if I click the link and load the page again the content will show correctly. Is there a way to check if connection has been made or a way to delay the load by milliseconds? Thanks.
[jQuery] Re: Recommend tree widget toolkit
On Wednesday 11 March 2009, jQuery Lover wrote: I have not tested nor worked with lots of tree widgets, but treeView is a lightweight and robust plugin... http://be.twixt.us/jquery/treeView.php thanks, I will check that out. BTW: dojo did come thru with the addition code needed, but what a lot of resource loading! Cheers tim
[jQuery] Recommend tree widget toolkit
Hello: If jquery itself does not support a tree widget toolkit, can anyone recommend one, I've tried dojo but two problems: 1)doesn't work - even verbatim example 2)No support 3)Very big system Any comments or recommendation welcome. thanks tim
[jQuery] Accessing initialized plugin options from public method (?)
How do I access options that have already been initialized from a
public method?
example:
jquery.plugin.js:
(function($j) {
$j.fn.plugin = function(options) {
// build main options before element iteration
var opts = $j.extend({}, $j.fn.overviewSummary.defaults,
options);
alert(opts.test);
};
$j.fn.plugin.publicFunction = function(options) {
//how do i read the previously initialized options without
having to pass them twice?
alert(opts.test);
};
.
// from another file i call the plugin like this:
$j(#divTarget).plugin({
test: 'It works!'
}; // output 'It works!'
$j(#divTarget).publicFunction(); // undefined
-
does anyone know how to read in the jquery options that were
initialized via the options parameter from the initial plugin call?
subsequent public method calls to that plugin return undefined (see
the comments in the pseudocode)
Thanks in advance,
Tim
[jQuery] Counting Lists inside of Lists
So I have a main list of states in an unordered list and then a
unordered list of cities within each of those. So I wanted to count
the number of cities per state.
ul class=state_list
li
h2Alabama/h2
ul
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
/ul
/li
/ul
$('.state_list li').each(function(i){
$(this+ ' li').count();
});
It will let me put anything inside of the each function except for
counting or length, when I do that it blows up the whole site without
any errors..
[jQuery] Re: Counting Lists inside of Lists
This worked. Thank you!
On Feb 19, 5:27 pm, James james.gp@gmail.com wrote:
Try:
$('li', this).length;
On Feb 19, 3:14 pm, Tim tim.myer...@gmail.com wrote:
So I have a main list of states in an unordered list and then a
unordered list of cities within each of those. So I wanted to count
the number of cities per state.
ul class=state_list
li
h2Alabama/h2
ul
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
lia href=http://www.google.com;Alabama State/a/li
/ul
/li
/ul
$('.state_list li').each(function(i){
$(this+ ' li').count();
});
It will let me put anything inside of the each function except for
counting or length, when I do that it blows up the whole site without
any errors..
[jQuery] Re: Javascript Generated by $()load does not render
On Tuesday 17 February 2009, Alexandre Plennevaux wrote: i suppose that you change try specifying the dataType as script that your ajax calls expect: Taken from: http://docs.jquery.com/Ajax/jQuery.ajax dataType The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are: Thank you. That clears up a lot. But the question that remains is that two different types of data are returned: 1)Script 2)Text The answer may be in the mime type. $()load is so much easier to use. I will research futher. regards tim
[jQuery] Re: Javascript Generated by $()load does not render
On Wednesday 18 February 2009, Alexandre Plennevaux wrote: you can use load, you just have to setup the ajaxSetup controlling your ajax main parameters so you set it to your liking, then you call the load(). It is built on top of the ajax method to ease its use. See: http://docs.jquery.com/Ajax/jQuery.ajaxSetup#options I am looking at: http://docs.jquery.com/Types#Options in addition I am looking at printed material I see from the book: jQuery In Action - page 252 documentation for $.ajaxSetup(properties). The properties object can contain a dataType value. 1)What datatype value would configure $load so that it would handle both script and html. IOWS the CGI script returns both javascript and html? 2)Are these datatype strings themselves case sensitive. Time is limited for me right now, I'll do my home work a little later. :-) thanks again
[jQuery] serializing data from a jquery-rendered form
The goal is a multi-stage process schema where a form is rendered
by a cgi script and inserted into a static web page via this method:
[code]
$(document).ready(function(){
var myscript;
if(document.domain == 'bart.johnson.com') // local
myscript = http://bart.johnson.com/cgi-bin/woods/phhDonate.r;;
else
myscript = http://www.somedomain/cgi-bin/script.r;;
$(#dynamic_content).load(myscript,task=entry,
function(resp,stat,xhr){
//alert(resp); // leave for testing
}) });
[/code] And is successful.
The second stage is to validate the input form that is rendered by the
method above and write out a review form to the 'dynamic_content'
innerHTML. The form provides an 'onsubmit' handler, called as follows
from the form tag: onsubmit=return CheckForm0(this);
coded as follows:
[code]
function CheckForm0(myform){ // myform is the 'this' in CheckForm0(this);
if(Check_Form0(myform)){ // validation code
$(#dynamic_content).load(myform.action,$(this).serialize(),
function(resp,stat,xhr){
//alert(resp); // leave for testing
}
);
return false;
}
return false;
} //[/code]
The problem is that $(this).serialize does not provide the encoded
string that the CGI script is looking for. Does jQuery provide a function
to serialize the 'myform' argument?
thanks
tim
[jQuery] Re: Javascript Generated by $()load does not render
On Wednesday 18 February 2009, Alexandre Plennevaux wrote:
see if this resolves your issue:
Hi Alexandre:
Thanks very much for your help on this issue, but it still
does not work.
However, I already have a workaround to enable functionality - and in the
future - a different approach could be tried.
In the meantime, :-( I'm stymied on another issue -
see subject: serializing data from a jquery-rendered form
Keep up your good work!
Tim
...
$(document).ready(function(){
$.ajaxSetup( {
dataType: 'script'
}) ;
$(#dynamic_content).load(myscript,task=entry,
function(resp,stat,xhr){
//alert(resp); // leave for testing
}
);
});
[jQuery] Re: serializing data from a jquery-rendered form
On Wednesday 18 February 2009, Tim Johnson wrote:
The goal is a multi-stage process schema where a form is rendered
by a cgi script and inserted into a static web page via this method:
The second stage is to validate the input form that is rendered by the
method above and write out a review form to the 'dynamic_content'
innerHTML. The form provides an 'onsubmit' handler, called as follows
from the form tag: onsubmit=return CheckForm0(this);
I've changed the code to this:
function CheckForm0(form){
if(Check_Form0(form)){
var data = $(Form0).serialize();
alert('data: ' + data);
$(#dynamic_content).load(form.action,$('Form0').serialize(),
function(resp,stat,xhr){
alert(resp); // leave for testing
alert(stat);
}
);
return false;
}
I can verify that Check_Form0 // the validator
is working. However, even tho the form has at least a dozen
items filled in, the alert() call is an empty string. The response
string indicates that the CGI script has not received any data,
yet 'stat' is success.
---
tj
[jQuery] Javascript Generated by $()load does not render
I have a script that generates javascript validation code when called
in the following code:
$(document).ready(function(){
$(#dynamic_content).load(myscript,task=entry,
function(resp,stat,xhr){
//alert(resp); // leave for testing
}
);
});
All of the contented rendered by 'myscript' is written to the innerHtml of
div dynamic_content *except for the javascript*.
I am viewing the content rendered by the script in firefox using the
View Formatted Source add-on.
If I uncomment the alert() above, I see the javascript in the response.
Does anyone have an answer for this mystery. Or a work-around. Any links
to discussions on this topic?
thanks
Tim
[jQuery] Re: jQuery Plugin Hello World
On Sunday 15 February 2009, mtsmit2 wrote: The following is a pretty good starting point. http://docs.jquery.com/Plugins/Authoring What is was looking for you. thank you tim
[jQuery] jQuery Plugin Hello World
Google gives me lots of hits on jQuery Plugin However, I have yet to find a _very_ simple example. One that would demonstrate the simplest syntax and also demonstrate where to install the file with the plugin.. Links are welcome. I'll take it from there. thanks Tim
[jQuery] Generate Session ID
I'm transitioning from old-style CGI programming to using jQuery to access the server via Ajax. It is customary for me to have the CGI script generate a random string to use as a session ID. Using Ajax with jQuery - would it be practical and safe for the document to generate a Session ID in the onload or document.ready phase and pass it to the server-side script? Comments, caveats and examples are welcome. thanks tim
[jQuery] Re: Generate Session ID
On Saturday 14 February 2009, C.Everson wrote: On Sat, 14 Feb 2009 10:41:05 -0900, Tim Johnson wrote: Using Ajax with jQuery - would it be practical and safe for the document to generate a Session ID in the onload or document.ready phase and pass it to the server-side script? Tim, IMHO the ONLY way to ensure a unique session ID is to generate it server side. Otherwise no matter what you do (client side) there is a chance of duplication. Understood. I'll stick with my tried-and-true cgi methods. thanks tim
[jQuery] Re: Status Codes = docs
On Wednesday 11 February 2009, Nic Luciano wrote: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html Something like this? I might be misunderstanding your question, but I don't think statuses and datatypes are related if that's what you mean. Status codes (linked) are the status of the call.. (ie. a return status of 200 means everything went OK). Data type is the format of the data you are expecting to return (html for plain html to insert into your document, json for js objects, etc)... Sorry. To clarify, I wanted ed to know if numerical statuses via the w3 protocol or text strings were being returned. I just did my first successful ajax call using jquery and the status returned in the callback was success, not 200. I hope the question is clearer now. thanks tim
[jQuery] Re: Status Codes = docs
On Thursday 12 February 2009, Mike Alsup wrote: Textual status is fine. Where is documentation on status strings? Thanks Tim When the 'success' handler is invoked the textual status is always success (unless you're using the ifModified option). When the 'error' handler is invoked the textual status may be error, parsererror, or timeout. When the 'complete' handler is invoked the textual status may be any of those mentioned above. Both the 'complete' and 'error' callbacks are passed the XHR as the first arg. With that object you can determine the HTTP status via its 'status' property. Understood. Thanks. I couldn't find a wiki page that succinctly covers this so I'll make a note to add one. Good idea. regards tim
[jQuery] Re: $.post NOT_ENOUGH_ARGS
On Tuesday 10 February 2009, mkmanning wrote:
For the second argument use $(form).serialize()
You should also use onsubmit=return CheckForm0(this);
although the best practice would be to remove the inline script and
bind
the submit event like this:
$('form').submit(function(){
//do your ajax here and return false
});
But what would bind the form in your example? I frequently
work with multiple forms. I.E. is 'form' in your $.submit()
above the name or ID of the form or is it an object from which
name or ID could be extracted as a property.
Thanks
Tim
[jQuery] Re: $.post NOT_ENOUGH_ARGS
Thank you very much James.
this is great!
cheers
tim
On Wednesday 11 February 2009, James wrote:
You can use a generic classname on all your forms.
form action=process1.php id=form1 class=myForm
...
/form
form action=process2.php id=form2 class=myForm
...
/form
$(function() {
$(.myForm).submit(function(){
$.post($(this).attr(action),
$(this).serialize(),
function(response,mystatus) {
alert('response: ' + response + status: +
status);
});
return false;
}
});
});
[jQuery] Status Codes = docs
I would be grateful if someone could point me to documentation on status codes. Example: $post() expects a callback function whose second argument would be status. What statuses should I expect and what datatype for statuses should I expect. Links to docs would be more than adequate. _Thanks In Advance_ and thanks for all the help I've had so far. tim
[jQuery] $.post NOT_ENOUGH_ARGS
My source is jQuery in Action (Bibeault/Katz) - page 249,
the $.post function.
According to the documentation post() takes three arguments:
URL, parameters, callback where callback is a function with 2 arguments,
response and status.
I've tried the following - which is called from the form
as onsubmit=CheckForm0(this); [code]
// argument 'form' is the reference to entry form
function CheckForm0(form) {
$.post(form.action,form,
function(response,mystatus){
alert('response: ' + response + status: + status);
})
return false;
} [/code]
But I get the following error message:
Error: uncaught exception: [Exception... Not enough arguments
nsresult: 0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS) location: JS frame ::
http://bart.johnson.com/js/jq/jquery.js :: anonymous :: line 3636 data: no]
Am I correct that the callback function needs another argument?
It would be helpful if someone could point me to what I have done
incorrectly.
Thanks
Tim (not an ajax virgin, but a jQuery noob)
[jQuery] Re: $.post NOT_ENOUGH_ARGS
On Tuesday 10 February 2009, James wrote:
The second parameter (where you have 'form') is suppose to be a JS
object like:
{name:form.myName, email:form.email, phone:form.phone}
Potentially, 'form' could have hundreds of elements and in
reality, does. So how to convert the 'form' object into a JS
object? I've worked with another framework that does that
'auto-magically'. Could you refer me to an example of how to
do that? And I will research it as well :-) not asking you to do
my homework for me.
thanks
tim
[jQuery] Convert from AjaxRequest to jQuery/ajax
For some time I've been using a little ajax library called AjaxRequest.
Because I'm working with code generation tools, I'd like to make a
first - step switch to jQuery as simple as possible.
A sample AjaxRequest function follows:
function CheckForm0(theform) {
AjaxRequest.submit(
theform
,{
'onSuccess':function(req){
var res = req.responseText.split('\n')
document.getElementById(cell1).innerHTML = res[1];
document.getElementById(div1).innerHTML = res[2];
document.getElementById(span1).innerHTML = res[3];
alert(res[0]);
},
'onError':function(req){ alert(ERROR: + req.statusText);}
}
);
return false;
} // end function
// Form tag follows:
form method=post
action=http://bart.johnson.com/cgi-bin/baker/reb/test-ajax.r;
onsubmit=return CheckForm0(this);
// Note that method, action, and onsubmit parameters are in the tag
// and I would prefer that they remain there. Also the form is referenced
// by 'this' in the onsubmit parameter and passed to the Ajax function.
I'd appreciate pointers to jQuery examples that would help me with the
transition. I'd like an approach that requires as few changes to the form
tag as possible.
Thanks
Tim
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
On Sunday 08 February 2009, pedalpete wrote:
I believe the code you are looking for would be something like this
Hi pedalpete:
Thanks you for the quick response.
[code]
$('form').submit(function(){
var cell1 = $('#cell1').html();
var div1= $('#div1).html();
var span1=$('#span1).html();
$.ajax({
type: GET,
url : 'urlToGet.php',
data: 'cell1='+cell1+'div1='+div1+'span1='+span1,
success: function(response){
// whatever you want to do with the response
}
});
As you see, the type and url are hard coded into the function.
Furthermore, if I understand the interface to the function, 'form'
as also hardcoded
In the case of the example that I submitted, the form is passed
as the 'this' keyword, allowing this function to have more than one caller.
Thanks again, more examples are welcome, but perhaps I would have
to dig deep and learn to write a wrapper.
cheers
tim
});
[/code]
On Feb 8, 4:23 pm, Tim Johnson t...@johnsons-web.com wrote:
For some time I've been using a little ajax library called AjaxRequest.
Because I'm working with code generation tools, I'd like to make a
first - step switch to jQuery as simple as possible.
A sample AjaxRequest function follows:
function CheckForm0(theform) {
AjaxRequest.submit(
theform
,{
'onSuccess':function(req){
var res = req.responseText.split('\n')
document.getElementById(cell1).innerHTML = res[1];
document.getElementById(div1).innerHTML = res[2];
document.getElementById(span1).innerHTML = res[3];
alert(res[0]);
},
'onError':function(req){ alert(ERROR: + req.statusText);}
}
);
return false;
} // end function
// Form tag follows:
form method=post
action=http://bart.johnson.com/cgi-bin/baker/reb/test-ajax.r;
onsubmit=return CheckForm0(this);
// Note that method, action, and onsubmit parameters are in the tag
// and I would prefer that they remain there. Also the form is referenced
// by 'this' in the onsubmit parameter and passed to the Ajax function.
I'd appreciate pointers to jQuery examples that would help me with the
transition. I'd like an approach that requires as few changes to the form
tag as possible.
Thanks
Tim
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
On Sunday 08 February 2009, pedalpete wrote:
Sorry Tim, I didn't understand it that way.
:-)
You should still be able to do this fairly simply.
Looks like I will also have to use a wrapper to get the form
using the 'this' keyword, since I work with multiple forms.
I think I can get what I need by something like this:
Illustrated by:
function CheckForm(f) { // triggered by onsubmit=CheckForm(this);
var formname = f.name;
var url = f.action;
var meth = f.method;
// illustrated by
alert('Action: ' + f.action + '\nMethod ' + f.method + \nName: +
f.name);
// I'll review your examples, this gives me a start
// more code ..
return false;
}
//Thanks
//tim
You don't have to specify the url, you can pass it as a variable.
But you would need to put your $.ajax function into another function,
and call it when clicked. You can also build the data variables in the
other functions.
For instance
[code]
$('form#1').submit(function(){
var url=$('form#1).attr('action');
// then get your data variables and do whatever you want to do with
them
var type= get;
submitForm(url, data);
});
function submitForm(url, data){
$.ajax({
type: type,
url: url,
data: data,
success: function(){
}
})
}
[/code]
I hope that helps, and that I understand what you were trying to do
better than my first answer.
[jQuery] Re: simple checkbox and display text problem
Thanks Aaron,
I kinda figured that out when I found that things worked fine except when
both checkboxes are checked and you uncheck one, my script breaks. I just
wanted to use jquery to show the price of a course when its checkbox is
checked. i've already solved the server side with java. I guess I have to go
back to the drawing board before even writing code.
$(document).ready(
function()
{
var total = 0;
$(inp...@type=checkbox]).click(function(){
if ($(this).is(:checked))
{
$(#newsletter_types).remove();
$('#newsletters').append('span id=newsletter_types/span');//create
span first
count = $(inp...@type='checkbox']:checked).length;
total = 500 * count;
$('#newsletter_types').append(total + '.00');
}
else
$(#newsletter_types).remove();
});
});
On Sat, Feb 7, 2009 at 2:08 PM, Aaron Gundel aaron.gun...@gmail.com wrote:
Bob,
Not sure exactly what you're trying to do here. You might wish to
elaborate more. However, I can already tell you that you're going to
have issues with putting out multiple spans with the same id. You
should use a class or some other attribute to store the identification
information.
Aaron
On Fri, Feb 6, 2009 at 5:50 PM, coworkerbob tribe...@gmail.com wrote:
Hi all, having trouble getting each checkbox selected to display a
text element.
This works below, but of course i want it for all checkboxes and not
just one
$(document).ready(function()
{
var total = 0;
var a = 0;
//morning is the name of one the checkboxes
$(inp...@name=morning]).click(function(){
if ($(this).is(:checked)) //if check assign value and append to
span, else uncheck remove
{
$('#newsletters').append('span id=newsletter_types/span');//
create span
var a = 500;
total = a;
$('#newsletter_types').append(total + '.00');
}
else
$(#newsletter_types).remove();
});
});
This isn't working for me.
$(document).ready(function()
{
var total = 0;
$(inp...@type=checkbox]:checked).each(function(){ // read that
each is like for loop
count = $(inp...@type='checkbox']:checked).length; //get
how many checked
total = count * 500;
$('#newsletters').append('span id=newsletter_types/
span'); //create span
$('#newsletter_types').append(total + '.00');
}):
});
Any hints is greatly appreciated. Thanks!
[jQuery] Writing Ajax to table cells.
FYI: I am an experienced web programmer (server-side mostly) with some exposure to javascript and have used ajax calls and dhtml methods a little. Furthermore - I do not _yet_ use jquery. This question is to - some extent - being asked of behalf of a web designer who himself is not on this ML. The designer wants his design to accomodate ajax calls which would retrieve data via my server-side tools and write the data to his pages. The web designer is accustomed to working with tables. It has been our understanding that ajax and dhtml don't play well with tables, thus he has gone to considerable effort and much frustration in creating a couple of test pages using div tags only - no tables, but remarks that this has been very labor intensive. So his (and my question) is: Is it possible and practical to use jquery ajax calls to write to tables? What idioms might be necessary? Since this is a general question, links to discussions or documents are welcome and may be sufficient. Furthermore, caveats and warning are welcomed also. thanks tim
[jQuery] Re: Writing Ajax to table cells.
On Thursday 05 February 2009, David Meiser wrote: I'm not 100% sure what you're trying to accomplish, but you can output anywhere on the page using a distinct element name. I have code in which I attach tables generated in jquery to DIVs, for example. And I'm certain you could go the opposite way, as well. Hope that helps, somewhat. My suggestion to him was consider div or span tags inside of td elements. I'm probably a bit ahead of myself - I should try a test with jquery writing to such a tag inside of a table cell - - - thanks for the reply tim
[jQuery] Append Form IE7 Ajax Submit
I've spent the whole day trying to figure this out. I'm appending a
form into a td, then that form has a submit action on it. It works in
all browsers except for IE, where it just goes redirects to another
page. I'm thinking that it might be that the new form isn't a part of
the DOM in IE7. But if I use .load instead of append it still
redirects.
$(document).ready(function(){
//Place contact us form on page
$('td:last','#content_table').append('ph2Contact us about
this
Trip/h2div id=c_t_form_containerform name=contact_trip_form
id=contact_trip_formulliNamebr /input id=name type=text /
/liliEmailbr /input id=email type=text //liliinput
id=submit value=Send type=submit //li/ul/formdiv
id=c_t_form_messageIf your are interested in this trip and would
like more information, please fill out our form and we will get back
with you shortly./div/divdiv id=successimg src=img/
comments.png alt=comments success/br/bThank you for your
interest in this trip!/b/div');
// Get Page Title
var title = $('title').text();
$(#c_t_form_container form).live(submit, function(){
var name = $(#name).val();
var email = $(#email).val();
$.ajax({
type: POST,
url: app/contact_send.php,
data: 'Name:'+ name + 'Email:' + email + 'Trip Title' +
title,
success: function(del){
$('#c_t_form_container').fadeOut('normal', function () {
$('#success').fadeIn('slow');
});
}
});
return false;
});
});
[jQuery] Re: Append Form IE7 Ajax Submit
Will using
$(#c_t_form_container form).live('click', function() {
submit the form?
On Feb 2, 2:09 pm, Mike Alsup mal...@gmail.com wrote:
I've spent the whole day trying to figure this out. I'm appending a
form into a td, then that form has a submit action on it. It works in
all browsers except for IE, where it just goes redirects to another
page. I'm thinking that it might be that the new form isn't a part of
the DOM in IE7. But if I use .load instead of append it still
redirects.
'submit' is not a supported event for live.
http://docs.jquery.com/Events/live
[jQuery] Move element after Fade
Hello,
I'm trying to write a script to move a li element from one unordered
list to another after it fades. Here is my code, I can get it to fade
but not move. If I remove the fade I can get it to move correctly.
Thanks for the help.
$(document).ready(function(){
$(.color).click(function () {
$(this).fadeOut(1000,function(){
$(this).prependTo(#chosen_colors);
});
});
});
[jQuery] Re: Possible 1.3 bug
That worked for me Balazs. Thanks for your help.
If anyone is having a problem with this feel free to contact me about
it.
-Tim
On Jan 15, 10:01 am, Balazs Endresz balazs.endr...@gmail.com wrote:
In jquery.liveFilter.js a pseudo selector defined as a string, which
was deprected since 1.2 if I remember right.
jQuery.extend(
jQuery.expr[':'], {
insContains : jQuery(a).text().toUpperCase().indexOf(m
[3].toUpperCase())=0
});
This should be a function instead:
jQuery.expr[':'].insContains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())=0
}
On Jan 15, 4:09 pm, tpb976 tpb...@gmail.com wrote:
It seems the problem has to do with creating custom selectors. I have
a custom selector that I created and I am receiving this exact error.
I am currently looking into the problem to see what I can figure out.
On Jan 15, 9:05 am, Diego diego.a...@gmail.com wrote:
Hi (me again), the problem was being caused by the moreSelectors
plugin on this
page:http://www.softwareunity.com/jquery/JQueryMoreSelectors/
On Jan 15, 2:40 pm, Diego diego.a...@gmail.com wrote:
FYI. I found my offending code. It's a combination of these selectors:
:text, :password, :file, :select, :button
I just can't figure out why!
On Jan 15, 7:39 am, emmj...@gmail.com emmj...@gmail.com wrote:
I was checking all of my random plugins/scripts to make sure they all
work with jQuery 1.3 and I found one that is having problems.
An example of it is available at:http://digitalinferno.net/temp/
If you enter some text into the input firebug will report that
filter is not a function
in http://digitalinferno.net/temp/js/jquery.jsonline1961
Anyone know if this is a bug or if I have to change something in my
code for the new 1.3 release?
[jQuery] relative positioning spans inside cluetip
i'm using inline styles to position some spans inside the cluetip. using an ajax loaded cluetip. they are ignoring the positioning css. however, when i open the page directly in my browser, everything is properly positioned. fyi, i put some color to the text using css just to see if inline styles were ok in cluetip. the color works fine. here's some of the code: div style=width:500px;overflow-y:275px table width=100% tr td align=centerTime (hrs)/td /tr tr td span style=position:relative;left:0;top:0;text-align:left;4pm/ span span style=color:#A52A2A;position:relative;left:35.5;top:0;text- align:right;5pm/span span style=color:#A52A2A;position:relative;left:71;top:0;text- align:right;6pm/span span style=color:#A52A2A;position:relative;left:106.5;top:0;text- align:right;7pm/span span style=color:#A52A2A;position:relative;left:142;top:0;text- align:right;8pm/span span style=color:#A52A2A;position:relative;left:177.5;top:0;text- align:right;9pm/span span style=color:#A52A2A;position:relative;left:213;top:0;text- align:right;10pm/span /td /tr /table /div
[jQuery] Re: relative positioning spans inside cluetip
oops. i need to put leftL xxxpt. forgot the pt. it always helps to post. seems that as soon as i do, i find the answer myself.
[jQuery] thickbox and blockui conflict
i appear to be having a thickbox and blockui conflict. blockui works on the page fine until i open and close a thickbox. i am using tb_remove() to close the box. after which, i get a message in firebug that blockui is not a function. any ideas? thanks. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups jQuery (English) group. To post to this group, send email to jquery-en@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-en?hl=en -~--~~~~--~~--~--~---
[jQuery] Re: thickbox and blockui conflict
nevermind...i had jquery and blockui initialized in the main page and the thickbox. oops. i just took them out of the thickbox and it worked. On Dec 1, 9:04 am, Tim [EMAIL PROTECTED] wrote: i appear to be having a thickbox and blockui conflict. blockui works on the page fine until i open and close a thickbox. i am using tb_remove() to close the box. after which, i get a message in firebug that blockui is not a function. any ideas? thanks.
[jQuery] $.fn.data() is significantly slowed down by $.fn.trigger().
$.fn.data() internally uses $.fn.trigger() for whatever reason. When using $.fn.data() heavily, $.fn.trigger() starts to slow down the code. In my situation Firebug profiler tells me 20% of the time is consumed by $.fn.trigger() as a result of $.fn.data() calls. Shouldn't it be possible to get rid of $.fn.trigger() in $.fn.data() or make $.fn.trigger() more efficient?
[jQuery] Binding multiple custom namespaced events not working correctly
Hello,
Run the following code snippet in Firefox and open up Firebug. It
fires a custom event upon left or right click. The handlers for
'myclick.left' and 'myclick.right' work as expected. The problem is
that 'any click' is only logged to the console in case of a right
click, and not in case of a left click. That doesn't make sense to me.
Is this a bug or am I missing something??
$().
bind('myclick.left', function() {
console.log('left click');
}).
bind('myclick.right', function() {
console.log('right click');
}).
bind('myclick.left myclick.right', function() {
console.log('any click');
});
$().
click(function(e) {
var ns;
switch (e.which) {
case 1:
ns = 'left';
break;
case 3:
ns = 'right';
break;
}
$().trigger('myclick.' + ns);
});
[jQuery] jqmodal overlay is flashing with internet explorer
Hi folks, My problem is, that when I open a jqmodal window, for a short time, the overlay has full opacity. This problem only occours with Internet Explorer. I'm very thankfull that this problem also happen on the official jqmodal site, when you open example 6, the alert() override. I hope this helps you, to help me ;). Greetings Tim
[jQuery] Re: id same as name confuses JQuery?
First sorry for the errors in my example. Braces was a typo. Div
with name attribute was an error also. My real issue is with a select
tag.
Anyway...while creating a sample page I have found that the problem is
different than I thought. It seems the problem is that jQuery cannot
find elements having an ID with dots in it. For example $
('#Foo.Bar') will not select div id=Foo.Bar
Is this by design? An issue with JS itself?
NOTE: I am using jQuery with MS MVC, which has HTML helpers that
create tags with IDs with dots in them. WebForms replaces dot with
underscores, so I wonder if JS itself has issues with IDs with dots?
On Oct 13, 6:46 pm, Dave Methvin [EMAIL PROTECTED] wrote:
As Erik says, a sample page would help. I am guessing that you may be
using IE6/7, where getElementById returns elements that match the name
attribute as well. Also, what doctype are you using? I don't think any
of the common ones support a name attribute for the div element.
[jQuery] id same as name confuses JQuery?
Given this element...
div id=foo name=foo/div
...why this does not match the element...
${'#foo'}
If I change or remove the name attribute, it does match. Is this by
design or a bug?
[jQuery] Detect Media Done Playing
Is there any way to detect that a media (OBJECT or EMBED) is done playing? The specific action that I want to take is to go to another page; however, it would be ideal if I could take other different actions as well. I have seen an example of using a PARAM flashvars to to set a var named endurl. First or all, I have not gotten that to work. Second, that would only work for Flash content. I really need some way to know when a media element is done playing, whatever type it might be. The OBJECT and EMBED tags don't seem to have any event that can be trapped. Maybe there is some state that can be seen by a javascript observer? Any ideas are appreciated.
[jQuery] Trying Media Plugin -- Problem With IE
I am getting started with the Media Plugin. I am testing with a flash movie. It seems to be working fine in Firefox. In IE however, it does not play and instead shows a broken link. Here's the generated source: OBJECT codeBase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=7 type=application/x-oleobject height=400 width=400 classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354 PARAM value=/Content/Media/test.swf name=src / PARAM value=#ff name=bgColor / PARAM value=transparent name=wmode / PARAM value=true name=autoplay / PARAM value=endurl=/Presentation/Activation? token=GkMDVKkFlbFImpAvcGuwJMGxJ name=flashvars / /OBJECT The src path is the same as in the EMBED tag that is generated in Firefox, so I know that the file is found there. I am testing with IE7. I have tried manually noodling with the HTML. I tried changing the type to application/x-shockwave-flash. I tried removing some the PARAMs. I tried changing the src to an absolute file reference. All to no avail. I should mention that I do get the ActiveX warning, so I guess it is trying to play it. What gives? Ideas?
[jQuery] European Mirrors
I'm based in Ireland and I find that accessing the docs is very slow. Are there any European based mirrors for the documentation? If not are you open to the idea of partnering with European Based hosting companies for mirroring the docs?
[jQuery] Re: European Mirrors
Glad I'm not the only one finding it slow. I do think that some official mirrors would be a good thing. While I'm not in a position to make an offer of an Ireland/UK mirror for jQuery, I could make a suggestion to those who are in a position to do so, and who have already done so for php.net Just wondered what the genral feeling was, and if anyone else felt the need for one. On Jun 12, 4:12 pm, NichlasBrodegaardLarsson [EMAIL PROTECTED] wrote: Also experiencing slow docs here in Denmark, approx 5-10 seconds for each pageload :( On Jun 12, 4:48 pm, tlob [EMAIL PROTECTED] wrote: docs are realy slow. Im based in switzerland. On Jun 12, 12:07 pm, Tim Swann [EMAIL PROTECTED] wrote: I'm based in Ireland and I find that accessing the docs is very slow. Are there any European basedmirrorsfor the documentation? If not are you open to the idea of partnering with European Based hosting companies for mirroring the docs?
[jQuery] Odd append/jCarousel issue in IE7
Hi, I've got a slight issue with IE7 http://staging.agsalons.com/ works fine in FF but in IE7 it only scrolls between the two middle items. This is because there are only five items in the scroller so it gets confused so I've used jQuery to pad li to it but they're not picked up in IE7. Any ideas/suggestions why? TIA Tim
[jQuery] Calendar Over Dialog
Does anyone know if there is any combination of plugins that would allow me to use a calendar control from inside a dialog? I have tried all combinations of jQuery UI dialog and calendar, BlockUI, and jQuery datePicker. The problem is, I guess, these calendars actually *are* modal dialogs too, and they do not know how to go over top of an already active dialog. Therefore they appear underneath the active dialog where the user cannot see them.
[jQuery] Re: random tab and simple content switching
Hi
Can anyone else help with this?
I tried adding a third item in var ids = [ 'latestArticle',
'inTheMag' ]; but have had no joy in getting it to randomnly appear.
Any ideas?
Cheers
On Apr 5, 3:49 pm, Tim Marshall [EMAIL PROTECTED] wrote:
Hi Sperks
I'm a bit new at JQuery and have been following what you have done
here. I'm trying though to add a third id in and can't figure out how
to get it to work with an additional set of div's or more for that
matter. Can you help?
On Feb 22, 2:33 pm, sperks [EMAIL PROTECTED] wrote:
I worked a little longer and in case anyone has been watching trying
to work out what I was on about... Here's my final code. I don't
thinks it's very clean, and I'm sure there are easier ways of doing
this, ways that don't require me to name the ids, etc., but I'm not
familiar with the intricate workings of math functions. Heck I'm proud
I got this far.
$(document).ready(function() {
var ids = [ 'latestArticle', 'inTheMag' ];
var index = Math.round( Math.random()*10 ) % 2;
var id = ids[ index ];
$('#mainArticle #' + id + ' .teaser').hide();
$('#mainArticle #' + id + ' h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
On Feb 21, 6:32 pm, sperks [EMAIL PROTECTED] wrote:
update:
I'm still looking for the random side of things, but I've got a
solution for the switching. However, I'm a little concerned that I'm
targeting h1 rather than the span (how do I go back two parents?)
$(document).ready(function() {
$('#mainArticle #latestArticle .teaser').hide();
$('#mainArticle #latestArticle h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
[jQuery] Re: random tab and simple content switching
Hi Sperks
I'm a bit new at JQuery and have been following what you have done
here. I'm trying though to add a third id in and can't figure out how
to get it to work with an additional set of div's or more for that
matter. Can you help?
On Feb 22, 2:33 pm, sperks [EMAIL PROTECTED] wrote:
I worked a little longer and in case anyone has been watching trying
to work out what I was on about... Here's my final code. I don't
thinks it's very clean, and I'm sure there are easier ways of doing
this, ways that don't require me to name the ids, etc., but I'm not
familiar with the intricate workings of math functions. Heck I'm proud
I got this far.
$(document).ready(function() {
var ids = [ 'latestArticle', 'inTheMag' ];
var index = Math.round( Math.random()*10 ) % 2;
var id = ids[ index ];
$('#mainArticle #' + id + ' .teaser').hide();
$('#mainArticle #' + id + ' h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
On Feb 21, 6:32 pm, sperks [EMAIL PROTECTED] wrote:
update:
I'm still looking for the random side of things, but I've got a
solution for the switching. However, I'm a little concerned that I'm
targeting h1 rather than the span (how do I go back two parents?)
$(document).ready(function() {
$('#mainArticle #latestArticle .teaser').hide();
$('#mainArticle #latestArticle h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
[jQuery] [jCarousel] Automatically scroll circular items
I've been using jCarousel from sorgalla.com [1] to display a selection of products [2] however when it gets to the last item when auto scroll is set it doesn't loop. Does anyone have a suggestion on how to sort this? I've uploaded a demo to http://www.agsalons.com/test.html. Ideally I would like to avoid having to create the items in an array but that's the only way I can think of having a never ending loop otherwise. Thanks, Tim [1] http://sorgalla.com/jcarousel/ [2] http://www.agsalons.com/test.html
[jQuery] Menu using jQuery based on Joel Birch's Superfish menu
Check out http://forrestcroce.com. It's using a three-tiered dropline menu which is a style variant of Joel Birch's Superfish menu. It's styled for the child menus to step down from the parent with space between to give a see-through effect without transparency (except in IE6, but it works there nonetheless). Joel, you said on your page you check here periodically, and I wanted you to see this. I'm hoping to spread the word on your creation, because I hope that this is the direction many menus will take in the future.
[jQuery] Re: Translating XPath expressions to CSS selectors
On Thu, February 7, 2008 12:56 pm, [EMAIL PROTECTED] wrote:
However, I now realise I can do this with the children() method:
$(document.documentElement).children().find(' KNOWN_NODE')
Lemme see if I can hack that into the Basic XPath plugin...
For the record, I've submitted a patch to
http://plugins.jquery.com/node/567 which fixes this.
Tim
[jQuery] Re: Translating XPath expressions to CSS selectors
Klaus Hartl wrote:
I'm confused. You said you don't want to go n level deep. Your query
would perfectly match wrong node now (based on the XML snippet you
posted and assuming that the outermost unknown node is the root node).
Anyway, you could write that as:
$(' * KNOWN_NODE', document.documentElement);
which now looks similiar to the XPATH equivalent:
$('/*/KNOWN_NODE');
I think you have messed up wrong and right in the example
I have been unclear. The solution you provided worked perfectly for the
example I gave, but my example was not well-chosen. The example was
ambiguous. Going n levels deep was the very thing I was trying to do
(match a node of which I know the name and the depth, but don't match
any nodes with the same name on a different level).
While typing this, I came to a very painful realization: I was wrong all
along. The asterisk in CSS is not always deep, it is limited by all
that precedes it. So the only difference between my XPath expressions
and the CSS equivalents is that for CSS, I need to specify the root node
if I want to match from there.
This works, though for some reason the XPath plugin doesn't translate my
expressions properly (the expressions you provided in the above quoted
post return different things). Here's a new example:
unknown_node
unknown_node
KNOWN_NODEright/KNOWN_NODE
unknown_node
KNOWN_NODEwrong/KNOWN_NODE
/unknown_node
/unknown_node
/unknown_node
$('/*/KNOWN_NODE') matches both KNOWN_NODEs here (with jQuery 1.2.3 and
the XPath plugin). I don't know how, but my patch to the XPath plugin
fixes this behavior.
Hope I haven't confused you even more,
Tim
[jQuery] Translating XPath expressions to CSS selectors
The CSS 3 :root selector is not supported unfortunately, but the root
node of a document is represented by document.documentElement.
So you could try:
$(' KNOWN_NODE', document.documentElement)
or
$(document.documentElement.tagName + ' KNOWN_NODE')
Does that work?
Yes it does, thanks! This clears up a lot of confusion on my part even
though it isn't the answer I was looking for. This will only work when
KNOWN_NODE is only one level deep, and as far as I know there is still no
way to go n levels deep with CSS expressions.
However, I now realise I can do this with the children() method:
$(document.documentElement).children().find(' KNOWN_NODE')
Lemme see if I can hack that into the Basic XPath plugin...
Thanks,
Tim
[jQuery] Translating XPath expressions to CSS selectors
Hi, I'm trying to migrate from jQuery 1.1.3 to 1.2.2, and I'm having trouble converting my XPath expressions. In CSS, asterisks are deep, i.e. they match all elements that are descendants of the context node. In XPath, they are not, i.e. they match only the elements that are _direct_ descendants of the context node. Consider this XML: unknown_node_name KNOWN_NODEright node/KNOWN_NODE more_unknown_deepiness KNOWN_NODEwrong node/KNOWN_NODE /more_unknown_deepiness /unknown_node_name Now, to get the right node, I would use the XPath expression /*/KNOWN_NODE. (Note that the node name has to be uppercase for some reason, or jQuery 1.1.3 won't find anything at all.) I don't see any way to do this with CSS selectors. The Basic XPath plugin translates the XPath expression to * KNOWN_NODE, which returns both the right node _and_ the wrong node. Anyone have a clue as to what I should do? Tim
[jQuery] attaching datepicker
i'm loading a page using ui tabs that has a date field on it. i would
like to attach ui datepicker to it, but i can't seem to get it to
work. i've always loaded datepicker through the onready function. it
will not work in this case cause the document is already loaded and is
inserting info from another page via ajax. i've also tried attaching
the datepicker after the page is called by the tabs function (see
below). that's not working either though. any ideas?
$(#tabs ul).tabsLoad(currenttab,page);
$('#startdate').datepicker({dateFormat: 'm/d/y', rangeSelect: true,
numberOfMonths: [2, 3],
stepMonths: 3, prevText: ' Previous Months', nextText: 'Next
Months ', speed: 'fast',
showOn: 'both', buttonImage: '/images/calendar.gif',
buttonImageOnly: true,
onSelect: updateDate, buttonText: 'Calendar'});
[jQuery] Re: attaching datepicker
nevermind, doing some more searching got me the answer. found it
here.
http://groups.google.com/group/jquery-ui/browse_thread/thread/57944de13405077b/9a36504f1068ef83?lnk=gstq=tab+ajax#9a36504f1068ef83
$(#tabs ul).tabs({
load: function() {
testit();
}
});
just had to define a load callback. the testit() function calls the
datepicker attachment function.
[jQuery] Re: attaching datepicker
after some testing it really isn't a datepicker issue. the tab takes time to load and my attempt to attach the datepicker to the field fires before the field is loaded into the tab. anyone know how i can force the script to wait for the tab to be loaded?
[jQuery] Help making a table resizable with jQuery UI
i would like to make a table resizable. i thought that i could achieve this with jquery ui. so far, i'm not doing so well. examples show a div, textarea, and image. i thought that i could put the table inside the div, but that didn't work. any ideas? thanks.
[jQuery] Re: Help making a table resizable with jQuery UI
here's another question for the group. my table is long. i can resize, but i would also like to be able to scroll vertically. when i put in overflow:auto instead of hidden, it seems to work. then i scroll and the resize handle scrolls with the table. how do i get it to stay put on the bottom of the div? i feel like some positioning css might do it, but i haven't had any luck. On Nov 28, 12:16 am, Tim [EMAIL PROTECTED] wrote: i would like to make a table resizable. i thought that i could achieve this with jquery ui. so far, i'm not doing so well. examples show a div, textarea, and image. i thought that i could put the table inside the div, but that didn't work. any ideas? thanks.
[jQuery] Re: close clueTip by selecting element in clueTip box
Karl,
$('#cluetip').hide();
this was all i needed. thanks a ton.
Tim
On Nov 25, 4:28 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
You could try something like this:
$('someListItem').click(function() {
$('#cluetip').hide().removeClass().children().empty();
});
Replace someListItem with the actual selector you need.
Let me know if this works for you.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Nov 25, 2007, at 2:20 PM, Tim wrote:
i am using clueTip with ajax to grab a list from a db. i would like
the clueTip to close when the user selects an item from the list. i'm
guessing there is an easy way to do this, but i've tried for a while
now without any success. i tried calling cluetipClose() with the
onclick event, but since the clueTip is a separate web page, it is
saying that cluetipClose() is not defined. any ideas? thanks.
[jQuery] close clueTip by selecting element in clueTip box
i am using clueTip with ajax to grab a list from a db. i would like the clueTip to close when the user selects an item from the list. i'm guessing there is an easy way to do this, but i've tried for a while now without any success. i tried calling cluetipClose() with the onclick event, but since the clueTip is a separate web page, it is saying that cluetipClose() is not defined. any ideas? thanks.
[jQuery] Event binding memory leak
When a page is unloaded, jQuery is not unbinding any bound events
causing a memory leak in IE6.
Below is a very simple test page. If it is opened in IE6 you can see
the memory usage skyrocket.
HTML
HEAD
script type=text/javascript src=http://
code.jquery.com/jquery-
latest.js/script
script
$(document).ready(function() {
// Bind an onClick event to the body
$(body).click(aFunction);
// Reload the page
window.location.reload();
});
function aFunction() {}
/script
/HEAD
BODY
/BODY
/HTML
If you add the code below into the page somewhere, the memory no
longer increases.
$(window).unload(function() {
$('*').unbind();
});
Can something similar to this be added to the jQuery library?
[jQuery] Re: jquery 1.2 and rails
The problem is that 1.2 does not send the xhr header if the call is made with a full http:// uri. If you just use the pathname it works fine. Took me a few hours of playing to figure this one out. Guess its a cross site security fix. On Oct 11, 4:30 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: So I just tried upgrading from 1.1.4 to 1.2 and everything breaks. I have gotten ajax calls working with the json data type. However anything with the type of script is seen byrailsas a html request and it work accept the data as well. I am manually setting the headers, which I have had to do sorailscan recognize it as a javascript request. I am even using the compatibility plugin and nothing works. I can just go back to 1.1.4 because a lot of the plugins I am wanting to use require 1.2. Anyone have any ideas how to fix this?
[jQuery] setRequestHeader 1.1.4 vs 1.2.1
Anyone have any idea why this code works in 1.1.4 and not in 1.2.1?
The header apparently does not get sent...
(using in a Ruby on Rails app where setting this head RoR responds
with the proper js template)
$.ajax({
url: event.target.href,
dataType: script,
beforeSend: function(xhr)
{xhr.setRequestHeader(Accept, text/javascript);},
success: function() { }
});
Thanks
[jQuery] include children of previous siblings conditionally
Given the following as an example, does anyone know how I can highlight cells r2c1 and r2c2 whenever row 3 is moused over? Maybe something like, add the children of the previous sibling to the selection criteria only if they contain a rowspan attribute? http://www.tubenation.com/jquery/highlightable.html
