CODEWITHSUNDEEP
jqueryhtml
petebolduc
petebolduc

Reputation: 1263

how can I get on('click') to reset to the onload state after the click without a page refresh?

I have a textbox where the user inputs a location name then click a button to check availability. On the on('click') event handler the script uses post() to verify the availability then show if it is available or not to the user and then fades out.

Everything works fine. However, if the user attempts to make a change for whatever reason like a typo, nothing happens. How can I get on('click') to reset to the onload state after the click without a page refresh?

I have tried several different things but can't seem to get it. Being new to jquery I am not sure what I am leaving out.

Here is my code:

 $('#ckAval').on('click', function() {
        var locName = $('#locName').val();
        var url = $('#locNameVal').val();
        var postit = $.post( url, { locName:locName } );        
        postit.done(function( data ) {$( "#ckLocName" ).html( data ).delay( 300  ).fadeOut( "slow");})          
    });

HTML:

<div class="small-9 columns">
    <input type="text"  id="locName" name="location_name" placeholder="Enter Unique Location Name here..." value="'.$location_name.'" />
    <input type="hidden" id="locNameVal" value="'.$p_queries.'unique-location-name-query.php">
</div>

<div id="ckAval" class="small-3 columns">
    <span class="postfix">Check Availability</span>
</div>

<div id="ckLocName" class="text-center"></div>

Thank you in advance for your assistance: Pete

Upvotes: 0

Views: 120

Answers (2)

Jamiec
Jamiec

Reputation: 136114

The issue is that fadeOut has the effect of hiding the element, so the second time you try to put content in that element its invisible.

I have reproduced the issue below (click the button and a message is shown, click it again and it looks like the message is not working anymore - but the problem is the element is hidden)

Try it: http://jsfiddle.net/ezxmnb6e/

This can be fixed by simply making sure the element is visible before displaying the message in it. A simple change of one line:

// note the `show()` chained in.
$( "#ckLocName" ).show().html( data ).delay( 300  ).fadeOut( "slow");

Try it now: http://jsfiddle.net/ezxmnb6e/1/

Upvotes: 1

atmd
atmd

Reputation: 7490

I think I see the issue

The event does fire, but the div is already hidden after the first click

add this:

 $('#ckAval').on('click', function() {
        var locName = $('#locName').val();
        var url = $('#locNameVal').val();
        var postit = $.post( url, { locName:locName } );        
        postit.done(function( data ) {$( "#ckLocName" ).html( data ).delay( 300  ).fadeOut( "slow");})          
    });

$('#locNameVal').on('keyup', function () {
    $("#ckLocName").fadeIn('slow');
});

This will reset the form if the users changes the location after clicking

Upvotes: 1

Related Questions