Got a problem with semantic-ui dropdown.
I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
That is, when i choose the value from the first dropdown, the second dropdown's item will change.
But the thing is, when the items are changed, the second dropdown cannot be chose,
the value won't change. The dropdown won't collapse back.
The HTML
The First Dropdown
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Second Dropdown
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
..........................
The jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});
Found it,
I put $('#servicetype').dropdown();
after assigning the values:
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});
A workaround approach:
function setDinamicOptions(selector, options) {
var att = "data-dinamic-opt";
$(selector).find('[' + att + ']').remove();
var html = $(selector + ' .menu').html();
for(key in options) {
html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
}
$(selector + ' .menu').html(html);
$(selector).dropdown();
}
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
if (val == "val2")
setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
if (val == "val3")
setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
}
});
Try this.
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div
this is a demo
http://jsfiddle.net/BJyQ7/30/
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Another approach for setting dropdown content just in time (for example based on some dynamic criteria) is using the remoteApi, that is a particularly unfortunate name for the data binding features of the SemanticUI dropdowns.
Follow instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses
Related
I am trying to use .hide() from jQuery to hide some the parents of the li's that has the same class. No success so far. I see the other things like .addClass works fine, but .hide() is not working on this one?
Can someone give me a hand?
This is my code:
add()
function add() {
var element = document.getElementById("tasks");
var name = "acb"
$(element).append(
'<div class="d-flex mt-4">' +
'<span class="col-1">' +
'<li class="not-done" onclick="done(this)">' + name + '</li>' +
'</span>' +
'<span class="col-3">' +
'<button type="button" class="btn-edit">Edit</button>' +
'</span>' +
'</div>'
)
}
$("#show-done").click(function() {
$("li.not-done").parent().parent().hide();
// $("li.done").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks">
<div class="d-flex mt-4">
<span class="col-1">
<li class="done" onclick="done(this)">xys</li>
</span>
<span class="col-3">
<button type="button" class="btn-edit">Edit</button>
</span>
</div>
</div>
<button id="show-done">show</button>
When I select 1st Dropdown, I need to clear 2nd Dropdown.
I had used .empty() method but if I use this method later on I am not getting 2nd dropdown values.
I've tried the following method:
$("#taskcategorylist").change(function () {
console.log("Task Category Changed");
$('#tasktypes').val("");
});
1st dropdown Html code:
<div class="field">
<b>Task Category</b>
<div class="ui selection dropdown">
<i class="dropdown icon"></i>
<div class="default text">Select</div>
<div class="menu" id="taskcategorylist"></div>
</div>
</div>
2nd dropdown Html code:
<div class="field">
<b>Task Type</b>
<div class="ui selection dropdown">
<i class="dropdown icon"></i>
<div class="default text">Select</div>
<div class="menu" id="tasktypes"></div>
</div>
</div>
1st dropdown Jquery code:
$.get(window.routemap + "api/task/taskcategory", function (data) {
self.taskcategorylist = JSON.parse(data.Data).Lookup;
self.taskcategorylist.forEach(function (item) {
$('#taskcategorylist').append("<div class='item' data-value='" +
item.category_id + "'> " + item.category_name + "</div >");
});
});
2nd dropdown Jquery code:
$.get(window.routemap + "api/firm/tasktypes", function (data) {
self.tasktypes = JSON.parse(data.Data).Lookup;
self.tasktypes.forEach(function (data) {
$('#tasktypes').append("<div class='item' data-value='" +
data.tasktype_id + "'> " + data.task_name + "</div >");
});
});
Try this code.
$("#taskcategorylist").change(function () {
console.log("Task Category Changed");
$('#tasktypes').parents(".ui.dropdown").dropdown('clear');
});
I tried with .next(), .closest() .parent() but non of them worked.
Here is my html markup:
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
I am trying to show left arrow after user does the first click on the right arrow.
I hide it with:
jQuery('.ct_amy_arrows_prev').removeClass("prev_show");
Then I show it with:
jQuery('.ct_amy_arrows_prev').addClass("prev_show");
It works but since there are multiple instances of that slider on a page click on the first slider activates all left arrows on all sliders.
So I need a way to just activate that closest element and add prev_show class to it.
What am I doing wrong?
The whole nav code:
//Navigation
//==================================================
function initButtons() {
jQuery('#arrownav' + sliderID + ' .next-arrow').click(function() {
gonext();
});
jQuery('#arrownav' + sliderID + ' .prev-arrow').click(function() {
goprev();
});
}
var stopnextslide = 0;
function gonext() {
var stopnextslide = 0;
var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;
jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) + 3 == n) {
deck.slide(0);
stopnextslide = 1;
}
});
if (stopnextslide != 1) {
jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");
deck.next();
}
};
function goprev() {
var stopnextslide = 0;
var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;
jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 3) {
deck.slide(n - 1);
stopnextslide = 1;
}
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 1) {
}
});
if (stopnextslide != 1) {
deck.prev();
}
};
Thanks
You know the structure. Just navigate up to the parent then search for the previous button. No need to use expensive operations like closest
$('.ct_amy_arrows_next').on('click', function() {
$(this).parent().find('.ct_amy_arrows_prev').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow">></i>
</div>
<div class="ct_amy_arrows_prev" style="display: none;">
<i class="fa fa-angle-left prev-arrow"><</i>
</div>
</div>
You can achieve this using closest and find methods:
$('.next-row').click(function(){
$(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
$('.next-arrow').click(function(){
$(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
.prev_show{
color:red;
}
i{
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
You can do it like this:
$(this).closest(".ct_as_arrow_nav")
.find(".ct_amy_arrows_prev")
.removeClass("prev_show");;
Or like this:
$(this).parent()
.next(".ct_amy_arrows_prev")
.removeClass("prev_show");
Note: If the navs are dynamically created then consider binding the events like this!
Edit:
Change your initButtons to this:
function initButtons() {
jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext);
jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev);
}
So that gonewt and goprev will have this bound to the arrow buttons.
I want to add an dynamic input element onClick with jQuery and make the link disable. On deleting the input element that I just added I want to make the link clickable again.
I did the first part of adding element and making the link disable but the problem is when I add multiple elements and try to delete only one element all other links become clickable. I know, because I have given class to dropdown links. Not sure what to do to get this working right.
Here is my code:
$(document).ready(function() {
$(".list").on('click', function() {
$("#blockFeild").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>'
).show();
});
});
$(document).on('click', 'a.list ', function() {
$(this).addClass('no-click');
});
$(document).on('click', 'li.block', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", "#removebtn", function() {
$(this).closest('.parent').remove();
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
<count($users_fields); $i++){ ?>
<li class="block">
<a class="list" href="#">
<?php echo $users_fields[$i]?>
</a>
</li>
<?php } ?>
</ul>
</div>
Your problem stems from duplicate ids (#removebtn, remember ids must be unique) and also this section of your code:
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
These two lines grab all elements on the page with the classes "not-allowed", and "no-click" respectively and then remove those classes. This is why the removal of one of your rows enables all your dropdown links again.
You need to create a way to associate a generated row with ONLY the link used to generate it, perhaps through the addition of an identifying class on both the row and link. That way when the row is destroyed you can use jQuery to grab that specific link element and re-activate it.
UPDATE
Now that I understand the OP better I updated this Snippet with .index() and .eq() in order to associate the correct .block .list with a matched .removebtn. Also replaced .remove() with .hide(). Works perfect.
Change all ids to classes. ex. from #removebtn to .removebtn. You can only have unique ids. When elements are generated, they have the same id, so that's why they are all affected. I don't quite fully understand OP's objective, but I bet having duplicate ids is the root of the problem.
In order to remove a .parent.row on it's own .removebtn replace the last 4 lines with these lines:
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
SNIPPET
$(document).ready(function() {
$(".list").on('click', function() {
$(".blockfield").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'<button class="btn btn-info editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>' +
'</div>'
).show();
});
});
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
.no-click {
pointer-events: none;
}
.not-allowed {
cursor: not-allowed;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="block">
<a class="list" href="#">1</a>
</li>
<li class="block">
<a class="list" href="#">2</a>
</li>
<li class="block">
<a class="list" href="#">3</a>
</li>
</ul>
</div>
<section class='blockfield'>
</section>
I faced this problem previously that my code does not work with
$(document).on.....
So firstly you change the duplication of ids as foxinatardis said and test this:
$(document).delegate('.class_off_button', 'click', function (){
//what you want to do
});
I'm trying to update an ng-model when a radio button is checked. Although my radio buttons are actually images and my radio buttons are being updated by a function using arrows to cycle through them.
For some reason my $scope.transaction only updates when I actually click the image rather than changing the image using the arrows. Any idea why?
HTML
<div ng-repeat="contact in contacts"
ng-show="showContactID == {{contact.contact_id}}">
<div class="radio text-center">
<label>
<input type="radio"
value="{{contact.contact_id}}"
ng-checked="showContactID == {{contact.contact_id}}"
ng-model="transaction.contact_id">
<img src="public/img/profiles/{{contact.contact_id}}.jpg"
class="img-circle"
height="150">
<h4>{{contact.contact_name}}</h4>
</label>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('prev')">
<i class="fa fa-chevron-left fa-2x"></i></a>
</div>
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('next')">
<i class="fa fa-chevron-right fa-2x"></i></a>
</div>
</div>
CSS
.transaction .form-group.contacts input {
display: none;
}
.transaction .form-group.contacts .radio {
padding-left: 0;
}
JavaScript
$scope.changeContact = function(which){
var currentContactID = $scope.showContactID;
var newContactID = 0;
if(which){
angular.forEach($scope.contacts, function(contact, key){
if(contact.contact_id == currentContactID){
if($scope.contacts[which == 'next' ? key + 1 : key - 1] == undefined){
newContactID = $scope.contacts[which == 'next' ? 0 : $scope.contacts.length - 1].contact_id;
}
else{
newContactID = $scope.contacts[which == 'next' ? key + 1 : key - 1].contact_id;
}
}
});
$scope.showContactID = newContactID;
}
};
Whenever you calls changeContact function , also update transaction.contact_id value with newContactID in same function.