I have an MVC application where I use more views, partial views.
In one partial view I have two buttons:
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="javascript:test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
I need to put some logic in javascript when I click these buttons, but it seems the onclick event is not raised, it does nothing when I click the buttons.
The buttons are in a partial view, in the "parent" view I have added the code:
$("#btnSilviPrioInvoiceGenerate").on("click", function (e) {
e.preventDefault();
console.log("asas");
//var companyId = $('input[name=IssuerCompanyId]:checked').val();
var action_url = '#Url.Action("GenerateInvoiceDamage", "TimberMonitor", new { Area = "", id = #ViewBag.Id })';
window.location = action_url;
this.disabled = true;
});
I have tried to add this code inside the
$(document).ready(function () {
I have tried to add to add outside the
$(document).ready(function () {
from the "parent" view.
If I try to use the method that it is defined in the onclick event from the button,
function test()
{
console.log("test");
}
I get the error that test is not defined. If I put the javascript code in the partial view it is working with
$("#btnSilviPrioInvoiceShow").on("click", function (e) {
, but all the javascript code is in the "parent" view, so I thought it would be better to add there the javascript code.
Can you advise?
Make your button like following:
<input type="button" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</input>
<input type="button" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</input>
As you can see, this example works correctly, remove javascript: label
$("#btnSilviPrioInvoiceGenerate").on("click", function(e) {
e.preventDefault();
console.log("btnSilviPrioInvoiceGenerate clicked");
});
function test() {
console.log("it is test function");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
Related
I'm am attempting to add a new row to a table by clicking an add row button. However, clicking the add row button simply refreshes the page.
I have tried multiple ways to stop this such as preventDefualt and return false, all to no avail.
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click'),
function(e) {
e.preventDefault();
alert("works");
return false;
}
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
You have to close the click handler properly, check the location of end parenthesis.
Below is the snippet with correct format:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click', // <-- removing end paranthesis after "click" event will close the function
function(e) {
e.preventDefault();
alert("works");
return false;
}); // <-- adding end paranthesis here
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
I have 6 Buttons, I gave each button a Default Status of false, if the user clicks on a button that corresponding Status is switching to true. Now if I Switch a button all other button Statuses shall switch to false.
Something like this worked but what is a good way to Code this for many Buttons, I do not want to repeat myself that much:
toolOneStatus = false
$('#btn-tool-one').click(function() {
toolOneStatus = true;
toolTwoStatus = false; ....
}
You can use .data() for this. Check snippet below...
$('button').click(function(){
alert('status ' + $(this).data('status'));
if($(this).data('status')=="false"){
//do this
} else {
//do this
}
$(this).data('status','true')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-status="false">Button1</button>
<button type="button" data-status="false">Button2</button>
<button type="button" data-status="false">Button3</button>
<button type="button" data-status="false">Button4</button>
<button type="button" data-status="false">Button5</button>
<button type="button" data-status="false">Button6</button>
You can use a single click function and identify the button by a data-no attribute.
This sample adds a blue color to the active button while all others remain gray. The activeButton variable represents the number of the active button.
var activeButton = 0;
$('.mybtns').click(function() {
activeButton = $(this).data('no');
console.log('active='+activeButton);
$('.mybtns').css('background-color','rgb(221, 221, 221)');
$(this).css('background-color','lightblue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybtns" data-no="1">Test1</button>
<button class="mybtns" data-no="2">Test2</button>
<button class="mybtns" data-no="3">Test3</button>
<button class="mybtns" data-no="4">Test4</button>
<button class="mybtns" data-no="5">Test5</button>
<button class="mybtns" data-no="6">Test6</button>
<button class="mybtns" data-no="7">Test7</button>
To loop through each of the buttons and execute some code for each, you can use the aptly named .each() function available in jquery. You can find the documentation for it here - each()
Whenever a button is clicked, .each() executes the function for all the elements with class=buttons and set the status=false. Inside the function you can use the $(this) selector to select the object of the current iteration. Finally outside the loop, the button which triggered the event, is given status=true.
$('button').click(function() {
$(".buttons").each(function(index) {
// Looping through each element having class "buttons"
$(this).data("status", "false"); //Setting every button to false.
$(this).next().html($(this).data("status"));
});
$(this).data("status", "true"); // Outside the loop, setting status true for the button which triggered the click event.
$(this).next().html($(this).data("status"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttons" id="button1" data-status="false">Button1</button><span id="p1"></span>
<button type="button" class="buttons" id="button2" data-status="false">Button2</button><span id="p2"></span>
<button type="button" class="buttons" id="button3" data-status="false">Button3</button><span id="p3"></span>
<button type="button" class="buttons" id="button4" data-status="false">Button4</button><span id="p4"></span>
I'm usng jBox url : http://stephanwagner.me/jBox .
and creating a modal every time on click of a link. when the modal is created for the first time, listeners for buttons on that created modal are getting added on the "onCreated" attribute. These listeners are getting attached for 1st time properly and working when those buttons are clicked. From the second time, the listeners are not working. its like dummy button with no listeners.
please find the code sample here.
http://jsfiddle.net/sedhuait/4zdavzap/2/
$('#btn').click(function () {
var title = "Create Group";
var createGroup = '<section class="container-fluid"> <div class="form-group col-lg-7"> <button id="btn-create-group" class="btn btn-custom btn-lg btn-block" data-i18n="menubar.group"> ' + title + ' </button> </div> <div class="form-group col-lg-5"><button id="btn-create-group-cancel" class="btn btn-cancel btn-lg btn-block" data-i18n="menubar.group"> Cancel </button> </div> </div> </div> </section>';
var myModal = new jBox('Modal', {
title: title,
content: createGroup,
width: 400,
onCreated: function () {
alert("in on created ");
$('#btn-create-group-cancel').click(function () {
alert("in on cancel ");
myModal.close();
});
$('#btn-create-group').click(function () {
myModal.close();
alert("in on create ");
});
}
});
myModal.open();
});
Use myModal.destroy(); after myModal.close(); and it will work
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
I am trying to change the class of a button when another button is clicked. I am able to change css on the page but have been unable to change btn-primary to btn-default.
Button:
<button type="button" class="btn btn-primary btn-circle" id="circle-1">1</button>
View:
events: {
"click #activate-step-2" : "newParent"
},
newParent: function(event) {
$('#step-1').css({'display':'none'});
$('#step-2').css({'display':'initial'});
}
I have tryed:
$(event.target).find('button').toggleClass('btn-primary btn-default')
But it didnt work,
so i'm not sure what else to try ?
$("#circle-1").removeClass("btn-primary").addClass("btn-default");