Zend的形式:onchange的选择装载其他视图内容视图、形式、内容、Zend

2023-09-10 17:03:55 作者:杀尽天下负心人

在我的应用程序在控制器/索引的形式,包括了3个选择框。当所有三个框有选择的值,我需要在展示根据这些选择价值观相同的观点更多的HTML和额外的表单选项。显而易见的解决方案似乎让Ajax调用来处理数据库的操作,并创建一个视图,并装载了查看到控制器/ index.phtml其他操作

In my application I have a form in controller/index that consists out of 3 select boxes. When all three boxes have a value selected I need to show additional html and extra form options in the same view based on those select values. The obvious solution seems to make an ajax call to another action that handles the database operation and creates a view and loading that view into the controller/index.phtml

我已经能够通过装载在index.phtml其他操作一个观点:

I have been able to load a view of another action in the index.phtml by using:

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

不过,我需要通过的所有三个选择框的变量和我交替使用:

However I need to pass the variables of all three select boxes and for that I alternatively used:

$('#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观点只是内容被放置在索引视图中。 (Ofcourse不使用AjaxContent切换,阿贾克斯视图将加载,但包含完整的布局,以及。)凡是我赞同在阿贾克斯行动或ajax的观点并不在索引视图中显示。任何指针会更受欢迎

The last method works in as far that I do see the variables passed in the headers and the response contains the view, but I cant fix it that just the content of the ajax view is placed within the index view. (Ofcourse by not using AjaxContent switching, the ajax view will load but that includes the complete layout as well.) Anything that I echo in the ajax action or ajax view do not show in the index view. Any pointer would be more than welcome

修改

阿贾克斯行动现在看起来像

the ajax action now looks like

$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();
}

所以一切正常,我可以通过使用开发工具(网络)在浏览器中看到的响应返回的值,但是我不知道我可以用它来更新的说法

So everything works, I can see the returned values in the response by using developer tool (network) in my browser, however I just do not know how I can use this to "update" the view

推荐答案

感谢@Salman您的建议,因为他们使我在正确的方向,我设法解决这个问题。 我设法将它们作为获取参数传递与阿贾克斯.load()调用多个参数。 该ajaxAction的结果然后可以被格式化的ajax.ajax.phtml视图,分别为连续 该#results DIV驻留在选择框是index.phtml中所示。

Thanks @Salman for your suggestions as they lead me in the right direction and I managed to solve the problem. I managed to pass multiple parameters with the ajax .load() call by passing them as get parameters. The results of the ajaxAction could then be formatted in the ajax.ajax.phtml view and were consecutively shown within the #results div that resides in the index.phtml where the select boxes are.

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

的IndexController init和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;
    } 
}

的jQuery在index.phtml

脚本

$(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 ?>