jquery - div elements not updating with javascript - Stack Overflow

Can any of you see why the div (#wele) is not being updated in the below code?

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(){
    $('#wele').style.display = 'block';
    $('#wele').innerHTML = "Wele" + user + "to SIK";
    }

}

The response from the ajax called is simply grabbing the username from the session variable. and it is returning correctly.

And when it returns i would like the div to show up and say wele. But for some reason the div is not being updated.

Here is the html:

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

Can any of you see why the div (#wele) is not being updated in the below code?

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(){
    $('#wele').style.display = 'block';
    $('#wele').innerHTML = "Wele" + user + "to SIK";
    }

}

The response from the ajax called is simply grabbing the username from the session variable. and it is returning correctly.

And when it returns i would like the div to show up and say wele. But for some reason the div is not being updated.

Here is the html:

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

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Mar 20, 2013 at 18:42 Greg 47911 gold badge55 silver badges2121 bronze badges asked Mar 20, 2013 at 11:57 Tom BurmanTom Burman 95733 gold badges1616 silver badges3737 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You can't do

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

with jquery. This is because with $('#wele') you are grabbing the jQuery object, not the DOM element.

To do this with jQuery:

$('#wele').html('Wele' + user + 'to SIK').show(); // Brought up in ments

$('#wele').show(); // Old
$('#wele').html('Wele' + user + 'to SIK'); // Old

Or if you really want to grab the DOM Element:

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

@Jeff Shaver is right but Pass user as argument change_div(user);

then

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

try this friend..

$.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){
    $('#wele').css("display","inline");
    $('#wele').append("Wele" + user + "to SIK");
    }

The display property does not exist.

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

Use this instead:

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

I'd stick to pure JS with this code.

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

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