Joel Kilduff Joel Kilduff - 19 days ago 5
HTML Question

PHP Dynamically Loaded Data Not Recognised In DOM / By JavaScript

I am building a page, where after a selection of two dates and a few dropdowns, AJAX POST to execute SQL:

window.onload = function(){
Search();
}function Search(){

var CIAttributeCompletenessCITypeID = $('#CIType').val();
var CIAttributeCompletenessCISubTypeID = $('#CISubType').val();
var CIAttributeCompletenessCIAttributeID = $('#CIAttribute').val();
var CIAttributeCompletenessStartDate = $('#start').val();
var CIAttributeCompletenessEndDate = $('#end').val();
var CIAttributeCompleteness = {CIAttributeCompletenessCITypeID,CIAttributeCompletenessCISubTypeID,CIAttributeCompletenessCIAttributeID,CIAttributeCompletenessStartDate,CIAttributeCompletenessEndDate};
$.ajax({
type:'POST',
url:'/ITSMIS/getData/CIAttributes.php',
data:CIAttributeCompleteness,
success:function(html){
$('#CIAttributeCompleteness').html(html);
$(".data-table").DataTable();
}
})


After the query has returned results, PHP then writes to the page certain fields based for each row.

if(!empty($_POST["CIAttributeCompletenessCITypeID"]) && !empty($_POST["CIAttributeCompletenessCISubTypeID"]) && !empty($_POST["CIAttributeCompletenessCIAttributeID"])){

$sql = "SELECT CIAttributeCompleteness.CIAttributeCompletenessPercentage, CIAttributeCompleteness.CIAttributeCompletenessMissing, CIAttributeCompleteness.CIAttributeCompletenessCompleted, CIAttributeCompleteness.CIAttributeCompletenessTotal, CIAttributeCompleteness.CIAttributeCompletenessDate, CIType.CITypeTitle AS CIAttributeCompletenessCITypeTitle, CISubType.CISubTypeTitle AS CIAttributeCompletenessCISubTypeTitle, CIAttribute.CIAttributeTitle AS CIAttributeCompletenessCIAttributeTitle FROM CIAttributeCompleteness INNER JOIN CIType ON (CIType.CITypeID = CIAttributeCompleteness.CIAttributeCompletenessCITypeID) INNER JOIN CISubType ON (CISubType.CISubTypeID = CIAttributeCompleteness.CIAttributeCompletenessCISubTypeID) INNER JOIN CIAttribute ON (CIAttribute.CIAttributeID = CIAttributeCompleteness.CIAttributeCompletenessCIAttributeID) WHERE CIAttributeCompleteness.CIAttributeCompletenessCITypeID = ".$_POST['CIAttributeCompletenessCITypeID']." AND CIAttributeCompleteness.CIAttributeCompletenessCISubTypeID = ".$_POST['CIAttributeCompletenessCISubTypeID']." AND CIAttributeCompleteness.CIAttributeCompletenessCIAttributeID = ".$_POST['CIAttributeCompletenessCIAttributeID']." AND CIAttributeCompleteness.CIAttributeCompletenessDate BETWEEN '".$_POST['CIAttributeCompletenessStartDate']."' AND '".$_POST['CIAttributeCompletenessEndDate']."'";$stmt = sqlsrv_query($conn, $sql);

while($obj = sqlsrv_fetch_object($stmt)){
echo "
<tr>
<td>".date_format($obj->CIAttributeCompletenessDate, 'd/m/Y')."</td>
<td>".$obj->CIAttributeCompletenessCITypeTitle."</td>
<td>".$obj->CIAttributeCompletenessCISubTypeTitle."</td>
<td>".$obj->CIAttributeCompletenessCIAttributeTitle."</td>
<td>".$obj->CIAttributeCompletenessPercentage."</td>
<td>".$obj->CIAttributeCompletenessMissing."</td>
<td>".$obj->CIAttributeCompletenessCompleted."</td>
<td>".$obj->CIAttributeCompletenessTotal."</td>
</tr>";
}


This outputs the data onto the page fine. However next to no JavaScript works on the data / HTML elements posted.

This is just one I have tried, which should hide any rows that dont meet the Search criteria input into a text box:

var $rows = $('.data-table tr');
$('#search-y').keyup(function() {

var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;

$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});


Its basically like any JavaScript wont recognise that there has been HTML output onto the page.

Answer

Put the javascript u wish to run in the success part of you Ajax. The dom should pick up the html then. – Mueyiwa Moses Ikomi