Getting data from php, sending directly to javascript and using Comparison Operators with the data

Question

Let's say in this case, it needs to be done this way...

I have a menu bar to the left side of the screen that loads a default initial "position", whatever menu set to 1 loads the page with it open, whatever set to 0 loads the page closed.

This website works with subtopics, pretty much this way:

Example: "http://localhost/?subtopic=latestnews".

And all the subtopics are divided between the topics (menus).

What I'm trying to do with this menu is: Get the page to identify the current subtopic page, get its topic and when the page is loaded, only that menu will be open.

Example: Menus | News.........| Support

........Subtopics....| latestnews.| contactus

When I open the page latestnews, only the menu news loads opened, and when I open contactus, only the support menu loads opened.

I already have a function returning the topic value from any subtopic loaded, and I'm being able to send it to the javascript and alert() it already, but when I use comparison operators in the javascript to change the default values (1 : 0) it always returns 0, no matter what.

OBS.: When I manually edit the values (1 : 0) without the operators the menu works properly.

Here is the JavaScript part:

function InitializePage() {
  LoadMenu();
}
function LoadMenu() {
  document.getElementById("submenu_" + activeSubmenuItem).style.color = "white";
  document.getElementById("ActiveSubmenuItemIcon_" + activeSubmenuItem).style.visibility = "visible";
  var news, aboutgatia, gameguides, library, community, events, forum, account, support, shop;
  var div = document.getElementById("topic_finder"); //here is the div with the topic name to compare
  var myData = div.textContent;
  if (self.name.lastIndexOf("&") == -1) {
    news = ((myData == "news") ? 1 : 0); //Here the comparison operator that is not working and I can't figure out why
    aboutgatia = 0;
    gameguides = 0;
    library = 0;
    community = 0;
    events = 0;
    forum = 0;
    account = 0;
    support = 0;
    shop = 0;
    alert(myData);
    self.name = "news=" + news + "&aboutgatia=" + aboutgatia + "&gameguides=" + gameguides + "&library=" + library + "&community=" + community + "&events=" + events + "&forum=" + forum + "&account=" + account + "&support=" + support + "&shop=" + shop + "&";
  }
  FillMenuArray();
  InitializeMenu();
}

And here is the PHP/HTML part:

<script type="text/javascript">InitializePage();</script></div>
<div id="topic_finder" style="display: none;">
  <?php
    $topic_output = getTopic($subtopic); //Here is that function I mentioned before
    echo htmlspecialchars($topic_output);
  ?>
</div>

So `var myData = div.textContent;` does not return "news" but something else. Try `var myData = div.textContent.trim();` and console log it to see if it is what you expect - also this would work too `news = myData == "news"` — mplungjan, Jun 07 '16 at 05:35
remove leading and trailing space from the string. Note .trim() needs a polyfill for IE<9: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim — mplungjan, Jun 07 '16 at 05:37
thank you I thought it was returning news to the javascript with ( " ) — user3050478, Jun 07 '16 at 05:38

mplungjan · Accepted Answer · 2016-06-07T05:47:09.530

Since you are not actually showing the string, why not just do

news = "<?php echo htmlspecialchars($topic_output); ?>" == "news";

or

document.getElementById("submenu_<?php echo htmlspecialchars($topic_output); ?>")....

Your current code will look like this in the browser

<div id="topic_finder" style="display: none;">
whitepace  news whitespace
</div>

So var myData = div.textContent; does not return "news" but something else. Try trim to remove leading and trailing spaces

var myData = div.textContent.trim();

and console log it to see if it is what you expect - then this would work too

news = myData == "news"

without the ternary

Note .trim() needs a polyfill for IE<9:

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

thanks for the answer, http://stackoverflow.com/questions/2308134/trim-in-javascript-not-working-in-ie should do the trick — user3050478, Jun 07 '16 at 05:42

score -1 · Answer 2 · answered Jun 07 '16 at 05:42

-1

just parse your input to proper format, here you are comparing with string so add following lines in your code.

var div = document.getElementById("topic_finder");
var myData = div.textContent;
myData = String(myData);

...do further functions...

answered Jun 07 '16 at 05:42

Vivek Chaudhari

1,930
1
14
20

Getting data from php, sending directly to javascript and using Comparison Operators with the data

2 Answers2