I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.
Related
I've currently got a section of a web site that looks like so:
<form id="product_form" method="POST" action="/cart/add" role="form">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<img class="product-image" src="/static/images/products/4388801543.jpg" width="500px" alt="">
</div>
</div>
<div class="col-md-3 product-variants other_options">
<h1 itemprop="name" class="product-single__title h3 uppercase">Samburu Shorts - Mens</h1>
<p class="product-single__price product-single__price-product-template">
<span id="ProductPrice" itemprop="price" content="$55.95">$55.95</span>
</p>
<input type="radio" name="variant_id" class="hidden" id="14903870471" value="14903870471" onclick="enableSubmit()"><label for="14903870471" class="option text-center selector size-value">29x11 Sand-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304664135" value="16304664135" onclick="enableSubmit()"><label for="16304664135" class="option text-center selector size-value">29x11 Aubergine-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304665799" value="16304665799" onclick="enableSubmit()"><label for="16304665799" class="option text-center selector size-value">34x7-5 Sand-Grey</label>
<div class="product-add">
<button id="add-to-cart" class="addItemToCart btn addToCart-btn product-form__cart-submit" disabled="" type="submit">Add to Cart</button>
</div>
<div class="social-sharing">
<a target="_blank" href="#" class="btn clear btn--share share-facebook" title="Share on Facebook">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_fb.png?3517946130637841476">
<span class="visually-hidden">Share on Facebook</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-twitter" title="Tweet on Twitter">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_twitter.png?3517946130637841476">
<span class="visually-hidden">Tweet on Twitter</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-pinterest" title="Pin on Pinterest">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_pin.png?3517946130637841476">
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</div>
</div>
</div>
</form>
I'm scripting out a test through NightwatchJS where I am trying to select one of the radio buttons so I can automate a user experience. The code test block that I have written out is as follows:
'Check that widget loaded on new product page' : function(browser) {
browser
.waitForElementVisible('#monsoon-inline-reco-div-ul', longWait, () => {
})
.elements('css selector', '#monsoon-inline-reco-div-ul li', (results) => {
browser.assert.equal(results.value.length, 4);
})
.click('#product_form > div > div:nth-child(2) > input[type=radio]')
.pause(longWait)
.end();
}
The line in question is the click command. I keep getting errors about how the script cannot find the element given the css selector. I've tested this in the console in the browser itself using document.querySelector('#product_form > div > div:nth-child(2) > input[type=radio]').click() and the radio button is clicked. Could use some thoughts on something I might be doing wrong because I've been working this for a couple hours now and have tried a variety of different things.
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!
If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html
I have this mark up:
<div class="list-group-item participant-main">
<i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-8">
<p class="list-group-item-text">
Some text
</p>
</div>
<div class="col-sm-4">
<p class="list-group-item-text">
More text
</p>
</div>
</div>
</div>
Previously, I was using Jquery to unhide/hide .hidden-group-item when .participant-main was clicked via this code:
$('body').on('click', '.member-main, .participant-main', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
I'm adding some links to .participant-main so I can't bind a click event to the whole div anymore so the new links work in parallel. I've tried then to bind the click event to particular elements inside the div thus I moved the target class to particular elements like this.
<div class="list-group-item">
<i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8 participant-main">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
I was hoping it would work but it does not.
I don't understand why is this happening and how to solve. As far as I understand .next() grabs the next element that matches the specified selector.
Since you've nested elements you should use stopPropagation() to stop the event from bubbling :
$('body').on('click', '.member-main, .participant-main', function(e) {
e.stopPropagation();
...
});
Hope this helps.
I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>