CODEWITHSUNDEEP
jqueryajaxforms
ashwinbhy
ashwinbhy

Reputation: 600

Unable to display image using ajax

I have a input textfield if any one tries to write it a loading image should appear. I tried the following code but the image is not being displayed in the check span.

    <html>
    <head>
        <title> Delivery Eligibility </title>
    </head>
    <body>


        <div>
            <form>
            Username:<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
    <span class="check"  ></span> <br/>


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
  }
}
</script>

            </form>


        </div>
    </body>
</html>

Can anyone tell me where am i going wrong.

Upvotes: 0

Views: 70

Answers (4)

Ishan Jain
Ishan Jain

Reputation: 8171

you have a wrong end tags in your code.

Try this:

$(document).ready(function(){
 $('.user_name').keyup(function () {
   $('.check').show();
   $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
 }); 
});

Working Example

I suggest you to put your .html() with the .fadeIn() completion callback function. like this:

$('.check').fadeIn(400, function(){ $(this).html(' '); });

Try this:

$(document).ready(function(){
 $('.user_name').keyup(function(){
    $('.check').show();
    $('.check').fadeIn(400, function(){
        $(this).html('<img src="image/ajax-loading.gif" /> ');
    });
  });
});

Working Example

Upvotes: 0

halabuda
halabuda

Reputation: 384

You are missing some closing parentheses. It should read:

    <html>
    <head>
        <title> Delivery Eligibility </title>
    </head>
    <body>


        <div>
            <form>
            Username:<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
    <span class="check"  ></span> <br/>


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
  })
});
</script>

            </form>


        </div>
    </body>
</html>

Here is a working demo: http://jsfiddle.net/ZsSfj/

Upvotes: 0

Brewal
Brewal

Reputation: 8199

Without syntax error it works well :

Demo

$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
      $('.check').fadeIn(400).html('<img src="http://placehold.it/16x16" /> ');
  }); // you missed a closing parenthesis here
}); // and here

Try to use your console next time. The message is quite obvious :

Uncaught SyntaxError: Unexpected token }

Upvotes: 0

Jai
Jai

Reputation: 74738

Actually you have a wrong end tags:

$(function () {
    $('.user_name').keyup(function () {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
    }); //<----check this
}); //<----and this

You can try this:

$(function () {
    $('.user_name').keyup(function () {
        $('.check').fadeIn(400, function () {
            $(this).html('<img src="image/ajax-loading.gif" /> ');
        });
    }); //<----this
}); // <---and this

Upvotes: 1

Related Questions