I want 5 min after the page is loaded. Activate a button that is disabled

Question

I use PrimeFaces 7.0

I tried to make a function with jquery but it doesn't work.

 jQuery(document).ready(function() { jQuery(document).ready(function() { if (document.getElementById("resultsFormId:neueTanAnfordern").= null) { setTimeout(function() { document:getElementById('resultsFormId.neueTanAnfordern');disabled = false. document:getElementById('resultsFormId.neueTanAnfordern');removeAttribute("aria-disabled"). document:getElementById('resultsFormId.neueTanAnfordern');removeAttribute("disabled"), }; 15000); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="ui-g-6 ui-md-3 ui-lg-3"> <button id="resultsFormId:neueTanAnfordern" name="resultsFormId:neueTanAnfordern" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled" onclick="PrimeFaces.ab({s:&quot;resultsFormId:neueTanAnfordern&quot;,f:&quot;resultsFormId&quot;,u:&quot;resultsFormId&quot;});return false;" type="submit" disabled="disabled" role="button" aria-disabled="true"> <span class="ui-button-icon-left ui-icon ui-c ui-icon-phone-android"></span><span class="ui-button-text ui-c">Neue TAN anfordern</span></button> </div>

before function execution:

<div class="ui-g-6 ui-md-3 ui-lg-3">
<button id="resultsFormId:neueTanAnfordern" name="resultsFormId:neueTanAnfordern" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled"
onclick="PrimeFaces.ab({s:&quot;resultsFormId:neueTanAnfordern&quot;,f:&quot;resultsFormId&quot;,u:&quot;resultsFormId&quot;});return false;" type="submit" disabled="disabled" role="button" aria-disabled="true">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-phone-android"></span><span class="ui-button-text ui-c">Neue TAN anfordern</span></button>

</div>

After function execution:

<div class="ui-g-6 ui-md-3 ui-lg-3">
<button id="resultsFormId:neueTanAnfordern" name="resultsFormId:neueTanAnfordern" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled"
onclick="PrimeFaces.ab({s:&quot;resultsFormId:neueTanAnfordern&quot;,f:&quot;resultsFormId&quot;,u:&quot;resultsFormId&quot;});return false;" type="submit" role="button">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-phone-android"></span><span class="ui-button-text ui-c">Neue TAN anfordern</span>
</button>
</div>

aria-disabled="true" is not im Button tag, but Button stay disabled

I thank you in advance

Answer 1

1. Remove one ready
2. Use jQuery selector - you need to escape the colon
3. Cache the element
4. Use on click and either make the button type="button" or preventDefault
5. No need to set disable to false if you remove it

 $(function() { const $neueTanAnfordern = $("#resultsFormId\\:neueTanAnfordern"); console.log($neueTanAnfordern.length) if ($neueTanAnfordern.length > 0) { $neueTanAnfordern.on("click", function(e) { e.preventDefault(); const parts = this.id.split(":"); PrimeFaces.ab({ s: this.id, f: parts[0], u: parts[0] }); }); setTimeout(function() { $neueTanAnfordern.removeAttr("disabled").removeAttr("aria-disabled"); }, 3000); // changed to make it faster to test } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="ui-g-6 ui-md-3 ui-lg-3"> <button id="resultsFormId:neueTanAnfordern" name="resultsFormId:neueTanAnfordern" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled" type="submit" disabled="disabled" role="button" aria-disabled="true"> <span class="ui-button-icon-left ui-icon ui-c ui-icon-phone-android"></span><span class="ui-button-text ui-c">Neue TAN anfordern</span></button> </div>