DeveloperDan DeveloperDan - 3 months ago 8
Javascript Question

Why does this Code Magazine sample fail in Chrome (only)?

I downloaded the sample code from this Code Magazine article. It's a progress indicator for when a submit button is clicked inside an html form. It works in Firefox and IE but in Chrome the submit never completes. The button text changes from Save to Saving... and never reverts back to Save. For some reason the form is never posted. Here's the Submit button:

<button type="submit" id="submitButton" class="btn btn-primary" onclick="return DisplayProgressMessage(this, 'Saving...');">
Save
</button>


And here's the script:

<script>
function DisplayProgressMessage(ctl, msg) {
$(ctl).prop("disabled", true);
$(ctl).text(msg);

return true;
}



Answer

This may be related to the Content Security Policy for Google Chrome (If you have an extension enabled) which may disable inline events such as onclick.

Aside that, the code does not revert the element back to Save as you have not told it to.

Breakdown of the method:

$(ctl) will refer to the button

  • You disable it
  • You set the text to "Saving"
  • You return from the function

You don't tell it to reset the text back to "Save"

It has exactly the same behaviour if you change the code structure

var $button = $("#submitButton");

$button.on("click", function() {
     DisplayProgressMessage(this, "saving...");
});

function DisplayProgressMessage(ctl, msg) {
   $(ctl).prop("disabled", true);
   $(ctl).text(msg);

   return true;
}

https://jsfiddle.net/xzq701r9/

Comments