How to get string value from js function in td table?

Question

I'm working with PHP and Javascript. I return arrayList from PHP file to PHP web page; in the PHP web page I want to display array list in a table, but one of the fields "state" can be "Success or Rejected", if success, the td table shows span bootstrap icon, else, also. I using Javascript function for return span icon, but it can't read param "state" to invoke function.

My js file:

function getStateIcon(strState) {

var strHtml = '';

   if (strState === "Success") {
       strHtml = '<span class="label label-success">' + strState +'</span>';
   } else if (strState === "Rejected") {
    strHtml = '<span class="label label-warning">' + strState + '</span>';
   } 

    return strHtml;
}

And my php web page:

            <table>
                 //headers.....

                 //body

                <?php
                    include_once '../../Model/RequestDto.php';

                    $list = new ArrayObject();


                    if (isset($_SESSION["list"]) == null) {
                        echo 'not found results';
                    } else {
                        $list = $_SESSION["list"];
                        foreach ($list as $val) {

                ?>

                    <tr>
                         <td><?php echo $val->getID?></td>
                         <td><?php echo $val->getDate()?></td>
                         <td><script type="text/javascript">getStateIcon(<?php echo $val->getState()?>);</script></td>  //here i want pass parameter state to the js function for return span icon and draw td, but this show empty                 
                    </tr>

                <?php
                    }
                  }
                ?>

                </tbody>
            </table>

score 0 · Answer 1 · answered Jun 13 '17 at 19:21

0

You have a misconception about how JavaScript interacts with the page. Your PHP uses echo to write values into the page before it gets sent to the client.

Your JavaScript function gets called and returns a string, but this string is never written to the page.

You could fix your JavaScript to manipulate the page DOM, but this is unnecessary. At the time the php is executed, it knows the state and can easily write the span tags into the page with the echo method.

You don't need the JavaScript at all.

answered Jun 13 '17 at 19:21

Will

3,201
1
19
17

Okay, my idea of implementing that function is to avoid if nested inside the html code, even if it is inncesario, is it possible to do what I am proposin ? – Alonso Contreras Jun 13 '17 at 19:40
https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script I guess your `getStateIcon()` function would essentially do `document.currentScript.innerHTML = strHtml;` instead of `return strHtml;` – Will Jun 13 '17 at 19:50

score 0 · Accepted Answer · answered Jun 13 '17 at 22:44

You're returning the string to the caller of the function instead of writing it to the innerHTML of the td.

Actually you can easily do that with CSS by styling the td's. But if you want to use JavaScript, you need to manipulate the DOM innerHTML of the td's. For example:

<td class="Success"><td>

And, add the onload attribute to the body.

<body onload="buildIcons()">

Then the JavaScript can be written like this.

function buildIcons() {
    var tds = document.getElementsByClassName('Success');
    for (var i = tds.length - 1; i >= 0; --i) {
        var td = tds[i];
        td.innerHTML = "echo the img here";
    }
}

It can be done easier with CSS.

.Success {
    background: 'path to bg image';
}

How to get string value from js function in td table?

2 Answers2