1

在我的应用程序中,我在控制器/索引中有一个表单,它由 3 个选择框组成。当所有三个框都选择了一个值时,我需要根据这些选择值在同一视图中显示其他 html 和额外的表单选项。显而易见的解决方案似乎是对另一个处理数据库操作并创建视图并将该视图加载到控制器/index.phtml 的操作进行 ajax 调用

我已经能够通过使用以下方法在 index.phtml 中加载另一个操作的视图:

$('#select').change(function() {
    event.preventDefault();
    var id = $(this).attr('id');
    $('#results').show();
    $('#results').load('/controller/index/' + $(this).attr('value'));
    return false;
});

但是我需要传递所有三个选择框的变量,为此我交替使用:

$('#select1').change(function() {
var select1     = $('#select1').val();
var select2     = $('#select2').val();
var select3     = $('#select3').val();
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/controller/index/',
    data: { select1: select1, select2: select2, select3: select3},
    success: function(result){
                var return1 = result.return1;
                var return2 = result.return2;
         }
    });

});

就我确实看到标头中传递的变量并且响应包含视图而言,最后一种方法起作用,但是我无法修复它,即仅将 ajax 视图的内容放置在索引视图中。(当然,通过不使用 AjaxContent 切换,将加载 ajax 视图,但其中也包括完整的布局。)我在 ajax 操作或 ajax 视图中回显的任何内容都不会显示在索引视图中。任何指针都会非常受欢迎

编辑

ajax 动作现在看起来像

$this->view->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);

$select1 = $this->_request->getParam('select1');
$select2 = $this->_request->getParam('select2');
$select3 = $this->_request->getParam('select3');

// DO THE OTHER STUFF AND LOGIC HERE

$results = array(
 'return1' => 'value1',
 'return2' => 'value2'
);

$this->_response->setBody(json_encode($results));

和控制器初始化

public function init() {
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('ajax', 'json')->initContext();
}

所以一切正常,我可以在浏览器中使用开发人员工具(网络)查看响应中的返回值,但是我只是不知道如何使用它来“更新”视图

4

2 回答 2

0

你可以做两件事:

  • 您可以启用通过 ajax 调用的操作的布局。看到您已禁用布局,因此即使 ajax 操作的视图 phtml 文件包含某些内容,它也不会显示。您可以启用布局,使用 text/html dataType 代替json并在某处显示返回的 HTML。
  • 或者,在successajax 调用的情况下,编写 javascript 代码来更新 DOM。
于 2012-10-29T20:02:04.647 回答
0

感谢@Salman 的建议,因为它们引导我朝着正确的方向前进,我设法解决了这个问题。我设法通过 ajax .load() 调用传递多个参数,方法是将它们作为 get 参数传递。然后可以在 ajax.ajax.phtml 视图中格式化 ajaxAction 的结果,并在选择框所在的 index.phtml 中的 #results div 中连续显示。

控制器/index.phtml

<div id="results" style="display:block;">Select all three values</div>

IndexController 初始化和 ajaxAction

public function init() {
    $ajaxContext = $this->_helper->getHelper('AjaxContext');
    $ajaxContext->addActionContext('ajax', 'html')->initContext('html');
}

public function ajaxAction() {

    $select1    = $this->_request->getQuery('select1');
    $select2    = $this->_request->getQuery('select2');
    $select3    = $this->_request->getQuery('select3');

    $form   = new Application_Form();

    // Database operations and logic

    $this->view->form       = $form;
    $this->view->array      = $somearray;
    } 
}

index.phtml 中的 jquery 脚本

$(document).ready(function(){

    $('.selector').change(function() {
        var select1 = $('#select1').val();
        var select2 = $('#select2').val();
        var select3 = $('#select3').val();
        if ( select1 && select2 && select3) {
            $('#results').show();               
            $('#results').load('/controller/ajax?select1=' + select1 + '&select2=' + select2 + '&select3=' + select3);
        }
    });

});

控制器/ajax.ajax.phtml

<?php if ( $this->array ) : ?>
    <?php echo( $this->form ); ?>
<?php else: ?>
    Nothing found for selected values
<?php endif ?>
于 2012-10-30T14:23:40.687 回答