[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:
>
> > > > > src="$content.getURI("images/icon_plus.gif")"
> > > name="searchFormShowHideIcon" id="searchFormShowHideIcon" border="0"
> > > align="left" alt="+" /> > > id="searchFormShowHideLink_text">Search Form
>
> > >
> > >> > title="show/hide exact date form fields"> > > src="$content.getURI("images/icon_plus.gif")"
> > > name="dateExactShowHideIcon" id="dateExactShowHideIcon" border="0"
> > > align="left" alt="+" /> > > id="dateExactShowHideLink_text">Specify Exact Dates
> > >
> > > Occurs between > > name="dateRangeStartMonth" id="dateRangeStartMonth" title="date range
> > > start month" value="$!dateRangeStartMonth" maxlength="2">/
> > > > > id="dateRangeStartDay" title="date range start day" value="$!
> > > dateRangeStartDay" maxlength="2">/
> > > > > id="dateRangeStartYear" title="date range start year" value="$!
> > > dateRangeStartYear" maxlength="4"> > > id="dateRangeStartCalendarLink" title="event range start calendar date
> > > picker"> > > alt="Choose range start date" border="0" align="absmiddle">
> > > and > > id="dateRangeEndMonth" title="date range end month" value="$!
> > > dateRangeEndMonth" maxlength="2">/
> > > > > id="dateRangeEndDay" title="date range end day" value="$!
> > > dateRangeEndDay" maxlength="2">/
> > > > > id="dateRangeEndYear" title="date range end year" value="$!
> > > dateRangeEndYear" maxlength="4"> > > id="dateRangeEndCalendarLink" title="event range end calendar date
> > > picker"> > > alt="Choose range end date" border="0" align="absmiddle">
> > >
> > >
>
> > > 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").datep
[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:
>
> > > src="$content.getURI("images/icon_plus.gif")"
> > name="searchFormShowHideIcon" id="searchFormShowHideIcon" border="0"
> > align="left" alt="+" /> > id="searchFormShowHideLink_text">Search Form
>
> >
> >> title="show/hide exact date form fields"> > src="$content.getURI("images/icon_plus.gif")"
> > name="dateExactShowHideIcon" id="dateExactShowHideIcon" border="0"
> > align="left" alt="+" /> > id="dateExactShowHideLink_text">Specify Exact Dates
> >
> > Occurs between > name="dateRangeStartMonth" id="dateRangeStartMonth" title="date range
> > start month" value="$!dateRangeStartMonth" maxlength="2">/
> > > id="dateRangeStartDay" title="date range start day" value="$!
> > dateRangeStartDay" maxlength="2">/
> > > id="dateRangeStartYear" title="date range start year" value="$!
> > dateRangeStartYear" maxlength="4"> > id="dateRangeStartCalendarLink" title="event range start calendar date
> > picker"> > alt="Choose range start date" border="0" align="absmiddle">
> > and > id="dateRangeEndMonth" title="date range end month" value="$!
> > dateRangeEndMonth" maxlength="2">/
> > > id="dateRangeEndDay" title="date range end day" value="$!
> > dateRangeEndDay" maxlength="2">/
> > > id="dateRangeEndYear" title="date range end year" value="$!
> > dateRangeEndYear" maxlength="4"> > id="dateRangeEndCalendarLink" title="event range end calendar date
> > picker"> > alt="Choose range end date" border="0" align="absmiddle">
> >
> >
>
> > 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
Try providing a test page or pasting your code at www.pastie.org or
www.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:
>
> src="$content.getURI("images/icon_plus.gif")"
> name="searchFormShowHideIcon" id="searchFormShowHideIcon" border="0"
> align="left" alt="+" /> id="searchFormShowHideLink_text">Search Form
>
>
> title="show/hide exact date form fields"> src="$content.getURI("images/icon_plus.gif")"
> name="dateExactShowHideIcon" id="dateExactShowHideIcon" border="0"
> align="left" alt="+" /> id="dateExactShowHideLink_text">Specify Exact Dates
>
> Occurs between name="dateRangeStartMonth" id="dateRangeStartMonth" title="date range
> start month" value="$!dateRangeStartMonth" maxlength="2">/
> id="dateRangeStartDay" title="date range start day" value="$!
> dateRangeStartDay" maxlength="2">/
> id="dateRangeStartYear" title="date range start year" value="$!
> dateRangeStartYear" maxlength="4"> id="dateRangeStartCalendarLink" title="event range start calendar date
> picker"> alt="Choose range start date" border="0" align="absmiddle">
> and id="dateRangeEndMonth" title="date range end month" value="$!
> dateRangeEndMonth" maxlength="2">/
> id="dateRangeEndDay" title="date range end day" value="$!
> dateRangeEndDay" maxlength="2">/
> id="dateRangeEndYear" title="date range end year" value="$!
> dateRangeEndYear" maxlength="4"> id="dateRangeEndCalendarLink" title="event range end calendar date
> picker"> alt="Choose range end date" border="0" align="absmiddle">
>
>
>
> 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.
