1

I have a requirement to change the value of apex:commandButton from 'return to uploader' to 'Done' using Javascript(Jquery).

Below is my VF Page code:

<apex:commandButton style="float: right;" id="buttonId" value="Return to uploader" action="{!goToTypeSelection}" rendered="{!showAutoMatchUpload}" />

Below is my Javascript code that I am trying to change:

$upload = $(".upload[data-status='pending']").filter(":first"); //There is a HTML tag with data-status='Pending' in my HTML component that I have not shown.
if($upload.length == 0){
   $('#buttonId').attr('value', 'Done');
   console.log($("[id$=buttonId]").val());
}

Though I changed the attribute value to done from Javascript as shown above, the button is not getting changed.

I possibly see I am doing something wrong but not sure what is going wrong:

  1. I am changing the attribute value the wrong way. If yes, can you please suggest on how to change the value of the apex:commandbutton from JS.
  2. I have to rerender the button again after changing the attribute value from Javascript. If yes, can you please let me know on how to rerender the button from the Javascript.
6
  • Why are you doing it this way, instead of in the VF Page itself (and if you used custom labels the admin could override the text through the setup UI) and how are you getting the button ID? With the latter, the ID in the page is generated based on the page structure and isn't just the value specified in the VF Page itself.
    – Phil W
    Jan 21, 2023 at 8:06
  • Please edit the question to answer these extra points.
    – Phil W
    Jan 21, 2023 at 8:07
  • @PhilW, I am doing this way because the whole code is already built in Javascript. So I had to continue with JS. Also, regarding the ID, I was able to console.log and the data is getting displayed properly. Hence, the code with the Id is working fine Jan 21, 2023 at 13:53
  • sorry, if I have understood your question wrong. Is there any other way of the changing the button value using JavaScript (it's fine if it is through any other approach) Jan 21, 2023 at 14:00
  • This is a visual force page, with an apex command button. Just update the VF Page to change the label. What you appear to be doing is a hack.
    – Phil W
    Jan 21, 2023 at 14:10

1 Answer 1

3

First, the <button> that's generated here does have a value property, but that's actually just the value submitted to the server, and not the actual label of the button. The value is actually just the innerHTML/innerText of the button, so you need to use .html() or .text() to set the value:

$("[data-submit-button]").text("Done");

Second, Visualforce does some kind of transformation on the id property for <apex:*> elements, which ends up looking like j_id0:j_id1:buttonId; the exact format will depend on the page, if any parent elements have id values, and whether or not the button is in an <apex:pageBlockButtons> element, which will cause two buttons to appear with slightly different ID values, such as idForm:idPageBlock:idPageBlockButtons:buttonId and idForm:idPageBlock:idPageBlockButtons:bottom:buttonId.

Use either a data- property or a CSS class to target the button, or use the $Component variable to get the correct Id.

Examples:

$("#{!$Component.idForm.idPageBlock.idPageBlockButtons.buttonId}")

Or:

$("[data-submit-button]")

Where the button is changed to:

<apex:commandButton html-data-submit-button="submit" ...

Or:

$(".submitButton")

And setting a style class:

<apex:commandButton styleClass="submitButton" ...

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .