Dropdownlist is not updating using Yii - php

Question

I'm using
PHP language , yii-1.1.13 framework and MySQL DB.
In my Views , I have this code:
Views Code of Main Page
/** Start Widget **/
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'dialog',
'options' => array(
'title' => 'Locations Management',
'autoOpen' => false,
'modal' => true,
'resizable' => false,
'dialogClass' => 'managelocation-dialog-class',
'show'=>array(
'effect'=>'drop',
'duration'=>500,
),
'hide'=>array(
'effect'=>'drop',
'duration'=>500,
),
),
));
/**
* Render dialog view.
*/
echo $this->renderPartial('manageLocationDialog', array(
'model' => $model,
'locationInfo' => $locationInfo,
));
$this->endWidget('zii.widgets.jui.CJuiDialog');
/**
* Filter Dialog widget
*/
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'filter-dialog',
'options' => array(
'title' => 'Filter',
'autoOpen' => false,
'modal' => true,
'resizable' => false,
'width' => 350,
'dialogClass' => 'location-dialog-class',
'show'=>array(
'effect'=>'drop',
'duration'=>500,
),
'hide'=>array(
'effect'=>'drop',
'duration'=>500,
),
),
));
/**
* Render the filter dialog view.
*/
echo $this->renderPartial('manageLocationFilter', array(
'filterFormloc' => $filterFormloc,
'locationInfo' => $locationInfo,
));
$this->endWidget('zii.widgets.jui.CJuiDialog');?>
Views Code of Add/Edit Dialog
<div id="action-button-div" class="row">
<?php
echo CHtml::button('Create New', array(
'id'=>'action-button',
'class'=>'submit-button',
'onclick'=>"{submitActionJs();}",
'update' =>'#filter_province_name',
));
?>
<?php
echo CHtml::button('Cancel', array(
'id'=>'cancel-button',
'onclick'=>'{$("#dialog").dialog("close");}',
));
?>
</div>
Views Code of Filter Dialog
<div id="dialog-contents-container">
<div class="row">
<div id="filter-mode-div">
<?php
echo $form->labelEx($filterFormloc, 'filter_mode', array(
'label' => 'Filter Mode',
));
?>
<div>
<?php
echo $form->radioButtonList($filterFormloc, 'filter_mode', array(
1=>'ON',2=>'OFF'),array('id'=>'filter_mode'
));
?>
</div>
</div>
<div id="reset-button-div">
<?php
echo CHtml::button('Reset Settings', array(
'id'=>'reset-button',
'onclick'=>'{$(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);$("#ManageLocationFilterForm_filter_mode_1").attr("checked",true);}',
));
?>
</div>
</div>
<div id="under-container">
<div class="row">
<div id="province_name">
<?php
echo $form->labelEx($filterFormloc, 'province_name', array(
'label' => 'Province *',
));
?>
<div>
<?php
echo $form->dropDownList($filterFormloc, 'province_name',
$locationInfo->getAllProvincesForSelection(true, 'Select Province'),
array(
'id' => 'filter_province_name',
'class' => 'selectbox',
)
);
?>
</div>
</div>
</div>
</div>
<div id="action-button-div" class="row">
<?php
echo CHtml::button('Apply Filter Settings', array(
'id'=>'action-button_2',
'onclick'=>"{submitFilterActionJs();}"
));
?>
<?php
echo CHtml::button('Cancel', array(
'id'=>'cancel-button_2',
'onclick'=>'{$("#filter-dialog").dialog("close");}',
));
?>
</div>
</div>
In my controller, below is my code:
public function actionRegisterLocation() {
$model = new ManageLocationForm;
if (isset($_POST['ManageLocationForm']))
{
$model->attributes = $_POST['ManageLocationForm'];
if (Yii::app()->request->isAjaxRequest)
{
if ($model->hasErrors())
{
$errors = '';
foreach ($model->getErrors() as $e) $errors .= implode($e).'<br>';
echo CJSON::encode(array(
'status'=>'failure',
'messages'=>$errors
));
}
else
{
$locationInfo = new LocationInfo;
if ($model->operation_mode === AdminGeneralHelper::OPERATION_MODE_UPDATE)
{
$locationInfo=LocationInfo::model()->findByPk($model->location_id);
}
$locationInfo->short_name = $model->short_name;
$locationInfo->town_name = $model->town_name;
$locationInfo->province_name = $model->province_name;
$locationInfo->save();
if ($model->operation_mode === AdminGeneralHelper::OPERATION_MODE_CREATION)
$_message = 'Create operation completed.';
if ($model->operation_mode === AdminGeneralHelper::OPERATION_MODE_UPDATE)
$_message = 'Update operation completed.';
if ($locationInfo->hasErrors())
{
$errors = '';
foreach ($locationInfo->getErrors() as $e) $errors .= implode($e).'<br>';
echo CJSON::encode(array(
'status'=>'failure',
'messages'=>$errors
));
}
echo CJSON::encode(array(
'status' => 'success',
'messages' => $_message,
));
}
exit;
}
}
else
{
echo "FALSE";
}
Yii::app()->end();
}
Below is the scenario:
I open the dialog for Adding a location. (Parameters are short_name, town, and province)
Location was Successfully added in the Grid View and DB.
I open the dialog for filter. It can only filter by Province.
When I take a look at the Dropdown lists, Location that was successfully added is not on the lists.
My question is how to update the dropdown lists of filter dialog after I successfully added a location from Add/Edit Dialog. Alternative solution is I need to refresh the browser then open the filter dialog. But it is not that user friendly. Its really a bug.

Answer 1

update or replace requires the response for the query to be html (see the source for CHtml::ajax() for more detail). Your query returns json. You have several options:
You can change the controller to return all the options for the dropdown as html and continue using update.
You can change the controller to return the full dropdown as html and use replace instead of update.
You can change controller to return the id and value of the newly added location and use a custom javascript function to add this option to the dropdown.

Answer 2

I tried the Option No.3 and its working.
Below is the working code from my Javascript file.
function submitActionJs() {
var fareCat = document.getElementById("name").value;
var newFareCat = toTitleCase(fareCat);
$.ajax({
url: 'registerFareCategory',
type: 'POST',
datatype: 'json',
data: $('form').serializeArray(),
timeout: 10000,
beforeSend: function(){
$('#dialog-msg').html('Processing...');
},
success: function(data){
var res = eval('(' + data + ')');
$('#dialog-msg').html(res.messages);
if (res.status == 'success'){
$("#message-label").html(res.messages);
$.fn.yiiGridView.update('fare-category-grid');
$("#dialog").dialog("close");
window.parent.$('#filter_name').append('<option value = "' + newFareCat + '">' + newFareCat + '</option>');
//sort fare category dropdownlist from filter dialog
$("#filter_name").html($('#filter_name option').sort(function(x, y) {
return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
}));
$("#filter_name").get(0).selectedIndex = 0;
e.preventDefault();
}
},
error: function(){
$('#dialog-msg').html('Ajax Communication Error.');
}
}
);
}
Thanks #topher for your suggestion.