Cakephp中的jQuery自动完成小部件编辑操作

时间:2013-07-24 19:07:37

标签: jquery cakephp cakephp-2.0 jquery-ui-autocomplete

问题: 我有一个jQuery脚本在我的控制器的add方法中工作,但是当我向编辑方法添加搜索功能时,下拉菜单不起作用;但我知道jQuery脚本正在运行,因为我收到了对结果的回复。我可能忽略了一些简单的东西,但我似乎无法发现它。

控制器编辑方法:

public function edit($id = null) {
            $this->loadModel('PsychproScreening');
            $this->set('pidList', $this->PsychproScreening->find('list', array('fields' => array('pid','pid'), 
                                                        'order' => 'pid ASC')));

    if (!$this->PsychproConcomitantMed->exists($id)) {
        throw new NotFoundException(__('Invalid psychpro concomitant med'));
    }
    if ($this->request->is('post') || $this->request->is('put')) {
        if ($this->PsychproConcomitantMed->save($this->request->data)) {
            $this->Session->setFlash(__('The psychpro concomitant med has been saved'));
            $this->redirect(array('action' => 'index'));
        } else {
            $this->Session->setFlash(__('The psychpro concomitant med could not be saved. Please, try again.'));
        }
    } else if(!$this->RequestHandler->isAjax()) {
        $options = array('conditions' => array('PsychproConcomitantMed.' . $this->PsychproConcomitantMed->primaryKey => $id));
        $this->request->data = $this->PsychproConcomitantMed->find('first', $options);
    }

            if ( $this->RequestHandler->isAjax() ) {
                debug('here');
                $this->search();
    }
}

控制器搜索方法:

private function search(){
    $this->loadModel('FdaMed');
    $this->autoRender=false;
    $meds=$this->FdaMed->find('all',array('fields' => array('med_id','non_proprietary_name', 'route_name', 'dosage_for_mname'), 
                                'conditions'=>array('FdaMed.non_proprietary_name LIKE'=>'%'.$_GET['term'].'%')));
            $i=0;
            foreach($meds as $meds){
                    $response[$i]['value']=$meds['FdaMed']['med_id'];
                    $response[$i]['label']=$meds['FdaMed']['non_proprietary_name'].' ('.
                            $meds['FdaMed']['route_name'].'/ '.$meds['FdaMed']['dosage_for_mname'].')';
            $i++;
            }
    echo json_encode($response);
}

修改视图

<?php include_once 'concomitant_meds_inc.php';
$this->Html->addCrumb('PsychPro', '/Psychpros');
$this->Html->addCrumb('PsychPro Concomitant Med', '/PsychproConcomitantMeds');
$this->Html->addCrumb('Edit Concomitant Med', '/PsychproConcomitantMeds/edit/'.$this->request->data['PsychproConcomitantMed']['id']);
?>
<div class="psychproConcomitantMeds form">
<?php echo $this->Form->create('PsychproConcomitantMed',array('action' => 'edit')); ?>
    <fieldset>
        <legend><?php echo __('Edit Psychpro Concomitant Med'); ?></legend>
    <?php
        echo $this->Form->input('pid', array('options' => $pidList, 'empty' => 'Choose a value'));
                echo $this->Form->input('timept', array('options' => $tpt, 'empty' => 'Choose a value'));
                echo '<h3>Current Medication: '.$this->request->data['PidConcomitantMed']['non_proprietary_name'].' Route: '.
                        $this->request->data['PidConcomitantMed']['route_name']." Dosage Type: ".
                        $this->request->data['PidConcomitantMed']['dosage_for_mname'].'</h3>';
                echo $this->Form->input('med_name',array('type'=>'text','id'=>'med_name','label'=>'Medication Name (Route / Dosage Type)'));
                echo $this->Form->hidden('med_id', array('id' => 'med_id'));
        echo $this->Form->input('meds_taken');
                echo $this->Form->hidden('id', array('id' => 'p_form_id'));
                echo $this->Form->hidden('update_initials',array('value' => $this->Session->read('CoreUser.user_initials')));
                echo $this->Form->hidden('update_time_stamp', array('value' => date("Y-m-d h:i:s")));
    ?>
    </fieldset>
<?php echo $this->Form->end(__('Submit')); ?>
</div>
<div class="actions">
    <h3><?php echo __('Actions'); ?></h3>
    <ul>

        <li><?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $this->Form->value('PsychproConcomitantMed.id')), null, __('Are you sure you want to delete # %s?', $this->Form->value('PsychproConcomitantMed.id'))); ?></li>
        <li><?php echo $this->Html->link(__('List Psychpro Concomitant Meds'), array('action' => 'index')); ?></li>
    </ul>
</div>
<?php echo $this->Html->script('autocomplete_edit'); ?>

jQuery自动填充

$(document).ready(function(){

    // Defining a placeholder text:
    $('#med_name').defaultText('Search for medications');
    console.log($('#p_form_id').val());
    var form_id = $('#p_form_id').val();

    $('#med_name').autocomplete({
    minLength       : 3,
    source          : 'http://127.0.0.1/my_cakephp/PsychproConcomitantMeds/edit/'+form_id,
    autoFocus       : true,
    select          : function(event,ui){
        //console.log(ui.item['value']);
        $('#med_id').val(ui.item['value']);
        //console.log($('#med_id'));
    }
    });
});

    // A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

        var element = this.eq(0);
        element.data('defaultText',value);

        element.focus(function(){
        if(element.val() == value){
        element.val('').removeClass('defaultText');
        }
        }).blur(function(){
        if(element.val() == '' || element.val() == value){
        element.addClass('defaultText').val(value);
        }
        });

        return element.blur();
}

调试

我知道以下是有效的:

  1. 使用Chrome中的内置开发人员工具,我会收到来自jQuery的{​​{1}}数组的回复,其中包含jQuery格式的搜索结果。
  2. 我知道这个{Value: , Label: }代码有效,因为我有类似的代码用于add方法。如果您希望看到代码让我知道,我会更新。唯一真正的区别是我需要获取记录的ID并将其附加到jQuery脚本中URL的末尾。
  3. 我在Response中收到了正确的网址。看起来像jQuery
  4. 更新0:

    经过一些调试后,我发现问题出在哪里。在../view/21?term=insulin方法的jQuery脚本中,将打印这些日志,但不会使用add方法。

    edit

    所以我知道搜索功能正在运行,但是没有触发select事件。下拉菜单也没有出现,我觉得很奇怪,因为$('#med_name').autocomplete({ minLength : 3, source : 'http://127.0.0.1/my_cakephp/PsychproConcomitantMeds/edit/'+form_id, autoFocus : true, select : function(event,ui){ console.log(ui.item['value']); $('#med_id').val(ui.item['value']); console.log($('#med_id')); } }); 显然有效,因为它得到了结果,它们无法显示。

1 个答案:

答案 0 :(得分:1)

不完全确定我做了什么,但它现在正在工作。以下是所做更改的文档:

<强> autocomplete_edit.js

$(document).ready(function(){
    //console.log('AutocompleteEdit:Function=ready():Beginning');
    // Defining a placeholder text:
    $('#search_key').defaultText('Search here');
    //console.log($('#p_form_id').val());
    var form_id = $('#p_form_id').val();
    var pathname = window.location.pathname;

    $('#search_key').autocomplete({
    minLength       : 3,
    source          : 'http://127.0.0.1'+pathname+'/'+form_id,
    autoFocus       : true,
    select          : function(event,ui){
        //console.log(ui.item['value']);
        $('#search_id').val(ui.item['value']);
        $('#search_key').val(ui.item['label']);
        //console.log($('#med_id'));
    }
    });
});

我将选择器的id更改为更抽象,因此其他组件可以使用此自动完成功能。我添加了获取webroot和调用控制器/方法的路径名。我也得到了记录的id,所以我可以将med_id存储在隐藏的字段中,并在搜索字段中保留药物的名称。

更新了修改视图

echo '<h3>Current Medication: '.$this->request->data['PidConcomitantMed']['non_proprietary_name'].' Route: '.
 $this->request->data['PidConcomitantMed']['dosage_for_mname'].'</h3>';
echo $this->Form->input('med_name',array('type'=>'text','id'=>'search_key','label'=>'Medication Name (Route / Dosage Type)'));
echo $this->Form->hidden('med_id', array('id' => 'search_id'));
echo $this->Form->input('meds_taken');
echo $this->Form->hidden('id', array('id' => 'p_form_id'));