Question

So heres my problem. On the first fire of my code it works perfect but I reload the submit button using javascript (rather then refreshing the page). Everything that doesn’t have to do with ajax runs fine on the second click but I can not for the life of me get the ajax to run the next time the button is clicked.

Here is my code:

$("#edit_company_basic").live('click', function()
    {
        //get current value of button
        var btnText = $("#submit_company_update").val();

//on click the button becomes disabled and value changes to Please Wait
        $("#submit_company_update").attr("disabled", true);
        $("#submit_company_update").attr("value", "Please wait");

//this one add a loader gif and a updating company message
        $('#button_container').append("<div id='update'><center><img id='loading' src='images/icons/ajax-loader (1).gif' />&nbsp;<font color='red'>Updating company</font></center></div>");


//These variables are used for the ajax datastring
        var name = $("#company_name").val();
        var bio = $("#company_bio").val();
        var forum_url = $("#forum_url").val();
        var collection = $("#collection :selected").text();
        var fuel = $("#fuel :selected").text();
        var repair = $("#repair :selected").text();
        var tickets = $("#tickets :selected").text();
        var dataString = 'company_name='+ name + '&bio=' + bio + '&forum=' + forum_url + '&collection=' + collection + '&repair=' + repair + '&fuel=' + fuel + '&ticket=' + tickets;  
        $.ajax({  
            type: "POST",  
            url: "library/update_company.php",  
            data: dataString,  
            success: function() 
            {  

//On success I give the loader a little more time before anything happens I then re-enable the button allowing the user to be able to click it and give them a message that the copmany has been successfully updated.
            setTimeout(function(){$("#submit_company_update").attr("value", btnText); $("#submit_company_update").removeAttr('disabled'); $("#update").html("<center><font color='green'>Company has been updated</font></center>"); }, 1550);

//Here I just give the company updated message a few seconds before I remove it.
                setTimeout(function(){$("#update").fadeOut(1000); }, 2200);
            }
        });  

    });

Here is my html that is involved in all that jscript

<tr>
            <td colspan="2" id="submit_form"><div id="button_container"><center><input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /></center></div></td>
        </tr>

Does anyone have any ideas how I can make the ajax run again once the button is re-enabled? Whats happening is once I re-enable the button to be clicked again it won’t run the ajax.

Thanks in advance,

Jefffan24

UPDATE

So here is my whole javascript code from that page:

<script type="text/javascript">
$(document).ready(function(){
//$("#warning_price").hide();
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("#company_name").click(function(){
    $(".toggle_container").toggleClass("active").slideDown("normal");
});
$("#company_name").blur(function(){
    $(".toggle_container").slideUp('normal');
});

//This displays a warning message if they don't have permission to this part of the site.
$("#noperm").html('<div class="ui-widget" style="width:650px; margin:0 auto;"><div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"><p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em; margin-top:3px;"></span><strong>Error:</strong><br /> That was a heck of try but you do not have permission to access this area.</p></div></div> ');


//This is a jQuery character count plugin, just setting options and what not
var options2 = {
'maxCharacterSize': 450,
'textFontSize': '12px',
'textColor': '#000000',
'warningColor': '#FF0000',
'originalStyle': 'originalDisplayInfo',
'warningStyle': 'warningDisplayInfo',
'warningNumber': 100,
'displayFormat': '#input Characters | #left Characters Left | #words Words'
};
var options1 = {
'maxCharacterSize': 255,
'textFontSize': '12px',
'textColor': '#000000',
'warningColor': '#FF0000',
'originalStyle': 'originalDisplayInfo',
'warningStyle': 'warningDisplayInfo',
'warningNumber': 40,
'displayFormat': '#input Characters | #left Characters Left | #words Words'
};
$('#company_bio').textareaCount(options2);
$('#company_name').textareaCount(options1);
$('#forum_url').textareaCount(options1);
//End the counter


//Create Select Boxes (using for loops to make 1-50, 1-90, and 1-90 as options
var minimum = 1;
var max_col = 50;
var max_assist = 90;
var i = 1;
var def_collection = <?php echo $collection; ?>;
var def_repair = <?php echo $repair; ?>;
var def_fuel = <?php echo $fuel; ?>;
var def_tickets = <?php echo $ticket; ?>;
//Select boxes for Collection
$("#tdCollection").append("<select id='collection' name='collection'>");



for(i = 1;i <= max_col; i++){
    if(i == def_collection){
        $("#collection").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#collection").append("<option>" + i + "</option>");
    }
}
$("#tdCollection").append("</select>%");

//Select boxes for Repair
$("#tdRepair").append("<select id='repair' name='repair'>");
for(i = 1;i <= max_col; i++){
    if(i == def_repair){
        $("#repair").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#repair").append("<option>" + i + "</option>");
    }
}
$("#tdRepair").append("</select>%");

//Select boxes for Fuel
$("#tdFuel").append("<select id='fuel' name='fuel'>");
for(i = 1;i <= max_col; i++){
    if(i == def_fuel){
        $("#fuel").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#fuel").append("<option>" + i + "</option>");
    }
}
$("#tdFuel").append("</select>%");

//Select boxes for tickets
$("#tdTickets").append("<select id='tickets' name='tickets'>");
for(i = 1;i <= max_col; i++){
    if(i == def_tickets){
        $("#tickets").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#tickets").append("<option>" + i + "</option>");
    }
}
$("#tdTickets").append("</select>%");

//End the select box code.

//On form submit!
$("#edit_company_basic").live('click', function()
{

    var btnText = $("#submit_company_update").val();
    $("#submit_company_update").attr("disabled", true);
    $("#submit_company_update").attr("value", "Please wait");
    $('#button_container').append("<div id='update'><center><img id='loading' src='images/icons/ajax-loader (1).gif' />&nbsp;<font color='red'>Updating company</font></center></div>");
    var name = $("#company_name").val();
    var bio = $("#company_bio").val();
    var forum_url = $("#forum_url").val();
    var collection = $("#collection :selected").text();
    var fuel = $("#fuel :selected").text();
    var repair = $("#repair :selected").text();
    var tickets = $("#tickets :selected").text();
    var dataString = 'company_name='+ name + '&bio=' + bio + '&forum=' + forum_url + '&collection=' + collection + '&repair=' + repair + '&fuel=' + fuel + '&ticket=' + tickets;  
    $.ajax({  
        type: "POST",  
        url: "library/update_company.php",  
        data: dataString,  
        success: function() 
        {  
            setTimeout(function(){$("#submit_company_update").attr("value", btnText); $("#submit_company_update").removeAttr('disabled'); $("#update").html("<center><font color='green'>Company has been updated</font></center>"); }, 1550);
            setTimeout(function(){$("#update").fadeOut(1000); }, 2200);
        }
    });  

});
});


 </script>

And here is all my HTML

<form method="post" action="" name="edit_company_basic" id="edit_company_basic">
         <table class="company" cellspacing="0" cellpadding="7" style="width:550px; margin:0 auto;">
         <!--<tr>
            <td colspan="4" style="padding:0px;"><img src="<?php echo $image; ?>" alt="<?php echo $name; ?> Logo" /></td>   
         </tr>-->
         <tr>
            <th colspan="2" class="th_bold"><center>Basic Information</center></th>
         </tr>
         <tr>
            <th width="120">Company Name:</th>
             <td width="400" valign="top"><input type="text" name="company_name" class="company_name" id="company_name" value="<?php echo $name; ?>" style="width:395px;" /><br />
            <div class="toggle_container">
                <div class="block">
                    <span id="warning_price" style="background:#FFF9F9; border:1px solid red; min-width:395px; width:395px; padding:5px;"><strong>Warning:</strong> Editing the name will cost the company $2000</span>
                </div>
            </div>


            </td>
         </tr>
         <tr>
            <th valign="top">Company Bio:</th>
            <td width="400"><textarea name="company_bio" id="company_bio" style="width:390px; margin:0 auto; padding:5px; height:150px;"><?php echo $bio; ?></textarea></td>
        </tr>
        <tr>
            <th>Forum URL:</th>
            <td><input type="text" name="forum_url" id="forum_url" value="<?php echo $forum; ?>" style="width:395px;" /></td>
        </tr>
        <tr>
            <th>Default Collection:</th>
            <td id="tdCollection"></td>
        </tr>
        <tr>
            <th>Default Repair Assistance:</th>
            <td id="tdRepair"></td>
        </tr>
        <tr>
            <th>Default Fuel Assistance:</th>
            <td id="tdFuel"></td>
        </tr>
        <tr>
            <th>Default Ticket Assistance:</th>
            <td id="tdTickets"></td>
        </tr>
        <tr>
            <td colspan="2" id="submit_form"><div id="button_container"><center><input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /></center></div></td>
        </tr>
         </table>
         </form>

If anyone sees anything let me know, there is some php in there but none of that is an issues I don’t believe as the spots where it is used are not causing me any problems.

Answer 1

Do not use removeAttr to remove disabled, instead set it to false

$("#submit_company_update").attr('disabled', false);

Eric