Backbone change class with multiple elements - javascript

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");

Related

javascript to enable and disable a button based on changes in form

i am using a javscript to enable a button based on the changes in the form field in django python using bootstrap.below is the script
$("#employee_name, #employee_name2").on("keyup",function() {
$(".btn-action").prop("disabled",false);
if( ($("#employee_name").val()) == ($("#employee_name2").val())) {
$(".btn-action").prop("disabled",true);
}
});
also the below code in html to initially disable button
<button type="submit" class="btn btn-primary mt-3 btn-action" disabled>Save</button>
but the button stays disabled even after changing values in the field.any help would be appreciated
you need to add the below script
$(document).ready(function(){
$("#employee_name,#employee_name2").on("keyup",function(){
$(".btn-action2").prop("disabled",false);
if(($("#employee_name").val())==($("#employee_name2").val())){
$(".btn-action2").prop("disabled",true);
}
});
});
and below in the html
button type="submit" class="btn btn-success mt-3 btn-action2" disabled>Save</button>

How to toggle active class in two button and hide div using jQuery?

In my case, My button1 is active by default so my form1 is shown by default too and I want to switch the two forms by clicking the button1 and button2. How can we accomplish that using jQuery.
<button type="button" class="btn btn-light activate-form active-btn">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script>
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
$(this).addClass("active-btn");
});
});
</script>
Use a .is-active (with the appropriate CSS) for both your buttons and forms
Cache your forms in a variable
Use the data-* attribute (i.e: data-target in the example below) to store the desired selector you want to target on click
jQuery(($) => {
const $actForms = $(".custom-register");
const $actFormsBtns = $(".activate-form");
$actFormsBtns.on("click", function() {
$actFormsBtns.add($actForms).removeClass("is-active");
$(this).add($(this.dataset.target)).addClass("is-active");
});
});
.activate-form.is-active { background: #0bf; }
.custom-register { display: none; }
.custom-register.is-active { display: block; }
<button type="button" data-target="#normal-user-form" class="btn btn-light activate-form is-active" >form1</button>
<button type="button" data-target="#business-user-form" class="btn btn-light activate-form" data-target="">form2</button>
<form id="normal-user-form" class="custom-register is-active">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
If I understand what you mean correctly, you're looking for something like this:
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
var formId = $(this).addClass("active-btn").data('target');
$("form").removeClass("active-btn");
$(formId).addClass("active-btn");
});
});
.active-btn {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light activate-form active-btn" data-target="#normal-user-form">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form" data-target="#business-user-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register active-btn">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
You can try to add data-target attribute inside the <button> tag to refer the form id.

Button onclick is not working properly

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>

How to disable button using jquery in materialize css

I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:
html:
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
jquery:
$('#submit-btn').off().on('click', function(){
$('#submit-btn').addClass('disabled');
});
Try this
$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');
Working Demo
$(document).ready(function() {
$('#submit-btn').on('click', function() {
$(this).removeClass("waves-effect waves-light submit").addClass('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
What about
$('#submit-btn').prop('disabled', true).addClass('disabled');
To disable the button using javascript.
eleme.classList.add('disabled');
To enable the button using javascript.
elem.classList.remove('disabled');
E.g:
let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button
to disable button you can use
$("#submit-btn").attr("disabled", "true");
Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;

Events do not bind to dynamically created elements till after that element is clicked

My events are not binding to dynamically created elements until that element has been clicked. So, the page loads, I can click the button and nothing happens, the second time I click the button it works.
Example code:
$(function() {
$("#resultsTable").on("click", ".confirm", function(){
$(this).confirm({
text: "Are you sure you want to delete this entry?",
title: "Confirmation Required",
confirm: function(button) {
//do nothing
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default",
});
});
});
This is using jquery.confirm here: https://myclabs.github.io/jquery.confirm/
If I just do:
$("#resultsTable").on("click", ".confirm", function(){
alert("Did Stuff");
});
The alert pops up. What do I need to do for the first piece of code to get it to work on the first click?
Edit: Here is my template that I create the elements with:
<script id="buttonsTemplate" type="text/x-jquery-tmpl">
<div class="col-md-6">
<button type="button" id="enterInPTPButton" class="btn btn-primary" style="border-radius: 0; margin-left:10px; border-color:#3C5B75;">Entered In PTP</button>
<button type="button" id="deleteEntryButton" class="btn btn-warning confirm" style="border-radius: 0; margin-left:10px;">Delete Entry</button>
<button type="button" id="offboardedButtons" class="btn btn-info" style="border-radius: 0; margin-left:10px; border-color:#3A7B8E;">Offboarded</button>
</div>
</script>
What do I need to do to attach the plugin to the deleteEntryButton each time I use the template?

Categories

Resources