JS Code Works on Button Click but not on Page Load or Show

This forum contains topics that were moved from Get Satisfaction
Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Can someone please advise why my code below works when I trigger it with a button click but not when I try to trigger it on page load/show? I have also tried on service success/completion but it won't work. I think it is something to do with my use of $(this).closest, but I am not sure what to change it to. Any advice would be greatly appreciated as I have spent two days on this to no avail.

code
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sun&quot
weekday[1] = "Mon&quot
weekday[2] = "Tue&quot
weekday[3] = "Wed&quot
weekday[4] = "Thu&quot
weekday[5] = "Fri&quot
weekday[6] = "Sat&quot

var currDoW = weekday[d.getDay()];

Apperyio("collSetGrpMembers").children().each(function() {
var collHdr = $(this).closest('[data-role="collapsible"]').find('[name="collBlockHdrGrpMembers"]');
var collHdrText = collHdr.text();
var DoW = collHdrText.substring(0, 3);

if (DoW == currDoW) {
collHdr.trigger('expand');

}

}
);

/code

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Evgene Karachevtsev »

Hello Louis,

Could you please clarify do you have any errors in a browser console if you use this code for a button click event? Also please check that other codes don't block this one.

Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Hi Evgene, sorry, I should have added that the code does run but instead of one collapsible block (the one for the current day of the week) expanding like I want it to, all the blocks open. When I look in the console, I can see that my collHdr variable is being set to some property, but I'm not sure what it is. Also the DoW variable is being set for each collapsible block in turn and when a match is found it doesn't stop, it goes to the next. I need to ensure that the expand method is only called for the matched block. If I knew how, if try using some dirty if loop, but the interesting thing is that as I said before, the exact same code works fine when I call it from a button. This is why I think that the this.closest selector is working differently in both cases.

Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Evgene, a little more information after stepping through the code - the behaviour is exactly the same up to a point , whether I initiate the code from a button or on success/completion of the service loading the page. What happens in the latter case however is that the collapsible block I want expanded is initially expanded but then closes after all the set's children have been iterated through.

So it seems something somewhere is closing all collapsible blocks after my code has run. What could this be?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

JS Code Works on Button Click but not on Page Load or Show

Post by Yurii Orishchuk »

Hi Louis,

As i can see this code should work only with button inside collapsible.

It works like - get button, then search nearest collapsible parent.

Thus this code will not work in other place than this button "click" event handler.

You can try to specify button name (if you have just single button on the page).

Example:

precode

var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sun&quot
weekday[1] = "Mon&quot
weekday[2] = "Tue&quot
weekday[3] = "Wed&quot
weekday[4] = "Thu&quot
weekday[5] = "Fri&quot
weekday[6] = "Sat&quot

var currDoW = weekday[d.getDay()];

Apperyio("collSetGrpMembers").children().each(function() {

//Where "buttonName" is your button component name.
var button = Apperyio("buttonName");

var collHdr = $(button).closest('[data-role="collapsible"]').find('[name="collBlockHdrGrpMembers"]');
var collHdrText = collHdr.text();
var DoW = collHdrText.substring(0, 3);

if (DoW == currDoW) {
collHdr.trigger('expand');

}

}
);

/code/pre

Regards.

Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Hi Yurii,

Thanks but I think you may have misunderstood me. My code did already work in a button outside the collapsible. What I want is for the code to run and work without having to click on a button - so on page show/load or on successful completion of the service that populates the page. Please suggest a tweak to the code to make this work.

Thanks,
Louis

Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Hi Yurii,

Actually, my code was always fine. It turns out that I just needed to set the collapsible block to be collapsed by default (in the properties pane of the design view).

Thanks for taking the time anyway.

Now please just help me with my other case as I'm really stuck on that one :-).

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

JS Code Works on Button Click but not on Page Load or Show

Post by Alena Prykhodko »

Hello Louis,

Please clarify, do you mean this case?
[quote:]What I want is for the code to run and work without having to click on a button - so on page show/load or on successful completion of the service that populates the page. Please suggest a tweak to the code to make this work.[/quote]

Louis Adekoya
Posts: 0
Joined: Sun Nov 17, 2013 10:51 pm

JS Code Works on Button Click but not on Page Load or Show

Post by Louis Adekoya »

Hi Alena,

No, it's okay. As I stated above, my original code (posted above) now works, after I set the collapsible set to be collapsed by default. Thanks.

Louis

Post Reply