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...
northlandadvAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

oleberCommented:
So you are needing some sort of timer that times to times tries to load your file.

0
bugadaCommented:
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 */
   }
});

Open in new window

0
northlandadvAuthor Commented:
@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!
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

northlandadvAuthor Commented:
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(function () {
          $("div.bottom-right").slideUp(800);
          $("div.message-box").slideUp(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.
0
bugadaCommented:
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=....).
0
northlandadvAuthor Commented:
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.
0
northlandadvAuthor Commented:
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


0
bugadaCommented:
Ok your last post removed clouds from my mind...
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();     
     }
  });
}

Open in new window

0
bugadaCommented:
Using the jquery cookie plugin



if ($.cookie("wosid")) {
   $.ajax({
      url : "textfile.txt",
      success : function (data) {
         $("content").html(data);
         $("message").show();     
     }
  });
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
northlandadvAuthor Commented:
Looks nice  :)

I'll give it a shot soon and see how it goes.  Thank you!
0
northlandadvAuthor Commented:
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:
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>

Open in new window

0
northlandadvAuthor Commented:
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  :)
0
bugadaCommented:
Set another session cookie to track if the box has been displayed or closed.
0
northlandadvAuthor Commented:
I have no idea how to do this.
0
northlandadvAuthor Commented:
Can anyone help answer this?
0
northlandadvAuthor Commented:
Hello?
0
northlandadvAuthor Commented:
Bueller?
0
bugadaCommented:
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);
0
northlandadvAuthor Commented:
Sweet!  Thank you..
0
northlandadvAuthor Commented:
Had to correct a few items, but it resolved my issue and I couldn't have done it without the help.  Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.