[jQuery] Simple .html problem in 1.4
Hi folks,
The following function works fine in jQ1.3, but not in jQ1.4
function getArchive(pID){
$.get(scripts/ajax_editor.asp?id=getArcepID=+pID+q= + new
Date().getTime(),
function(responseText){
//console.log(responseText);
$('#archive').html(responseText).show();
});
$('#archiveOn').hide();$('#archiveOff').show(5);
};
In both instances, the responseText is returned, but whereas it is
injected into the div 'archive' and displayed when using jQ1.3, nothing
happens when 1.4 is used.
Any idea of where I should be looking for a solution?
Thanks, Bruce
[jQuery] parent selectors (I think) and tabs
Hi folks,
I'm hoping for some help/direction in a problem I'm having with some
tab switch code (originally presented @
http://www.mind4m.com/stories.php?pageid=10)
that I've introduced onto a test page @
http://rudderlive.bito.org.nz/employment_dev.asp
While the tab a links are working in so far as being correctly
selected and the appropriate CSS changes applied, the same is not true
for the divs holding the contents of each tab. I'm sure the problem
is with the selectors, but I don't have the headspace to work out how
to debug the code to work out which elements are actually being
selected by the code.
The code being used is:
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
//console.log(curChildIndex);
$(this).parent().parent().children('.current').removeClass
('current');
$(this).parent().addClass('current');
$(this).parent().parent().next('.tabContainer').children
('.current').fadeOut('fast',function() {
$(this).removeClass('current');
$(this).parent().children('div:nth-child('+curChildIndex+')').fadeIn
('normal',function() {
$(this).addClass('current');
});
});
return false;
});
});
Any help will be appreciated a lot
THanks,
Bruce
[jQuery] visible divs and selectors
Hi folks,
I'm having difficulty with a flicker/repaint of an 'unhidden' div in
the following scenario
A user clicks on a region of an image map and triggers the following
function which 'unhides' previously populated divs, each with an id of
the clicked region and each containing a list of businesses in that
region. I'm sure there is a more elegant way of doing this, but what
my code below is sort of doing is to hide all visible divs and then
unhide the one associated with the clicked region on the map. There
is a bulldozer in there as I hide all divs, whether they are visible
or not - simply because I don't know how to specify the one that is
showing (or to exclude the one to be shown). These points of good
style aside, the code does most of what I require.
What I can't understand is that when I click a second region (placing
me in the first part of the if statement), the unhidden div becomes
visible but then disappears before returning to stay.
I thought that by putting the ..$(#+ej).show(600);.. bit in a
function after the divs were hidden would mean that the unhiding of
the ej div would occur after all the others had been (re)hidden.
The code behind this is:
function chooseRegion(ej){
var pj = $('#regions div');
if (pj.is(':visible')){
//console.log(1 + ej);
$(pj).hide(100,function(){
$(#+ej).show(600);});
} else {
//console.log(2 + ej);
$(#+ej).show(500);
};
}
How do I stop the refresh/flicker - or how can I approach this in a
better way?
Thanks,
Bruce
[jQuery] Re: Binding a function to 1 'a' tag - which approach is best?
Thanks Michel - I appreciate the time you took here to provide such a
useful answer - javascript algebra in essence.
Cheers, Bruce
On Nov 28, 12:18 am, Michel Belleville michel.bellevi...@gmail.com
wrote:
Now let's try to simplify this a bit :
$('a.c_update').each(function() {
var $a = $(this);
var q = $a.attr('id');
$a.bind(click, function() {
doStuff('getitem',q); // hmm, I don't like this variable much...
return false;
});
});
$('a.c_update').each(function() {
var $a = $(this);
$a.bind(click, function() {
doStuff('getitem', $a.attr('id');); // there, no need
return false;
});
});
$('a.c_update').each(function() {
var $a = $(this);
$a.bind(click, function() { // wait, if I've bound my event to the link,
why bother keep it as a variable before ?
doStuff('getitem', $a.attr('id');); // there, no need
return false;
});
});
$('a.c_update').each(function() {
$(this).bind(click, function() { // feels better
doStuff('getitem', $(this).attr('id'););
return false;
});
});
$('a.c_update').each(function() { // hey, why bother looping, I could do it
all with the .bind() function on the whole collection anyway
$(this).bind(click, function() {
doStuff('getitem', $(this).attr('id'););
return false;
});
});
$('a.c_update').bind(click, function() { // how sleaker
doStuff('getitem', $(this).attr('id'););
return false;
});
So, basically you can reduce #1 to #2 breaking nothing, without any
significan loss (in fact I think it's a net gain).
Michel Belleville
2009/11/27 Bruce MacKay thomasba...@gmail.com
Hello folks,
I have some html returned via ajax that contains several 'a' tags to
which I am binding a function.
Both of the following methods does the job, but my perception of other
posts about this general practice from more wiser folk than me is that
the first method is the better method. Is this the case? Which is
the best method - and more importantly, why?
method #1
$('a.c_update').each(function() {
var $a = $(this);
var q = $a.attr('id');
$a.bind(click,function() {doStuff('getitem',q);return
false;});
});
method #2
$('a.c_update').bind(click,function() {doStuff
('getitem',this.id);return false;});
Thanks,
Bruce
[jQuery] Re: Accordion, fieldset and selectors question
Excellent Adriana - thanks very much - also for quietly pointing out
that I'd forgotten the return false bit.
Cheers/Bruce
On Nov 27, 2:45 pm, Adriana adipa...@yahoo.com wrote:
Hi Bruce,
Try this:
$('.accord h6').click(function() {
$(this).toggleClass('expand_group').siblings
('h6.expand_group').removeClass('expand_group');
$(this).next('fieldset').slideToggle('fast').siblings
('fieldset:visible').slideUp('fast');
return false;
});
Regards,
Adriana
On Nov 26, 11:41 am, Bruce MacKay thomasba...@gmail.com wrote:
Hello folks,
I have an operational accordion based on a series of fieldset tags
(the content) and h6 tags (the triggers).
It is initiated by:
$('.accord h6').click(function() {
$(this).next('fieldset').slideToggle('fast').siblings
('fieldset:visible').slideUp('fast');
});
The trigger tags are set up as
h6 - span - Trigger title - /span - /h6
I want to add a class to the current h6 tag that will result in an
open folder image to appear next to tag when its associated fieldset
is open, and have that class removed when it or another h6 tag is
clicked.
I can add the class easily enough - but I can't work out the code/
selectors to remove the class when the clicked current trigger title
is re-clicked (to close the fieldset) or another trigger title is
clicked (to open its associated fieldset.
$('.accord h6').click(function() {
$(this).addClass('expand_group');
$(this).next('fieldset').slideToggle('fast').siblings
('fieldset:visible').slideUp('fast');
});
I'd really appreciate some direction to a solution if possible.
Thanks, Bruce
[jQuery] Binding a function to 1 'a' tag - which approach is best?
Hello folks,
I have some html returned via ajax that contains several 'a' tags to
which I am binding a function.
Both of the following methods does the job, but my perception of other
posts about this general practice from more wiser folk than me is that
the first method is the better method. Is this the case? Which is
the best method - and more importantly, why?
method #1
$('a.c_update').each(function() {
var $a = $(this);
var q = $a.attr('id');
$a.bind(click,function() {doStuff('getitem',q);return
false;});
});
method #2
$('a.c_update').bind(click,function() {doStuff
('getitem',this.id);return false;});
Thanks,
Bruce
[jQuery] Accordion, fieldset and selectors question
Hello folks,
I have an operational accordion based on a series of fieldset tags
(the content) and h6 tags (the triggers).
It is initiated by:
$('.accord h6').click(function() {
$(this).next('fieldset').slideToggle('fast').siblings
('fieldset:visible').slideUp('fast');
});
The trigger tags are set up as
h6 - span - Trigger title - /span - /h6
I want to add a class to the current h6 tag that will result in an
open folder image to appear next to tag when its associated fieldset
is open, and have that class removed when it or another h6 tag is
clicked.
I can add the class easily enough - but I can't work out the code/
selectors to remove the class when the clicked current trigger title
is re-clicked (to close the fieldset) or another trigger title is
clicked (to open its associated fieldset.
$('.accord h6').click(function() {
$(this).addClass('expand_group');
$(this).next('fieldset').slideToggle('fast').siblings
('fieldset:visible').slideUp('fast');
});
I'd really appreciate some direction to a solution if possible.
Thanks, Bruce
Re: [jQuery] Re: SimpleModal problem in IE7
Excellent - Thanks very much Eric, I appreciate your attention to this - I rely on your brilliant plugin on several sites. Cheers, Bruce At 02:45 a.m. 31/10/2009, you wrote: I fixed the issue and released 1.3.3[1]. I updated the demo downloads, but all you need to do is use the newest version of SimpleModal. -Eric [1] http://code.google.com/p/simplemodal/downloads/list On Oct 30, 6:20 am, Eric Martin emarti...@gmail.com wrote: Bruce, Thanks for reporting the issue. I was able to reproduce the issue and will work on a fix. -Eruc On Oct 29, 10:51 pm, Bruce MacKay b.mac...@massey.ac.nz wrote: Hi folks, I've just updated a previously functioning piece of code that uses the simplemodal plugin - the code does an ajax call to a file containing a email form and loads it into a modal layer. The code now longer works in IE7 using the latest version of simplemodal (http://www.ericmmartin.com/simplemodal-1-3-2-released/) - I notice that the contact form example at eric's site (http://www.ericmmartin.com/projects/simplemodal-demos/-from which I developed my code) no longer works either - the modal layer is formed but the content is garbled, just as it occurs with mine. Anyone else noticed this problem? Thanks, Bruce
[jQuery] SimpleModal problem in IE7
Hi folks, I've just updated a previously functioning piece of code that uses the simplemodal plugin - the code does an ajax call to a file containing a email form and loads it into a modal layer. The code now longer works in IE7 using the latest version of simplemodal (http://www.ericmmartin.com/simplemodal-1-3-2-released/) - I notice that the contact form example at eric's site (http://www.ericmmartin.com/projects/simplemodal-demos/ - from which I developed my code) no longer works either - the modal layer is formed but the content is garbled, just as it occurs with mine. Anyone else noticed this problem? Thanks, Bruce
[jQuery] Printing contents of a tab within a lightbox-clone
Hello folks,
I'm having difficulty getting the contents of a particular tab within
a jquery-ui Tabs collection that is present in a lightbox (Fancybox)
My print.css sheet is:
html, body {
display:block;
}
body * {
display:none;
}
#printresults {
display:block!important;
opacity:1.0!important;
}
#printresults is the div within a tab that I want printed. But when
I print (via an 'a' tag window.print() link) I get a magnificient blank page.
Ideas/solutions/leads?
Thanks/Bruce
[jQuery] toggle and logic confusion
Hi folks,
I have a set of 3 divs with a class element of hideme. Through
the code that follows (it's not mine; it works!), I can click a
dedicated a.tag for each div to toggle the visibility (or not) of the
contents of the associated div.
What I'd like to be able to achieve is that if say, div#1 was visible
and the user clicked the a tag for div#2, then div#1 would disappear
and div#2 appear in its place.
The code in the inserted line #5 allows me to achieve this slightly,
but it requires the associated a tag link to be double clicked in
order for their associated div to become visible and the currently
visible div to be hidden.
I'd appreciate someone illuminating a path to a solution for me.
Thanks/Bruce
1$('#fsheet').find('.hideme').hide().end();
2$('a.showme').each(function(i) {
3 var $match =
$('div.hideme').eq(i);
4 $(this).toggle(function() {
5 // $('div.hideme:not(eq(i))').hide('slow');
6 $match.show('slow');
7 }, function () {
8 $match.hide('slow');
9 }
10 );
11});
[jQuery] Re: toggle and logic confusion
Yes, you are right - what I described was like an accordion, but I
left out the description of the actual links on which the div's are
opened/closed.
The links exist as 3 buttons in a horizontal list that remains
stationery while the divs open/close beneath them.
This UI makes what I'm trying to do not an accordion.
Thanks for your input, nevertheless.
Bruce
At 09:32 p.m. 12/08/2009, you wrote:
Hi Bruce
are trying to do something like an accordion.
http://jqueryui.com/demos/accordion/
I tried to do what you described a few days ago and then found the
jquery UI at the above link.
On Aug 12, 10:00 am, Bruce MacKay b.mac...@massey.ac.nz wrote:
Hi folks,
I have a set of 3 divs with a class element of hideme. Through
the code that follows (it's not mine; it works!), I can click a
dedicated a.tag for each div to toggle the visibility (or not) of the
contents of the associated div.
What I'd like to be able to achieve is that if say, div#1 was visible
and the user clicked the a tag for div#2, then div#1 would disappear
and div#2 appear in its place.
The code in the inserted line #5 allows me to achieve this slightly,
but it requires the associated a tag link to be double clicked in
order for their associated div to become visible and the currently
visible div to be hidden.
I'd appreciate someone illuminating a path to a solution for me.
Thanks/Bruce
1$('#fsheet').find('.hideme').hide().end();
2$('a.showme').each(function(i) {
3 var $match =
$('div.hideme').eq(i);
4 $(this).toggle(function() {
5 // $('div.hideme:not(eq(i))').hide('slow');
6 $match.show('slow');
7 }, function () {
8 $match.hide('slow');
9 }
10 );
11});
[jQuery] Re: Identifying the type of parent
The answer I needed - and found in the jQuery documents - was
var parentTag = $('#'+ni).parent().get(0).tagName;
I should have looked more closely sooner.
Cheers,
Bruce
At 04:58 p.m. 30/06/2009, you wrote:
Hello folks,
I have a function, triggered when a particular type of link is
clicked, which collects and inserts some text after the parent of
the clicked link.
This function works fine when the parent is a p tag, but I'm having
trouble when the link is within a list tag. In this instance I
would want the new text to be presented after the closing list item tag.
How do can I distinguish whether the clicked link is within a p tag
or within an li tag?
Thanks,
Bruce
function fnGetSnippet(ni){
$.get(../scripts/ajax_fsheets.asp?id=getDDddID= + ni + q=
+ new Date().getTime(), function(responseText){
$('#'+ni).parent().after(responseText);
$('#'+ni).unbind('click.drill').addClass('showme');
var $match = $('#hide'+ni);
$('#'+ni+'.showme').toggle(function() {
$match.fadeOut('slow');
}, function () {
$match.fadeIn('slow');
}
);
});
}
[jQuery] Identifying the type of parent
Hello folks,
I have a function, triggered when a particular type of link is
clicked, which collects and inserts some text after the parent of the
clicked link.
This function works fine when the parent is a p tag, but I'm having
trouble when the link is within a list tag. In this instance I would
want the new text to be presented after the closing list item tag.
How do can I distinguish whether the clicked link is within a p tag
or within an li tag?
Thanks,
Bruce
function fnGetSnippet(ni){
$.get(../scripts/ajax_fsheets.asp?id=getDDddID= + ni + q=
+ new Date().getTime(), function(responseText){
$('#'+ni).parent().after(responseText);
$('#'+ni).unbind('click.drill').addClass('showme');
var $match = $('#hide'+ni);
$('#'+ni+'.showme').toggle(function() {
$match.fadeOut('slow');
}, function () {
$match.fadeIn('slow');
}
);
});
}
[jQuery] Removing an emptied paragraph from the DOM
Hello folks,
I have an application which removes an image from within a paragraph,
wraps that image in a div and places it in front of the paragraph.
I now want to remove that paragraph.
Why doesn't the following use of remove() not achieve my
objective? I've tested the length - it is 0, yet the remove doesn't happen.
Thanks, Bruce
var parnt = $(this).parent(); //the parent p tag containing
the image to be processed
$(this).insertBefore(p).wrap(div class='buggybox clearfix' id='g +
i +'/div);
if (parnt.length=0) {
parnt.remove();
}
[jQuery] Re: Removing an emptied paragraph from the DOM
Thanks Mauricio, I hadn't tried that angle, but
unfortunately it didn't make any difference.
I've also tried adding a class to the initial
parent p and then trying to remove all paragraphs
containing that class name - and have achieved the same nil outcome.
Thanks for your input.
Cheers, Bruce
At 11:40 p.m. 20/06/2009, you wrote:
How about?
$('.buggybox').next('p').remove();
Maurício
-Mensagem Original-
De: mailto:b.mac...@massey.ac.nzBruce MacKay
Para: mailto:jquery-en@googlegroups.comjquery-en@googlegroups.com
Enviada em: sábado, 20 de junho de 2009 08:20
Assunto: [jQuery] Removing an emptied paragraph from the DOM
Hello folks,
I have an application which removes an image
from within a paragraph, wraps that image in a
div and places it in front of the paragraph.
I now want to remove that paragraph.
Why doesn't the following use of remove() not
achieve my objective? I've tested the length -
it is 0, yet the remove doesn't happen.
Thanks, Bruce
var parnt = $(this).parent(); //the
parent p tag containing the image to be processed
$(this).insertBefore(p).wrap(div
class='buggybox clearfix' id='g + i +'/div);
if (parnt.length=0) {
parnt.remove();
}
[jQuery] History and ajax has me stuck
Hi folks,
I'm having difficulty understanding how to get Klaus's history plugin
working in my application.I have an ebook application in which
the page has a static index of pages which, when an individual link
is clicked, a file is loaded into an adjacent div (#ebook).
Upon being loaded, the file is scanned and any a.linkto tags are
scanned for as these tags are my between page links which I was
hoping to get the history plugin to capture and do its magic. Once
found, the a.linkto tags are prepared - as far as I can understand -
for the history plugin. However, my attempt has gone all pear-shaped
and I cannot find any reference/article/documentation via Google to
help me see my error.
What tends to happen is that upon clicking an a.link from within
#ebook, a copy of the entire current page, sans the targetted page,
is loaded into #ebook.
Any help would be appreciated - even if it is a suggestion to try a
different approach.
Thanks, Bruce
$(document).ready(function() {
$.ajaxHistory.initialize();
var pgname = $('a.eb0').attr('id');
fnGetEbookFile(pgname);
});
function fnGetEbookFile(pgname){
$.get('textfiles/' + pgname + '.html?q=' + new
Date().getTime(),function(txt){
$(#ebook).html(txt).show();
$('a').each(function() {
var $a = $(this);
var theid = $a.attr('id');
var q = $a.attr('class');
if (q=='linkto') {
$a.attr(id,'#textfiles/' + theid +
'.html').remote('#ebook').bind(click,function()
{fnGetEbookFile(theid);});
};
});
});
};
[jQuery] Re: Moving a div container from within to before a p container
Thank you all for your input into this query.
@Jack - I appreciate your guidance re style
@mkmanning - thanks for your solution - it lead me to one I needed;
due to my poor description, your solution (as I read it) took ALL the
content of the parent p, wrapped it in the div and inserted it
before the parent p. I actually wanted the text (not the caption) to
remain in the p tag and while I tried to filter just the image and
the caption via the children() call (i.e. .children(img,
p.imgcaption)) I couldn't get it to work.
Finally, I settled to focus first on the image and move it, and then
wrap it and insert its caption.
function fnDoImages() {
$('img.imgposl,img.imgposr,img.imgposc,img.tblposl,img.tblposr,img.tblposc').each(function(i)
{
var p = $(this).parent(); //the parent
p tag containing the image to be processed
$(this).insertBefore(p).wrap(div class='buggybox
clearfix' id='g + i +'/div);
var alt =
$(this).attr('alt'); //alt tag on image
var thg =
$(this).attr('class').substr(0,3);//table or image
var postn =
$(this).attr('class').substr(6);//position of thg - l, r, or c
var title =
$(this).attr('title'); //image caption or table
title is in the title
var width =
$(this).attr('width'); //width of image
if (alt.length=0) {
$(this).attr('alt',''+ title +'');
}
if (thg == 'tbl' title.length0) {
$(this).before(p class='imgcaption' style='width:
+ width + px;' + title + /p);
} else if (title.length0){
$(this).after(p class='imgcaption' style='width:
+ width + px;' + title + /p);
};
$(#g+i).addClass(img + postn).css({width:width + 'px'});
});
}
Thanks again,
Bruce
At 11:14 a.m. 7/06/2009, you wrote:
Waseem's answer doesn't look good for a couple reasons, most
importantly calling obj.remove(). That will delete the image from the
DOM, which renders every action before it pretty useless :P
It also doesn't take into account the OP's request to also include the
caption text if it exists.
Try this to get familiar with chaining and manipulation:
$('p').wrapInner('div/div').children().insertBefore($('p'));
If you're working from having a reference to the image (where this ==
your image):
var p = $(this).parent();
p.wrapInner('div/div').children().insertBefore(p);
HTH
On Jun 6, 3:48 pm, infoaddicted jack.lapla...@gmail.com wrote:
wasseem's answer looks good, I'd just like to off a little friendly
advice on coding style, advice meant to make revisiting
your own code in the future easier as well as making it under-
standable to others.
in a block like:
{
var a= $(this).attr('alt');
...
}
consider using more user friendly variables names, like
var alt = ...
var substr_1 = ...
and putting spaces around operators like the concatenation
foo + bar
the few bytes added to your code size is a very small percentage
of your total page size.
You can find a lot of good advice in the same vein here:
Code Conventions for the JavaScript Programming Language
-http://javascript.crockford.com/code.html
On Jun 6, 5:11 pm, Bruce MacKay b.mac...@massey.ac.nz wrote:
Hi folks,
The following function takes an image tag (or table) that appears
within a p tag container in the form
p img text /p
and wraps the image (and caption if a title is present) into a div
for floating left, right, or centering.
My problem is that I don't know how to shift the processed image from
within the p container to immediately before it (so that the created
div is not within a p container)
I'd appreciate help in this next step.
Thanks,
Bruce
function fnDoImages() {
$('img.imgposl,img.imgposr,img.imgposc,img.tblposl,img.tblposr,img.tblposc'
).each(function(i)
{
var a = $(this).attr('alt');
var q = $(this).attr('class').substr(0,3);
var p = $(this).attr('class').substr(6);
var t = $(this).attr('title');
var w = $(this).attr('width');
if (a.length=0) {
$(this).attr('alt',''+t+'');
}
$(this).wrap(div class='buggybox clearfix'
id='g+i+'/div);
if (q=='tbl' t.length0) {
$(this).before(p class='imgcaption'
style='width:+w+px;'+t+/p);
} else if (t.length0){
//$(this).after(p class='imgcaption'
style='width:+w+px;'+t+/p);
};
$(#g+i).addClass(img+p).css({width:w+'px'});
});
}
[jQuery] Moving a div container from within to before a p container
Hi folks,
The following function takes an image tag (or table) that appears
within a p tag container in the form
p img text /p
and wraps the image (and caption if a title is present) into a div
for floating left, right, or centering.
My problem is that I don't know how to shift the processed image from
within the p container to immediately before it (so that the created
div is not within a p container)
I'd appreciate help in this next step.
Thanks,
Bruce
function fnDoImages() {
$('img.imgposl,img.imgposr,img.imgposc,img.tblposl,img.tblposr,img.tblposc').each(function(i)
{
var a = $(this).attr('alt');
var q = $(this).attr('class').substr(0,3);
var p = $(this).attr('class').substr(6);
var t = $(this).attr('title');
var w = $(this).attr('width');
if (a.length=0) {
$(this).attr('alt',''+t+'');
}
$(this).wrap(div class='buggybox clearfix'
id='g+i+'/div);
if (q=='tbl' t.length0) {
$(this).before(p class='imgcaption'
style='width:+w+px;'+t+/p);
} else if (t.length0){
//$(this).after(p class='imgcaption'
style='width:+w+px;'+t+/p);
};
$(#g+i).addClass(img+p).css({width:w+'px'});
});
}
[jQuery] this.appendChild(E) error
Hello folks,
I'm getting an IE-only error (IE6/7) on a page for which I cannot
find a solution. IE reports an error (Unexpected call to method or
property access) at line 12. The Script Debugger is pointing to
this.appendChild(E) in jquery (v1.3.2 rev. 6246).
The context of the code is below - IE chokes at the line
indicated. I have loaded the json field 'doeditor' with nothing and
with simple text and the error is still thrown, so I don't believe it
is anything in the field per se that is causing the problem.
Any directions gratefully accepted.
Thanks,
Bruce
function showResponse(json) {
if (json.fields) {
$(#busy).hide();
for (var i = 0; i json.fields.length; i++) {
var field = json.fields[i];
switch(field.zone) {
case newtext:
switch(field.yesno) {
case Y:
$('#newfile,#sidebar,#selectlist,#archiveOff').hide();
$('#contentwrapper').css('background-image','url(images/blank.gif)');
-- $(#editorbox).html(field.doeditor).fadeIn(500);
$(#editor ul).tabs({fxFade: true, fxSpeed: fast,selected: 1});
$(a.showarchive).bind(click,function(){getArchive(this.id);return
false});
setTinyMCE('400px');
var options = {dataType: 'json', beforeSubmit:
showRequest,success: showResponse};
$('#editor_form').submit(function()
{tinyMCE.triggerSave();$(this).ajaxSubmit(options);return false;});
break;
case N:
$(#addnewpage).animate({backgroundColor:'red'},2000).animate({backgroundColor:'#FFF'},1000);
$(#xfback).html(field.msg);
}
break;
[snip]
[jQuery] Re: this.appendChild(E) error
Thanks Jordon - but alas this adjustment made no difference to IE.
Bruce
At 09:57 a.m. 20/04/2009, you wrote:
Try doing $(#editorbox).fadeIn(500).html(field.doeditor);
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com]
On Behalf Of Bruce MacKay
Sent: Sunday, April 19, 2009 4:16 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] this.appendChild(E) error
Hello folks,
I'm getting an IE-only error (IE6/7) on a page for which I cannot
find a solution. IE reports an error (Unexpected call to method or
property access) at line 12. The Script Debugger is pointing to
this.appendChild(E) in jquery (v1.3.2 rev. 6246).
The context of the code is below - IE chokes at the line
indicated. I have loaded the json field 'doeditor' with nothing and
with simple text and the error is still thrown, so I don't believe
it is anything in the field per se that is causing the problem.
Any directions gratefully accepted.
Thanks,
Bruce
function showResponse(json) {
if (json.fields) {
$(#busy).hide();
for (var i = 0; i json.fields.length; i++) {
var field = json.fields[i];
switch(field.zone) {
case newtext:
switch(field.yesno) {
case Y:
$('#newfile,#sidebar,#selectlist,#archiveOff').hide();
$('#contentwrapper').css('background-image','url(images/blank.gif)');
-- $(#editorbox).html(field.doeditor).fadeIn(500);
$(#editor ul).tabs({fxFade: true, fxSpeed: fast,selected: 1});
$(a.showarchive).bind(click,function(){getArchive(this.id);return false});
setTinyMCE('400px');
var options = {dataType: 'json', beforeSubmit:
showRequest,success: showResponse};
$('#editor_form').submit(function()
{tinyMCE.triggerSave();$(this).ajaxSubmit(options);return false;});
break;
case N:
$(#addnewpage).animate({backgroundColor:'red'},2000).animate({backgroundColor:'#FFF'},1000);
$(#xfback).html(field.msg);
}
break;
[snip]
[jQuery] [Quite OT] charsets, chr values, errant characters
My apologies in advance for posting this question here - but I feel I've exhausted other avenues available/known to me and I don't know where else to seek help. Even direction to more appropriate forums to post such a query would be very helpful. I'm having difficulty identifying a strange character that is being entered by forum users through a WYSIWIG editor (tinyMCE) running on a MS ASP site with an Access database. The character appears as a box in IE and diamond/question mark in FF. I've tried the following attempted fixes: 1. I've changed the charset from iso-8859-1 to UTF-8 without success. (see http://lifewriting226.massey.ac.nz/dumpthis.asp (iso-8859-1 charset) and http://lifewriting226.massey.ac.nz/dumpthis2.asp (UTF-8 charset). 2. I've added 'accept-charset=UTF-8' to the form - without success. 3. I've made sure that the charset meta tag comes immediately after the head statement - no improvement. 4. I've tried to identify the chr() value of the character. However, when I load an infected file into a hex viewer, 3 characters 'occupy' the space of the character - EF BF BD - but when I enter their chr() equivalents - 239, 191, 189 - in a 'search and destroy' operation, I cannot erase the character. 5. I've changed the WYSIWIG editor but still get the problem. 6. I've tried Experts Exchange for a solution without success. This character seems to be mainly associated with either a space character - if I use the spacebar to insert two spaces between a word then one of those spaces is often 'translated' into the errant character - or if I add a blank line between two paragraphs - the character will appear between the p tags of the blank line that the editor inserts. How can I solve this problem? How can I identify the character so that I can strip it out of the data stream before it is stored? Thanks - Bruce
[jQuery] Re: Cancelling the behaviour of a link-initiated function
I found a solution (thanks to Steven Bristol -
http://codesnippets.joyent.com/posts/show/1345 - )...
which namespaced the click event.
Then, but detailing the id of the a tag you want to cancel, you can
unbind the behaviour from that link (id) and that link only.
$(document).ready(function() {
$('a.txtload').bind(click.txtload,function() {
var target = $(this).attr('id');
fnGetEbookFile(target);
$('#'+target).unbind('click.txtload');
});
});
Cheers,
Bruce
At 03:39 p.m. 26/02/2009, you wrote:
Hi folks,
I'm after some help/ideas of how to link a couple of things together.
I have a page which holds several pieces of text that are hidden on
pageload. These are toggled into and out of view via a function
tied to an a.showme class combo.
I also have functionality to load content into the page via an ajax
call after page load. I bind an a.txtload combo to a function that
loads the content.
In some instances I have both classes ('showme' and 'txtload') on
the same link - I want to load material in on a link click and then
reveal that material.
Thus far fine.
My problem is that when I click the a tag to toggle the newly
inserted text out of view, I also initiate another AJAX call.
How can I set things up that once material is loaded via ajax, it
won't be loaded again when the link is clicked?
I tried adding $(this).removeClass('txtload'); before the call to
fnGetEbookFile (line 2 of the code below) to remove the txtload
from the specific link that has been clicked, but despite Firebug
showing that the class has been removed, its behaviour on that link continues.
Thanks,
Bruce
$(document).ready(function() {
$('a.txtload').bind(click,function()
{fnGetEbookFile($(this).attr('id'));});
$('#main').find('.hideme').fadeOut().end();
$('a.showme').each(function(i) {
var $match =
$('.hideme').eq(i);
$(this).toggle(function() {
$match.fadeIn('slow');
}, function () {
$match.fadeOut('slow');
}
);
});
});
function fnGetEbookFile(ni){
$.ajax({
url: 'textfiles/'+ni+'.txt',
type: 'GET',
cache: false,
dataType: 'html',
timeout: 5000,
success: function(responsetxt){
$('#'+ni).html('');
$('#'+ni).append(responsetxt);
}
});
}
[jQuery] Cancelling the behaviour of a link-initiated function
Hi folks,
I'm after some help/ideas of how to link a couple of things together.
I have a page which holds several pieces of text that are hidden on
pageload. These are toggled into and out of view via a function tied
to an a.showme class combo.
I also have functionality to load content into the page via an ajax
call after page load. I bind an a.txtload combo to a function that
loads the content.
In some instances I have both classes ('showme' and 'txtload') on the
same link - I want to load material in on a link click and then
reveal that material.
Thus far fine.
My problem is that when I click the a tag to toggle the newly
inserted text out of view, I also initiate another AJAX call.
How can I set things up that once material is loaded via ajax, it
won't be loaded again when the link is clicked?
I tried adding $(this).removeClass('txtload'); before the call to
fnGetEbookFile (line 2 of the code below) to remove the txtload from
the specific link that has been clicked, but despite Firebug showing
that the class has been removed, its behaviour on that link continues.
Thanks,
Bruce
$(document).ready(function() {
$('a.txtload').bind(click,function()
{fnGetEbookFile($(this).attr('id'));});
$('#main').find('.hideme').fadeOut().end();
$('a.showme').each(function(i) {
var $match =
$('.hideme').eq(i);
$(this).toggle(function() {
$match.fadeIn('slow');
}, function () {
$match.fadeOut('slow');
}
);
});
});
function fnGetEbookFile(ni){
$.ajax({
url: 'textfiles/'+ni+'.txt',
type: 'GET',
cache: false,
dataType: 'html',
timeout: 5000,
success: function(responsetxt){
$('#'+ni).html('');
$('#'+ni).append(responsetxt);
}
});
}
[jQuery] Duplicating the last row of a table
Hello folks,
The code and HTML below are from a quiz editor - I have an onClick
function that fires duplicateRow to add another question box onto the
end of the table.
Firefox does what I expect to happen - it selects the last tr
row. IE7 and Safari, on the other hand, appear to treat the tfoot
as the last tr in the table.
Is there a way to satisfy the interpretation of all three browsers?
Thanks,
Bruce
function duplicateRow(){
var clonedRow = $(#question_table tr:last).clone();
var iRowID = parseFloat(clonedRow.attr(id).replace('t',''));
iNewID = iRowID + 1;
$(#bc+ iRowID , clonedRow).attr( { id : bc +
iNewID,name : correctans + iNewID, checked:false } );
$(#lba+ iRowID , clonedRow).attr( { id : lba +
iNewID,for : theans + iNewID } );
$(#lbb+ iRowID , clonedRow).attr( { id : lbb +
iNewID,for : bc + iNewID } );
$(#lbc+ iRowID , clonedRow).attr( { id : lbc +
iNewID,for : fb + iNewID } );
$(#sL+ iRowID , clonedRow).attr( { id : sL + iNewID} );
$(#fb+ iRowID , clonedRow).attr( { id : fb +
iNewID,name : feedback + iNewID, value: } );
$(#theans+ iRowID , clonedRow).attr( { id : theans +
iNewID,name : answer + iNewID, value:} );
$(#question_table).append(clonedRow);
$(#question_table tr:last).attr( id, t + iNewID);
$(#sL+iNewID).html(Answer +parseFloat(iNewID+1));
$(#noptions).attr({value:iNewID});
};
tr id=t4 class=qdottd colspan=2plabel class=label7
id=lba4 for=theans4span id=sL4Answer
5/span/labeltextarea rows=3 id=theans4 name=answer4
class=qinput30lateral buds only/textarea/pplabel
class=label7 for=bc4 id=lbb4Correct?/labelinput
name=correctans4 id=bc4 value=1 type=checkbox/pplabel
id=lbc4 class=label7
for=fb4Feedbackbr(standard)/labeltextarea rows=3
name=feedback4 id=fb4 class=qinput30while they do occur in
axillary/lateral buds, they also occur at terminal
buds/textarea/p/td/tr/tbodytfoottd class=strong
smfont90a href=# onclick=duplicateRow();return false;
title=Add more options to this questionimg src=images/add.png
class=timg alt=Add more options width=16 height=16/a Add
more possible answers/td/tfoot/table
[jQuery] Re: Duplicating the last row of a table
Thanks RobG - sorry about the layout - I didn't send it like it appeared. I didn't notice the missing tr tags and wouldn't have thought of the tbody + id solution. Cheers, Bruce At 06:48 p.m. 13/02/2009, you wrote: On Feb 13, 1:36 pm, Bruce MacKay b.mac...@massey.ac.nz wrote: Hello folks, The code and HTML below are from a quiz editor - I have an onClick function that fires duplicateRow to add another question box onto the end of the table. Posted code should be formatted to be as easily read and understood as possible, yours isn't. Firefox does what I expect to happen - it selects the last tr row. IE7 and Safari, on the other hand, appear to treat the tfoot as the last tr in the table. Your markup is invalid. Even allowing for accidental omission of the opening table tag, there is no tr tag in the tfoot element so you are depending on error correction - all bets are off as to the DOM structure that will result from that. Is there a way to satisfy the interpretation of all three browsers? Yes, use valid markup. You will then discover that Firefox does what Safari and IE are doing - duplicating the last row of the tfoot (which is the last row of the table). To fix that, add tbody tags in the markup and move the table's id to the tbody. -- Rob
[jQuery] I can't get Shadowbox to fire!
Hi folks, I've tried a zillion combinations but I can't find the one that will make Shadowbox (http://mjijackson.com/shadowbox/index.html) fire. I am running jQuery 1.3.1 and Shadowbox v2. Would someone mind checking out my test page at http://horticulture127.massey.ac.nz/dumpthis.htm and letting me know what I'd doing wrong. For example, clicking on the site hyperlink should bring up a Shadowbox containing an image - I just get a new page containing the image Thanks Bruce
[jQuery] Re: I can't get Shadowbox to fire!
That's strange - Firebug is not displaying any error messages here. I've turned on a load-the-language command - it's made no difference to my display - what about from your end? Cheers, Bruce At 11:20 p.m. 7/02/2009, you wrote: I'm getting No Shadowbox language loaded error message! Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Feb 7, 2009 at 2:54 PM, Bruce MacKay b.mac...@massey.ac.nz wrote: Hi folks, I've tried a zillion combinations but I can't find the one that will make Shadowbox (http://mjijackson.com/shadowbox/index.html) fire. I am running jQuery 1.3.1 and Shadowbox v2. Would someone mind checking out my test page at http://horticulture127.massey.ac.nz/dumpthis.htm and letting me know what I'd doing wrong. For example, clicking on the site hyperlink should bring up a Shadowbox containing an image - I just get a new page containing the image Thanks Bruce
[jQuery] What is IE7 barfing at this js?
Hi folks,
The following snippet processes a JSON string sent back to the
browser (it is part of a poll)
function loadResults(data) {
var OPT_VOTES = 2;
var total_votes = 0;
for (id in data) {
total_votes = total_votes+parseInt(data[id][OPT_VOTES]);
alert(total_votes=+total_votes+ --- +
data[id][OPT_VOTES]);
}
}
The JSON string looks like this...
[[1,High cost,23,What is the biggest challenge to recycling
irrigation water?],[2,Disease and algae
management,12,5],[3,Plentiful and cheap water,8,4]]
The problem I'm having is that IE7 appears to see 4 rows in the array
- and consequently returns total_votes=NaN --- undefined at the
first alert and total_votes=NaN --- 23 at the second loop and so on.
FF, Opera, and Safari all handle the code without problem - can
anyone help me understand what IE7 is getting upset about?
Thanks,
Bruce
[jQuery] Selector difficulty/removeClass
Hello folks, I want to remove a css class (.qyes) from every label element inside a single div (id=quiz). Each label element has an ID of the form fb*** where *** represents a unique identifier (that is not in numerical sequence and is not related to the label element's position or order in the div in any way). Can someone help me with the necessary selectors to identify the label elements in the div (so as to invoke a .removeClass) - I'm completely stumped. Thanks, Bruce
[jQuery] .serialize and form elements in tables
Hello folks, I've been successfully using .serialize() to prepare input data when my form has the structure form id=processthislabel for=d1Your name/labelinput id=d1 type=text name=dStartDate etc... /form However, if the input elements are enclosed within a table structure within the form, like so ... form id=processthistabletrtdlabel for=d1Your name/labelinput id=d1 type=text name=dStartDate/td/tr etc.. /table/form ... the serialize call doesn't do the necessary preparation - it doesn't appear to fire at all. There is something obviously wrong with my approach (and removing the table is not a solution - its use is appropriate to the contents of the form), but I cannot find any clues in the jQuery documents or this list's archives. I'd appreciate some illumination here. Thanks, Bruce
[jQuery] Re: .serialize and form elements in tables
Thank you Dave. The tables were formed fine (I'd checked that) but I had managed to include duplicate form IDs in the page and once that was fixed, the .serialize() is now working as expected. Cheers, Bruce At 02:54 p.m. 4/10/2008, you wrote: That code looks okay. Have you run the HTML through the W3C validator? Maybe you're missing a tag somewhere.
[jQuery] Re: .serialize and form elements in tables
I appreciate the input (no pun intended!) but that workaround didn't do the job. Cheers, Bruce At 01:54 p.m. 4/10/2008, you wrote: a quick workaround that springs to mind is $ (#form :input).serialize(); On Oct 3, 6:26 pm, Bruce MacKay [EMAIL PROTECTED] wrote: Hello folks, I've been successfully using .serialize() to prepare input data when my form has the structure form id=processthislabel for=d1Your name/labelinput id=d1 type=text name=dStartDate etc... /form However, if the input elements are enclosed within a table structure within the form, like so ... form id=processthistabletrtdlabel for=d1Your name/labelinput id=d1 type=text name=dStartDate/td/tr etc.. /table/form ... the serialize call doesn't do the necessary preparation - it doesn't appear to fire at all. There is something obviously wrong with my approach (and removing the table is not a solution - its use is appropriate to the contents of the form), but I cannot find any clues in the jQuery documents or this list's archives. I'd appreciate some illumination here. Thanks, Bruce
[jQuery] Re: .serialize and form elements in tables
I haven't set breakpoints before - will follow that up now - but if
it helps, my code is
function saveForm(ej) {
var temp=new Array();
alert(ej);
temp=ej.split('*');
var sct = temp[0];
var fID = temp[1];
alert('#'+sct);
var str = $('#'+sct).serialize();
alert(str);
$.ajax({
}
ej comes in as the id of the form and a record identifier as formID*recordID
The first two alerts are filled appropriately, the third one is
empty. Yet, if I drop the table structure around the form elements,
everything works properly.
Thanks, Bruce
At 02:07 p.m. 4/10/2008, you wrote:
So are you calling it via $(#processthis).serialize()?
Serialize doesn't fire, you just call it. If you set a breakpoint in
Firebug in serialize, does it ever get there?
[jQuery] Getting the id of the next form
Hello folks,
I have a page containing a number of forms e.g.
div id=alerts
pa href=# class=ctrl_s[an image]/a/p
form id=f_alert
[various form elements]
/form
/div
div id=whodidit
pa href=# class=ctrl_s[an image]/a/p
form id=f_whodidit
[various form elements]
/form
/div
The class ctrl_s is bound to a function that will serialize the
contents of the form and send the contents (via ajax) to the server
for processing
$(a.ctrl_s).bind(click,function() {saveForm( [the id of the next
form] );});
How do I get the id of the next form for sending to the saveForm
function? I'm afraid that I just don't yet understand selectors and
traversing well enough to nut this out myself.
Thanks,
Bruce
[jQuery] [jEditable] dynamically updating a parameter value
Hello folks,
I want to dynamically update a parameter value when using jEditable.
The following function loads a div on the current page with new
content relating to an item ID of fID (selected from a list of items
in another div on the page). I then use jEditable to allow the user
to update the content of that item. That bit works fine on the first cycle.
However, when I select and load in another item with a different fID,
I cannot get jEditable to update its value for fID, either in the URL
(first arrow) or through the submitdata function (second arrow).
How do I alter my function to make this possible?
function getDashItem(fID){
$.ajax({
type: 'GET',
url: scripts/ajax_tasks.asp?id=getdashitemfID=+fID+q=
+ new Date().getTime(),
dataType: json,
success: function(json){
if (json.fields) {
for (var i = 0; i json.fields.length; i++) {
var field = json.fields[i];
switch(field.yesno) {
case Y:
$(#alerts).html(field.dash_alerts);$(#desc).html(field.dash_desc);
---
$(.edit).editable(scripts/ajax_tasks.asp?id=jeditfID=+fID, {
indicator : img
src='images/indicator.gif',
submit: 'OK',
id: 'jID',
---submitdata : function() {
return {foo: fID}
},
type : 'textarea',
width : '95%',
tooltip : Click to edit...
});
break;
case N:
$(#help1).html(field.message).fadeIn(500);
}
}
}
}
});
[jQuery] Re: [jEditable] dynamically updating a parameter value
Hello Mike,
I'm not sure if this is the key - if it is, then I don't know how to
implement it.
The getDashItem function does fire after the first cycle - new
content is loaded. The problem is that the fID value is not updating
in the jEditable piece of the function.
I also know the fID is being feed to the code (checked via the
alert). I had tried unbinding ($(.edit).unbind;) but this attempt
(more of good intention than knowledgeable practice) did not help me.
case Y:
$(#alerts).html(field.dash_alerts);$(#desc).html(field.dash_desc);$(#staff).html(field.dash_staff);
$(#dates).html(field.dash_dates);$(#d_title).html(field.dash_title);$(#d_outcome).html(field.dash_outcome);
alert(fID);
//$(.edit).unbind;
$(.edit).editable(scripts/ajax_tasks.asp?id=jeditfID=+fID, {
indicator : img src='images/indicator.gif',
submit: 'OK',
id: 'jID',
submitdata : function() {
return {foo: fID}
},
type : 'textarea',
width : '95%',
tooltip : Click to edit...
});
At 12:51 a.m. 30/09/2008, you wrote:
On Sep 29, 2008, at 11:55 AM, Bruce MacKay wrote:
The following function loads a div on the current page with new
content relating to an item ID of fID (selected from a list of items
in another div on the page). I then use jEditable to allow the user
to update the content of that item. That bit works fine on the
first cycle.
However, when I select and load in another item with a different
fID, I cannot get jEditable to update its value for fID, either in
the URL (first arrow) or through the submitdata function (second
arrow).
Maybe related to this:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F
?
--
Mika Tuupola
http://www.appelsiini.net/
[jQuery] Re: [jEditable] dynamically updating a parameter value - FIXED
Fixed the problem. My earlier attempt at unbinding did not work
because I didn't get the syntax correct - now with unbind() the
problem is solved.
Thanks Mike for prompting me to revisit the area.
Cheers,
Bruce
At 07:43 a.m. 30/09/2008, you wrote:
Hello Mike,
I'm not sure if this is the key - if it is, then I don't know how to
implement it.
The getDashItem function does fire after the first cycle - new
content is loaded. The problem is that the fID value is not
updating in the jEditable piece of the function.
I also know the fID is being feed to the code (checked via the
alert). I had tried unbinding ($(.edit).unbind;) but this attempt
(more of good intention than knowledgeable practice) did not help me.
case Y:
$(#alerts).html(field.dash_alerts);$(#desc).html(field.dash_desc);$(#staff).html(field.dash_staff);
$(#dates).html(field.dash_dates);$(#d_title).html(field.dash_title);$(#d_outcome).html(field.dash_outcome);
alert(fID);
//$(.edit).unbind;
$(.edit).editable(scripts/ajax_tasks.asp?id=jeditfID=+fID, {
indicator : img src='images/indicator.gif',
submit: 'OK',
id: 'jID',
submitdata : function() {
return {foo: fID}
},
type : 'textarea',
width : '95%',
tooltip : Click to edit...
});
At 12:51 a.m. 30/09/2008, you wrote:
On Sep 29, 2008, at 11:55 AM, Bruce MacKay wrote:
The following function loads a div on the current page with new
content relating to an item ID of fID (selected from a list of items
in another div on the page). I then use jEditable to allow the user
to update the content of that item. That bit works fine on the
first cycle.
However, when I select and load in another item with a different
fID, I cannot get jEditable to update its value for fID, either in
the URL (first arrow) or through the submitdata function (second
arrow).
Maybe related to this:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F
?
--
Mika Tuupola
http://www.appelsiini.net/
[jQuery] Disappearing accordion elements
Hi folks, I'm having trouble with lower elements (correct usage of the term???) of disappearing under the footer div of my page. A test page is here: http://www.watereducationalliance.net/technology.asp (click on key info) In both IE7 and FF3, the lower two items of the accordion are not fully viewable, sliding in behind the footer. I suspect the solution is through CSS, but my attempts at placing a clear:both styled break tag after the last item of the accordion has not been successful and I'm unsure how to proceed. Ideas/suggestions/solutions gratefully accepted. Cheers, Bruce
[jQuery] Re: Check if window exists before opening
More searching has led me to a solution, and another question
$(a.openW).click(
function() {
var sTarget = this.href;
if (!winRef.open){
winRef=window.open(sTarget);
return false;
}else {
winRef.focus();
return false;
}
});
This code does the necessary check, but it won't move focus to the
existing opened window (that contains the help file).
What am I not doing correctly?
Thanks,
Bruce
At 01:11 p.m. 3/07/2008, you wrote:
Hello folks,
I can't find the answer I need in the archives (Nabble), so my
question is how do I check to see if a window exists before I open it?
When a user of my application clicks on a help link, I want the help
file to load into a new window. I'm doing that via...
$(a.openW).click(
function() {
window.open(this.href); return false;
});
But I want to first make sure that a window containing the help file
isn't already open before a new one (another one) is opened.
Help/direction appreciated.
Thanks,
Bruce
[jQuery] The Cycle plugin and residue
Hello folks,
I'm using the Cycle plugin to display annotated slideshows - I'm
having problems with it remembering and presenting the titles of
previous slideshows.
My sequence is this:
1. The page is loaded and the current slideshow is started
$(document).ready(function() {
...
$('#s1').cycle({fx:'fade', timeout: 8000, after: onAfter,pause:
1,next: '#s1',delay: -3000});
...
});
function onAfter() {
$('#ssoutput').html(this.title);
}
2. If the user clicks a link of other slideshows, an ajax call
delivers the new slideshow, complete with a new div wrapper (s1) and
overwrites the existing slideshow.
3. The images of the second show are displayed as expected, but for
each slide of the second show, the title of the slide and of one from
the previous show are sequentially displayed.
4. If a third show is loaded, then for each slide of the new show,
three titles are shown (2 of which are of the previous shows).
Am I not flushing something properly?
Thanks for any assistance,
Cheers/Bruce
[jQuery] Re: jQuery Cycle question
Hello Mike, Thanks for your interest. A link is here... http://ramosus.massey.ac.nz/jQuery.htm Cheers/Bruce At 12:24 a.m. 28/05/2008, you wrote: In its simplest form my problem is this. Suppose I have two slideshows, A and B. Slideshow A runs properly. However, when I replace slideshow A with slideshow B through an ajax call, the captions associated with slideshow A are also shown along with those of slideshow B. The images associated with each slideshow are not being confounded, just the captions that are fed into the ssoutput div. How are you replacing the slideshow? Are you stopping slideshow A before starting slideshow B? Can you post a link?
[jQuery] Re: jQuery Cycle question
Thanks Mike, that did solve the problem. Cheers/Bruce At 11:25 a.m. 28/05/2008, you wrote: Hello Mike, Thanks for your interest. A link is here...http://ramosus.massey.ac.nz/jQuery.htm Cheers/Bruce Since the first slideshow was never explicitly stopped you actually have two running slideshows, one of which is cycling elements that are no longer part of the DOM. But that first slideshow still has its 'after' callback invoked and that's why you see two captions. More recent versions of the Cycle plugin automatically stop a running slideshow if you start another one on the same container, so if you upgrade your problem should go away. Cheers. Mike
[jQuery] IE7, simple AJAX, and nothing!
Hello folks,
I'd appreciate insight to the fault in this function which works in
FF and Safari but not in IE7. Specifically, the returned ajax file is
not displayed.
function fnGetEbookFile(ni){
$.ajax({
url: 'textfiles/'+ni+'.txt',
type: 'GET',
cache: false,
dataType: 'html',
timeout: 2000,
success: function(responsetxt){
$(#justlist,#tech).hide();
//alert(here + responsetxt);
$(#stext).html(responsetxt).show();
}
});
}
As far as I can determine, the ajax call is successful - the alert
box show the returned html - but the display within the div stext
is not successful. I can see the stext div in Firebug, so it is
not as if its target doesn't exist.
Thanks,
Bruce
[jQuery] Re: IE7, simple AJAX, and nothing - fixed!
Sorry folks - I was looking in the wrong place - the file being loaded had a malformed div tag and IE7 was responding to that. Cheers, Bruce At 11:45 p.m. 12/05/2008, you wrote: On 12 Mag, 12:57, Bruce MacKay [EMAIL PROTECTED] wrote: Hello folks, uhm... it's kinda strange O_o maybe this line: $(#justlist,#tech).hide(); is hiding something it should not? just guessing ^^
[jQuery] Why won't this get the image's width?
Hello folks,
This piece of code
if (($('#theImage').length0)) {
var img_width = $('#theImage').width();
$.log(img_width);
$(#sCaption).css(width,img_width);
};
follows an ajax call to bring content to an existing div...
$.get(scripts/ajax_ramosus_client_second.asp?brm=+ej +q= +
new Date().getTime(), function(responseText){
$(#wrapper).html(responseText);
I don't understand why the width is always being reported as 0.
The relevant portion of the HTML being returned is...
img src=images/ramosus/dicentra/dicentra1.jpg id=theImage
class=pad5 alt=div id=sCaption style=width: 0pt;brLorem
ipsum dolor sit amet, consectetuer adipiscing elit. Duis in ipsum.
Donec faucibus sodales lacus?/div
Any ideas?
Is it, perhaps, that if the image hasn't loaded before the code is
processed, then the width of theImage will be 0. If so, how do I
code around this issue?
Thanks,
Bruce
[jQuery] Finding the size of an image
Hello folks,
I am wanting to find the width of an image loaded via an ajax call so
that I can alter the width of a div holding the caption for that image.
The image that is loaded is always tagged with an id of
'theImage'. Each image loaded with each ajax call has a slightly
different width.
The fitCaption function below doesn't work and I don't understand why
- can someone help me please?
function getNextPage(ej) {
$.get(scripts/ajax_ramosus_client_second.asp?brm=+ej +q= +
new Date().getTime(), function(responseText){
$(#wrapper).html(responseText);
fitCaption();
});
};
function fitCaption(){
var img_width=50;
if (($('#theImage').length0)) {
img_width = $('#theImage').width();
};
alert (img_width);
$(#sCaption).css(width,img_width);
}
The alert call displays 0 all the time.
My mistake is???
Thanks,
Bruce
[jQuery] Re: check/uncheck via toggle
Thanks all for your solution.
Just to wrap up the point that Karl raised about
the $(this).attr('checked', true) part - in my earlier attempts I
didn't have that in, but I found that clicking the check box wouldn't
check/uncheck it by default. The background colour change was fired,
but the checkbox was left unchanged.
Anyway, with the solutions you kindly provided, that is now neither
here or there.
Cheers,
Bruce
- At 03:52 p.m. 3/04/2008, you wrote:
*head smack* I missed that version of the function. It's definitely
not something I've used.
Karl Rudd
On Thu, Apr 3, 2008 at 1:47 PM, Karl Swedberg [EMAIL PROTECTED] wrote:
Actually, .toggle() is a little like .load() in that it can be
used for two
different things. There is the .toggle() effect and the .toggle(fn, fn)
event, with the .toggle(fn, fn) doing an every other event thing.
http://docs.jquery.com/Effects/toggle
http://docs.jquery.com/Events/toggle#fnfn
Still, Bruce's $(this).attr('checked', true) part doesn't make much sense
because clicking a checkbox will check/uncheck it by default. Setting the
checked attribute only seems to make sense when it's being
triggered by some
other element. Or maybe I'm missing something.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 2, 2008, at 10:23 PM, Karl Rudd wrote:
The toggle() function is used to hide and show items, nothing to do
with clicking or changing of state.
http://docs.jquery.com/Effects/toggle
What you want is something like:
$('[EMAIL PROTECTED]').click(
function() {
if ( this.checked )
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#FFF'},1000);
else
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#E0F88F'},1000);
}
);
Karl Rudd
On Thu, Apr 3, 2008 at 12:41 PM, Bruce MacKay [EMAIL PROTECTED]
wrote:
Hello folks,
I have a table of data, with each row containing a checkbox. What I
want
users to be able to do is tick the box of each row of data they want to
delete (and after ticking, they will submit the form etc etc.
As a visual aid, I want to alter the background colour of the row - and
if
they untick a selection, to reverse that background colour change.
My code as follows achieves the background colour toggle, but the
checkboxes are neither checked or unchecked.
I'd appreciate someone pointing out my error?
$('[EMAIL PROTECTED]').toggle(
function() {
$(this).attr('checked',true);
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#FFF'},1000);
},
function() {
$(this).attr('checked',false);
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#E0F88F'},1000);
}
);
Thanks
Bruce
[jQuery] check/uncheck via toggle
Hello folks,
I have a table of data, with each row containing a checkbox. What I
want users to be able to do is tick the box of each row of data they
want to delete (and after ticking, they will submit the form etc etc.
As a visual aid, I want to alter the background colour of the row -
and if they untick a selection, to reverse that background colour change.
My code as follows achieves the background colour toggle, but the
checkboxes are neither checked or unchecked.
I'd appreciate someone pointing out my error?
$('[EMAIL PROTECTED]').toggle(
function() {
$(this).attr('checked',true);
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#FFF'},1000);
},
function() {
$(this).attr('checked',false);
$(this).parents('tr').animate({backgroundColor:'#9C3'},2000).animate({backgroundColor:'#E0F88F'},1000);
}
);
Thanks
Bruce
[jQuery] File uploading with the jQuery form plugin
Hello folks,
I'm having difficulty getting a successful file upload working with
the form plugin for which I'd appreciate assistance.
My backend is ASP - I can catch the posted elements using
request.form(..), but not via the objUpload object created by my
upload program (Persits.Upload) as I would expect. I know the latter
is working as I have tested to see if the object is created (it is)
and the server side code works fine in other applications where I'm
submitting the form back to the originating page.
When I look in the headers, I find that the content type is:
Content-Type application/x-www-form-urlencoded
Is that what it should be reporting?
My uploads form is loaded from an ajax call (getUploadInfo())...
div id=ulfform action=scripts/ajax_ramosus_editor.asp?id=37
method=post id=upload_form enctype=multipart/form-data
pinput size=80 name=file1 id=file1 type=filebr
input class= size=80 name=file2 id=file2 type=file/p
pinput value=Submit class=sbtn type=submit/p/form/div
function getUploadInfo() {
$.ajax({
type: 'GET',
url: scripts/ajax_ramosus_editor.asp?id=36q= + new
Date().getTime(),
dataType: html,
success: function(html){
$(#ulf).html(html).show();
var options = {dataType: 'html',before:
showUploadRequest, after: showUploadResponse};
$('#upload_form').submit(function()
{$(this).ajaxSubmit(options);return false;});
}
});
};
Is there anything here that I'm overlooking?
Thanks,
Bruce
[jQuery] Re: File uploading with the jQuery form plugin
Hi Mike, I've finally seen my problem - 6 hours after starting - the forms plugin that I was using was an old version. I downloaded the most recent version, changed the options statement appropriately, and voila - the form works as expected. Sorry for the false report. Cheers/Bruce At 12:08 a.m. 2/04/2008, you wrote: Is there anything here that I'm overlooking? Must be, but I don't see it either. Can you post a link?
[jQuery] A simple loop - but I can't do it
Hi folks,
I have a form (id=sshoweditor) containing - let's say 6 -
fieldsets, each containing an input element.
The fieldsets have a unique ID - fs0, fs1, ... fs5.
I have a function that can delete any specific fieldset.
My looping problem comes now - when the fieldset is removed, I want
to renumber the remaining fieldsets.
$(#fs+ej).highlightFade({color:'yellow',speed:2000,iterator:'sinusoidal'}).animate({opacity:
1.0}, 1000).fadeOut(500).remove();
var n = parseInt($(#howmany).attr(value))-1;
$(#howmany).attr(value,n);
var z = 0;
$(#sshoweditor fieldset).each(function(t){
( { id : fs + z} );
z=z+1;
});
My code doesn't throw an error - but it doesn't produce a result
either. Can someone guide me here.
Thanks
Bruce
[jQuery] Re: A simple loop - but I can't do it
Thanks Jason - appreciated.
At 03:33 p.m. 8/03/2008, you wrote:
I think you're looking for something more like this for that last bit:
$('#sshoweditor fieldset').each(function(i){
$(this).attr('id','fs' + i);
});
- jason
On Mar 7, 8:51 pm, Bruce MacKay [EMAIL PROTECTED] wrote:
Hi folks,
I have a form (id=sshoweditor) containing - let's say 6 -
fieldsets, each containing an input element.
The fieldsets have a unique ID - fs0, fs1, ... fs5.
I have a function that can delete any specific fieldset.
My looping problem comes now - when the fieldset is removed, I want
to renumber the remaining fieldsets.
$(#fs+ej).highlightFade({color:'yellow',speed:2000,iterator:'sinusoidal'}).animate({opacity:
1.0}, 1000).fadeOut(500).remove();
var n = parseInt($(#howmany).attr(value))-1;
$(#howmany).attr(value,n);
var z = 0;
$(#sshoweditor fieldset).each(function(t){
( { id : fs + z} );
z=z+1;
});
My code doesn't throw an error - but it doesn't produce a result
either. Can someone guide me here.
Thanks
Bruce
[jQuery] Replacing a string - why doesn't this work?
Can someone tell me/show me what I'm doing wrong here please?
I'm duplicating a fieldset that contains an input form. However,
within this fieldset lies the string:
a href=# onclick=showImageList(x);.
... where (x) is the zero-based number of the fieldsets in the overall form.
So, for example, if x = 2, then what I'm trying (and failing) to do
is replace the string showImageList(2 with showImageList(3
var clonedRow = $( #sshow_input fieldset:last ).clone();
var iRowID = parseFloat(clonedRow.attr(id).substr(-1,1));
var iCurrentOrder = $( #iOrder+ iRowID , clonedRow).attr(value);
iCurrentOrder = parseFloat(iCurrentOrder);
//$.log(iCurrentOrder);
iNewID = iRowID + 1;
//$.log('iNewID=' + ' ' + iNewID );
s=clonedRow;
var myString = 'showImageList'+iRowID;
var myString2 = 'showImageList'+iNewID;
var myString3 = s.replace(myString,myString2);
The error message I get is s.replace is not a function.
Can someone spot my mistake, or suggest an alternative approach
Thanks
Bruce
[jQuery] Re: Replacing a string - why doesn't this work?
Thank you Andrea for the solution - I'd never have gotten there.
Cheers, Bruce
At 10:05 p.m. 13/02/2008, you wrote:
On 13 Feb, 09:05, Bruce MacKay [EMAIL PROTECTED] wrote:
s=clonedRow;
var myString = 'showImageList'+iRowID;
var myString2 = 'showImageList'+iNewID;
var myString3 = s.replace(myString,myString2);
The error message I get is s.replace is not a function.
I think that's because 's' is not a string.
try replacing the last 4 lines with this:
clonedRow.find('a[onclick^=showImageList]').attr('onclick',
'showImageList(' + iNewID + ')');
OR, if the anchor that you're looking for is the only one in the
cloned fieldset
clonedRow.find('a').attr('onclick', 'showImageList(' + iNewID + ')');
[jQuery] Re: getting the ID number of a cloned table row
Thanks Charles for this full and complete response - I very much appreciate it.
Cheers
Bruce
At 09:27 a.m. 6/02/2008, you wrote:
Bruce MacKay wrote:
: Hello folks,
:
: I'm trying to duplicate a row of an existing table using a function
: adapted from
: http://www.nabble.com/Add-Table-row-to12989886s27240.html#a13300133
:
: My problem is that I cannot identify the identifier of the last row
: (of the original table).
From the html you provided, this gets the last ID.
// The match should return an array with the current id in the 0
// position. The + sign in front converts this ID to a number.
var currentID = + $(clonedRow).find('input').attr('id').match( /\d+/
)[0];
var newID = currentID + 1;
The problem is that clone() does not work right in Internet Exploder.
There's a patch due, but no advance yet. So, the solution works on FF,
but not on IE. (http://www.fusioncube.net/?p=196)
In fact, the method above needs filter() to work on IE.
// Solution for IE.
var currentID = + $(clonedRow).filter('input').attr('id').match( /\d+/
)[0];
var newID = currentID + 1;
: function duplicateRow(){
[snip]
Manipulating the html directly probably isn't the most jQuery-ish
way to handle this.
$(clonedRow).find( '#bc' + currentID ).eq(0).attr({
id: 'bc' + newID,
name: 'correctans' + newID
});
$(clonedRow).find( '#theans' + currentID ).eq(0).attr({
id: 'theans' + newID,
name: 'answer' + newID
});
$(clonedRow).find( '#fb' + currentID ).eq(0).attr({
id: 'fb' + newID,
name: 'feedback' + newID
});
// Add to the new row to the original table
$( #myTable).append( clonedRow );
So, for now, you may need another solution besides clone().
HTH,
Charles K. Clarkson
--
Mobile Homes Specialist
Free Market Advocate
Web Programmer
254 968-8328
http://www.clarksonenergyhomes.com/wordpress/about/
[jQuery] clone and replacing one string for another
Hello folks, I am using the .clone() method to duplicate a fieldset containing some form elements e.g. var clonedRow = $( #sshow_input fieldset:last ).clone(); Within that cloned fieldset is a string of the form sListImage(x) where x = 1, 2, or 3 etc With each duplication I need to increment x by 1. I had hoped (rather than knowing) that myString = sListImage(3) myString2 = sListImage(4) var clonedRow2 = clonedRow.replace(myString,myString2); would do the trick. But once again, my guesses are falling well short. I'm being told that clonedRow.replace is not a function. I'd appreciate some help here. Thanks, Bruce
[jQuery] getting the ID number of a cloned table row
Hello folks,
I'm trying to duplicate a row of an existing table using a function
adapted from
http://www.nabble.com/Add-Table-row-to12989886s27240.html#a13300133
My problem is that I cannot identify the identifier of the last row
(of the original table).
The last row of my table has the form:
tr class=smfont90tdinput name=correctans5 value=1 id=bc5
type=checkbox/tdtdtextarea rows=3 name=answer5
id=theans5 style=width: 250px;/textarea/tdtdtextarea
rows=3 name=feedback5 id=fb5 style=width: 250px;/textarea/td/tr
The function I'm using is as follows. Two questions:
1. I get an error at the alert - intCurrentRowID is not
defined. What is my error here?
2. Is there a more efficient way of writing the 4 lines starting at
point 2 (I'm trying to re-name the feedback and answer IDs and NAMEs
function duplicateRow(){
// First, lets create the new row using the last one as template...
var clonedRow = $( #myTable tr:last ).clone();
// Take the current identifier, some number in the first
cell of the row
intCurrentRowId = parseInt( $( #bc:last, clonedRow ).html() );
1.--- alert(intCurrentRowID);
// Set the new ID
intNewRowId = intCurrentRowId + 1;
// Change the current identifier of the row to the new one
$( #bc:last, clonedRow ).html( intNewRowId );
// Change the Id / Name or anything you want for the new attribs
2.--- $( #fb+ intCurrentRowId , clonedRow ).attr( { id : fb +
intNewRowId} );
$( #bc+ intCurrentRowId , clonedRow ).attr( { id : bc
+ intNewRowId} );
$( #feedback+ intCurrentRowId , clonedRow ).attr( { name
: feedback + intNewRowId} );
$( #answer+ intCurrentRowId , clonedRow ).attr( { name :
answer + intNewRowId} );
// Add to the new row to the original table
$( #myTable).append( clonedRow );
};
Thanks,
Bruce
[jQuery] Autogrow() pulses in IE7
Hello folks, Has anyone had experience with the autogrow plugin (http://plugins.jquery.com/project/autogrow) It works like a dream in FF, but in IE7, the lower 10px of the autogrown textarea pulses up and down. I'm using v1.02 of the plugin with v.1.2.3a of JQuery Any ideas? Thanks, Bruce
[jQuery] Shadowbox and ajax-returned content?
Hello all/Michael, I'm wanting to use Shadowbox in an application where the content of the page is being changed via AJAX I have added Shadow.init(); into the callback function that is fired when the page's content is repopulated. From the generated view of the source code, the div id=shadowbox_overlay/div tags are present, so presumably the Shadow.init() is being fired. However, this doesn't seem to be enough as the Shadowbox functions are not firing on the new content. I've saved one of these pages as a standalone HTML page and the Shadowbox functionality works as expected, so apparently I'm not rebinding (if that's the correct word) the new content to Shadowbox. Any idea/suggestion to allow me to achieve what I'm seeking here? Thanks Bruce
[jQuery] Re: Shadowbox and ajax-returned content?
At 04:59 p.m. 30/01/2008, you wrote:
Any idea/suggestion to allow me to achieve what I'm seeking here?
Can you post a demo link? That would be most helpful.
Sorry, I cannot do that for a couple of days. Could we try it this way...
The following code retrieves new content into an existing page.
function getNextPage(ej) {
$.get(scripts/ajax_ramosus_client_second.asp?brm=+ej +q= +
new Date().getTime(), function(responseText){
Shadowbox.init();
$(#wrapper).html(responseText);
var options = {dataType: 'json', beforeSubmit:
beforeAjax,success: afterAjax};
$('#ewlform,#quizform,#textform,#emailform,#glossform').submit(function()
{$(this).ajaxSubmit(options); return false; });
getTWidth('#sText','#textform');
$('a.styleswitch').bind(click,
function(){switchStylestyle(this.getAttribute(rel));return
false;});var c = readCookie('RamosusStyle');if (c) switchStylestyle(c);
$(a.link1).bind(click, function() {getFirstPage(this.id)});
$(a.link2).bind(click, function() {getNextPage(this.id)});
$(a.bmark).bind(click, function() {setBookmark(this.id)});
$(a.email).bind(click, function() {getEmailForm()});
$(a.emailh).bind(click, function() {hideEmailForm()});
$(a.fsize).bind(click, function() {styleCycle()});
$(a.logout).bind(click, function() {chkLogout(this.id)});
//$.log('Shadowbox');
});
};
That content contains one or two links of the form a
href=an_image.jpg rel=shadowboxView this image/a
When any of those links are clicked, the expected shadow box
functionality is not observed.
I realise that the example on Shadow Box's web site has the init()
call in the document.ready block, but that isn't applicable here
because of the new content that is being bought into the page (I did
try including the Shadow.init() call in the document.ready block when
the page is first called, but that didn't make any difference to the
final outcome)
I hope this makes my context a little clearer,
Thanks,
Bruce
[jQuery] Re: Shadowbox and ajax-returned content - solved
... by reading Michael's docs a little more closely.
Into the document.ready block
Shadowbox.init({
skipSetup: true, // skip the automatic setup
});
Into the getNextPage function
Shadowbox.setup($('a.sbox'),{overlayOpacity: 0.8});
Apologies for not doing my homework properly.
Cheers,
Bruce
At 05:25 p.m. 30/01/2008, you wrote:
At 04:59 p.m. 30/01/2008, you wrote:
Any idea/suggestion to allow me to achieve what I'm seeking here?
Can you post a demo link? That would be most helpful.
Sorry, I cannot do that for a couple of days. Could we try it this way...
The following code retrieves new content into an existing page.
function getNextPage(ej) {
$.get(scripts/ajax_ramosus_client_second.asp?brm=+ej
+q= + new Date().getTime(), function(responseText){
Shadowbox.init();
$(#wrapper).html(responseText);
var options = {dataType: 'json', beforeSubmit:
beforeAjax,success: afterAjax};
$('#ewlform,#quizform,#textform,#emailform,#glossform').submit(function()
{$(this).ajaxSubmit(options); return false; });
getTWidth('#sText','#textform');
$('a.styleswitch').bind(click,
function(){switchStylestyle(this.getAttribute(rel));return
false;});var c = readCookie('RamosusStyle');if (c) switchStylestyle(c);
$(a.link1).bind(click, function() {getFirstPage(this.id)});
$(a.link2).bind(click, function() {getNextPage(this.id)});
$(a.bmark).bind(click, function() {setBookmark(this.id)});
$(a.email).bind(click, function() {getEmailForm()});
$(a.emailh).bind(click, function() {hideEmailForm()});
$(a.fsize).bind(click, function() {styleCycle()});
$(a.logout).bind(click, function() {chkLogout(this.id)});
//$.log('Shadowbox');
});
};
That content contains one or two links of the form a
href=an_image.jpg rel=shadowboxView this image/a
When any of those links are clicked, the expected shadow box
functionality is not observed.
I realise that the example on Shadow Box's web site has the init()
call in the document.ready block, but that isn't applicable here
because of the new content that is being bought into the page (I did
try including the Shadow.init() call in the document.ready block
when the page is first called, but that didn't make any difference
to the final outcome)
I hope this makes my context a little clearer,
Thanks,
Bruce
[jQuery] styleswitcher problem
Hello folks,
I've just belatedly upgraded to the latest version of jQuery and am
finding old plugins now misbehaving.
I'm having trouble with Kevin Luck's styleswitch.
FIrebug is reporting $ is not a function on the first line of this
code. I can't understand it - jquery is already loaded.
$('.styleswitch').bind('click',function()
{
switchStylestyle(this.getAttribute('rel'));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
[Actually, the first line in Kevin's code is
$('.styleswitch').click(function()
but I have a recollection that .bind('click',...) is now the preferred format.]
Can anyone help me here please (or point me at another stylesheet
switching approach).
Thanks
Bruce
[jQuery] styleswitcher problem 2 (aka $ is not a function)
Hi folks,
What I neglected to point out in my first post is that I know jquery
is being loaded as other function calls (e.g. Shadowbox.init();)
appearing earlier in the document.ready block are being fired. I can
also see the file loaded when I view - through Firebug - the
javascript files loaded into the page
However, further testing has revealed that it is not styleswitcher
that is at fault here. If I make
$(a.link1).bind(click, function() {getFirstPage(this.id)});
the first line in the block with the $ element, I generate the same
error message - $ is not a function
Cheers
Bruce
Date: Mon, 28 Jan 2008 22:26:03 +1300
To: jquery-en@googlegroups.com
From: Bruce MacKay [EMAIL PROTECTED]
Subject: styleswitcher problem
Hello folks,
I've just belatedly upgraded to the latest version of jQuery and am
finding old plugins now misbehaving.
I'm having trouble with Kevin Luck's styleswitch.
FIrebug is reporting $ is not a function on the first line of this
code. I can't understand it - jquery is already loaded.
$('.styleswitch').bind('click',function()
{
switchStylestyle(this.getAttribute('rel'));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
[Actually, the first line in Kevin's code is
$('.styleswitch').click(function()
but I have a recollection that .bind('click',...) is now the
preferred format.]
Can anyone help me here please (or point me at another stylesheet
switching approach).
Thanks
Bruce
[jQuery] Re: styleswitcher problem 2 (aka $ is not a function)
Hello Karl,
Thanks for the grasp.
The link: http://temporarius.massey.ac.nz/dumpthis.htm
I'm sure the cause of the fault is obvious, but I cannot find
it. The fault goes when I call an earlier version of jquery into the
file - I then triple-checked that the more recent version was
actually on the disk and was actually being found by the page - and it was.
Let's hope we can make hay this afternoon.
Cheers,
Bruce
At 02:29 a.m. 29/01/2008, you wrote:
Hi Bruce,
A link to a page that we can look at would be very helpful. I wonder
if your $('a.link1').bind('click',function is inside a
$(document).ready() ? If not, it might be getting called before the
jquery.js file loads. Just grasping at straws here.
--Karl
_
Karl Swedberg
http://www.englishrules.comwww.englishrules.com
www.learningjquery.com
On Jan 28, 2008, at 6:12 AM, Bruce MacKay wrote:
Hi folks,
What I neglected to point out in my first post is that I know
jquery is being loaded as other function calls (e.g.
Shadowbox.init();) appearing earlier in the document.ready block
are being fired. I can also see the file loaded when I view -
through Firebug - the javascript files loaded into the page
However, further testing has revealed that it is not styleswitcher
that is at fault here. If I make
$(a.link1).bind(click, function() {getFirstPage(this.id)});
the first line in the block with the $ element, I generate the same
error message - $ is not a function
Cheers
Bruce
Date: Mon, 28 Jan 2008 22:26:03 +1300
To: mailto:jquery-en@googlegroups.comjquery-en@googlegroups.com
From: Bruce MacKay mailto:[EMAIL PROTECTED][EMAIL PROTECTED]
Subject: styleswitcher problem
Hello folks,
I've just belatedly upgraded to the latest version of jQuery and
am finding old plugins now misbehaving.
I'm having trouble with Kevin Luck's styleswitch.
FIrebug is reporting $ is not a function on the first line of
this code. I can't understand it - jquery is already loaded.
$('.styleswitch').bind('click',function()
{
switchStylestyle(this.getAttribute('rel'));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
[Actually, the first line in Kevin's code is
$('.styleswitch').click(function()
but I have a recollection that .bind('click',...) is now the
preferred format.]
Can anyone help me here please (or point me at another stylesheet
switching approach).
Thanks
Bruce
[jQuery] clueTip and retrieved JSON strings
Hello folks,
I'm having a problem with clueTip overwriting or affecting the title
attribute of a returned a tag.
I have an application which dynamically returns the names of images
in a user-selected folder.
The returned strings (via JSON) appear in the form:
a href=#
rel=ramosus_imgPreview.asp?sImg=folder/name-of-image.jpg
title=folder/name-of-image.jpg class=transfer jtname-of-image/a
Until I started fiddling with this code (i.e including clueTip
capability), when the image name was clicked, an input text box
elsewhere on the page was populated with that image name.
The function that drives this process is below.
function listFiles(fo,ej) {
$(#flist).html();
$.get(scripts/ajax_ramosus_editor.asp?id=9bf=+fo +q= +
new Date().getTime(), function(responseText){
$(#flist).html(responseText).show().highlightFade({color:'yellow',speed:2000,iterator:'sinusoidal'});
--- $('a.jt').cluetip({showTitle: false, arrows: true,
dropShadow: false, hoverIntent: true});
$('a.transfer').bind(click,function(){
var g = this.title || false;
$(#sImageName+ej).attr(value,g);$(#imagelist+ej).slideUp(900,
function() {
$(this).height('');});
return false;
});
});
};
My problem? After the inclusion of the $('a.jt') line, when I
click the hyperlink, the input text box is populated with
false. (The clueTip works fine!)
Can someone show me the error of my ways please.
Thanks,
Bruce
[jQuery] Updating the id of an a tag
Hello folks,
I'm having problems with the following line of code
$([EMAIL PROTECTED]'del_']).id(del_*+pb+_+iA+_ck);
in the function below.
What I'm trying to do is replace the id of the a tag from its
existing id of 'del_' to 'del_*x_y_ck', where x and y are the
variables pb and iA.
I know pb and iA are being 'received' by the function - the
querystring generated by the get statement is correct.
I'm sure this function has worked previously, so perhaps my problem
is based in a version update of jQuery, but perhaps it was only
working previously in my dreams.
Any help appreciated.
Cheers
Bruce
function editAppAsset(ej) {
var temp=new Array();
temp=ej.split('_');
var pb = temp[1];
var iA = temp[2];
$(#wrka).show();
$.get(scripts/ajax_ramosus_editor.asp?id=16bpblID=+pb+assetID=+iA
+q= + new Date().getTime(), function(responseText){
$([EMAIL PROTECTED]'del_']).id(del_*+pb+_+iA+_ck);
var options = {dataType: 'json', before: showRequest, after:
afterAppAsset};
$('#editor_form').submit(function()
{$(this).ajaxSubmit(options);return false;});
});
};
[jQuery] Re: Updating the id of an a tag
Thanks Glen, for both the solution and useful tip.
Cheers,
Bruce
At 02:13 p.m. 17/10/2007, you wrote:
Instead of .id() try attr(id,yourStringHere)
One tip is to make your string in a variable right before it.
That way you can easily alert the string to see if its coming up correctly.
Glen
On 10/17/07, Bruce MacKay
mailto:[EMAIL PROTECTED][EMAIL PROTECTED] wrote:
Hello folks,
I'm having problems with the following line of code
$([EMAIL PROTECTED]'del_']).id(del_* +pb+_+iA+_ck);
in the function below.
What I'm trying to do is replace the id of the a tag from its
existing id of 'del_' to 'del_*x_y_ck', where x and y are the
variables pb and iA.
I know pb and iA are being 'received' by the function - the
querystring generated by the get statement is correct.
I'm sure this function has worked previously, so perhaps my problem
is based in a version update of jQuery, but perhaps it was only
working previously in my dreams.
Any help appreciated.
Cheers
Bruce
function editAppAsset(ej) {
var temp=new Array();
temp=ej.split('_');
var pb = temp[1];
var iA = temp[2];
$(#wrka).show();
$.get(scripts/ajax_ramosus
_editor.asp?id=16bpblID=+pb+assetID=+iA +q= + new
Date().getTime(), function(responseText){
$([EMAIL PROTECTED]'del_']).id(del_*+pb+_+iA+_ck);
var options = {dataType: 'json', before: showRequest, after:
afterAppAsset};
$('#editor_form').submit(function()
{$(this).ajaxSubmit(options);return false;});
});
};
[jQuery] Re: ANNOUCE: jQuery lightBox plugin
Oh, was that bit important ;-) Thanks Leandro/Wizzud, I feel a bout of the wood for the trees cliche coming on. Cheers, Bruce At 08:01 a.m. 4/10/2007, you wrote: Yeah Bruhce, how Wizzud have said, you need to include the jquery.lightbox-0.1.css. You have just included a style to the aparence of the images in your gallery. On Oct 4, 12:28 am, Bruce MacKay [EMAIL PROTECTED] wrote: Hello, I'm having difficulty getting this plugin to work - a test page is here:http://www.thomasbaine.com/gallery.asp I'm sure I've followed the example, but obviously I'm missing something. When I click on a thumbnail, the lightbox is appended to the end of my page, never on top of it. Any illumination of my error would be appreciated. Cheers, Bruce On Sep 23, 10:46 pm, Leandro Vieira Pinho [EMAIL PROTECTED] wrote: jQuerylightBoxpluginis a powerful and simple way to show images in the same page. It´s inspired and based in thelightbox2 from Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) But, it use the simplicity and flexibility ofjQueryto select the elements we are. You don´t need to alter your HTML code, select the elements how you want. Page:http://leandrovieira.com/projects/jquery/lightbox/(in portuguese yet, I´ll translate into English asap). Bye, and all comments and suggestions will be apreciated.
[jQuery] Re: Tag Cloud
At 02:28 a.m. 20/09/2007, you wrote: Is there an implementation of Tag Cloud css or logic using jquery? This might help you: http://www.nabble.com/-Plugin--DynaCloud-Plugin-tf4254840s15494.html#a12109312
[jQuery] ajaxForm and validate question
Hello folks,
I am using the ajaxForm plugin in combo with Jörn's validation plugin.
The relevant code is below - it is called from
$(document).ready(function() and it works -
except for one thing. I need to click on the
submit button twice in order for the validation/submit to be fired.
What am I missing here?
Thanks
Bruce
$(#cform).validate({
errorContainer: errors,
errorLabelContainer: $('ol', errors),
wrapper: 'li',
submitHandler: function(form) {
$(#cform).ajaxForm(options);
}
[jQuery] Re: ajaxForm and validate question
Hi Aaron,
Thanks for the input.
I was using ajaxForm because I wanted to have two submit buttons
(preview and submit) and that option allowed me to have that.
I have a kindergarten grade level of understanding of js language, so
your explanation ajaxForm() binds an event handler that (among
other things) calls ajaxSubmit(). ajaxSubmit() is where the form
submission actually happens. doesn't really make sense to me. If
ajaxForm calls ajaxSubmit via an event handler, then why it is
necessary to explicitly call ajaxSubmit?
Cheers,
Bruce
At 12:58 p.m. 11/09/2007, you wrote:
On 9/11/07, Bruce MacKay
mailto:[EMAIL PROTECTED][EMAIL PROTECTED] wrote:
submitHandler: function(form) {
$(#cform).ajaxForm(options);
}
This should be
submitHandler: function(form) {
$(#cform).ajaxSubmit(options);
}
ajaxForm() binds an event handler that (among other things) calls
ajaxSubmit(). ajaxSubmit() is where the form submission actually happens.
More details:
http://www.malsup.com/jquery/form/#apihttp://www.malsup.com/jquery/form/#api
--
Aaron Heimlich
Web Developer
mailto:[EMAIL PROTECTED][EMAIL PROTECTED]
http://aheimlich.freepgs.com
[jQuery] IE6 ajax oddity
Folks, I have a small blog application at http://www.thomasbaine.com/thetuis.asp The application works fine in IE7 and FF on both the production server (above) and my local development machine. IE6 works fine on my local machine, but fails on the production server. By fail, I mean that ajax calls to the server are not returned. For example, I can post a comment - and it will be stored in the database - but the return ajax stream of data to update the page does not arrive. Similarly, click on the Recent links to retrieve previous items of the blog do not work - the server receives the instruction and does the processing, but the return ajax stream doesn't seem to arrive. Any ideas? Thanks/Bruce
[jQuery] Re: jCarouselLite problem
Hi Ganeshji,
I specified these attributes but the problem still remains.
A test page is at http://www.thomasbaine.com/thetuis.asp (click on
the Look at our pictures) link.
Help would be appreciated.
Cheers/Bruce
At 09:43 a.m. 4/08/2007, you wrote:
i think, u might not be specifying the attributes width and height
for the images within the carousel.
Try, specifying width and height attributes and lemme know if it works.
-GTG
On 8/3/07, Bruce MacKay
mailto:[EMAIL PROTECTED][EMAIL PROTECTED] wrote:
Hi folks/Ganeshji
I'm having trouble getting jCaroselLite to work first time round.
When I either link to a page containing a carousel or to a thickbox
containing a carousel, in neither case do the images appear when that
page/thickbox is visited via the link.
However, if I refresh the page, the images/the carousel appears immediately.
I'm trigger the plugin as...
$(document).ready(function() {
$(.mixedContent .jCarouselLite).jCarouselLite({
btnNext: .mixedContent .next,
btnPrev: .mixedContent .prev,
visible: 2,
scroll: 2
});
});
I'm sorry, but I just can see what it is that I'm doing wrong. Suggestions?
Thanks, Bruce
[jQuery] Re: jCarouselLite problem
Hi Ganeshji,
I tried that but alas, it did not fix the problem.
Cheers/Bruce
At 09:26 a.m. 6/08/2007, you wrote:
bruce,
i haven't used jcarousellite with thickbox, but can you try something...
Instead of using document.ready to initialize the carousel, use a
script block in the end of the body tag and initialize it there
and see if it solves your problem...
-GTG
On 8/5/07, Bruce MacKay
mailto:[EMAIL PROTECTED][EMAIL PROTECTED] wrote:
Hi Ganeshji,
I specified these attributes but the problem still remains.
A test page is at
http://www.thomasbaine.com/thetuis.asphttp://www.thomasbaine.com/thetuis.asp
(click on the Look at our pictures) link.
Help would be appreciated.
Cheers/Bruce
At 09:43 a.m. 4/08/2007, you wrote:
i think, u might not be specifying the attributes width and height
for the images within the carousel.
Try, specifying width and height attributes and lemme know if it works.
-GTG
On 8/3/07, Bruce MacKay
mailto:[EMAIL PROTECTED][EMAIL PROTECTED] wrote:
Hi folks/Ganeshji
I'm having trouble getting jCaroselLite to work first time round.
When I either link to a page containing a carousel or to a thickbox
containing a carousel, in neither case do the images appear when that
page/thickbox is visited via the link.
However, if I refresh the page, the images/the carousel appears immediately.
I'm trigger the plugin as...
$(document).ready(function() {
$(.mixedContent .jCarouselLite).jCarouselLite({
btnNext: .mixedContent .next,
btnPrev: .mixedContent .prev,
visible: 2,
scroll: 2
});
});
I'm sorry, but I just can see what it is that I'm doing wrong. Suggestions?
Thanks, Bruce
[jQuery] jCarouselLite problem
Hi folks/Ganeshji
I'm having trouble getting jCaroselLite to work first time round.
When I either link to a page containing a carousel or to a thickbox
containing a carousel, in neither case do the images appear when that
page/thickbox is visited via the link.
However, if I refresh the page, the images/the carousel appears immediately.
I'm trigger the plugin as...
$(document).ready(function() {
$(.mixedContent .jCarouselLite).jCarouselLite({
btnNext: .mixedContent .next,
btnPrev: .mixedContent .prev,
visible: 2,
scroll: 2
});
});
I'm sorry, but I just can see what it is that I'm doing wrong. Suggestions?
Thanks, Bruce
[jQuery] Re: Binding problems - Thanks
Thank you Mike - I'd inadvertantly dropped the interface.js file from
the head section.
And thanks also for the ajaxError tip - it'll help me in the future.
Cheers,
Bruce
At 01:47 a.m. 17/07/2007, you wrote:
Bruce,
You've got a scripting error on your callbacks. ScrollTo is not a
defined plugin method (you've used it in multiple places). Did you
mean to use scrollTop?
Also, to catch errors in async callbacks bind an error handler using
ajaxError:
$().ajaxError(function(ev, xhr, opts, err){
alert(err);
})
Cheers.
Mike
On 7/16/07, Bruce MacKay [EMAIL PROTECTED] wrote:
Hi Mike,
A sample page is here:
http://horticulture227.massey.ac.nz/admin/prolearn13.asp?id=1which=2
Click on the [view student list] link (the 'class=gao' link); the [view
search options] link which replaces it is unbound - despite my best attempts
to re-bind.
Thanks,
Bruce
original message.
Hello folks,
I'm having difficulty rebinding both a form submit and a click function
upon return of an ajax call.
The onload code is ...
$(document).ready(function() {
$(a.gao).bind(click, function() {getAllOptions()});
var options = {dataType: 'html', before: beforeAjax,after: afterAjax};
$('#getStudentInfo').submit(function()
{$(this).ajaxSubmit(options);return false; });
});
function beforeAjax(html) { $(#comments3).hide();}
function afterAjax(html) {
$(#sDetails).html(html).fadeIn(800).ScrollTo(800).highlightFade({color:'yellow',speed:2000,iterator:'linear'});
tb_init('a.thickbox');
}
When I click the class=gao link, the following call is made...
function getAllOptions() {
$.ajax({
type: 'GET',
url:
'scripts/ajax_studentroll.asp?w=allselectrand=' + new
Date().getTime(),
dataType: html,
success: function(html){
$('#sDetails').hide(600);
$(#flipdisplay).html(html).fadeIn(800).ScrollTo(800).highlightFade({color:'yellow',speed:4000,iterator:'linear'});
$('#getStudentInfo').unbind('submit');
$(a.gao).unbind(click);
var options = {dataType: 'html', before: beforeAjax,after:
afterAjax};
$('#getStudentInfo').submit(function()
{$(this).ajaxSubmit(options);return false; });
$(a.gao).bind(click, function() {getSearchOptions()});
}
});
}
The html that is correctly returned, but I cannot get the new class=gao
link or the form (id=getStudentInfo) within that html block to be re-bound
for subsequent action.
As you can see, I've tried to unbind the functions before binding them
again, but I must still doing something wrong as this wasn't successful.
At 12:45 a.m. 10/07/2007, you wrote:
Bruce,
Do you have a sample page we can look at? I don't see anything
obviously wrong with the code, but it's hard to tell without seeing
more of the page.
Mike
I'm having difficulty rebinding both a form submit and a click function
upon return of an ajax call.
[jQuery] Opacity problem, IE7, Tabs plugin
Hi folks, I'd greatly appreciate some help with an opacity problem (I think that's what it is) on a page where I'm using the tabs plugin: http://horticulture127.massey.ac.nz/degreecdays_test.asp When I move from one tab to another in IE7, the font quality breaks up. Any suggestions? Cheers, Bruce
[jQuery] Re: Binding problems (click/submit)
Hi Mike,
A sample page is here:
http://horticulture227.massey.ac.nz/admin/prolearn13.asp?id=1which=2
Click on the [view student list] link (the 'class=gao' link); the
[view search options] link which replaces it is unbound - despite my
best attempts to re-bind.
Thanks,
Bruce
original message.
Hello folks,
I'm having difficulty rebinding both a form submit and a click
function upon return of an ajax call.
The onload code is ...
$(document).ready(function() {
$(a.gao).bind(click, function() {getAllOptions()});
var options = {dataType: 'html', before: beforeAjax,after: afterAjax};
$('#getStudentInfo').submit(function()
{$(this).ajaxSubmit(options);return false; });
});
function beforeAjax(html) { $(#comments3).hide();}
function afterAjax(html) {
$(#sDetails).html(html).fadeIn(800).ScrollTo(800).highlightFade({color:'yellow',speed:2000,iterator:'linear'});
tb_init('a.thickbox');
}
When I click the class=gao link, the following call is made...
function getAllOptions() {
$.ajax({
type: 'GET',
url: 'scripts/ajax_studentroll.asp?w=allselectrand=' + new
Date().getTime(),
dataType: html,
success: function(html){
$('#sDetails').hide(600);
$(#flipdisplay).html(html).fadeIn(800).ScrollTo(800).highlightFade({color:'yellow',speed:4000,iterator:'linear'});
$('#getStudentInfo').unbind('submit');
$(a.gao).unbind(click);
var options = {dataType: 'html', before:
beforeAjax,after: afterAjax};
$('#getStudentInfo').submit(function()
{$(this).ajaxSubmit(options);return false; });
$(a.gao).bind(click, function() {getSearchOptions()});
}
});
}
The html that is correctly returned, but I cannot get the new
class=gao link or the form (id=getStudentInfo) within that html
block to be re-bound for subsequent action.
As you can see, I've tried to unbind the functions before binding
them again, but I must still doing something wrong as this wasn't successful.
At 12:45 a.m. 10/07/2007, you wrote:
Bruce,
Do you have a sample page we can look at? I don't see anything
obviously wrong with the code, but it's hard to tell without seeing
more of the page.
Mike
I'm having difficulty rebinding both a form submit and a click function
upon return of an ajax call.
[jQuery] changing a class depending on content
Hi folks,
I've tried, but I just cannot get my head in the right direction with this one.
In a non-ajax application I have, if a database record is
successfully updated, the return stream from the server contains an
appropriate message of the form:
p class=alertThe record was successfully updated/p
If an error occurs, the message is of the form:
p class=alertError - the record was not updated/p
I currently jquery the stream via:
$(.alert).highlightFade({color:'red',speed:2000,iterator:'sinusoidal'});
I'd like now to be more user friendly and alter the fade colour to
red only if the message contains the word Error, with the colour to
be green for all other messages.
The code below is my attempt, but it fails because I cannot work out
how to transfer the message to myString (for subsequent testing of
the presence of Error - how should I be doing this?
$(.alert).filter(function(chekit){var myString=???;
//console.log(myString.indexOf(Error))
if (myString.indexOf(Error)0)
{
$(.alert).highlightFade({color:'red',speed:2000,iterator:'sinusoidal'});
}
else
{
$(.alert).highlightFade({color:'green',speed:2000,iterator:'sinusoidal'});
};
});
What should be in - I've tried $(this).html and similar
permutations, but none (of these guesses) worked.
Thanks,
Bruce
[jQuery] Re: changing a class depending... thanks!
$(this).text(); was the key
Cheers,Bruce
At 11:36 a.m. 2/07/2007, you wrote:
Try:
$(this).html();
Or, better yet:
$(this).text();
html is a function not a member variable.
Karl Rudd
On 7/2/07, Bruce MacKay [EMAIL PROTECTED] wrote:
Hi folks,
I've tried, but I just cannot get my head in the right direction with this
one.
In a non-ajax application I have, if a database record is successfully
updated, the return stream from the server contains an appropriate message
of the form:
p class=alertThe record was successfully updated/p
If an error occurs, the message is of the form:
p class=alertError - the record was not updated/p
I currently jquery the stream via:
$(.alert).highlightFade({color:'red',speed:2000,iterator:'sinusoidal'});
I'd like now to be more user friendly and alter the fade colour to red only
if the message contains the word Error, with the colour to be green for
all other messages.
The code below is my attempt, but it fails because I cannot work out how to
transfer the message to myString (for subsequent testing of the presence
of Error - how should I be doing this?
$(.alert).filter(function(chekit){var
myString=???;
//console.log(myString.indexOf(Error))
if (myString.indexOf(Error)0)
{
$(.alert).highlightFade({color:'red',speed:2000,iterator:'sinusoidal'});
}
else
{
$(.alert).highlightFade({color:'green',speed:2000,iterator:'sinusoidal'});
};
});
What should be in - I've tried $(this).html and similar permutations,
but none (of these guesses) worked.
Thanks,
Bruce
[jQuery] jEditable - sending additional param. values
Hello folks, I'm wanting to incorporate jEditable into a slideshow editor I'm making. I want to be able to pass the ID of the particular slide being edited back to the server at the same time as the edited text. The js source file indicates this is possible, but I don't understand the syntax: * @param Hashoptions[submitdata] Extra parameters to send when submitting edited content. Can a user help me please? Thanks/Bruce
[jQuery] Reading a querystring to determine an action - possible?
Hi folks, I'm working on a site that, by default, has a RHS sidebar. I want to be able to selective hide that sidebar based on the value of a querystring. More specifically, there are times when I need the whole page to display a large table, so when I submit a post or call to the server from the page to generate/load the table, I intending adding a querystring variable that, when the page is refreshed and the table is about to be loaded, jQuery will hide the sidebar (i.e. display:none;) Is this possible? I cannot find any examples in the tutorial section of the site or find previous posts in this list's archives. Of course, I can achieve what I'm seeking by having server-side conditional includes based on a querystring value, but I'd like to do this the jQuery way if possible. Thanks/Bruce
