I have an ASPxButton to export some data from a webpage in different formats. There is a drop down (combo box) list of export formats. After a format is selected, the page has to reload. There are issues if that button is clicked before the page is fully reloaded, so I want to either disable the ability to click that button until the page is fully loaded.
How can I do this with jQuery?
Set the button's disabled attribute in your HTML, then in your jQuery enable it (by removing the disabled attribute) when the DOM is ready.
HTML:
<button id="foo" disabled="disabled">Click Me!</button>
JS:
$(function() {
$("#foo").removeAttr("disabled");
});
Initially keep disabled the button and make enable after document is ready. Use .on() and change as event when combobox/dropdownlist is changed. Like this.
HTML
<button id="btn" disabled="disabled">Export</button>
JS
//Enabled after document is ready
$(document).ready(function(){
$('#btn').removeAttr('disabled');
});
//Disabled when dropdownlist is changed
$(document).on('change', 'combobox #id or .class', function(event) {
$('#btn').attr('disabled', 'disabled');
});
Related
My code for jquery is: (this will trigger on modal button click)
$(document).on('click', '.js-modal-remove-button', function () {
$('#code-output').attr('da-url',"1111");
});
My code for html is:
<input type="hidden" name="problemCode" id="code-output" da-url=2/>
problem is that there is a button in my page, on this button click modal opens and in the modal there is also a button contains class
js-modal-remove-button
on the action of that i need to set the my main page(on which where modal opening button present) da-url value
Just and another class to your button and use this jquery
HTML
<button class="js-modal-remove-button model_button_class"></button>
Jquery
$(document).on('click', '.js-modal-remove-button .model_button_class', function () {
$('#code-output').attr('da-url',"1111");
});
Here .model_button_class is the another class .
I thing it will help you.
Try this:
$('.js-modal-remove-button .model_button_class').on('click',function(){
$('#code-output').attr('da-url',"1111"); });
I am using PrimeFaces 4.0 and tomcat-6.
I have used tab view for edit of a profile, by default the submit button is disabled using jQuery. And on change or key press of those input fields I'm enabling the button again using jQuery. But the button is disabled and not getting enabled again if i change the value in the input text.
MY scenario is editing of a profile,in that the submit button is disabled till any one of the field is changed. These are the ID's of those text fields.
I am disabling the button by
$(function() {
jQuery("button[type=submit]").prop("disabled", true).addClass('ui-state-disabled');
})
and to enable
$(function() {
$('#productName,#majorVersion,#minorVersion,#buildVersion,#revision,#productDescription')
.on('change keypress paste textInput input',
function() {PF('submitButton').enable();
});
});
I'm not sure if I understood your question correctly!
But as I can see that you are having a problem with disabling and enabling a button using PrimeFaces.
Here's a quick example:
Button
<p:commandButton value="THE BUTTON" widgetVar="thebuttonVar"/>
JS
$(function() {
// disables the button on the page load
thebuttonVar.disable();
// register the enabling event
$('#formId')
.on('change keypress paste textInput input', '#productName,#majorVersion,#minorVersion,#buildVersion,#revision,#productDescription', function() {
thebuttonVar.enable();
});
});
Again, your code would be working even if you are using only the change event.
I am trying to change a page in the Wordpress menu dynamically. That is, I dont want to change the menu itself, but the page that is displayed in the backend. I am using jquery to add a div once a button is clicked. My javascript function looks like this
$(document).ready(function(){
$("#show").click(function(){
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
The button that is clicked submits a form and looks like this
<input type="submit" name="show" id="show" value="Show Me" class="button-primary" />
Once the button is clicked, the script works fine by adding the div briefly. The problem is, that the page is reloaded as well and the html code is "reset" so that the added div disappears again. Does anyone know a workaround for this?
Try
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
You can prevent the default behavior of the form button by using preventDefault(), would work like this:
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
See: http://api.jquery.com/submit/
We have a form within a modal window.
I have a submit button, which saves to db. And I would like to simultaneously close the modal window.
The function for close is correct, just not my usage lol.
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" onclick="$.lightbox().close();" />
The modal window , contains iframe with php / html within it, this form is part of that iframed html code.
Any suggestions ?
To close the dialog when the element with ID save_thumb is clicked:
$('#save_thumb').click(function ()
{
$.lightbox().close();
});
You might want to bind to its parent form's submit event, however, since keyboard events won't trigger the click handler:
$('#my_form_id').submit(function ()
{
$.lightbox().close();
});
Whichever you decide on, make sure to wrap it up in a document ready handler.
Add this javascript to your file and remove the onclick attribute on your button. Make sure the javascript is added inside tags.
$(document).ready(function(){
$('#save_thumb').click(function (){
$.lightbox().close();
});
});
Use the bind function,
$(function() {
$("#save_thumb").bind("click", function() {
$.lightbox().close();
});
});
I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled I have more Nativities, it triggers the submit button and prematurely submits the form.
The form is in dev right now, but it can be found here.
The code I am using for the toggle button is:
<script type="text/javascript">
$(function() {
$("#schedule").accordion({ header: "h5", collapsible: true });
$("#more-nativities").hide();
$("#toggle").click(function() {
$("#more-nativities").slideToggle("slow");
});
});
</script>
The code for the submit button is pretty basic:
<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>
The code for the toggle button is:
<button id="toggle">I have more nativities</button>
Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?
Thanks!
Try adding a type, i.e.:
<button type="button" id="#toggle">Text</button>
http://www.w3schools.com/tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.
Esteban has one solution. A better one is described in the jQuery tutorial:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Try
return false;
after the slide toggle on the click function fro the toggle button.
From W3Schools:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
http://www.w3schools.com/tags/tag_button.asp
Be sure to specify type="button"