One widget won’t work

Where did you get the custom HTML from?

One other way I can think of is using a plugin for that rather than using custom markup. ??

I’ve had the custom HTML for years created by a friend. The reason I’d rather use this instead of a plugin is because it allows me to hand-select the content that’s displayed. I don’t have control over them if it’s a plugin.

Are you able to share that code?

Or are you able to provide steps used to replicate. I really want to help solve this.

<div id='msgHere'>
...loading today's quote</div>

<script type='text/javascript'>

var xmlhttp = null;

function AjaxRequest(url){
  if(xmlhttp != null){
    if(xmlhttp.abort)
      xmlhttp.abort();
    xmlhttp = null;
  };
  if(window.XMLHttpRequest) // good browsers
    xmlhttp=new XMLHttpRequest();
  else if(window.ActiveXObject) // IE
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  if(xmlhttp == null)
    return null;

  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);

  if(xmlhttp.status >= 200 && xmlhttp.status < 300)// 2xx is good enough
    return xmlhttp.responseText;
  else
    return null;
}

function clearEle(element){
  while(element.hasChildNodes())
    element.removeChild(element.firstChild);
}

window.onload = function(){
  var el, msg, date1, date2, txt = AjaxRequest('/files/quotes.txt');
  date2 = new Date();
  date2.setFullYear(2011);// year to begin
  date2.setMonth(5);// take 1 from the month number
  date2.setDate(6); // date of month

  if(txt == null)
    msg = 'page not found or Ajax not supported by your browser.';
  else{
    msg = txt;
  }
  date1 = new Date();

  txt = msg.split("\n");
  date1 = Math.floor(date1.getTime() / (24*60*60*1000));
  date2 = Math.floor(date2.getTime() / (24*60*60*1000));

  if(date1 > date2){// swap them around? -- replace with another method?
    var tmp = date1;
    date1 = date2;
    date2 = tmp;
  };

  el = document.getElementById('msgHere');

  clearEle(el);
  el.appendChild( document.createTextNode(txt[(date2-date1)%txt.length]));
}

</script> 

The steps taken are just adding the Custom HTML widget then pasting this code into it and giving it the title Daily Quotes 2 (I currently do have a plugin one on the page until I can get this one to work). All it does it display the Ajax message, “…loading today’s quote”. This code was copied from my old/original static HTML page where it did work (I recently converted from a static HTML site to WordPress).

I’ve even copied the code from the Daily Affirmations Custom HTML widget (because they’re identical) and changed the link and Ajax message, but that had the same result. The Affirmations one works, this one doesn’t. I even copied and pasted the Affirmations code and didn’t change anything, with the same result.

• This reply was modified 6 years, 7 months ago by Brenda.
• This reply was modified 6 years, 7 months ago by Brenda.
• This reply was modified 6 years, 7 months ago by Brenda.

Looks like some of the code went missing. Can you use pastebin or a gist to share that code instead?

I edited my post code above and it seems to be showing it all now.

Aw, it was caught by the spam filter.

Will test this in a bit.

Oh…

I think I see what the problem could be.

This caught my eye:

<div id='msgHere'>

I have a feeling that is what the root of it is. On a page there can only be one instance of id. This is stated here. So for example:

<div id="blueNotes">
  <span id="blueNotes">

That would cause an issue because it will pick the first instance of the blueNotes ID. I hope that makes some sense.

What this means is that the script will need to be adjusted to work with more than one quote. This can be done by using classes instead and perhaps using document.getElementsByClassName() in order to iterate over those instances.

I tried removing the two lines with ID but that didn’t work, so I put them back. I see where to I place the ClassName line. How do I edit the first line where it says <div id=’msgHere’> (I’m not familiar with javascript – just HTML & CSS). On that note, if I use a class do I need to add something to the CSS?

• This reply was modified 6 years, 7 months ago by Brenda.

OK a new weirdness is happening. Now when I have both widgets on the page, the Affirmations widget is displaying the daily quote instead of the daily affirmation, and the quote box is displaying the “…loading today’s quote”. This is without any changes to the code. Before with no changes to the code, the affirmations showed the daily affirmation and the quote displayed the “…loading today’s quote”.

On an off-topic note, my avatar in this forum isn’t showing. It’s showing the pixel image, even though my avatar is current on Gravatar. Non-related & not important!

Sorry, I meant to try and find a solution yesterday.

I was able to use a class, and was able to make the code work using the Custom HTML widget. It is nearly identical to what you previously had but the way I’m using it allows for multiple instances. So you could have one, or you could have 5. The code is here:

https://gist.github.com/jocastaneda/1764f81fd314ea440c10b505853ab576

Hope that helps. ??

We’re getting closer! It loads the daily quote now, but seems to render the daily affirmation to not work (it stays on “…loading today’s affirmation”).

Edit: So I tried changing the code in both boxes to the new one but then it shows the quote in both (I did change the file path).

• This reply was modified 6 years, 7 months ago by Brenda.

I’m glad to see one is working now.

It will drive me a little batty not seeing the other work though.