[jQuery] Re: clueTip send header with Ajax request
I got rid of the syntax error, but it appears that clueTip is not
inserting the header on the request.
function initToolTips() {
jQuery('a.eventTitle').cluetip({
width: 350,
local: false,
hideLocal: true,
cursor: 'pointer',
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: false,
closePosition: 'title',
closeText: 'img src=$content.getURI(images/
icon_close_black.gif) alt=close /',
clickThrough: true,
hoverIntent: {
sensitivity: 3,
interval: 200,
timeout: 100
},
ajaxCache: false,
ajaxSettings: {
dataType: 'xml',
//global: true
beforeSend: function(xhr) {
xhr.setRequestHeader(${apiAuthHeader_name}, $
{apiAuthHeader_value});
}
}
}
On Nov 21, 9:10 am, n8cshaw [EMAIL PROTECTED] wrote:
Hi all. I am implementing clueTip and have it working just fine using
an Ajax call. However, when all is said and done, the Ajax call will
be hitting a web service that requires a custom authentication header.
I have set up my jQuery global ajax options to send the header on all
requests.
jQuery.ajaxSetup({
beforeSend: function(xhr)
{ xhr.setRequestHeader(customAuthHeader,
customAuthHeaderValue);}
});
However, it does not appear that clueTip recognizes these global
options (ideally, it probably should). So, I have to send the header
on the request manually. I have tried to do this via the ajaxSettings,
but I am getting syntax errors and the clueTip docs don't mention
anything about usingbeforeSend, so I am not even sure if it is
possible.
ajaxSettings: {
dataType: 'xml',
beforeSend: function(xhr) {
xhr.setRequestHeader(customAuthHeader,
customAuthHeaderValue)
}
},
Has anyone done this or can anyone provide some advice on how to do
this?
[jQuery] clueTip send header with Ajax request
Hi all. I am implementing clueTip and have it working just fine using
an Ajax call. However, when all is said and done, the Ajax call will
be hitting a web service that requires a custom authentication header.
I have set up my jQuery global ajax options to send the header on all
requests.
jQuery.ajaxSetup({
beforeSend: function(xhr)
{ xhr.setRequestHeader(customAuthHeader,
customAuthHeaderValue);}
});
However, it does not appear that clueTip recognizes these global
options (ideally, it probably should). So, I have to send the header
on the request manually. I have tried to do this via the ajaxSettings,
but I am getting syntax errors and the clueTip docs don't mention
anything about using beforeSend, so I am not even sure if it is
possible.
ajaxSettings: {
dataType: 'xml',
beforeSend: function(xhr) {
xhr.setRequestHeader(customAuthHeader,
customAuthHeaderValue)
}
},
Has anyone done this or can anyone provide some advice on how to do
this?
[jQuery] Event Firing Twice
I am attaching an event to a link. The link lets the user toggle the display of a child div inside of a parent div. However, when the link is clicked, the event is run twice (div opens and then closes immediately). I have tried using .click() and .bind() and it makes no difference which one I use. I have also tried using an anonymous function versus a callback function and there is no difference. I tried using return false and e.stopPropagation() and there is no difference. I have triple-checked that I am not binding the event more than once in my code. The only way I can get it to not fire twice is to put the call in the link's onclick attribute. I have seen several similar posts on this in the group, but I have not seen a reason why this happens or a fool-proof way to stop it from happening. The only thing I can think of is that one of the other JS libraries I am using on the page, like Matt Kruse's DynamicOptionList, etc... are interfering with the event propagation, but I don't know for sure if that is the cause. I am moving over from Prototype/Scriptaculous and had this all working without a problem using those libraries. I have posted the code at: http://jsbin.com/atiza Help!
[jQuery] Re: Event Firing Twice
One more interesting note... if the parent div is visible (display: block) when the page loads, I do not see this behavior. It is only when the parent div is not visible (display: none) on page load that it happens. On Nov 6, 9:07 am, n8cshaw [EMAIL PROTECTED] wrote: I am attaching an event to a link. The link lets the user toggle the display of a child div inside of a parent div. However, when the link is clicked, the event is run twice (div opens and then closes immediately). I have tried using .click() and .bind() and it makes no difference which one I use. I have also tried using an anonymous function versus a callback function and there is no difference. I tried using return false and e.stopPropagation() and there is no difference. I have triple-checked that I am not binding the event more than once in my code. The only way I can get it to not fire twice is to put the call in the link's onclick attribute. I have seen several similar posts on this in the group, but I have not seen a reason why this happens or a fool-proof way to stop it from happening. The only thing I can think of is that one of the other JS libraries I am using on the page, like Matt Kruse's DynamicOptionList, etc... are interfering with the event propagation, but I don't know for sure if that is the cause. I am moving over from Prototype/Scriptaculous and had this all working without a problem using those libraries. I have posted the code at:http://jsbin.com/atiza Help!
[jQuery] Re: Event Firing Twice
weird, works for me... I posted it at http://www.iaffectproperties.com/code/SearchForm.htm also. All of the images, css and local JS are pointing to localhost and don't work obviously (JQuery and JQuery UI are being loaded from Google)... as a side-effect of that, the event appears to no longer run twice. I guess that tells me that some other script I am using is interfering with the event and causing it to run twice? How can I debug which one and prevent this from happening? I thought JQuery was namespaced to prevent this? On Nov 6, 9:40 am, Liam Potter [EMAIL PROTECTED] wrote: The link you provided doesn't seem to work. n8cshaw wrote: One more interesting note... if the parent div is visible (display: block) when the page loads, I do not see this behavior. It is only when the parent div is not visible (display: none) on page load that it happens. On Nov 6, 9:07 am, n8cshaw [EMAIL PROTECTED] wrote: I am attaching an event to a link. The link lets the user toggle the display of a child div inside of a parent div. However, when the link is clicked, the event is run twice (div opens and then closes immediately). I have tried using .click() and .bind() and it makes no difference which one I use. I have also tried using an anonymous function versus a callback function and there is no difference. I tried using return false and e.stopPropagation() and there is no difference. I have triple-checked that I am not binding the event more than once in my code. The only way I can get it to not fire twice is to put the call in the link's onclick attribute. I have seen several similar posts on this in the group, but I have not seen a reason why this happens or a fool-proof way to stop it from happening. The only thing I can think of is that one of the other JS libraries I am using on the page, like Matt Kruse's DynamicOptionList, etc... are interfering with the event propagation, but I don't know for sure if that is the cause. I am moving over from Prototype/Scriptaculous and had this all working without a problem using those libraries. I have posted the code at:http://jsbin.com/atiza Help!
[jQuery] Re: Event Firing Twice
ok, I stripped a bunch of stuff out and posted a simplified file. This should make it easier to see what is going on. The event is still firing twice. http://www.iaffectproperties.com/code/SearchForm_simple.htm On Nov 6, 11:21 am, MorningZ [EMAIL PROTECTED] wrote: I took a look at the source code in the first link but there's too much to look at, can you be more specific about what div's, what selectors, and what chunk of javascript code is not doing what you expect it to? that would help others help you On Nov 6, 10:22 am, n8cshaw [EMAIL PROTECTED] wrote: weird, works for me... I posted it athttp://www.iaffectproperties.com/code/SearchForm.htm also. All of the images, css and local JS are pointing to localhost and don't work obviously (JQuery and JQuery UI are being loaded from Google)... as a side-effect of that, the event appears to no longer run twice. I guess that tells me that some other script I am using is interfering with the event and causing it to run twice? How can I debug which one and prevent this from happening? I thought JQuery was namespaced to prevent this? On Nov 6, 9:40 am, Liam Potter [EMAIL PROTECTED] wrote: The link you provided doesn't seem to work. n8cshaw wrote: One more interesting note... if the parent div is visible (display: block) when the page loads, I do not see this behavior. It is only when the parent div is not visible (display: none) on page load that it happens. On Nov 6, 9:07 am, n8cshaw [EMAIL PROTECTED] wrote: I am attaching an event to a link. The link lets the user toggle the display of a child div inside of a parent div. However, when the link is clicked, the event is run twice (div opens and then closes immediately). I have tried using .click() and .bind() and it makes no difference which one I use. I have also tried using an anonymous function versus a callback function and there is no difference. I tried using return false and e.stopPropagation() and there is no difference. I have triple-checked that I am not binding the event more than once in my code. The only way I can get it to not fire twice is to put the call in the link's onclick attribute. I have seen several similar posts on this in the group, but I have not seen a reason why this happens or a fool-proof way to stop it from happening. The only thing I can think of is that one of the other JS libraries I am using on the page, like Matt Kruse's DynamicOptionList, etc... are interfering with the event propagation, but I don't know for sure if that is the cause. I am moving over from Prototype/Scriptaculous and had this all working without a problem using those libraries. I have posted the code at:http://jsbin.com/atiza Help!
[jQuery] Re: Event Firing Twice
I was wrong about it being fixed if local scripts are not included. It was throwing an error because a script did not exist, which was stopping the event stack, thus preventing the event from firing twice. I am still stumped... my stripped down version, which only contains 3 divs and very little JS code still has the event firing twice. On Nov 6, 11:49 am, n8cshaw [EMAIL PROTECTED] wrote: ok, I stripped a bunch of stuff out and posted a simplified file. This should make it easier to see what is going on. The event is still firing twice. http://www.iaffectproperties.com/code/SearchForm_simple.htm On Nov 6, 11:21 am, MorningZ [EMAIL PROTECTED] wrote: I took a look at the source code in the first link but there's too much to look at, can you be more specific about what div's, what selectors, and what chunk of javascript code is not doing what you expect it to? that would help others help you On Nov 6, 10:22 am, n8cshaw [EMAIL PROTECTED] wrote: weird, works for me... I posted it athttp://www.iaffectproperties.com/code/SearchForm.htm also. All of the images, css and local JS are pointing to localhost and don't work obviously (JQuery and JQuery UI are being loaded from Google)... as a side-effect of that, the event appears to no longer run twice. I guess that tells me that some other script I am using is interfering with the event and causing it to run twice? How can I debug which one and prevent this from happening? I thought JQuery was namespaced to prevent this? On Nov 6, 9:40 am, Liam Potter [EMAIL PROTECTED] wrote: The link you provided doesn't seem to work. n8cshaw wrote: One more interesting note... if the parent div is visible (display: block) when the page loads, I do not see this behavior. It is only when the parent div is not visible (display: none) on page load that it happens. On Nov 6, 9:07 am, n8cshaw [EMAIL PROTECTED] wrote: I am attaching an event to a link. The link lets the user toggle the display of a child div inside of a parent div. However, when the link is clicked, the event is run twice (div opens and then closes immediately). I have tried using .click() and .bind() and it makes no difference which one I use. I have also tried using an anonymous function versus a callback function and there is no difference. I tried using return false and e.stopPropagation() and there is no difference. I have triple-checked that I am not binding the event more than once in my code. The only way I can get it to not fire twice is to put the call in the link's onclick attribute. I have seen several similar posts on this in the group, but I have not seen a reason why this happens or a fool-proof way to stop it from happening. The only thing I can think of is that one of the other JS libraries I am using on the page, like Matt Kruse's DynamicOptionList, etc... are interfering with the event propagation, but I don't know for sure if that is the cause. I am moving over from Prototype/Scriptaculous and had this all working without a problem using those libraries. I have posted the code at:http://jsbin.com/atiza Help!
[jQuery] Re: Toggle and Nested Divs
Thanks Ricardo. I have put the code up at http://jsbin.com/atiza
As for the double quotes on the Velocity call, those are evaluated on
the server prior to being sent to the client, so no worries there.
I appreciate the help with this! It seems like this should be a very
easy thing to do (I did the exact same thing with Prototype/
Scriptaculous on another site). I am not sure what I am missing.
On Nov 5, 7:27 am, ricardobeat [EMAIL PROTECTED] wrote:
Try providing a test page or pasting your code
atwww.pastie.orgorwww.jsbin.com, that way people can actually read it! :)
Can't figure out from this code what might be wrong, it's probably an
event bubbling issue.
And you have src=$content.getURI(images/icon_plus.gif) that will
cause serious parsing errors on the browser, use single quotes inside.
- ricardo
On Nov 4, 7:43 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Hi all.
I have an outer div that contains several child divs (event search
form that lets the user pick dates, categories, etc...). The user can
toggle the outer div and the child divs as well. This all works for me
AS LONG AS the outer div is visible and not able to be toggled. When I
let the user toggle the outer div, when the outer div is toggled to
visible and the user tries to toggle a child div, the child div opens
and then closes again right away.
I believe this is happening because the child div is somehow
inheriting the parent's visibility. I debugged it and
showHideExactDates() is being run twice. So, it seems like it is
starting out as visible, even though it is not visible on the form.
Here is a snippet of the code:
pa href=javascript:void(0) id=searchFormShowHideLink_imageimg
src=$content.getURI(images/icon_plus.gif)
name=searchFormShowHideIcon id=searchFormShowHideIcon border=0
align=left alt=+ //a stronga href=javascript:void(0)
id=searchFormShowHideLink_textSearch Form/a/strong/p
div id=eventSearchFormDiv
pa href=javascript:void(0) id=dateExactShowHideLink_image
title=show/hide exact date form fieldsimg
src=$content.getURI(images/icon_plus.gif)
name=dateExactShowHideIcon id=dateExactShowHideIcon border=0
align=left alt=+ //a a href=javascript:void(0)
id=dateExactShowHideLink_textSpecify Exact Dates/a/p
div id=dateExactDiv style=display: none;
Occurs between input type=text size=3
name=dateRangeStartMonth id=dateRangeStartMonth title=date range
start month value=$!dateRangeStartMonth maxlength=2/
input type=text size=3 name=dateRangeStartDay
id=dateRangeStartDay title=date range start day value=$!
dateRangeStartDay maxlength=2/
input type=text size=5 name=dateRangeStartYear
id=dateRangeStartYear title=date range start year value=$!
dateRangeStartYear maxlength=4a href=javascript:void(0)
id=dateRangeStartCalendarLink title=event range start calendar date
pickerimg src=$content.getURI(images/icon_calendar.gif)
alt=Choose range start date border=0 align=absmiddle/anbsp;
and input type=text size=3 name=dateRangeEndMonth
id=dateRangeEndMonth title=date range end month value=$!
dateRangeEndMonth maxlength=2/
input type=text size=3 name=dateRangeEndDay
id=dateRangeEndDay title=date range end day value=$!
dateRangeEndDay maxlength=2/
input type=text size=5 name=dateRangeEndYear
id=dateRangeEndYear title=date range end year value=$!
dateRangeEndYear maxlength=4a href=javascript:void(0)
id=dateRangeEndCalendarLink title=event range end calendar date
pickerimg src=$content.getURI(images/icon_calendar.gif)
alt=Choose range end date border=0 align=absmiddle/a
/div
/div
function showHideSearchForm() {
jq(#eventSearchFormDiv).toggle(blind, {}, 1000);
}
//add the form submit handler
jq(document).ready(function() {
jq(#searchFormShowHideLink_image).click(showHideSearchForm);
jq(#searchFormShowHideLink_text).click(showHideSearchForm);
});
function showHideExactDates() {
alert(running showHideExactDates());
jq(#dateExactDiv).toggle(blind, {}, 1000);
}
//add the form submit handler
jq(document).ready(function() {
jq(#dateExactShowHideLink_image).click(showHideExactDates);
jq(#dateExactShowHideLink_text).click(showHideExactDates);
jq(#dateRangeStartCalendarLink).datepicker();
jq(#dateRangeEndCalendarLink).datepicker();
});
Help please! I have been banging my head on this now for several
hours!
Thanks.
[jQuery] Re: Toggle and Nested Divs
Well, no one followed up and I kept experimenting and found that if I
put the event call in the onclick attribute of the link, it works as
expected. If I try to bind the onclick event on document ready, it
does not work.
Works: onclick=showHideExactDates();
Does not Work:
jq(#dateExactShowHideLink_image).click(showHideExactDates);
The latter method makes the div open and close immediately when
toggled. I believe there must be some conflict going on between JQuery
and some other library being used on the page, but I don't know that
for certain...
I would still love to know why this is happening if anyone has any
ideas or suggestions.
On Nov 5, 8:40 am, n8cshaw [EMAIL PROTECTED] wrote:
Thanks Ricardo. I have put the code up athttp://jsbin.com/atiza
As for the double quotes on the Velocity call, those are evaluated on
the server prior to being sent to the client, so no worries there.
I appreciate the help with this! It seems like this should be a very
easy thing to do (I did the exact same thing with Prototype/
Scriptaculous on another site). I am not sure what I am missing.
On Nov 5, 7:27 am, ricardobeat [EMAIL PROTECTED] wrote:
Try providing a test page or pasting your code
atwww.pastie.orgorwww.jsbin.com, that way people can actually read it! :)
Can't figure out from this code what might be wrong, it's probably an
event bubbling issue.
And you have src=$content.getURI(images/icon_plus.gif) that will
cause serious parsing errors on the browser, use single quotes inside.
- ricardo
On Nov 4, 7:43 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Hi all.
I have an outer div that contains several child divs (event search
form that lets the user pick dates, categories, etc...). The user can
toggle the outer div and the child divs as well. This all works for me
AS LONG AS the outer div is visible and not able to be toggled. When I
let the user toggle the outer div, when the outer div is toggled to
visible and the user tries to toggle a child div, the child div opens
and then closes again right away.
I believe this is happening because the child div is somehow
inheriting the parent's visibility. I debugged it and
showHideExactDates() is being run twice. So, it seems like it is
starting out as visible, even though it is not visible on the form.
Here is a snippet of the code:
pa href=javascript:void(0) id=searchFormShowHideLink_imageimg
src=$content.getURI(images/icon_plus.gif)
name=searchFormShowHideIcon id=searchFormShowHideIcon border=0
align=left alt=+ //a stronga href=javascript:void(0)
id=searchFormShowHideLink_textSearch Form/a/strong/p
div id=eventSearchFormDiv
pa href=javascript:void(0) id=dateExactShowHideLink_image
title=show/hide exact date form fieldsimg
src=$content.getURI(images/icon_plus.gif)
name=dateExactShowHideIcon id=dateExactShowHideIcon border=0
align=left alt=+ //a a href=javascript:void(0)
id=dateExactShowHideLink_textSpecify Exact Dates/a/p
div id=dateExactDiv style=display: none;
Occurs between input type=text size=3
name=dateRangeStartMonth id=dateRangeStartMonth title=date range
start month value=$!dateRangeStartMonth maxlength=2/
input type=text size=3 name=dateRangeStartDay
id=dateRangeStartDay title=date range start day value=$!
dateRangeStartDay maxlength=2/
input type=text size=5 name=dateRangeStartYear
id=dateRangeStartYear title=date range start year value=$!
dateRangeStartYear maxlength=4a href=javascript:void(0)
id=dateRangeStartCalendarLink title=event range start calendar date
pickerimg src=$content.getURI(images/icon_calendar.gif)
alt=Choose range start date border=0 align=absmiddle/anbsp;
and input type=text size=3 name=dateRangeEndMonth
id=dateRangeEndMonth title=date range end month value=$!
dateRangeEndMonth maxlength=2/
input type=text size=3 name=dateRangeEndDay
id=dateRangeEndDay title=date range end day value=$!
dateRangeEndDay maxlength=2/
input type=text size=5 name=dateRangeEndYear
id=dateRangeEndYear title=date range end year value=$!
dateRangeEndYear maxlength=4a href=javascript:void(0)
id=dateRangeEndCalendarLink title=event range end calendar date
pickerimg src=$content.getURI(images/icon_calendar.gif)
alt=Choose range end date border=0 align=absmiddle/a
/div
/div
function showHideSearchForm() {
jq(#eventSearchFormDiv).toggle(blind, {}, 1000);
}
//add the form submit handler
jq(document).ready(function() {
jq(#searchFormShowHideLink_image).click(showHideSearchForm);
jq(#searchFormShowHideLink_text).click(showHideSearchForm);
});
function showHideExactDates() {
alert(running showHideExactDates());
jq(#dateExactDiv).toggle(blind, {}, 1000);
}
//add the form
