ListView: Update ListView items after clicking on button in a different ListView
clickCListViewcruddifferenthtmlbuttonjquerymodelsubmitbuttonUpdate
Hey there,
I been trying to figure this out for a while now and going nowhere. Would really appreciate some pointers as to what am I missing.
Got 1 model, a “Course”, and 1 view “Timetable”. In the view, I’ve got:
The link is http://www.318-new-rosi.site11.com/course/timetable2
I would like to be able to update at least (for now) the 2nd BootListView when the student registers for a course via the “Add to courses” button in the modal that appears when the “More Info” button is clicked.
Any ideas would really be very much appreciated.
By blackrobe89 in List View · Asked 431 days 17 hours 35 mins ago
Questions: 1 Accepted: 0 ( 0% ) | Reputation: 0
Answers (9)
Hello. I think you have to use ajax’s update mechanism that would be fired when your modal is closed. In order to feed your updated data, you have to echo something as a result of your modal submit action.
After seeing your resulting HTML code, it should go more or less like this:
When you click on “More info” on the CSC318H1 course for instance, a modal is displayed with an “Add to Courses” submit button, which has the “add-button-5″ id
I can see (source code) the following javascript (jQuery) code attached to that button
$('body').on('click','#add-button-5',function(){ jQuery.ajax({ 'success': function(data) { $("td.CSC318H1").text("CSC318H1"); $("#modal-5 a.btn[data-dismiss]").click(); }, 'type':'POST', 'url':'/course/add/5', 'cache':false, 'data':jQuery(this).parents("form").serialize() }); return false; });You haven’t posted your PHP code, but I can tell you that you have to make it change it like the following, in order to take into account that data
$('body').on('click','#add-button-5',function(){ jQuery.ajax({ 'success': function(data) { $("td.CSC318H1").text("CSC318H1"); //here, add the following line $('#enrolled-table .items').append('<b>Course Code:</b><a href="/course/5" rel="nofollow">CSC318H1</a><a href="/course/5" rel="nofollow">More Information</a> '); //end of added line $("#modal-5 a.btn[data-dismiss]").click(); }, 'type':'POST', 'url':'/course/add/5', 'cache':false, 'data':jQuery(this).parents("form").serialize() }); return false; });By bennouna · 431 days 12 hours ago
Questions: 0 Accepted: 0 ( 0% ) | Reputation: 0
The added line has been stripped from any div tag. Here’s correct code (in fact, I duplicated what you can see in the source after you refresh the page, I got it that’s the desired UI behavior — of course you can use fadeIn() to have a nicer effect)
//here, add the following line $('#enrolled-table .items').append('<div class="row-fluid"><div class="well span8"><b>Course Code:</b><a href="/course/5">CSC318H1</a><a id="info-button-5" class="more-info btn" href="/course/5">More Information</a> <input id="drop-button-5" class="drop btn" type="submit" name="yt12" value="Drop Course"> </div></div>'); //end of added lineBy bennouna · 431 days 11 hours 55 mins ago
Questions: 0 Accepted: 0 ( 0% ) | Reputation: 0
Thank you for your help, Bennouna. I am however trying a different approach (Ajax), even though its quite tricky, I've managed to get most of the functionalities to work, but I can't get the courses to appear on the enrolled courses ListView without refreshing the page (manually, by F5). In fact, I'd really appreciate it if someone could point me to the right direction as to how to make it work even if it were to reload the page by itself. I've added a 1-bit status field into my Courses table, to classify the courses as Not-Enrolled, Enrolled, Waitlisted, or On-Preview. I update that field in the "Course" model class, whenever an "Add Course", "Drop Course", or "Preview Course" button is clicked. Then I get stuck at rendering (or refreshing) the view to show the changes.
By blackrobe89 · 431 days 8 hours 54 mins ago
Well my first answer hasn’t made it (yet?) through the system, and I think you’ve seen only the second.
Anyway here’s another try
<<<
Hello. I think you have to use ajax’s update mechanism that would be fired when your modal is closed. In order to feed your updated data, you have to echo something as a result of your modal submit action.
After seeing your resulting HTML code, it should go more or less like this:
When you click on “More info” on the CSC318H1 course for instance, a modal is displayed with an “Add to Courses” submit button, which has the “add-button-5″ id
I can see (source code) the following javascript (jQuery) code attached to that button. You have to add the above line.
$('body').on('click','#add-button-5',function(){ jQuery.ajax({ 'success': function(data) { $("td.CSC318H1").text("CSC318H1"); // add the line in the previous comment here $("#modal-5 a.btn[data-dismiss]").click(); }, 'type':'POST', 'url':'/course/add/5', 'cache':false, 'data':jQuery(this).parents("form").serialize() }); return false; });You haven’t posted your PHP code, but I can tell you that you have to make it change it like above, in order to take into account that data.
By bennouna · 431 days 3 hours 31 mins ago
Questions: 0 Accepted: 0 ( 0% ) | Reputation: 0
This is great. That's actually exactly what I was trying to do initially, (appending the whole div to the ListView), however this seemed to me like a workaround from the proper Yii way. I think my mistake was stupidly forgetting to place a dot in the jQuery selector ".items". Anyway here are the Controller actions for adding/dropping/previewing: public function actionTimetable2() { $model = new Course('search'); $model->unsetAttributes(); if (isset($_GET['Course'])) $model->attributes = $_GET['Course']; $dataProvider = new CActiveDataProvider('Course'); $this->render('timetable2', array( 'model' => $model, 'dataProvider' => $dataProvider, )); } public function actionAdd($id) { $model = $this->loadModel($id); if ($model->prereqs === '1') { $model->status = '1'; } else { $model->status = '4'; } if ($model->save()) { if ($model->status === '1') { Yii::app()->user->setFlash('success', $model->course_code . ' was successfully added to your registered courses list.'); } else if ($model->status === '4') { Yii::app()->user->setFlash('warning', $model->course_code . ' was added to your courses list, however not all prerequisites are satisfied.'); } // Source of the problem perhaps: $this->render('timetable2', array('model' => $model, 'dataProvider' => $model->searchStatus(1))); } } public function actionDrop($id) { $model = $this->loadModel($id); $model->status = '0'; if ($model->save()) { Yii::app()->user->setFlash('success', $model->course_code . ' was successfully dropped from your registered courses list.'); } // Source of the problem perhaps: $this->render('timetable2', array('model' => $model, 'dataProvider' => $model->searchStatus(1))); } public function actionPreview($id) { // Still working on this one. $model = $this->loadModel($id); } In the Course model: public function searchStatus($status = 0) { $criteria = new CDbCriteria; $criteria->compare('status', $status); return new CActiveDataProvider($this, array('criteria' => $criteria)); } Preview and Add Buttons: $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text("' . $data->course_code . '"); }', ), // htmlOptions array( 'id' => 'preview-button-' . $data->id, 'class' => 'preview btn', ) ); ?> $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text("' . $data->course_code . '"); $("#modal-' . $data->id . ' a.btn[data-dismiss]").click(); }', ), // htmlOptions array( 'id' => 'add-button-' . $data->id, 'class' => 'add btn', ) ); ?> 'btn', 'data-dismiss' => 'modal' ) ); ?> The More Information and Drop buttons: $data->id), // htmlOptions array( 'id' => 'info-button-' . $data->id, 'class' => 'more-info btn', ) ); ?> $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text(""); console.log(data); $(this).parent().remove(); document.reload(); }', ), // htmlOptions array( 'id' => 'drop-button-' . $data->id, 'class' => 'drop btn', ) ); ?> Finally, the three ListViews Currently Enrolled widget('BootListView', array( 'id' => 'enrolled-table', 'dataProvider' => $model->searchStatus(1), 'itemView' => '_item_list2', 'summaryText' => '', 'emptyText' => '', )); ?> Previewing in Timetable widget('BootListView', array( 'id' => 'preview-table', 'dataProvider' => $model->searchStatus(2), 'itemView' => '_item_list2', 'summaryText' => '', 'emptyText' => '', )); ?> Waitlisted Courses widget('BootListView', array( 'id' => 'waitlist-table', 'dataProvider' => $model->searchStatus(3), 'itemView' => '_item_list2', 'summaryText' => '', 'emptyText' => '' )); ?> The Flash messages are also not working, it might be because I'm not really using the User model really. Thanks again, really helpful.
By blackrobe89 · 431 days 1 hour 49 mins ago
Controller Actions:
public function actionTimetable2() { $model = new Course('search'); $model->unsetAttributes(); if (isset($_GET['Course'])) $model->attributes = $_GET['Course']; $dataProvider = new CActiveDataProvider('Course'); $this->render('timetable2', array( 'model' => $model, 'dataProvider' => $dataProvider, )); } public function actionAdd($id) { $model = $this->loadModel($id); if ($model->prereqs === '1') { $model->status = '1'; } else { $model->status = '4'; } if ($model->save()) { if ($model->status === '1') { Yii::app()->user->setFlash('success', $model->course_code . ' was successfully added to your registered courses list.'); } else if ($model->status === '4') { Yii::app()->user->setFlash('warning', $model->course_code . ' was added to your courses list, however not all prerequisites are satisfied.'); } $this->render('timetable2', array('model' => $model, 'dataProvider' => $model->searchStatus(1))); } } public function actionDrop($id) { $model = $this->loadModel($id); $model->status = '0'; if ($model->save()) { Yii::app()->user->setFlash('success', $model->course_code . ' was successfully dropped from your registered courses list.'); } $this->render('timetable2', array('model' => $model, 'dataProvider' => $model->searchStatus(1))); } public function actionPreview($id) { $model = $this->loadModel($id); }By blackrobe89 · 431 days 1 hour 38 mins ago
Questions: 1 Accepted: 0 ( 0% ) | Reputation: 0
More Information and Add buttons
<?php // More Information Link echo CHtml::link('More Information', // Url array('view', 'id' => $data->id), // htmlOptions array( 'id' => 'info-button-' . $data->id, 'class' => 'more-info btn', ) ); ?> <?php // Drop Course Ajax Submit Button echo CHtml::ajaxSubmitButton('Drop Course', // Url CHtml::normalizeUrl(array('course/drop', 'id' => $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text(""); console.log(data); $(this).parent().remove(); document.reload(); }', ), // htmlOptions array( 'id' => 'drop-button-' . $data->id, 'class' => 'drop btn', ) ); ?>By blackrobe89 · 431 days 1 hour 35 mins ago
Questions: 1 Accepted: 0 ( 0% ) | Reputation: 0
Preview and Add buttons
<?php // Preview Course Ajax Submit Button echo CHtml::ajaxSubmitButton('Preview Course in Calendar', // Url CHtml::normalizeUrl(array('course/preview', 'id' => $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text("' . $data->course_code . '"); }', ), // htmlOptions array( 'id' => 'preview-button-' . $data->id, 'class' => 'preview btn', ) ); ?> <?php // Add Course Ajax Submit Button echo CHtml::ajaxSubmitButton('Add to Courses', // Url CHtml::normalizeUrl(array('course/add', 'id' => $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text("' . $data->course_code . '"); $("#modal-' . $data->id . ' a.btn[data-dismiss]").click(); }', ), // htmlOptions array( 'id' => 'add-button-' . $data->id, 'class' => 'add btn', ) ); ?> <?php echo CHtml::link('Close', '#', array( 'class' => 'btn', 'data-dismiss' => 'modal' ) ); ?>By blackrobe89 · 431 days 1 hour 34 mins ago
Questions: 1 Accepted: 0 ( 0% ) | Reputation: 0
Well you should have guessed where to put it I guess?
<?php // Add Course Ajax Submit Button echo CHtml::ajaxSubmitButton('Add to Courses', // Url CHtml::normalizeUrl(array('course/add', 'id' => $data->id)), // ajaxOptions array( 'success' => 'js: function(data) { $("td.' . $data->course_code . '").text("' . $data->course_code . '"); // HERE $("#enrolled-table .items").append("<div class=\"row-fluid\"><div class=\"well span8\"><b>Course Code:</b><a href=\"/course/' . $data->id . '\">' . $data->course_code . '</a><a id=\"info-button-' . $data->id . '\" class=\"more-info btn\" href=\"/course/' . $data->id . '\">More Information</a> <input id=\"drop-button-' . $data->id . '\" class=\"drop btn\" type=\"submit\" name=\"yt12\" value=\"Drop Course\"> </div></div>"); $("#modal-' . $data->id . ' a.btn[data-dismiss]").click(); }', ), // htmlOptions array( 'id' => 'add-button-' . $data->id, 'class' => 'add btn', ) );By bennouna · 430 days 23 hours 41 mins ago
Questions: 0 Accepted: 0 ( 0% ) | Reputation: 0