Set a flag in the cookie and when the page loads check that cookie for the state

I have this javascript function which I need somehow to be remembered by cookies.

function load(){

if (window.frames[0].document.getElementById(‘applications’))
{
var n=str.replace(“Login”,“Logout”);
document.getElementById(‘common’).href=‘…/css/common2.css’;}}

I understand I need to set a flag in the cookie and when the page loads check that cookie for the state.

So, cookies script is :

function setCookie(c_name, value, exdays) {
var exdate = new Date();
if (exdays) exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays) ? ‘; expires=’ + exdate.toUTCString() : ‘’);
document.cookie = c_name + “=” + c_value;
}

function getCookie(name) {
var re = new RegExp(name + “=([^;,]+)”);
var value = re.exec(document.cookie);
return (value !== null) ? unescape(value[1]) : null;
}
I have problems setting the flag in the cookie and check for cookie state.

if (window.frames[0].document.getElementById(‘applications’)
&& !getCookie(‘authentication’))
{
var n=str.replace(“Login”,“Logout”);
document.getElementById(‘common’).href=‘…/css/common2.css’;
setCookie(‘authentication’,‘1’,1);}

Well the cookies function will work properly.

Some issues I see that might be causing the problem are:

[list][]Are you using frames? Really you shouldn’t, but the non-cookie part of your script seems to currently expect that.
[
]Do you have an element with an id of “applications” and one with “common” ? The script will fail if those don’t exist.
[*]What is the str variable, and where does it come from?[/list]

None of these questions would be needed if you can provide us with a test page that demonstrates the problem that you are having.

Unfortunately I must use iframe. My script checks if people are logged in iframe(hidden), if they are logged ‘‘applications’’ id is found. After that it changes some parent page elements, like css file and login in logout. All id exists. ‘str’ variable replaces string from parent page. The script works fine but it shows how the changes are taking place every time I refresh the page. So I need cookies to remember that and keep it that way 24h or until logout is pushed .

What is the trouble that you are having then in relation to the cookie?

Well, I need cookies to remember that the script has changed those parent elements and keep it that way everytime people load the page for any reason. Right now everytime I load the page its shows for 1 second how login switch to logout, etc. Imagine you login in this forum here and everytime you load the page it shows first login, and it changes in logout before your eyes. The same thing happent with menu bar which is more nasty.

For that reason I need a working cookie script. Right now cookies does not remember the changes ad takes place everytime I load the page which looks very bad because when page loads you see normal parent page first than it changes.

When people login, isn’t it the server that should know whether a person is logged in or not? Because the normal thing to do is for the server itself to determine which of the login/logout is active at the time of loading.

Or to ask this in another way - how are you intending for cookies to help you with your problem?

Very good question. It’s still on my mind since I had this issue. I didn’t find the answer yet. That is why I need advice for this matter.

Well, short story long is that I have brought a php job software script which has a very ugly default theme. The design in build in Smarty which is very limited in terms of web design and hard to do it for my experience. So, I decide it to have my own HTML awesome design until I build some portofolio and I will afford to pay someone to create a new design for php script. So, I have to use one single iframe (php script) with job results/login/my account, and one to check login status (my problem).

From what I understand from you I need a server side script to do what I need … ? I have no experience with this problems, I just brought one html template and modified search form to search in iframe and post results there.
So maybe you can help me to do it right.

What I’m trying to do is to gain an understanding from you about the problem that is wanting to be solved.

Is the problem related to how some of the existing javascript code “shows how the changes are taking place every time I refresh the page” ?

If the scripting code is requesting information from the server and then using that information to change the login to logout - what is stopping the server from performing that check when the server originally delivers the page?

Alternatively, another solution is to use scripting to prevent login or logout from being shown, until it can be determined which one should be shown.

There are many potential solutions, and each has their own sets of pros and cons. The best solution is one that doesn’t involve scripting at all - that’s the most robust and stable solution, which is the one mentioned just above involving the server.

I have sent you PM with acces details.

One thought from my perspective is you could add a variable to localstorage that’s checked when the user loads the page instead of a cookie. I always prefer localstorage to cookies but maybe I’m wrong. But it would only be a couple lines of code to set and retrieve. Localstorage works on my phones/tablets as well just fine.

And what will be the code for my case ?

Basic useage is:


var c_name = 'userjim'; //I just set this as an example to give it a value for the example

function setCookieReplacement (c_name, value) {  
	if(localStorage.c_name){
		console.log("there's a value: "+ localStorage.c_name); //second time it runs this fires
	} else {
		localStorage.c_name = c_name;
	}
}
setCookieReplacement (c_name, 'userbob');

Once it’s assigned you can just reference localStorage.keyname

So

 var mydiv= document.getElementById('application').innerHTML += localStorage.c_name; //userjim

I won’t personally be able to investigate things until later on, but I am suspicious about the function being called load

Is the function actually being run during the onload event? That would explain why you’re seeing that delay you’re experiencing.

When you have time please check PM (Check strings.js for script where work is need it).

I have tried this cookies script too with no results(it uses jquery.cookie.js plugin) :

var eventsFired = ($.cookie(‘eventsFired’) != null)
? $.cookie(‘eventsFired’)
: 0;

function load(){

if (eventsFired == 0){

if (window.frames[0].document.getElementById(‘applications’))
{
var str=document.getElementById(“tst”).innerHTML;
var n=str.replace(“Login”,“Delogare”);
document.getElementById(“tst”).innerHTML=n;
document.getElementById(‘common’).href=‘…/jobler.base/site/css/commonlogout.css’;
document.getElementById(‘tst’).title =‘logout’;
document.getElementById(‘tst’).href=‘logout’;
document.getElementById(‘prt’).href=‘…/profil/cont.html?refresh’;
eventsFired++;
$.cookie(‘eventsFired’, eventsFired);
}}}

Also this for localstorage:

function load() {
var eventsFired = localStorage.getItem(‘fired’);
if (eventsFired != ‘1’){
if (window.frames[0].document.getElementById(‘applications’))
{
var str=document.getElementById(“tst”).innerHTML;
var n=str.replace(“Login”,“Delogare”);
document.getElementById(“tst”).innerHTML=n;
document.getElementById(‘common’).href=‘…/jobler.base/site/css/commonlogout.css’;
document.getElementById(‘tst’).title =‘logout’;
document.getElementById(‘tst’).href=‘logout’;
document.getElementById(‘prt’).href=‘…/profil/cont.html?refresh’;
localStorage.setItem(‘fired’, ‘1’);
}
}
}

Yep, as I thought. You have an onload event that’s being used to run your script.


<iframe id="myiframe" style="display:none" onload="load()" name="myiframe" src="../../data/system/applications/view/" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

Cookies are exactly the wrong solution for you.

Instead, you can use setTimeout to check for when the iframe is available, allowing you to run that function much sooner than when the onload event triggers.
You should be able to do that by placing this script below the end of your load function.


function load() {
    ...
}

function onIframeReady() {
    var iframe = $('#myiframe'),
        el;
    if (iframe) {
        el = $('body', iframe.contents());
        if (el.length === 1) {
            load();
            return;
        }
    }
    setTimeout(onIframeReady, 50);
}

onIframeReady();

Just make sure to remove the onload event from the existing iframe:


<iframe id="myiframe" style="display:none" [s][color="red"]onload="load()"[/color][/s] name="myiframe" src="../../data/system/applications/view/" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

I did as you said. The code its in strings.js . Because I remove it onload=“load()” from iframe, now it does not change the parent page elements when ‘applications’ id is found on iframe.

This is where being able to test on a local version would be highly useful, but that is not something that you have been able to provide.

I see that there is a correction to be made to the above code, where ‘myiframe’ should be ‘#myiframe’ instead


var iframe = $('#myiframe'),

What I need is for local storage or cookies to remember changes and keep it that way every time page loads. You are right, onload=“load()” was triggered every time iframe loaded, so I can remove that and use bellow script to delay 3 seconds the script execution. But after all I need to solve my particular problem by saving to local storage the changes.

How can I fix bellow script to save session on local storage and never trigger the script if was executed because it seems it didn’t work.

setTimeout(function load() {

var eventsFired = localStorage.getItem(‘fired’);
if (eventsFired != ‘1’){
document.getElementById(‘common’).href=‘…/css/commonlogout.css’;
document.getElementById(‘tst’).title =‘logout’;
localStorage.setItem(‘fired’, ‘1’);
}
}
}, 3000);