I am showing and hiding a div based on some options selection.
Have a dropdown list with options 'enabled and disabled'.once user selects enabled needs to display the div else Hide the div.
Based on dropdown option selection Hide/Show div is working fine, but
If Disabled is the configured value. when I load the page , div will be hidden(working fine) , Then I will select Enabled, then div shows but ....... When I click on reset option,
Dropdown option is getting back to Disabled but Div section which should be hiden is not hiding
Here I have my code like this, protection switch is the wtform field recieved from flask
{{form.protection_switch}}
<div align="center" >
<button class="btn btn-info btn-sm" type="submit"><i class="icon-ok bigger-110"></i>Submit</button>
<button class="btn btn-sm" type="reset"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
Section should be hide or display
<div id="protection_data"></br>
<table id="grid-table"></table>
<div id="grid-pager"></div>
</div>
Jquery code
function protection_selected() {
if ($('#protection_switch option:selected').val() == '0') {
$('#protection_data').hide();
} else if ($('#protection_switch option:selected').val() == '1') {
$('#protection_data').show();
}
}
$(document).ready(function() {
$('#protection_switch').change(function() {
protection_selected();
});
});
window.onload = protection_selected;
Listen for the click on the reset.
function protection_selected() {
var isVisible = $('#protection_switch').val() == '1';
$('#protection_data').toggle(isVisible);
}
$(function(){ //document ready
$("#protection_switch") //get your select element
.on("change", protection_selected) //listen for change event
.change(); //trigger the change event so defaults can be set
$('input:reset').on("click", function(e){ //bind click event to reset button
this.form.reset(); //force reset so we guarantee it has finished running
protection_selected(); //run the update code
e.preventDefault(); //cancel the click since we already ran the reset code
});
});
The pain in the rear thing about reset is you can detect when it has called, but there is no event for after it has successfully run. That is why I captured the click, run the reset on the form, called your function, and cancelled the click. Other way is to just use a delay inside and than call the function, but that can lead to a race condition.
Related
I have a table with buttons. My goal is whenever I click a button, it will disable. My problem is when I click the button, it only disable the first button in the column. What I want is to disable only the specific button that I have click. I used bootstrap for the table and buttons.
Here is my button:
<td>
<input type="button" onclick="checker()" href="php/doneProblem.php?problemID=<?= $rows['problemID'] ?>" id="btn-done" class="btn btn-primary" value="Mark as Done" />
</td>
Here's how I disable the button:
<script>
function checker() {
var result = confirm('Are you sure to mark this as done?');
if (result == false) {
event.preventDefault();
} else {
$('#btn-done').attr('disabled', true);
$('#btn-done').addClass('disabled');
}
}
</script>
I tried using class instead of id but it disable all the buttons when I click a single button.
Instead of trying to target the item by ID you will want to target the item via event.target. This gives you reference to the specific button that was clicked. You can read more about event.target here.
I have a drop down list in an MVC application. When an item in the drop down list is selected (including the same one), I want to trigger a function. However, the first item in the list can't trigger the function and it should be disabled. I have some code below which works initially but after clicking a valid option and then clicking --Select-- again, it still fires the code. How do I fix this?
MVC Control
#Html.DropDownList("ddlCountries", (IEnumerable<SelectListItem>)ViewBag.Countries, "--Select--", new { #class = "form-control" })
jQuery to trigger the DDL click event
$('#ddlCountries option:not(:first)').click(function () {
runCode()
});
jQuery to disable the first option
jQuery('#ddlCountries option:contains("--Select--")').attr('disabled', 'disabled');
Get the index of the selected option and check to see if it's greater than 0 on event fire. Indexes are 0 based.
$('#ddlcountries').on('change', function() {
var index = $(this).find('option:selected').index();
if (index > 0) {
alert('yay');
runCode();
} else {
alert('nay');
return;
}
})
I deleted the code to disable the first option because I couldn't get it to stay disabled after the first change. I modified the jQuery to trigger the event to:
jQuery('#ddlCountries').find('option:gt(0)').click(function () {
runCode()
});
Then I added styling to the --Select-- box to make it gray. You can still click on it but it won't do anything. Not exactly what I was trying to do but close enough
What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
I am working on a page that would allow users to enter an edit mode, in which dropdown forms appear when clicking on links, but I would like to disable this when users are not in editing mode. What I need to happen is for the data-dropdown attr to start as "disabled" but then be set to whatever id that corresponds with the form it should open, "drop25" for example. I have tried using both the attr and prop methods but haven't gotten very far. I can get them to start as disabled, but if I try to edit the attribute in a click handler it doesn't seem to work, even when the source says they change.
Here is what I have so far:
$(document).ready(function () {
$('a').attr('data-dropdown', 'disabled');
$(document).on("click", ":button.edit", function() {
//Enter Edit mode
if (editMode == false) {
editMode = true;
//when editing, enable dropdown
$('a').attr('data-dropdown', 'drop1');
}
else {
//turn off editing mode
editMode = false;
//disable dropdown
$('a').attr('data-dropdown', 'disabled');
}
});
});
Does anyone know if what I'm trying to accomplish is possible? Should I instead maybe just use another type of dropdowns?
Here is what I did to solve my problem
$(document).on('click', 'a', function () {
if (editMode == false && $('.f-dropdown').hasClass('open')) {
$(this).trigger('click');
window.location = $(this).attr('href');
};
As you can see, I added a click handler to all links, if the user isn't in edit mode and the foundation dropdown is open (which happens when you click on a link connected to a dropdown), trigger a click function on the link to close the dropdown and then visit the link that was clicked on.
I have a button, "Add to Cart" which sends an ajax request when clicked. After the request returns successfully, the the button is replaced by "In Your Cart". "In Your Cart" has a mouseover state: "Remove From Cart".
The design requirement is that "Remove From Cart" only appear when the user physically moves the mouse over "In Your Cart". If they simply click "Add to Cart" and don't move the mouse, the button should say "In Your Cart" after the ajax call completes, even if the mouse is still over the element.
A simple mouseover event listener doesn't work, because it triggers when the element becomes visible. I'm considering counting mouseovers and mouseouts of a wrapper element, in order to determine if the mouseover event is "real", or just the result of the element becoming visible, but that's really ugly. Any other ideas for me?
You could do something like this (edit as appropriate for your AJAX call):
HTML:
<div class="cart">
<button class="add-cart">Add to Cart</button>
<button class="in-cart" style="display:none;">In Your Cart</button>
</div>
Javascript:
var $addCart = $('.add-cart');
var $inCart = $('.in-cart');
$addCart.click( function(e){
$addCart.hide();
$inCart.show().addClass( 'initial' );
});
$inCart.mouseover( function(){
if( ! $inCart.is( '.initial' ) ){
$inCart.text( 'Remove from Cart' );
}
});
$inCart.mouseout( function(){
$inCart.text( 'In Your Cart' ).removeClass( 'initial' );
});
jsFiddle
UPDATE
Based on OP's comment below, I've update the HTML and Javascript as follows:
<span class='cart'>
<button class="add-cart">Add to Cart</button>
<button class="in-cart" style="display:none;">In Your Cart</button>
</span>
Javascript:
var $cart = $('.cart');
var $addCart = $('.add-cart');
var $inCart = $('.in-cart');
$addCart.click( function(e){
$addCart.attr('disabled','disabled');
setTimeout(function(){
$addCart.hide();
$inCart.show();
}, 1000);
});
$cart.mouseenter( function(){
if( $inCart.is(':visible') ){
$inCart.text( 'Remove from Cart' );
}
});
$cart.mouseleave( function(){
if( $inCart.is(':visible') ){
$inCart.text( 'In Your Cart' );
}
});
The differences here are:
The add-cart button is disabled while AJAX is simulated and then hidden.
mouseover and mouseout have been replaced with mouseenter and mouseleave.
These events are now tied to the span wrapper so that the user mouse behavior can be tracked better since the span never hides itself.
Updated jsFiddle
You can prevent an event from firing by using jQuery's event.preventDefault();
I would write it this way:
$('#elementid').mouseover(function(){
event.preventDefault();
});
This will stop it from doing what it is supposed to do until you manually fire it later, or add code after the event.preventDefault(); to make it do what you want.
using jquery, mouseenter and mouseleave only fire when you enter or leave... so use a static sized wrapper for your image
onsuccess of the ajax, fade the image to what you want
mouseenter, check a flag you set when add to cart was clicked, if its set, you know the user clicked order, moved the mouse, then moved back in..