CODEWITHSUNDEEP
javascripthtml
plat_winz
plat_winz

Reputation: 145

Variable in IMG

So I am trying to incorporate a variable in my IMG tag, to basically replace a section with a username. On logon success I want it to get the Username of the user that was authenticated successfully, and replace that username in the variable. I am using javascript and html. Any ideas on hot I can achieve this? If I manually set the img src to a jpg, it shows and the rest of my code works as expected. I just need it it to show the pic depending on the username.

$('form').submit(function () {
    var username = $('#username').val(),
    password = $('#password').val();

    clearMessage();

    if (!username || !password) {
      showMessage('Enter a username and a password');
      return false;
    }


    // Web Proxy request to log the user on
    ajaxWrapper({
      url: 'PostCredentialsAuth/Login',
      dataType: 'xml',
      success: loginSuccess,
      error: loginError,
      data: { username: username, password: password }
    });

function loginSuccess(data) {
        var $loginXml = $(data),
            result = $loginXml.find('Result').text();

        if (result == 'success') {
            $('form').hide();
            $('#log-off').show();
			$('#EmployeePic').show();
    <img id="EmployeePic" src="'EmployeePhotos/'+Username+'.jpg'" alt="EmployeePic" class="EmployeePic" height="96" width="96" >

Upvotes: 0

Views: 48

Answers (1)

muecas
muecas

Reputation: 4335

You could hide your image initially (i added some inline styles, but you can also do it using jQuery: $('#EmployeePic').hide();. Then when the user is logged in, the image source changes to username.jpg and the image is displayed.

$('form').submit(function () {
    var username = $('#username').val(),
    password = $('#password').val();

    clearMessage();

    if (!username || !password) {
        showMessage('Enter a username and a password');
        return false;
    }


    // Web Proxy request to log the user on
    ajaxWrapper({
        url: 'PostCredentialsAuth/Login',
        dataType: 'xml',
        success: loginSuccess,
        error: loginError,
        data: { username: username, password: password }
    });

    function loginSuccess(data) {
        var $loginXml = $(data),
            result = $loginXml.find('Result').text();

        if (result == 'success') {
            $('form').hide();
            $('#log-off').show();
            $('#EmployeePic').error(function() {
                $(this).attr('src', 'EmployeePhotos/Default.jpg'); 
            }).attr('src', 'EmployeePhotos/'+$('#username').val()+'.jpg').show();
        }
    }
    
});
<img id="EmployeePic" src="" alt="EmployeePic" class="EmployeePic" height="96" width="96" style="display: none;">

Upvotes: 1

Related Questions