2013-03-20 2 views
3

Может ли кто-нибудь из вас понять, почему div (#welcome) не обновляется в приведенном ниже коде?элементы div, не обновляющиеся с помощью javascript

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>

ответ

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 Element:

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

ой хорошо, почему она отличается с JQuery? плохо попробуйте это сейчас спасибо –

+0

Обновлено, чтобы помочь объяснить больше. '$ ('# welcome')' является объектом jQuery, а не элементом DOM, поэтому вы должны использовать методы jQuery для его изменения. –

+0

Объект @TomBurman jQuery не имеет .style, но имеет 'attr ('style')' –

0

@Jeff Shaver является правильным, но Передайте user в качестве аргумента change_div(user);

затем

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

Я предполагал, что пользователь является глобальной переменной, так как он не использует 'var' для его объявления. Я просто предположил, что он был объявлен вне функции. Но если это проблема, это решит ее. –

+1

Отсутствие объявления локального «пользователя» с «var user ...» создает свойство пользователя в глобальном контексте и, следовательно, разрешимо. Это, как говорится, это лучший способ на самом деле сделать это, но это не его проблема. –

0

Свойство отображения не существует.

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

Используйте вместо этого:

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

Я бы придерживаться чистого JS с этим кодом.

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

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

Да, голосуйте за наиболее эффективное решение, но повысьте тот, который даже не кеширует объекты jQuery: P. – Simon

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"); 
    } 
Смежные вопросы