Reprompt Button with Show Function

[torre2011]

So, I am not sure if this is possible...hope it is!  I have a jquery funciton within my report that simply hides and shows a div tag that holds other tree prompts for filters.

What happens is that once a user makes a selection and clicks on the standard report prompt button, the report runs, but the div tag with filters returns to its beginning state which is hidden.  Users have asked if it is possible to allow them to see the changes of the report after clicking the reprompt button but still have the filters pane open.  You all know how users can be  :o

Anyway, I thought if I created my own prompt button with the Reprompt function in there, but also imbed the function to show the div tag once the report is rendered...still would not work!!

So does anyone have any ideas as to how I could accomplish this???

Thanks in advance!

[calson33]

Off the top of my head, you could try this:

Create a hidden text field in the form with a default of something like 'CLOSED'.
When the users expand the div tag, place a value into that text field. Something like 'OPEN'
Onload - Check the value of that hidden text field to see what value is in the field. If OPEN, then open the div, otherwise, leave it closed.

The hidden field should retain its value through the reprompts.

[torre2011]

That may work!  The part I am struggling with is how to write the toggle code for assigning a value to the hidden text prompt based on whether or not the div is open or closed.

So I have a text prompt and I have assigned a name as "id2" and a default value of "CLOSED".  Here is the code I am using for toggling the hide & show of the div tag:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();


j(function(){
// hides the slickbox as soon as the DOM is ready
  j('#Filtersdiv').hide();

j("#clicky").click(function(){
j("#Filtersdiv").animate({width:'toggle'},1000);    
});    
});
</script>


So I started to write the code to pass a value like this:

Code Select Expand


var fW = (typeof getFormWarpRequest == "function" ?
  getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ?
  formWarpRequest_THIS_ : formWarpRequest_NS_ );}

var var1=fW._textEditBoxid2;  //The visible text prompt

but here is where I am stumped???  As to where to place the code??

I do have another html item that I am using as the Reprompt button, i thought I could write the following:

Code Select Expand

<script language="javascript">


function RefreshErrorCheck()
           {
var j= jQuery.noConflict();


j('#Filtersdiv').show();


}
</script>

<button type="button" onclick="RefreshErrorCheck();"> Refresh</button>


But that did not work!!  It still reverted to the closed div state.

Any ideas as to how to get this code to work?

[calson33]

My javascript is a bit rusty, but here goes:

Instead of using a text prompt, use a html item to create your text box
<input type="text" id="divselector" value="CLOSED">

Then in your open/close code:

Code Select Expand

if (j('#divselector').val() == 'CLOSED')
    j('#divselector').val('OPEN');
else
   j('#divselector').val('CLOSED');



Lastly, you have to set something in your onload (or jquery .load() or .ready() ) like this:

Code Select Expand

j(function(){
// hides the slickbox as soon as the DOM is ready
if (j('#divselector').val() == 'CLOSED')
  j('#Filtersdiv').hide();
else
j('#Filtersdiv').show();

j("#clicky").click(function(){
j("#Filtersdiv").animate({width:'toggle'},1000);    
});    
});
</script>

[torre2011]

I think with your help I may be getting close...but after implementing the code, I am still unable to retain the open state after the reprompt action??

So either I am not placing the code for testing the condition of the div in the right place...or...I have to do something more drastic with the code or design.

Getting back to the placement of the if statment...i wonder if we can use some kind of onload event..i know that newer versions of Cognos does not use that anymore...so if someone knows where I can place this code so as to test the condition and then when the reprompt happens it will do what is stated in the function???

I do appreciate all your assistance...THANKS!

[torre2011]

I forgot to add the code I am using to initiate the function for testing the div show/hide state:

Code Select Expand

<script language="javascript">


function RefreshErrorCheck()
           {
var j= jQuery.noConflict();

promptAction('Reprompt');

j(function(){
// hides the slickbox as soon as the DOM is ready
if (j('#divselector').val() == 'CLOSED')
  j('#Filtersdiv').hide();
else
j('#Filtersdiv').show();
   
});

}
</script>

<button type="button" onclick="RefreshErrorCheck();"> Refresh</button>

I will keep digging, but any other suggestions are welcome!

[calson33]

I ran a few tests, and it seems that the reprompt is just a page refresh which causes the text box to lose its value.

The only other way to do this would be to use cookies. check out this post for some tips:
http://stackoverflow.com/questions/11841771/keep-a-javascript-variables-value-after-a-page-refresh

[torre2011]

Ok...so after extensive research into using jquery cookies, I have written the following code, but I am stumped as to how to get the cookie value tested so that I can keep the div tag open.  Maybe someone with a little more experience with cookies could assist me here??

Here is what I have in an HTML item:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(function(){
// hides the slickbox as soon as the DOM is ready
  j('#yellow_box').hide();
j.cookies.set( 'sessid', 'CLOSED');

j("#clicky").click(function(){
j("#yellow_box").animate({width:'toggle'},1000);    

if (j.cookies('sessid') == 'CLOSED')
   j.cookies.set( 'sessid', 'OPEN');
else
j.cookies.set( 'sessid', 'CLOSED');


});
   
});
</script>


Also within the same HTML item seen above I have this code which I am using to assign the cookie value to the input box value:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(document).ready(function() {

j('#yellow_box').corner();

var sessid = j.cookies.get( 'sessid' );

j('#divselector').val(sessid);


   
});

</script>


Then in a separate HTML item I am using this code for the input box:

Code Select Expand

<input type="text" id="divselector" value="CLOSED">

And then finally I have this code within another HTML item for the hide/show div tag:

Code Select Expand

<div id="yellow_box">This is yellow</div>

I think this is the closest I have come to accomplishing this...so anyone who would like to assist me in getting over the finish line...I WELCOME it  ;D

[calson33]

Made some changes to your code:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(function(){
// hides the slickbox as soon as the DOM is ready
// First thing we have to do is to check the cookie to see if a value has been set. This will happen after a reprompt
if (j.cookies('sessid') == 'CLOSED' or(j.cookies('sessid'))
{
    j('#yellow_box').hide();
    j.cookies.set( 'sessid', 'CLOSED'); // We want to set it in case it is empty - i.e. brand new
}
else
   j('#yellow_box').show(); // No need to check the cookie since it will have to be OPEN.


j("#clicky").click(function(){
j("#yellow_box").animate({width:'toggle'},1000);    

});
   
});
</script>



You won't need the text box for this so you can delete this part.

Code Select Expand

<input type="text" id="divselector" value="CLOSED">


Then for your open close button, you will need some code like this:

Code Select Expand


if (j.cookies('sessid') == 'CLOSED' or (j.cookies('sessid'))
{
    j('#yellow_box').show();  // If closed, we want to open it.
    j.cookies.set( 'sessid', 'OPEN');
}
else
{
j('#yellow_box').hide(); // if open, we want to close it
j.cookies.set( 'sessid', 'CLOSED');
}



Hope that helps a bit..

[torre2011]

I have attempted to implement your code changes...but for some reason I keep getting an error - Expected ')'

I have checked and can not seem to see why this is erring off??  I am a novice at javascript or jquery, so maybe it is my inexperience in identifying this....any ideas as to why this could be happening??

Thanks again for your help..it is greatly appreciated!!

[calson33]

Ah.. forgot to close the if statement:
if (j.cookies('sessid') == 'CLOSED' or(j.cookies('sessid')))


Edit: Both Chrome and Firefox have good debugging tools for javascript. Check Firebug for Firefox. Chrome has stuff built in under the tools section

[torre2011]

Yea...i actually saw that but after I added the parantheses...i get the error - Function expected???

Again not sure why that is causing it...from what I have seen on my google search, it may have something to do with a naming conflict...i am still researching that.

If you see it before me...please let me know ....THANKS!!

[torre2011]

So I was able to adjust my original code to work as seen below:

Here i added this code to check the cookie by passing the value that was stored and sending it to the input box value so that I can test it.  I would have preferred your method of just testing the cookie, but still received error??

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(function(){

var sessid1 = j.cookies.get( 'sessid' );
j('#divselector').val(sessid1);

if(sessid1=='CLOSED') {
j('#Filtersdiv').hide();
} else {
j('#Filtersdiv').show();
}
//alert(j.cookies.get( 'sessid' ));

});

</script>



Then I use this code to toggle the open and closed state of the div tag:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(function(){
// hides the slickbox as soon as the DOM is ready
j('#Filtersdiv').hide();
//j.cookies.set( 'sessid', 'CLOSED');

j("#clicky").click(function(){
j("#Filtersdiv").animate({width:'toggle'},1000);    


var sessid1 = j.cookies.get( 'sessid' );

if(sessid1=='CLOSED') {
j.cookies.set( 'sessid', 'OPEN');
} else {
j.cookies.set( 'sessid', 'CLOSED');

}
var sessid2 = j.cookies.get( 'sessid' );

j('#divselector').val(sessid2);

});
   
});
</script>


Then finally i had to do almost the same thing as the first script to actually keep the right state once they are finished:

Code Select Expand

<script type="text/javascript">

var j= jQuery.noConflict();

j(document).ready(function() {

var sessid2 = j.cookies.get( 'sessid' );

j('#divselector').val(sessid2);

if(sessid2=='CLOSED') {
  j('#Filtersdiv').hide();
} else {
  j('#Filtersdiv').show();
}

   
});

</script>


So this works for the user while they are in the report...but if they were to close the report while the div tag was in an 'OPEN' state, then the next time they opened it, the cookie 'sessid' would have a value of 'OPEN' and would show the div tag, rather than reset to 'CLOSED'.  I have tried a variety of things, but I believe the loading of the report is using the same script as the reprompt.  So unless I can figure out how to utilize a separate OnLoad function that acts differently than the Reprompt,,,i am stuck!!!  :(

Maybe someone smarter than me could assist  ;)

[calson33]

You could have the cookie expire in 10/15 minutes:
http://stackoverflow.com/questions/1830246/how-to-expire-a-cookie-in-30-minutes-using-jquery

[torre2011]

Yes...that is a cool feature...but again it does not solve my issue if the user closes the report and opens it immediatly, it will show or hide based on that last cookie state.

So I am still searching for a ingenius way of either clearing the cookies when the report closes, or separate the execution of the scripts between onLoad and Reprompt????

Not sure if any of the above is possible...but I do not like being told it is not  ;D

[calson33]

Well, the only thing I can think of which might help would be to clear out the cookie when the finish button is pressed.