Search code examples
javascriptphpjquerytwitter-bootstrapx-editable

Bootstrap does not apply on PHP select called by Javascript

I am using a bootstrap template and X-editable inline editing bootstrap plugin.

I have 2 columns that shows who and when the row was updated when a user chooses to update a column in that row. The updating is done by inline editing. I want it to show who edited it without refreshing the page. However, the rows are only echo by a php script so that's impossible.

So after searching I found out about calling an external PHP script via javascript. However, the css and js links seems to be not applying by the results of that javacsript call.

So I tried copying the css and js links on the echo, the editable columns are now working but the layout is completely messed up, so I think, the issue is, the css and js that is linked in the main page is not applying on the rows that is echoed by the PHP script called by javascript. But I don't know how to go around that. Perhaps there's something I do not know yet.

It works when the whole PHP code is inside the main page

my code is like this...

<html>


<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/maruti-style.css" />
<link rel="stylesheet" href="css/maruti-media.css" class="skin-color" />
<link rel="stylesheet" type="text/css" href="css/z-mbcrs.css">
<!-- x-editable -->
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<body>
 <table class="table table-bordered data-table">
   <thead>
    <tr>
      <td>ID</td>
      <td>Column1</td>
      <td>Column2</td>
    </tr>
   </thead>

   <tbody id="table-data">
   </tbody>

  </table>

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.ui.custom.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.uniform.js"></script> 
<script src="js/select2.min.js"></script> 
<script src="js/maruti.js"></script> 
<script src="js/maruti.tables.js"></script>
<script src="js/jquery.dataTables.min.js"></script> 
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="js/this-page-java.js"></script>
</body>
</html>

The contents of this-page-java.js

 $(document).ready(function(){
setInterval(function(){
    $("#table-data").load("fetch-data.php");
}, 3000);

$.fn.editable.defaults.mode = 'inline';
$('.col1').editable({   
    type:'POST',
    url:'post-data.php'
});
$('.col2').editable({   
    type:'POST',
    url:'post-data.php'
});

});

fetch-data.php

include "connection.php";

$select = mysqli_query($con, "SELECT * FROM table");
while($res = mysqli_fetch_assoc($select))
{
$id = $res['ID'];
$col1 = $res['Col1'];
$col2 = $res['Col2'];

echo"
<td>".$id."</td>
<td><a href='#' class='col1' data-name='Col1' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col1."</a></td>
<td><a href='#' class='col2' data-name='Col2' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col2."</a></td>
";

}
Solution

  • This code:

    $('.col1').editable({
  //...
});

    is executing once, when the page loads. It is going to apply this editable plugin to any matching .col1 element which exists when this code runs. It can't match elements which don't exist yet.

    Any time you add new instances of .col1 elements to the page, you need to initialize this plugin again for those instances. The simplest approach would be to just re-initialize all of them all over again by executing the above statement again.

    However, if that has any unwanted side-effects on elements which were already initialized (this can differ by plugin, it's not a universal rule) then you'd need to get more specific and target only the new .col1 elements which were loaded and need to be initialized with the plugin. If that is the case, then you'd need to identify those specific elements.

    Since it looks like you're just replacing the entire contents of a given parent element:

    $("#table-data").load("fetch-data.php");

    then you can include that parent element in your selector to target the specific new elements:

    $('#table-data .col1').editable({
  //...
});

    Edit: I see where the above may have been unclear, you want to initialize the plugin after the content loads, which would mean in the callback to .load(). So putting the two together might look like this:

    $("#table-data").load("fetch-data.php", function () {
    $('#table-data .col1').editable({
        //...
    });
});