div元素没有用javascript更新

时间:2013-03-20 11:57:43

标签: javascript jquery html ajax

你们有没有人能够在下面的代码中看到为什么没有更新div(#welcome)?

function show_logged_in(success)
{

    var is_logged_in = success;

    var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in};

    $.ajax({
        type:"POST",
        url:"PHP/class.ajax.php",
        data:dataString,
        dataType:'JSON',
        success: function(username) {
            alert("User is shown");
            user = username;
            change_div();
        },
        error: function() {
            alert("ERROR in show_logged_in")
        }
    });

function change_div(){
    $('#welcome').style.display = 'block';
    $('#welcome').innerHTML = "Welcome" + user + "to SIK";
    }

}

来自ajax的响应只是从会话变量中获取用户名。它正确地返回。

当它返回时,我希望div出现并表示欢迎。 但由于某种原因,div没有更新。

这是html:

<div id="welcome" style="display:none; postion:absolute; top:0; float:right;">...</div>

5 个答案:

答案 0 :(得分:4)

你做不到

$('#welcome').style.display = 'block';
$('#welcome').innerHTML = "Welcome" + user + "to SIK";

用jquery。这是因为使用$('#welcome'),您将抓取jQuery对象,而不是DOM元素。

使用jQuery执行此操作:

$('#welcome').html('Welcome' + user + 'to SIK').show(); // Brought up in comments

$('#welcome').show(); // Old
$('#welcome').html('Welcome' + user + 'to SIK'); // Old

或者如果你真的想要抓住DOM元素:

$('#welcome')[0].style.display = 'block';
$('#welcome')[0].innerHTML = "Welcome" + user + "to SIK";

答案 1 :(得分:1)

试试这位朋友..

$.ajax({
        type:"POST",
        url:"PHP/class.ajax.php",
        data:dataString,
        dataType:'JSON',
        success: function(username) {
            alert("User is shown");
            user = username;
            change_div(user);
        },
        error: function() {
            alert("ERROR in show_logged_in")
        }
    });

function change_div(user){
    $('#welcome').css("display","inline");
    $('#welcome').append("Welcome" + user + "to SIK");
    }

答案 2 :(得分:0)

@Jeff Shaver 是正确的,但将user作为参数传递change_div(user);

然后

function change_div(user){
       $('#welcome').show();
       $('#welcome').html('Welcome' + user + 'to SIK');
}

答案 3 :(得分:0)

显示属性不存在。

$('#welcome').style.display = 'block';

请改用:

$('#welcome').css({"display":"block"});

答案 4 :(得分:0)

我会坚持使用此代码的纯JS。

var welcome = document.getElementById('welcome');

function change_div(){
    welcome.innerHTML = "Welcome" + user + "to SIK";
    welcome.style.display = 'block';
}