0

I am trying to get table data when the user clicks on the text inside element. I have tried number of java script but I cant get the value to be send back to the controller for further processing. I would really appreciate if you can help me out. I have added necessary code for you to see if I am doing something wrong.

<div class="box-content">
                          <table id="suppliertable" class="table table-striped table-bordered bootstrap-datatable datatable">
                      <thead>
                          <tr>
                              <th>Supplier</th>
                              <th>Open Range</th>
                              <th>Fill Content</th>
                              <th>Total Match</th>
                          </tr>
                      </thead>   
                      <tbody>

                      <?php foreach($present_all_suppliers as $v): ?>
                              <tr>      
                                    <td class="center" style="color:#0c595b;"><?php echo $v->supplierCompany;?> </a> </td>
                                    <td class="center">70%</td>
                                    <td class="center">12%</td>
                                    <td class="center">82%</td>
                            </tr>
                    <?php endforeach; ?>


                    </tbody>
                  </table>            
                </div>

Java Script:

document.getElementById ( "tdid" ).textContent
var tdElem = document.getElementById ( "tdid" );
var tdText = tdElem.innerText | tdElem.textContent;
3
  • Please show the javascript which you have already tried.
    – MonkeyZeus
    May 18, 2015 at 15:07
  • Do not place it as a comment. Add it to your question.
    – MonkeyZeus
    May 18, 2015 at 15:11
  • Sorry. I used that with td id but I was not able to get the value i.e. first column and pass it to the controller May 18, 2015 at 15:14

2 Answers 2

0

This is going to require some fancy ajax and a javascript enclosure. Hopefully this example will help.

http://jsfiddle.net/qpe2wrmt/1/

function addEventHandler(elem,eventType,handler){
    if (elem.addEventListener)
        elem.addEventListener(eventType,handler,false);
    else if (elem.attachEvent)
        elem.attachEvent ('on'+eventType,handler);
}

var items = document.getElementsByClassName("clickable");
i = items.length;
while(i--){
    (function(item){
        addEventHandler(item,"click",function(){
            // make your ajax call here
            window.alert("clicked on a thing: "+item.innerHTML);
        });
    })(items[i]);
}

1) Add a 'clickable' class to each td you want to be cliackable

2) Loop through all clickable items by classname and assign an event handler to each.

3) Make an XHR request when clicked on.

0

You need to pass the data back to the controller from Javascript. That means that when the user clicks on the <td> in question an AJAX request must be sent to the appropriate controller and the controller can then execute some server action or return some data that would be used by the AJAX callback function.

Here is an example: http://www.w3schools.com/php/php_ajax_php.asp

This shows how to use AJAX and PHP to make dynamic changes to the HTML DOM objects.

Here is another question on stackoverflow about onclick and AJAX and PHP: Call a PHP function after onClick HTML event

What you need to learn is AJAX and how to build your application to use it if you want to make the page look and feel more modern (HTML5).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.