Link to home
Start Free TrialLog in
Avatar of northlandadv
northlandadvFlag for United States of America

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...
Avatar of oleber
oleber
Flag of Portugal image

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

Open in new window

Avatar of northlandadv

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!
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.
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=....).
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.
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


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

ASKER CERTIFIED SOLUTION
Avatar of bugada
bugada
Flag of Italy image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Looks nice  :)

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

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  :)
Set another session cookie to track if the box has been displayed or closed.
I have no idea how to do this.
Can anyone help answer this?
Hello?
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);
Sweet!  Thank you..
Had to correct a few items, but it resolved my issue and I couldn't have done it without the help.  Thanks!