9606

jQuery executing correctly but only making change once

Question:

I have this rails3 app that displays a score in a popup div that I want updated every time an user selects the score... (submits the form.) on the server side the score is calculated and returned back in AJAX. This works, I can put a breakpoint in the following JavaScript:

<pre class="lang-js prettyprint-override">$('#eval_form') .bind("ajax:beforeSend", function (evt, xhr, settings) { xhr.setRequestHeader('accept', '*/*;q=0.5, ' + settings.accepts.script) }) .bind("ajax:success", function (evt, data, status, xhr) { var $response = xhr.responseText var encoded = jQuery.parseJSON($response) $('#scoretotal').replaceWith('Total Evaluation Score: ' + encoded.scores[0]) //also change button text $('#score-popup').attr('value', 'testing value') }); });

encoded.scores[0] and `encoded.scores[1] equal what they want. The rest of the jQuery executes, the first line with scoretotal works fine, it will indeed change that score...ONCE any subsequent times with new stores, it just doesn't update or do the replace with anymore...

Not only that but the button

<button id="score-popup"><%= @document.score %></button>

Value does not change with the above jquery or even the .prop I am at a lost as to why this is acting so wonky... here is the rest of the code from the view:

<pre class="lang-html prettyprint-override"><div id="element_to_pop_up" class="bobsyouruncle"> <a class="bClose">x</a> <table cellpadding="10"> <tr> <th colspan="3">OVERALL EVALUATION RATING</th> </tr> <tr> <td colspan="3" id="scoretotal">Total Evaluation Score: <%= @document.score %></td> </tr> ...etc... </table> </div>

So I think I am doing something stupid, it all executes, even sort of works (the scoretotal one changes, just once no more after that, and a score popup never changes... is it something to do with this post:

<a href="https://stackoverflow.com/questions/9099589/jquery-ajax-only-executing-once-but-appears-to-call-every-time-it-should" rel="nofollow">jQuery Ajax only executing once, but appears to call every time it should</a>

??

EDIT: I did get the button working by doing this:

$('#score-popup').html(encoded.scores[0])

(apparently because its an html button) and that works, though the rest of the code just works first time its executed, subsequent ones it just doesn't change the data, maybe I'm grabbing the wrong thing? or not changing it correctly with the replaceWith ?

Answer1:

You are replacing the whole table cell with something else, thus after the first time there is no table cell any more.

Wrap only the dynamic value in a span tag:

Total Evaluation Score: <span id="lbDocumentScore"><%= @document.score %></span>

Then assign its inner text:

var $response = xhr.responseText; var encoded = jQuery.parseJSON($response); $('#lbDocumentScore').text(encoded.scores[0]);

Recommend

  • Send data between php and dart
  • Magic number for plain text file
  • AJAX Permission Denied On IE?
  • parse json list in reverse order
  • jQuery & CSS - Cut text by height, no truncate
  • jqgrid error when deleting row
  • Loading Json as variable into jsTree
  • Is storing an OAuth token in cookies bad practise?
  • Sending HTML Form Multiple box via POST request with AJAX?
  • How to display international scripts in QLabels?
  • How can I encode a filename according to RFC 2231?
  • Convert from hex-encoded CLOB to BLOB in Oracle
  • Underlying type for Tuple in Swift
  • php DOMDocument - manipulating and encoding
  • Problem in Loading xml from specified url using javascript in FF & Google Chrome
  • Yii2: Finding file and getting path in a directory tree
  • Can't remove headers after they are sent
  • Clear activity stack before launching another activity
  • Angular2 Response for preflight is invalid (redirect) from some GET requests
  • How do I configure context broker accept post requests from my remote sensor?
  • nonblocking BIO_do_connect blocked when there is no internet connected
  • How to use JavaScript to determine whether a file exists in a directory?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Get data from AJAX - How to
  • Bug in WPF DataGrid
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Is there a mandatory requirement to switch app.yaml?
  • File upload with ng-file-upload throwing error
  • How to delete a row from a dynamic generate table using jquery?
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#
  • AngularJs get employee from factory
  • using HTMLImports.whenReady not working in chrome
  • embed rChart in Markdown
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app