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' /> <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' /> <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.