5

Can any of you see why the div (#welcome) 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(){
    $('#welcome').style.display = 'block';
    $('#welcome').innerHTML = "Welcome" + 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 welcome. But for some reason the div is not being updated.

Here is the html:

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

5 Answers 5

5

You can't do

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

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

To do this with jQuery:

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

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

Or if you really want to grab the DOM Element:

$('#welcome')[0].style.display = 'block';
$('#welcome')[0].innerHTML = "Welcome" + user + "to SIK";
7
  • oh ok why is it different with jquery? ill try this now thanks
    – Tom Burman
    Commented Mar 20, 2013 at 12:00
  • Updated to help explain more. $('#welcome') is a jQuery object, not a DOM element, therefore you must use jQuery methods on it to change it. Commented Mar 20, 2013 at 12:02
  • @TomBurman jQuery object has no .style but is does have attr('style') Commented Mar 20, 2013 at 12:02
  • I'd rather use var welcome = document.getElementById('welcome') and leave the pure JS code if you have an id available.
    – Seimen
    Commented Mar 20, 2013 at 12:03
  • He's not including jQuery just to select an indexed element... use jQuery wisely for animation and complex stuff like ajax, but if you have something that simple I'd stick to pure JS code because it's faster.
    – Seimen
    Commented Mar 20, 2013 at 12:06
1

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

then

function change_div(user){
       $('#welcome').show();
       $('#welcome').html('Welcome' + user + 'to SIK');
}
2
  • I was assuming that user was a global variable since he doesn't use var to declare it. I just assumed it was declared outside the function. But if that is an issue, this will solve it. Commented Mar 20, 2013 at 12:06
  • 1
    His lack of a declareation of a local "user" with var user... creates the user property on the global context and is thus resolvable. That being said, this IS a better way to actually do this but it is not his issue. Commented Mar 20, 2013 at 12:07
1

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

The display property does not exist.

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

Use this instead:

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

I'd stick to pure JS with this code.

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

function change_div(){
    welcome.innerHTML = "Welcome" + user + "to SIK";
    welcome.style.display = 'block';
}
1
  • 2
    Yeah vote down the most performant solution but upvote the one which doesn't even cache jQuery objects :P.
    – Seimen
    Commented Mar 20, 2013 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.