northlandadv
asked on
Variable display of ID based on external text file using JQuery
Hello..
So this might sound like a strange request, but it's a convoluted story and would be too long to tell!
Here's what I'm looking for:
1. I have a message that appears at the top of an application page, and the user can click "hide this message" so it goes away. Here's the basic code in the HTML:
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Something great</a></h5>
<p>blah blah blah message</p>
I'm using JQuery to hide the message when the link is clicked. Not a problem, works great
2. I don't want the message to appear all the time, but only when a specific text file is present in the root directory. The text file will simply contain the message. If there is no file present (like message.txt) then the id a-hide should not appear at all. If a message IS present, then the contents of the text file should be shown in a-hide.
I know it would seem to be simpler to have the application do this, but with all the QA required for small changes it's much easier to use a text file outside the app that can be easily updated, and pulled into place using JS.
I hope this makes sense!
Important:
I currently pull in a main.js file and a jquery.js file so any additional JS would have to go in one of these files. Please keep in mind that I'm not a JS guru, so any answer you give should be simple, and include a simple solution I can copy/paste into my files (and include explicit instructions.)
Thank you for any help you can offer...
So this might sound like a strange request, but it's a convoluted story and would be too long to tell!
Here's what I'm looking for:
1. I have a message that appears at the top of an application page, and the user can click "hide this message" so it goes away. Here's the basic code in the HTML:
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Something great</a></h5>
<p>blah blah blah message</p>
I'm using JQuery to hide the message when the link is clicked. Not a problem, works great
2. I don't want the message to appear all the time, but only when a specific text file is present in the root directory. The text file will simply contain the message. If there is no file present (like message.txt) then the id a-hide should not appear at all. If a message IS present, then the contents of the text file should be shown in a-hide.
I know it would seem to be simpler to have the application do this, but with all the QA required for small changes it's much easier to use a text file outside the app that can be easily updated, and pulled into place using JS.
I hope this makes sense!
Important:
I currently pull in a main.js file and a jquery.js file so any additional JS would have to go in one of these files. Please keep in mind that I'm not a JS guru, so any answer you give should be simple, and include a simple solution I can copy/paste into my files (and include explicit instructions.)
Thank you for any help you can offer...
So you are needing some sort of timer that times to times tries to load your file.
If your needs are to check the text file at every page access you can use an AJAX call using jQuery, retrieve the text to be displayed and show / hide the box depending on the content.
$.ajax({
url : "textfile.txt",
success : function (data) {
/* insert yor code here to hide show the box */
}
});
ASKER
@oleber...not the right idea at all
@bugada....that sounds like the idea, and looks like it would work.
The part that I still need is a way to display the ID in the page.
For example, I can use your code, and insert my hide/show box. Then I'd need a way to specify which page ID gets shown if the text file is present. So I guess I'd need something that specifies which ID in the HTML is shown on success.
Also, I forgot to mention I really need to make sure this is only shown once per session. A session cookie will already be set when users hit this page. The cookie name is "wosid" and is session based.
Thanks again for your help!
@bugada....that sounds like the idea, and looks like it would work.
The part that I still need is a way to display the ID in the page.
For example, I can use your code, and insert my hide/show box. Then I'd need a way to specify which page ID gets shown if the text file is present. So I guess I'd need something that specifies which ID in the HTML is shown on success.
Also, I forgot to mention I really need to make sure this is only shown once per session. A session cookie will already be set when users hit this page. The cookie name is "wosid" and is session based.
Thanks again for your help!
ASKER
Wait, there does seem to be something missing there: the text file does not get inserted as the message.
Here's the current code (HTML) that show and hides:
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Message Title</a></h5>
<p>Message Content</p>
It loads normally as part of the HTML. The "a-hide" ID controls the hiding.
I'm going to add another ID so I can show/hide the entire message area:
<div id="message>
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Message Title</a></h5>
<p>Message Content</p>
</div>
Coming from my main.js file for the hide effect:
$("#a-hide").click(functio n () {
$("div.bottom-right").slid eUp(800);
$("div.message-box").slide Up(900);
return false;
});
SOOOOO........
1. The .txt file would need to get loaded as the "message content"
2. IF there is no text file present, then the entire div "message" should be blank
3. IF there IS a .txt file present, the div "message" should load normally, and the .txt file should be inserted into the message content area
Of course, there might be a better way to do this, but this is just my suggestion based on what I need it to do.
Here's the current code (HTML) that show and hides:
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Message Title</a></h5>
<p>Message Content</p>
It loads normally as part of the HTML. The "a-hide" ID controls the hiding.
I'm going to add another ID so I can show/hide the entire message area:
<div id="message>
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Message Title</a></h5>
<p>Message Content</p>
</div>
Coming from my main.js file for the hide effect:
$("#a-hide").click(functio
$("div.bottom-right").slid
$("div.message-box").slide
return false;
});
SOOOOO........
1. The .txt file would need to get loaded as the "message content"
2. IF there is no text file present, then the entire div "message" should be blank
3. IF there IS a .txt file present, the div "message" should load normally, and the .txt file should be inserted into the message content area
Of course, there might be a better way to do this, but this is just my suggestion based on what I need it to do.
What do you mean by ID?
I suppose you have to do that: load the file, on success handler retrieve the data, copy it into the message <p>, then show your box using its own id.
And you can check the cookie presence by
1) installing the jQuery cookie plugin and suing it (suggested)
2) accessing the document.cookies and looking for your coupled values (wosid=....).
I suppose you have to do that: load the file, on success handler retrieve the data, copy it into the message <p>, then show your box using its own id.
And you can check the cookie presence by
1) installing the jQuery cookie plugin and suing it (suggested)
2) accessing the document.cookies and looking for your coupled values (wosid=....).
ASKER
One more thing. I tried inserting the Ajax but couldn't get it to work at all. I really need something I can just copy and paste from here; a total solution with all the correct syntax, colons, parenthesis or I'm liable to screw up :) Keep in mind that I have both a jquery js file and a separate js file for other stuff.
ASKER
I have the Jquery cookie plugin installed, so that's good. It's already being used to detect a specific cookie, and display a username if found.
What I mean by "ID":
<div id="message>
ID=Message
$('#message').append('blah blah blah')
I think that's the right syntax but I'm not sure
What I mean by "ID":
<div id="message>
ID=Message
$('#message').append('blah
I think that's the right syntax but I'm not sure
Ok your last post removed clouds from my mind...
add and id to the <P> element the use the code below
add and id to the <P> element the use the code below
// add an ID to the P elem, and make the div hidden by default
<div id="message style="display:none">
<a id="a-hide" class="hide-message" href="#">Hide this message</a>
<h5><a href="#">Message Title</a></h5>
<p id="content">Message Content</p>
</div>
// Check cookie and execute this code only if cookie is not found
if (document.cookie.indexOf("wosid=") == -1) {
$.ajax({
url : "textfile.txt",
success : function (data) {
$("content").html(data);
$("message").show();
}
});
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Looks nice :)
I'll give it a shot soon and see how it goes. Thank you!
I'll give it a shot soon and see how it goes. Thank you!
ASKER
Looks like I got it working, but you had several errors I was able to fix. I guess I must be learning!
Thank you for your help..
The final looked like:
Thank you for your help..
The final looked like:
SCRIPT:
<script type="text/javascript">
if (document.cookie.indexOf("wosid=") == -1) {
$.ajax({
url : "message.txt",
success : function (data) {
$("#messagetxt").html(data);
$("#message").show();
}
});
}
</script>
HTML:
<div id="message" style="display:none;">
<div id="hide-box" class="message-box"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><a id="a-hide" class="hide-message" href="#">Hide this message</a>
<div id="messagetxt"></div>
</div></div></div></div></div>
</div>
TEXT FILE (message.txt):
<h5><a href="#">Insert message title here</a></h5>
<p>Insert message here</p>
ASKER
Argggg.....just thought of a problem, but I think it's an easy fix:
This message is intended to be shown on login (Cookie is set, arg!), then it should not be shown again after it is dismissed.
The ONLY time this message is shown is on the main page after login, but that's the problem: the cookie will be set and it won't be shown!
Soooo..here's the resolution I see:
1. If the cookie is SET, it should show until it's dismissed (<a id="a-hide" class="hide-message" href="#">Hide this message</a>)
2. It should persistently show until it is dismissed
3. If the cookie is set (and it will be every time) then it should never try to show again after being dismissed.
Sorry about that. It's all just now coming clear while working on it :)
This message is intended to be shown on login (Cookie is set, arg!), then it should not be shown again after it is dismissed.
The ONLY time this message is shown is on the main page after login, but that's the problem: the cookie will be set and it won't be shown!
Soooo..here's the resolution I see:
1. If the cookie is SET, it should show until it's dismissed (<a id="a-hide" class="hide-message" href="#">Hide this message</a>)
2. It should persistently show until it is dismissed
3. If the cookie is set (and it will be every time) then it should never try to show again after being dismissed.
Sorry about that. It's all just now coming clear while working on it :)
Set another session cookie to track if the box has been displayed or closed.
ASKER
I have no idea how to do this.
ASKER
Can anyone help answer this?
ASKER
Hello?
ASKER
Bueller?
well if you have installed the Cookie plugin for jQuery, you can set another cookie where you like:
$.cookie('the_name', 'the_value');
The you can retrieve it with
$.cookie('the_name');
To delete it
$.cookie('the_name', null);
$.cookie('the_name', 'the_value');
The you can retrieve it with
$.cookie('the_name');
To delete it
$.cookie('the_name', null);
ASKER
Sweet! Thank you..
ASKER
Had to correct a few items, but it resolved my issue and I couldn't have done it without the help. Thanks!