Question

我面临一个相当奇怪的问题。我正在使用典型的联系表。处理jQuery ajax解决方案。一切顺利，除了结果消息。出于某种奇怪的原因，浏览器不会显示提供的innerHTML。

结果只是：<div id="ResultContactForm"></div>。是的..这是一个空的div，不受CSS的影响只是等待一些数据显示。

我正在使用的jQuery代码是（由给定帖子更新）：

$("#contact-formulier").live('submit', function(){
    var str = $(this).serialize();

    $.ajax({
        type:   "POST",
        url:    "ajax.php?type=contact",
        data:   str,
        success: function(result){ 
            $("#ResultContactForm").ajaxComplete(function(event, request, settings){                    
                if(result) {
                    $(this).html(
                        $('<span/>', {
                            style: 'color: #76c5f0',
                            html: $('<strong/>', {
                                text: 'Bedankt voor je bericht! We nemen zo snel mogelijk contact met je op!'
                            })
                        })
                    );
                    $(":input", "#contact-formulier")
                        .not(":button, :submit, :reset, :hidden")
                        .val("");
                } else {
                    $(this).html(
                        $('<span/>', {
                            style: 'color: #FF0000',
                            html: $('<strong/>', {
                                text: 'Alle velden zijn verplicht in te vullen.'
                            })
                        })
                    );
                }                   
            });
        }
    });

    return false;
});

一切正常，因为当我在if{}else{}部分发出一些警报时，我会收到消息。我有if(document.getElementById() == undefined)，但它告诉我div存在..当然这是真的;）

我忽略了什么吗？我对页面上的另一个表单有完全相同的（绑定ID除外）脚本，没有任何问题。

可以在联系页面的http://vfw.ontdek5.nl/index.php找到实时示例。（该网站是荷兰语。）

Answer 1

你试过吗

$(this).html("<span style='color:#FF0000;'><strong>Alle velden zijn verplicht in te vullen.</strong></span>");

同样用style='color:#FF0000;'

中的单引号替换双引号

Answer 2

这是method，而不是属性：

$(this).html('<span style="color:#FF0000;"><strong>Alle velden zijn verplicht in te vullen.</strong></span>');

编辑：您的条件应该将result与字符串值“true”进行比较：

if(result == "true") {
    ...

Answer 3

我会尝试改进你的代码：

if(result) {
    $(this).html(
        $('<span/>', {
            style: 'color: #76c5f0',
            html: $('<strong/>', {
                text: 'Bedankt voor je bericht! We nemen zo snel mogelijk contact met je op!'
            })
        })
    );
    $(":input", "#contact-formulier")
        .not(":button, :submit, :reset, :hidden")
        .val("");
} else {
    $(this).html(
        $('<span/>', {
            style: 'color: #FF0000',
            html: $('<strong/>', {
                text: 'Alle velden zijn verplicht in te vullen.'
            })
        })
    );
}

Answer 4

在给实际代码进行测试运行后，我注意到您对PHP脚本的调用返回值为"1"的字符串。你根本没有测试实际的返回信息。你有两个选择。测试字符串值"1"或从PHP方法传回JSON序列化对象，该对象看起来像{"success" : true}或{"success" : false}并对result.success进行测试。

无论哪种方式，使用Darin Dimitrov's code将条件测试更改为if (result == "1")。你需要摆脱那个.ajaxComplete()电话。如果要在XHR上评估成功或错误后无条件地执行处理程序，您希望将其用作AJAX方法的一个名为“complete”的选项，类似于构建“成功”的方法。 See the documentation获取完整的选项列表。完成是第五个选项。

无法使用jQuery填充div.innerHTML

4 个答案: