3

我一直在尝试使用 ajax 从灯箱将数据发布回控制器，但它当然不起作用。

我有两个选择列表，都从默认控制器填充。当我选择一个值并单击提交时，我的错误框会短暂闪烁，然后再次消失。

使用萤火虫网络选项卡我可以看到 POST 请求，但是在 post 选项卡下没有数据。我必须在 javascript 本身中做错了什么，但对我来说它看起来不错，而且我所有的谷歌搜索都没有提出可行的替代方案。

这是我的代码...

<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">

<div id="ajax-login-register">

    <div id="login-box">
        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
        <form id="login-form">

        <select name="currency_sel" id="brand_country" class="form_select_200px">

            <option value="0" selected><i>Select your preferred Currancy</i></option>
                <?php foreach($currencies as $currency): ?>
                <option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
                <?php endforeach; ?>
            </select>
        </form>
  </div>

    <div id="register-box">

        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
        <form id="register-form">            

            <select name="language_sel_1" id="brand_country" class="form_select_200px">                 
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($languages as $language): ?>
                <option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
                <?php endforeach; ?>
            </select>

            <select name="language_sel_2" id="brand_country" class="form_select_200px">                 
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($regions as $region): ?>
                <option value="<?php echo $region['country_id']; ?>"><?php echo $region['country_name']; ?></option>
                <?php endforeach; ?>
            </select>

            <div class="line">&nbsp;</div>
        </form>

    </div> 
        <div>
            <form>
                <button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
            </form>
        </div>
</div>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('#ajax-login-button').button({
    icons: {
        primary: "ui-icon-check"
    }
});

$('#ajax-submit-button').click(function(){

    var error = false;

    if(error){
        return false;
    } else {
        $.ajax({
            url: "<?=site_url('locale/set_ui_lang')?>",
            type: "POST",
            dataType: "json",              
            data: ({
                'currency_sel'      : $('#currency_sel :selected').val(),
                'language_sel_1'        : $('#language_sel_1 :selected').val(),
                'language_sel_2'        : $('#language_sel_2 :selected').val()
            }),
            success: function(data){
                    parent.$.colorbox.close();
                    parent.location.reload();
                },
            error: function(xhr, ajaxOptions, thrownError){
                 alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
                }            
            });                
        }
    });
});
</script>

</body>

当错误通知将就绪状态和状态都标记为 0 时， throwederror 就是错误。

此外，接收控制器目前只是一个 print_r(&_POST) 来测试。

我自己似乎无法克服这一点，如果有人可以提供帮助，我们将不胜感激。

谢谢

4

5 回答 5

1

数据对象的键不应该用引号引起来。

当您将其更改为：

data: {
    currency_sel: $('#currency_sel :selected').val(),
    language_sel_1: $('#language_sel_1 :selected').val(),
    language_sel_2: $('#language_sel_2 :selected').val()
},

来源：jQuery.ajax() 文档

于 2013-08-08T00:05:34.577 回答
1

只是我还是你让点击事件返回false而不是触发AJAX？

var error = false;

    if(error){
        return false;
    }
于 2013-08-08T00:10:29.467 回答
1

您不能使用多个具有相同名称的 ID，并且您的选择器是错误的。

$('#currency_sel :selected').val()应该 $('select[name="currency_sel"] option:selected').val()和其他人一样。

编辑

去掉括号内的数据，应该是

data: {
                currency_sel : $('select[name="currency_sel"] option:selected').val(),
                language_sel_1 : $('select[name="language_sel_1"] option:selected').val(),
                language_sel_2 : $('select[name="language_sel_2"] option:selected').val()
            },
于 2013-08-08T01:30:00.350 回答
1

您的 ajax 调用位于单独表单内按钮的单击处理程序中。

这是发生了什么..

单击按钮时，会触发 ajax 调用。

然后单击处理程序正常返回并提交包含该按钮的表单。

当发生这种情况时，会加载一个新页面，并且浏览器会取消任何挂起的 ajax 请求，这会触发您的错误。（在错误警报中单击“确定”后，您应该会注意到页面加载正常）

为防止这种情况发生，您可以return false;在 ajax 调用之后或preventDefault()在事件对象上调用：

$('#ajax-submit-button').click(function(e){

    e.preventDefault();

    /* Rest of the code */

});

这应该可以解决您的问题。

*编辑：*注意e函数定义上的参数

于 2013-08-08T03:39:19.987 回答
0

结合 Ben & L105 修复了这个问题。对于其他有类似问题的人，这里是工作代码。div 名称等有点粗略，这仍然是原型构建...

<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">

<div id="ajax-login-register">

    <div id="login-box">
        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
        <form id="login-form">

        <select name="currency_sel" id="currency_sel" class="form_select_200px">

            <option value="0" selected><i>Select your preferred Currancy</i></option>
                <?php foreach($currencies as $currency): ?>
                <option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
                <?php endforeach; ?>
            </select>
        </form>
  </div>

    <div id="register-box">

        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
        <form id="register-form">            

            <select name="language_sel_1" id="language_sel_1" class="form_select_200px">                    
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($languages as $language): ?>
                <option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
                <?php endforeach; ?>
            </select>


            <div class="line">&nbsp;</div>
        </form>

    </div> 
        <div>
            <form>
                <button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
            </form>
        </div>
</div>

</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#ajax-login-button').button({
        icons: {
            primary: "ui-icon-check"
        }
    });

    $('#ajax-submit-button').click(function(e){
        e.preventDefault();
        $.ajax({
                url: "<?=site_url('locale/set_ui_lang')?>",
                type: "POST",
                dataType: "json",              
                data: {
                    currency_sel:$('select[name="currency_sel"] option:selected').val(),
                    language_sel_1:$('select[name="language_sel_1"] option:selected').val()
                },
                success: function(data){
                        parent.$.colorbox.close();
                        parent.location.reload();
                    },
                error: function(xhr, ajaxOptions, thrownError){
                     alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
                        }            
                });                
        });
    });

于 2013-08-13T18:51:33.640 回答