I need the last node of a JSTree to present as list of individual buttons, horizontally after it. Each button has a different value that records a score for that last node's question. I can't figure out how to fire individual items click events inside the list item. The click event only fires for the entire node.
![screenshot gui design] https://i.ibb.co/FKwDNFz/Capture.jpg
Any Ideas on how i could accomplish this?
See attached image.
I have tried to add answer options as another subtree to question but that would display answers vertically and I need them to be horizontal to the right of the node.
I should be able to individual click the lettered buttons.
<ul class="question">
<li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
<div class="row">
<div class="col-sm-8">
a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
</div>
<div class="col-sm-4 text-right">
<input type="radio" id="asm-input" hidden="hidden" value="" />
+/-A
+A
+/-
+
-
</div>
</div>
</li>
</ul>
.
.
.
let links = [...document.body.querySelectorAll('a')];
links.map( link => {
link.addEventListener('click', event => {
let value = event.target.getAttribute('data-value');
console.log(value);
});
});
<ul class="question">
<li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
<div class="row">
<div class="col-sm-8">
a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
</div>
<div class="col-sm-4 text-right">
<input type="radio" id="asm-input" hidden="hidden" value="" />
<a id="ppp" href="#!" data-value="1" class="badge badge-pill badge-secondary asm-option align-middle">+/-A</a>
+A
+/-
+
-
</div>
</div>
</li>
</ul>
Related
Hello I'm fairly new to jQuery (and stackoverflow), i saw a few questions about showing/hiding div for checkbox but i couldn't find a solution that apply for several checkboxes at the same time.
I would like to make it work so that when my first checkbox is checked, the 1st div/panel just after is shown then hiden when uncheck. And the same thing for my second checkbox with its own panel.
Right now, both panel are shown when first checkbox (or second checkbox) is checked.
I don't know how to make it so the panel shown or hidden will be dependant of the checkbox (li?).
I would like a solution that could apply without touching the code when adding new checkboxes, so i think maybe ID shouldn't be use, right? is there any solution?
Your help is much appreciated!
Thanks in advance!
HTML :
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
JQUERY:
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
panel.show();
} else {
panel.hide();
};
});
});
by using the children method, you can call the respective div element.
and used 'parents' to access the outside element.
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
$(this).parents('li').children('.js-tabCheck-panel').show();
} else {
$(this).parents('li').children('.js-tabCheck-panel').hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
Here user-select is a typeahead webcomponent that will load a list dynamically on typing.
What I am trying here is to access the dynamically loaded userlist.
On page load user-select is displayed with a text box (class="type-ahead-input").
<user-select id="users">
#shadow-root (open)
<div id="web-component-root">
<div class="type-ahead">
<input aria-autocomplete="list" placeholder="Search for client" class="type-ahead-input">
<div>
</div>
</user-select>
Once user starts typing, a list (class="type-ahead-result") is added dynamically and user is allowed to select.
<user-select id="users">
#shadow-root (open)
<div id="web-component-root">
<div class="type-ahead">
<input aria-autocomplete="list" placeholder="Search for client" class="type-ahead-input">
<div class="type-ahead-result">
<div role="listbox" style="position:relative, height:1233px, width:100%, top:0, left:0">
<div id="item-0">
<li>
<span>Test0</span>
</li>
</div>
<div id="item-1">
<li>
<span>Test1</span>
</li>
</div>
<div id="item-2">
<li>
<span>Test2</span>
</li>
</div>
-
-
-
-
</div>
</div>
<div>
</div>
</user-select>
This is what I am trying.
let clientSelect = document.querySelector("user-select");
clientSelect.shadowRoot.querySelector('.type-ahead-result').addEventListener('click', ev => {
console.log(ev)
})
It seems as the list is dynamically addded to the shadow dom, the click event is not working.
Please let me know if I am going in the right direction.
I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)
Following is my code to show the notification list on clicking the icon. But the dropdown of notifications list is not showing. As for the CSS there is only bootstrap added. Following attached is my HTML and JavaScript with mock method.
function getMessageNotificationsDetails() {
$("#messageNotificationsDetails").html("");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 6 new messages</p></li>");
}
function getNotificationsDetails() {
$("#notificationsDetails").html("");
$("#notificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#notificationsDetails").append("<li><p class='red'>You have 56 new messages</p></li>");
}
<div class="col-md-1 text-center text-md-right">
<div class="row">
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getMessageNotificationsDetails()" class="fa fa-envelope-o">
</i>
<span id="messageCount" class="badge"></span>
<ul id="messageNotificationsDetails" class="notification-menu">
</ul>
</div>
</div>
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getNotificationsDetails()" class="fa fa-bell-o">
</i>
<span id="notificationsCount" class="badge"></span>
<ul id="notificationsDetails" class="notification-menu">
</ul>
</div>
</div>
</div>
</div>
I only see 2 problems.
unreadMessageCount is undefined
Each time you use .html() you are overwriting the html content of the element. It will work in your case because the last call has content in it.
Also, where and when the script is defined will affect whether or not it is available to the markup. In your case, it needs to be defined before the markup. You could attach the listeners via JS, and then it could run after the markup is rendered.
I have figured out the issue. It was related to data-toggle. I wasn't toggling to show and hide in my code.
I found many solutions related to my problem but no seems to solve my problem.
Let me first clear my question properly.I have many items on a page;product items that can be shown in this page.
So for every item on the page , i have an image source which is obtained from the other page.
<img itemprop="image" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" >
This is just one image tag,the whole code that displays a product looks like this
$imgID=0;
while ($obj = $results->fetch_object()) {
$productPrice=($obj->price);
$weight=$obj->amount;
$weight=str_replace('kg',"",$weight);
$products_item .= <<<EOT
<li class="product">
<form itemscope itemtype="https://schema.org/Product" class="get_method_product_forms" action="/landing_cake/" method="get">
<div style="position: relative" class="product-thumb">
<div class="box">
<img src="/cart/images/loader.gif" id="{$imgID}">
<img itemprop="image" class="loaderGIF" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" ><img id="overlay" src="/cart/images/soldOut.png"><div class="overbox">
<div class="title overtext"></div>
<div class="tagline overtext"><p style="font-size:20px;">
<span id="fon"></span><button id="{$obj->product_code}" class="wishlist" >♥</button>
</div>
</div>
</div></div>
<div class="product-content"><h3 itemprop="name" style="margin-top:10px">{$obj->product_name}</h3>
<div class="product-info">
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer" >
<i itemprop="priceCurrency" content="INR" class="fa fa-inr"><span itemprop="price">{$productPrice}</span></i>
<span itemprop="weight">{$weight}</span>
<input itemprop="availability" itemtype="https://schema.org/OutOfStock" content="Out Of Stock" type="hidden" name="product_qty" value="Sold Out"/>
</span>
<fieldset>
<label content="{$obj->product_company}" itemprop="manufacturer">
{$obj->product_company}
</label>
</fieldset>
<input itemprop="productID" content="{$obj->product_code}" type="hidden" name="product_code" value="{$obj->product_code}" />
<div align="center"><button id="{$obj->product_code}" style="background:#666666" value="{$obj->product_code}" type="submit" class="SoldOut" >Add to Cart</div>
</div>
</div>
</form>
</li>
EOT;
$imgID++;
}
echo $products_item;
Now based on the solutions, i added an image tag just before the actual image tag.I tried doing something like this
1. $('.loaderGIF').on('load',function(e){//something})
//This didn't even run
2. $('img').on('load',function(e){//something})
//I can't seem to limit this to the main image.
How do i achieve my solution, i have been trying it out for a couple of hours.
Please, let me know if you need somthing more.I will update my question.Thanks!
I couldn't find my own fix, but I found this one right here on stackoverflow and it seems good to me.
If the src is already set, then the event is firing in the cached
case, before you even get the event handler bound. To fix this, you
can loop through checking and triggering the event based off
.complete, like this:
Copy from the source in case it changes:
// ".one()" makes it work only once. Change to "on" if you need it to happen more.
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});