I’m having a ton of trouble with buggy JS on my web app.
One of the sections of my web app lets the user perform CRUD on ‘Person’ entries stored in the DB.
The view is a parent-child view. Here is the parent view:
<div class="col-xs-4" id="parentView">
<button class="btn btn-success" id="create"><i class="glyphicon glyphicon-plus small"></i><i class="glyphicon glyphicon-user"></i><span> </span>New Person</button>
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'mainGrid',
'dataProvider' => $model->search(),
'filter' => $model,
//'ajaxUpdate' => 'updateData',
'selectionChanged' => "updateChild", // new code
'columns' => array(
'firstName', 'lastName'
)
));
?>
</div>
Here is the child view, empty by default, is populated later by renderPartial():
<div class="col-xs-8" id="updateData">
</div>
Here is the ‘updateChild’ JS callback that my parent TbGridView uses:
function updateChild(id, options)
{
try{
/* Extract the Primary Key from the CGridView's clicked row */
console.log(id);
// alert($.fn.yiiGridView.getSelection(id));
var pK = parseInt($.fn.yiiGridView.getSelection(id));
console.log(pK);
if (pK > -1) {
//grab data from url
var jqxhr = $.ajax( {
type: 'POST',
url: 'person/updateChild',
data: { pk: pK },
cache: true,
})
.done(function(data) {
$('#updateData').html(data);
//alert( 'success' );
$('#accordion').collapse();
})
.fail(function() {
//alert( 'error' );
})
}
}
catch (ex){
alert(ex.message); /*** Send this to the server for logging when in
production ***/
}
}
Here is the other JS on the page that listens for button clicks:
<script>
$(function(){
//have to do it like this because it's not on the page when it loads
$('body').on('click','#newPSub',function(e){ // Submit button for new
//prevent the form from submitting
e.preventDefault();
var jqxhr = $.ajax( {
type: 'POST',
url: 'person/create',
data: { Person: $('#person-form').serialize() },
})
.done(function(data) {
$('#updateData').html(data);
$.fn.yiiGridView.update('mainGrid');
$.notify("Successfully Created!", "success");
//alert( 'success' );
})
.fail(function() {
// alert( 'error' );
})
});
$('#create').click(function(){ // Green button to bring new form
var jqxhr = $.ajax( {
type: 'POST',
url: 'person/create',
data: { create: 1 }
})
.done(function(data) {
$('#updateData').html(data);
//alert( 'success' );
})
.fail(function() {
// alert( 'error' );
})
});
})
</script>
I am using the very popular Yii Booster extension, and have set that up according to how it tells you to. I have not loaded in any extra CSS or JS files in my main layout view because I believe that Yii loads jQuery by default, and Yii Booster loads whatever JS it needs to within it’s own files.
Because my child view makes use of widgets (TbEditableView, TbGridView, HighCharts, Panels) and JS listeners for buttons, I cannot set the last parameter of a renderPartial() to false, it must be true so that JS is inserted and run. However, I believe that is messing up my page as a whole, as I am getting totally unexpected behaviour.
The question I am asking is, would it be possible to be shown how to load JS into a parent-child view properly so that they aren’t bugged? Is there a “proper” Yii method of doing this that I’m missing out on? A link to a tutorial would be fine, because I’m absolutely tearing my hair out trying to get this framework to work properly, and yet are given no indication of what I’m doing wrong.
Thanks for your help.