Databases
StackOverflow2013
Postsdbo
POjQuery $.ajax only working on first click inside of $.click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery $.ajax only working on first click inside of $.click
    primarykey
    data
    text
    <p>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.</p> <p>Here is my code:</p> <pre><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("&lt;div id='update'&gt;&lt;center&gt;&lt;img id='loading' src='images/icons/ajax-loader (1).gif' /&gt;&amp;nbsp;&lt;font color='red'&gt;Updating company&lt;/font&gt;&lt;/center&gt;&lt;/div&gt;"); //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 + '&amp;bio=' + bio + '&amp;forum=' + forum_url + '&amp;collection=' + collection + '&amp;repair=' + repair + '&amp;fuel=' + fuel + '&amp;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("&lt;center&gt;&lt;font color='green'&gt;Company has been updated&lt;/font&gt;&lt;/center&gt;"); }, 1550); //Here I just give the company updated message a few seconds before I remove it. setTimeout(function(){$("#update").fadeOut(1000); }, 2200); } }); }); </code></pre> <p>Here is my html that is involved in all that jscript</p> <pre><code>&lt;tr&gt; &lt;td colspan="2" id="submit_form"&gt;&lt;div id="button_container"&gt;&lt;center&gt;&lt;input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /&gt;&lt;/center&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; </code></pre> <p>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.</p> <p>Thanks in advance,</p> <p>Jefffan24</p> <p><strong>UPDATE</strong></p> <p>So here is my whole javascript code from that page:</p> <pre><code>&lt;script type="text/javascript"&gt; $(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('&lt;div class="ui-widget" style="width:650px; margin:0 auto;"&gt;&lt;div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"&gt;&lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em; margin-top:3px;"&gt;&lt;/span&gt;&lt;strong&gt;Error:&lt;/strong&gt;&lt;br /&gt; That was a heck of try but you do not have permission to access this area.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt; '); //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 = &lt;?php echo $collection; ?&gt;; var def_repair = &lt;?php echo $repair; ?&gt;; var def_fuel = &lt;?php echo $fuel; ?&gt;; var def_tickets = &lt;?php echo $ticket; ?&gt;; //Select boxes for Collection $("#tdCollection").append("&lt;select id='collection' name='collection'&gt;"); for(i = 1;i &lt;= max_col; i++){ if(i == def_collection){ $("#collection").append("&lt;option selected='selected'&gt;" + i + "&lt;/option&gt;"); } else { $("#collection").append("&lt;option&gt;" + i + "&lt;/option&gt;"); } } $("#tdCollection").append("&lt;/select&gt;%"); //Select boxes for Repair $("#tdRepair").append("&lt;select id='repair' name='repair'&gt;"); for(i = 1;i &lt;= max_col; i++){ if(i == def_repair){ $("#repair").append("&lt;option selected='selected'&gt;" + i + "&lt;/option&gt;"); } else { $("#repair").append("&lt;option&gt;" + i + "&lt;/option&gt;"); } } $("#tdRepair").append("&lt;/select&gt;%"); //Select boxes for Fuel $("#tdFuel").append("&lt;select id='fuel' name='fuel'&gt;"); for(i = 1;i &lt;= max_col; i++){ if(i == def_fuel){ $("#fuel").append("&lt;option selected='selected'&gt;" + i + "&lt;/option&gt;"); } else { $("#fuel").append("&lt;option&gt;" + i + "&lt;/option&gt;"); } } $("#tdFuel").append("&lt;/select&gt;%"); //Select boxes for tickets $("#tdTickets").append("&lt;select id='tickets' name='tickets'&gt;"); for(i = 1;i &lt;= max_col; i++){ if(i == def_tickets){ $("#tickets").append("&lt;option selected='selected'&gt;" + i + "&lt;/option&gt;"); } else { $("#tickets").append("&lt;option&gt;" + i + "&lt;/option&gt;"); } } $("#tdTickets").append("&lt;/select&gt;%"); //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("&lt;div id='update'&gt;&lt;center&gt;&lt;img id='loading' src='images/icons/ajax-loader (1).gif' /&gt;&amp;nbsp;&lt;font color='red'&gt;Updating company&lt;/font&gt;&lt;/center&gt;&lt;/div&gt;"); 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 + '&amp;bio=' + bio + '&amp;forum=' + forum_url + '&amp;collection=' + collection + '&amp;repair=' + repair + '&amp;fuel=' + fuel + '&amp;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("&lt;center&gt;&lt;font color='green'&gt;Company has been updated&lt;/font&gt;&lt;/center&gt;"); }, 1550); setTimeout(function(){$("#update").fadeOut(1000); }, 2200); } }); }); }); &lt;/script&gt; </code></pre> <p>And here is all my HTML </p> <pre><code>&lt;form method="post" action="" name="edit_company_basic" id="edit_company_basic"&gt; &lt;table class="company" cellspacing="0" cellpadding="7" style="width:550px; margin:0 auto;"&gt; &lt;!--&lt;tr&gt; &lt;td colspan="4" style="padding:0px;"&gt;&lt;img src="&lt;?php echo $image; ?&gt;" alt="&lt;?php echo $name; ?&gt; Logo" /&gt;&lt;/td&gt; &lt;/tr&gt;--&gt; &lt;tr&gt; &lt;th colspan="2" class="th_bold"&gt;&lt;center&gt;Basic Information&lt;/center&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th width="120"&gt;Company Name:&lt;/th&gt; &lt;td width="400" valign="top"&gt;&lt;input type="text" name="company_name" class="company_name" id="company_name" value="&lt;?php echo $name; ?&gt;" style="width:395px;" /&gt;&lt;br /&gt; &lt;div class="toggle_container"&gt; &lt;div class="block"&gt; &lt;span id="warning_price" style="background:#FFF9F9; border:1px solid red; min-width:395px; width:395px; padding:5px;"&gt;&lt;strong&gt;Warning:&lt;/strong&gt; Editing the name will cost the company $2000&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th valign="top"&gt;Company Bio:&lt;/th&gt; &lt;td width="400"&gt;&lt;textarea name="company_bio" id="company_bio" style="width:390px; margin:0 auto; padding:5px; height:150px;"&gt;&lt;?php echo $bio; ?&gt;&lt;/textarea&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Forum URL:&lt;/th&gt; &lt;td&gt;&lt;input type="text" name="forum_url" id="forum_url" value="&lt;?php echo $forum; ?&gt;" style="width:395px;" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Default Collection:&lt;/th&gt; &lt;td id="tdCollection"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Default Repair Assistance:&lt;/th&gt; &lt;td id="tdRepair"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Default Fuel Assistance:&lt;/th&gt; &lt;td id="tdFuel"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Default Ticket Assistance:&lt;/th&gt; &lt;td id="tdTickets"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2" id="submit_form"&gt;&lt;div id="button_container"&gt;&lt;center&gt;&lt;input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /&gt;&lt;/center&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p>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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjefffan24
    1. USjefffan24
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery $.ajax only working on first click inside of $.click
      1. USjefffan24
      1. VTFavorite
    1. COFirst `<font>` tag I've seen in a long, long time.
      singulars
      1. POjQuery $.ajax only working on first click inside of $.click
      1. USPointy
    2. COlol yeah when I need to change it fast I use font rather then css.
      singulars
      1. POjQuery $.ajax only working on first click inside of $.click
      1. USjefffan24
    3. COYou can always use `style="color: red"` on any element you want
      singulars
      1. POjQuery $.ajax only working on first click inside of $.click
      1. USPointy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload