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.
Related
I've been searching for the solution for a few days but unable to find one that works. The issue is that this div which has a class ish-container-inner, is linked to a js plugin which works only with this code below:
<div class="ish-container-inner ish-product">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color9">Special Effects</span> <span class="ish-separator">/</span> <span>Ink</span></div>
</div>
<div class="ish-img">
<img src="assets/img/bniinks-003.jpg" alt="Project">
</div>
</div>
</div>
</div>
</div>
But as soon as I'll put *ngFor like below, it won't work. Even with ngIf present:
<div class="ish-container-inner ish-product" *ngIf="products">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item" *ngFor="let product of products">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color7">{{ product.name }}</span> <span class="ish-separator">/</span> <span>Ink</span>
</div>
</div>
<div class="ish-img">
<a href="product-detail.html" class="ish-img-scale" [style.background]="'url('+product.thumbnail+')'">
<img src="{{product.thumbnail}}" alt="Project"></a>
</div>
</div>
</div>
</div>
</div>
I have valid data at this point in products but the plugin is not working for these div elements. I don't know why. Without the ngFor directive. Div is assigned some stylings automatically which are changed by the plugin on scroll i.e.
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax" style="position: relative; height: 629px; margin-top: -99.5455px;" data-initial-top="0">
But if I put ngIf or ngFor directive. It doesn't work anymore and these stylings are not assigned automatically. Awaiting response :)
I'm trying to dynamically show the title of a filename once the anchor tag is clicked. Once the anchor tag is clicked, it's supposed to show its filename, then its file at the bottom (given a gdrive link). Showing the file works well, but I can't seem to show the name of the file. Instead of the filename, it shows {{file.name}}, which means that file.name is not being evaluated. (I am using AngularJS to dynamically traverse through and show files and filenames)
Here is the code.
<div class="ui two column stackable grid">
<div class="column">
<div class="drive-link">
<h2 class="header" id="filename"></h2>
<!-- the filename should be shown here. Value is being passed through {{file.name}} from an a tag below -->
<iframe name="embedded-iframe" allowfullscreen="" frameborder="0"></iframe>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="single-category-component" ng-if="$index==0">
<div class="active title">
<i class="dropdown icon"></i>
{{file.category}}
</div>
<div class="active content">
<a target="embedded-iframe" href="{{file.link}}" onclick="document.getElementById('filename').innerHTML='{{file.name}}';"> {{file.name}} </a>
<!--where I'm passing {{file.name}} to the h2 tag on the top-->
<div ng-repeat="next_file in files | limitTo:files.length:$parent.$index">
<a target="embedded-iframe" ng-if="$index > 0 && next_file.category_id == files[$index-1].category_id" href="{{next_file.link}}">{{next_file.name}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-click to pass the file object to your controller.
HTML
<h2 class="header" id="filename">{{fileName}}</h2>
.............
<a target="embedded-iframe" ng-href="file.link" ng-click="show_file_name(file)"> {{file.name}} </a>
JS
//capture the file properties in the controller function of your ng-click
$scope.show_file_name=function(file){
$scope.fileName=file.name;
$scope.fileLink=file.link;
}
do like this first set onclick method and pass file name to function
<a target="embedded-iframe" href="{{file.link}}" onclick="show_file_name({{file.name}})"> {{file.name}} </a>
now in javascript function you can get file name like this
function show_file_name(name){
console.log(name); //this is the file name that you sent form onclikc method
}
you can pass multiple values like this
onclick="show_file_name({{file.name}}, {{file.link}})"
and get it like this
function show_file_name(name, link){
console.log(name);
console.log(link);
}
I have implemented dynamic components in Angular and whenever a dynamic component is loaded its corresponding jQuery is not working. Same jQuery script is working elsewhere.
This is where my dynamic component loads:
<div class="listing-table-outer" [#myAwesomeAnimation]='state'>
<app-dynamic-question [componentData]="componentData"></app-dynamic-question>
</div>
Below html will be loaded dynamically.
<div class="panel panel-default " >
<div class="panel-body" >
<h1>{{textLabel}}</h1>
<p>{{textHeader}}</p>
<div class="form-inline display-one" role="form">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="">
</div>
<div class="learn-more magtop10">
<a> <i class=" glyphicon glyphicon-play"></i> Learn More</a>
</div>
<div class="display_advance">
<div class="well">
<p>{{textFooter}}</p>
</div>
</div>
<div class="bs-component">
Clear
Skip
Continue
</div>
</div>
</div>
I have written this script
$(document).ready(function(){
$('.learn-more').click(function() {
$('.display_advance').slideToggle('1000');
$("i", this).toggleClass(" glyphicon-play glyphicon-triangle-bottom");
});
});
I have checked this script and it is working perfectly elsewhere.
Please let me know why this is happening.
As you already stated yourself, the html is loaded dynamically. That means that this html is not yet there when $(document).ready(function() { ... }) is executed. So you're trying to add a click event to an element that doesn't exist at that moment.For this exact situation there's a thing called event delegation.
Instead of doing
$('.learn-more').on('click', function() { ... });
you would do
$(document).on('click', '.learn-more', function() { ... });
This way any elements below document with class learn-more, now or in the future, will get this click event.
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
Have you had any reported issues with users upgrading to the latest version and experiencing this?
I have flipped our file list template to the new script tag template:
<script type="text/template" id="upload-list-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-button-selector qq-upload-button">
<div class="btn">Upload a file</div>
</div>
<ul class="qq-upload-list-selector qq-upload-list">
<div>
<div class="item">
<i class="glyphicon glyphicon-cloud-upload"></i>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale="true">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-finished"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
</div>
</div>
</ul>
</div>
clicking any button results in a long running script browser crash.
Fixed. By re-arranging the elements in the exact order of the example template.
TL;DR: This issue has been fixed in the just-released 4.0.1 hotfix version.
This was an issue that would only manifest itself when the items in the file portion of the template (such as the buttons) are two or more levels below the .qq-file-list-selector element. By default, these items are only one level below this container, but in the modified template you posted in your question, they are 2 levels deep.
The fix to Fine Uploader's code is simple. I changed:
while (currentNode.getAttribute(FILE_ID_ATTR) == null) {
currentNode = el.parentNode;
}
to:
while (currentNode.getAttribute(FILE_ID_ATTR) == null) {
currentNode = currentNode.parentNode;
}