So I have a problem getting the ID's from my buttons. My code is only returning the id value from the first tic button and not the rest of them when I click on them.
here is the HTML:
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
and here is the javascript:
const tick = document.querySelector('.tic');
tick.addEventListener('click', () =>{
var slot = tick.id;
console.log(slot);
});
it only returns 0 when I click on the first button but it does not return 1 when I click on the second one. Instead, it doesnt do anything. Any help would be great. Thanks
querySelector returns the first element.
Instead, use querySelectorAll to select all elements, loop through each and add a click event listener:
const tick = document.querySelectorAll('.tic');
tick.forEach(e => {
e.addEventListener('click', () => {
var slot = e.id;
console.log(slot);
});
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
Or, even better, use event delegation:
document.body.addEventListener('click', function(e) {
if (e.target.classList.contains("tic")) {
console.log(e.target.id);
}
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
Related
I have problem that Button can't click() on javascript if it has multiple button in one div/list. In this case, "ADD" button doing nothing if i click it. But "Delete" button can. If i remove Delete function on js, add button work properly. What's wrong?
I have HTML like this
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And JS function :
var id ="";
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
This problem happens because the second $('.coll-list').off('click') remove ALL on('click') event you have set before (i.e. on click on .btn-remove-coll, in this case).
You can try to change your off('click').on('click') order in your page and you'll see that will change the working button (or Delete or Add).
Here only remove button works
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And here add button only
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
2 possible solution to make both buttons work are:
Simply remove off('click')
Combine your 2 clicks in 1 on('click')
$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {
if($(this).hasClass("btn-add-coll")){
alert("add")
} else {
alert("remove")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
Try changing .coll-list from you JavaScript code with .coll_list because that is the class of you ul HTML tag.
Edit
It seems that it is impossible for some reason to have click functions for two different divs in the same <li> tag. I'd sugges you to change the HTML markup a bit, and use the <div> tag instead of <ul>. Fiddle: jsfiddle.net/xpvt214o/592987
Have a problem when trying to get values of radio with jQuery.
Here are my radio buttons:
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-warning radio-selector btn-sm active" data-toggle="happy" data-title="pub">Pub</a>
<a class="btn btn-warning radio-selector btn-sm notActive" data-toggle="happy" data-title="pri">Pri</a>
</div>
<input type="hidden" name="happy" id="happy">
</div>
<a id="add" class="btn btn-lg btn-primary">Add</a>
And here the JavaScript code to get the selected value:
$('#add').live("click",function() {
var getdata = $('#radioBtn .radio-selector:checked').data("title");
alert(getdata);
}
But all time I get undefined value! Any solution to get the data-title in the radio buttons?
try this
$('#add').live("click",function()
{
var getdata = $('#radioBtn > a.active').data("title");
alert(getdata);
}
Is it possible to differentiate between a group of buttons? Given the following buttons.
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
If I do the following I can highlight the selected button in group1
$('#group1 button').on("click", function(){
$('#group1 button').removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
})
I expect the button list to be dynamic so I want to select buttons with <p> to highlight separately so remove the #group selector and just highlight buttons within each <p>.
So in this example I could highlight Medium $3.50 and then highlight Soy independently.
Try this code:
$(document).ready(function () {
$("button").on("click", function () {
$(this).siblings("button").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
});
Try selecting only children of the parent <p> instead of all #group1 buttons.
$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default");
This way you are only accessing a subset of buttons within the parent element, instead of running the query on the entire DOM.
You can use .siblings to select all sibling elements so you can find all sibling elements of the clicked .btn element:
$("p .btn").on("click", function() {
$(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
You can use :contains() selector to identify which button is clicked. and then use the siblings() selector.
$( "button:contains('Small $2.50')" ).siblings()
Better approach would be to use different classes for each group. But the above should get you going.
So I depending the link to the next step using ng-form directive. But I found out that the other link to the next steps except the current one is enabled.
So I changed it to use flag for ng-disabled . here is my code:
index.html
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a ui-sref="step1" type="button" class="btn btn-primary btn-circle active-step-wizard">1</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step1Form.$invalid;" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step2Disabled;" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step3Disabled;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step4Disabled;" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step5Disabled;" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
</div>
</div>
app.js
$scope.step2Disabled = true;
$scope.step3Disabled = true;
$scope.step4Disabled = true;
$scope.step5Disabled = true;
But using this approach will not enabled the next step whenever the current step's form validation is valid. How do I solve this? thanks
UPDATE
I try this solution:
test 1:
<div class="stepwizard-step">
<a ng-disabled="step3Disabled;step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
test 1 result:
it only works when Im in current step, the ng-disabled works when the form validation is valid
test 2:
<div class="stepwizard-step">
<a ng-disabled="step3Disabled || step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
test 2 result:
When Im at previous step, the link to this step is perfectly disabled. But the link to next step is still disabled when Im at this step and the form is valid.
you should have a $scope variable in your controller:
$scope.currentStep = 0;
$scope.enableCount = 0;
then you have a function
$scope.changeStep = function(index){
$scope.currentStep = index;
}
in your submit function you add this line of code:
if(form.$valid && $scope.enableCount <= $scope.currentStep) $scope.enableCount++;
then in your html you should do like this:
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a ui-sref="step1" type="button" ng-click="changeStep(0)" class="btn btn-primary btn-circle active-step-wizard">1</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 1" ng-click="changeStep(1)" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 2" ng-click="changeStep(2)" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 3" ng-click="changeStep(3)" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 4" ng-click="changeStep(4)" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 5" ng-click="changeStep(5)" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
</div>
</div>
I am trying to do jQuery sortable with items to be moved from tab contents to another div. It it working mostly fine, but the problem I am having is that I would like the item to be back to tab from which it was taken.
So let say that I have got tabs:
Shipping Address with items:
Street 1
Street 2
City
Country
Attributes with items:
Industry
Types
Full Name
The tab content is taking 50% of width on left and 50% of width on right is the div block to were I want to drop the items. If I would like to remove the item from div block, it should come back to the related tab, so e.g. Industry cannot go back to Shipping Addres , it needs to go to Attributes.
JSFiddle: http://jsfiddle.net/epxp5L48/
The screen how it looks like
My HTML code:
<div class="row">
<div class="col-xs-6">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Attributes</li>
<li>InvoiceAddress</li>
<li>ShippingAddress</li>
</ul>
<div id="fields-draggable" class="tab-content">
<div class="tab-pane connectedSortable ui-sortable active" id="Attributes">
<button id="field_industry" class="btn btn-primary btn-lg btn-block ui-sortable-handle">industry</button>
<button id="field_types" class="btn btn-primary btn-lg btn-block ui-sortable-handle">types</button>
<button id="field_full_name" class="btn btn-primary btn-lg btn-block ui-sortable-handle">full_name</button>
</div>
<div class="tab-pane connectedSortable ui-sortable" id="InvoiceAddress">
<button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
<button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
<button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
<button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
<button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
<button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
<button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
<button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
</div>
<div class="tab-pane connectedSortable ui-sortable" id="ShippingAddress">
<button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
<button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
<button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
<button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
<button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
<button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
<button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
<button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
</div>
</div>
</div>
<div class="col-xs-6">
<div id="fields-sortable" class="connectedSortable well ui-sortable" style="min-height: 40px;">
</div>
</div>
</div>
and jQuery UI code:
$("#fields-sortable, #Attributes" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$("#fields-sortable, #InvoiceAddress" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$("#fields-sortable, #ShippingAddress" ).sortable({
connectWith: ".connectedSortable",
placeholder: "btn btn-default btn-lg btn-block",
cancel: ''
});
$( "#fields-sortable" ).sortable({
update: function (event, ui) {
var data = $(this).sortable( "serialize");
console.log(data);
}
});
I have managed to do it by adding the data-tab-id attribute to the buttons and adding over event to the sortable
over: function(event, ui) {
var overId = $(this).attr('id');
var elementId = $(event.toElement).data('tab-id');
if(overId != "fields-sortable" && overId != elementId) {
var aClick = $("#nav-types").find('a[href="#' + elementId + '"]');
aClick.click();
}
}