Executing script tags inside innerHTML to perform an Ajax call

Question

I have a 'query builder' page (querybuilder.php) that allows users to build a SQL query and then execute it. All of this works fine.

The parameters of the query are POSTED to another PHP page (queryresults.php) that runs a stored proc and then loops through the results to create a table that is inserted into querybuilder.php. The loop includes a checkbox on each row with the value set to the ID of each record being output.

Queryresults.php (the innerHTML page) also has some dropdowns to allow the user to perform certain actions on the rows that have been 'checked'. I've made a loop outside the Javascript to execute it once for each successive checkbox.

As I understand it - I cannot have script tags in the innerHTML page but I need to interact with the checkboxes that are only created, and assigned a value, when the innerHTML loads.

I've looked at a few workarounds including the following: http://24ways.org/2005/have-your-dom-and-script-it-too but none seem to work.

$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {

echo "
<script>
$('#doAction').on('click', function() {
  var id = ".$value.";
  var u = document.getElementById('user').value;

  $.ajax({
    type: \"POST\",
    url: \"storedprocs.php\",
    data: { id: id, u: user }
    })
    .done(function(msg) {
       document.getElementById('done').innerHTML=msg;
    });
  });
</script>";
}

The final HTML coming from the innerHTML page looks like this:

echo "
<div class="row">
  <div class="col-md-6">
    <select id="user" class="input-sm">
    <option value="1">User 1</option>
    <option value="2">User 2</option>
    <option value="3">User 3</option>
    </select>
  </div>

  <div class="col-md-3">
  <button class="btn" id="doAction" data-stmt="false">Submit</button>
  </div>
</div>

<div class="row">
<div class="leTable">
<table class="table-hover table-responsive">
  <tr class="heading">';
echo $tableheaders;
echo '</tr>';

  foreach($result as $row) {
   echo '<tr>
    <td><input type="checkbox" name="chkbox" id="idChkBox"><a href="otherpage.php?id='.$row[0].'" value="'.$row[0].'">'.$row[0].'</a></td>';
    for ($x=1; $x<sizeof($row); $x++) {
     echo '<td>'.$row[$x].'</td>';
    }
 echo '</tr>';
 }
echo '</table>';
echo '</div></div>';

To compound the problem, the element with id=user that the second variable comes from is set by another completely separate innerHTML, so I don't know how to reference that either.

Real head-scratcher, I've googled extensively and trawled through StackExchange to no avail. Any help would be really appreciated!

Thanks!

Answer 1

I think your code could work if it didnt have so many syntax errors. It's document.getElementById, not document.getElementbyId. Beside that you should also end a variable declaration with ;

It all depends on the final rendered page though. We dont know what the final php output is.

I strongly advice you to use a external JavaScript file. Inline JS is bad.