I created a contact list agenda with a contact-alphapets sidebar filter. What Im trying to achieve is when clicking on a specific letter it will scroll down to the first contact that start with the Letter chosen.
Exemple when I click on Letter A it will scroll down to contacts that starts with the letter A.
Here the code Im using:
HTML part:
<div class="contact-box clearfix">
<div class="contact-cat col-xs-12 col-sm-4 col-lg-3">
<div class="roles-menu">
<ul class="nav">
<li class="contacts_tab active" rel="customers">Customers</li>
<li class="contacts_tab" rel="suppliers">Suppliers</li>
</ul>
</div>
</div>
<div class="contacts-list col-xs-12 col-sm-8 col-lg-9">
<ul class="contact-list" id="contact-list" >
<!-- DISPLAY CONTACTS LIST WITH AJAX-->
</ul>
</div>
<div class="contact-alphapets">
<div class="alphapets-inner">
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
</div>
</div>
</div>
Display contacts with ajax/jquery
var baseUrl = $('#baseUrl').val();
$('.contacts_tab').on('click', function(){
var params = $(this).attr('rel');
$('#contact-list > li').remove();
$.ajax({
url: `${baseUrl}api/contacts/list.php?params=${params}`,
success: function (result) {
$.each(result, function(index, data) {
var html = `<li class="${data.firstname.slice(0,1)}">`;
html += '<div class="contact-cont">';
html += '<div class="pull-left user-img m-r-10">';
html += `<img src="${baseUrl}public/attachements/${params}/${data.logo}" alt="" class="w-40 img-circle">`;
html += '</div>';
html += '<div class="contact-info">';
html += `<span class="contact-name text-ellipsis">${data.firstname} ${data.lastname ?? ''}</span>`;
html += `<span class="contact-date"><i class="">${data.phone}</span>`;
html += '</div>';
html += '</div>';
html += '</li>';
$("#contact-list").append(html);
});
}
});
})
The code above works just fine.
Here is the code I tried for the scroll down:
$(".findContact").on('click', function(e){
e.preventDefault();
var findContact = $(this).attr('rel');
$('html,body').animate({ scrollTop: $(`.${findContact}`).offset().top}, 'slow');
})
**
Related
I am working on my code still 3 hours to achieve an add / remove of HTML over Javascript. But even that, I was not able it. I did find some solutions on the internet, but they are much easier, like adding the text in the end of a div.
In my case, I would like to add a table element in on a specific part of the HTML, and remove this table element if the Remove button is clicked.
I hope you can help me..
Here is my HTML:
<div class="col-xl border-left border-dark">
<div class="row">
<div class="col-md-12">
<!-- *** Table number 1 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
<a class="btn" role="button" id="JS_ADD_THIS_ENTRY">Add HTML below...</a>
</table>
<!-- *** Table number 1 *** -->
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- this templated below should be appended here after clicking on ADD button -->
<table class="JS_ADD_THIS_ENTRY table table-bordered">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<a class="JS_REMOVE_THIS_ENTRY btn btn-danger" role="button">Remove</a>
</div>
<div class="col border">
<B>Title</B><br />
<hr class="my-1">
Name
</div>
</div>
</table>
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- *** Table number 3 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
</table>
<!-- *** Table number 3 *** -->
</div>
</div>
</div>
Here is my JS:
$(document).ready(function () {
var counter = 0;
$("#JS_ADD_THIS_ENTRY").on("click", function () {
var newEntryRow = $("<table>");
var buildHTML = "";
buildHTML += '<table class="YT_URL_AddRow_Element table table-bordered id="' + counter '">';
buildHTML += '<div class="row">';
buildHTML += '<div class="col-auto justify-content-around d-flex flex-column border">';
buildHTML += '<a class="btn btn-danger" role="button">Remove</a>';
buildHTML += '</div>';
buildHTML += '<div class="col border">';
buildHTML += '<B>Title</B><br />';
buildHTML += '<hr class="my-1">';
buildHTML += 'Name';
buildHTML += '</div>';
buildHTML += '</div>';
buildHTML += '</table>';
newEntryRow.append(buildHTML);
$("table.table-bordered").append(newEntryRow);
counter++;
});
$("table.table-bordered").on("click", ".JS_REMOVE_THIS_ENTRY", function (event) {
$(this).closest("table").remove();
counter -= 1
});
});
I want to change the background of the last added element in the dom. To give you a better look here is the html:
<div class="check-in-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="ticket-img">
<img class="image" src="img/icons/ticket.png">
</span>
</div>
<div class="ui-block-b">
<h4>Inchecken</h4>
<div class="check-in-notification-append"></div>
</div>
</div>
</div>
<div class="douane-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="douane-img">
<img class="douane-img image" src="img/icons/douane.png">
</span>
</div>
<div class="ui-block-b">
<h4>Douane</h4>
<div class="douane-notification-append"></div>
</div>
</div>
</div>
<div class="gate-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="gate-img">
<img class="gate-img image" src="img/icons/gate.png">
</span>
</div>
<div class="ui-block-b">
<h4>Gate</h4>
<div class="gate-notification-append"></div>
</div>
</div>
Where I append the elements to check-in-notification-append, douane-in-notification-append, gate-in-notification-append here a better look at the js file.
$(document).on("pagebeforeshow","#progress",function(){
var incheckHtml = '';
var douaneHtml = '';
var gateHtml = '';
for(var count = 0; count < info.data.length; count++){
var shortmessage = info.data[count][3];
var category = info.data[count][4];
var typeOf = info.data[count][5];
if(typeOf === "warning"){
imgPath = 'img/icons/alarm.png';
} else {
imgPath = 'img/icons/alert.png';
}
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (category === 'inchecken'){
incheckHtml = incheckHtml + "<div class='notification-item'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
// $('.check-in-wrapper').empty().prepend(incheckHtml);
$('.check-in-notification-append').empty().prepend(incheckHtml);
}
if(category === 'douane'){
douaneHtml = douaneHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.douane-notification-append').empty().prepend(douaneHtml);
}
if(category === 'gate'){
gateHtml = gateHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.gate-notification-append').empty().prepend(gateHtml);
}
}
});
But how do I acces the last added element in any category which removes the class "overlay". I'll hope someone could help me out accessing the last added element and removeClass overlay. I have written an .last() function but this will only give me the output of the last object in array...
I think you could achieve this by having some common selector which applies to all the elements that could be affected and using Jquery's last() function.
$(".allMyThings").last().removeClass("overlay");
https://api.jquery.com/last/
I'm trying to check all boxes automatically when the user deselect them both.
To make it clear, there're two item in cards as it shown in the image, the cards are selected initially, when the user deselect first one, then the other card will be checked, then when the user deselect the second one, It should automatically select both of them again.
Here's what I have done so far:
HTML
<ion-list ng-show="transactionsCtrl.showCardBox">
<ion-item class="bg-blue p-0">
<div class="dotted-1"></div>
<div ng-repeat="singleCard in transactionsCtrl.cards">
<div class="row p-tb0 m-t5" ng-click="transactionsCtrl.ToggleCardFilter(singleCard.g_id)">
<div class="col col-20">
<div ng-class="{'image-size-1-50 white-checked-image': singleCard.selected , 'image-size-1-50 white-unchecked-image': !singleCard.selected}"></div>
</div>
<div class="col col-80">
<div class="sub-title-white oslight">{{(singleCard.cardNumberMasked).slice(-5)}} <span class="m-l10 right {{transactionsCtrl.PlaceCardImageClassForFilter(singleCard.g_productSubCategory)}}"> </span></div>
</div>
JS
self.ToggleCardBox = function() {
closeAll();
self.showCardBox = !self.showCardBox;
};
self.ToggleCardFilter = function(cardId) {
// toggle on-screen indicator
for (var c = 0; c < self.cards.length; c++)
if (self.cards[c].g_id == cardId)
self.cards[c].selected = !self.cards[c].selected;
var idx = $scope.transactionFilter.cards.indexOf(cardId);
if (idx == -1)
$scope.transactionFilter.cards.push(cardId);
else
$scope.transactionFilter.cards.splice(idx, 1);
self.applyFilterChange();
};
you can make it simple .
start with add current checked count variable
// and accept the full card not the card id
self.ToggleCardFilter = function(card) {
// toggle on-screen indicator
//for (var c = 0; c < self.cards.length; c++)
//if (self.cards[c].g_id == cardId)
//self.cards[c].selected = !self.cards[c].selected;
if($scope.transactionFilter.cards.length){
card.selected = !card.selected;
}else{
for(var i = 0 ; i < self.cards.length ; i++){
self.cards[i].selected = true;
}
}
var idx = $scope.transactionFilter.cards.indexOf(card.g_id);
if (idx == -1)
$scope.transactionFilter.cards.push(cardId.g_id);
else
$scope.transactionFilter.cards.splice(idx, 1);
self.applyFilterChange();
};
HTML
<ion-list ng-show="transactionsCtrl.showCardBox">
<ion-item class="bg-blue p-0">
<div class="dotted-1"></div>
<div ng-repeat="singleCard in transactionsCtrl.cards">
<div class="row p-tb0 m-t5" ng-click="transactionsCtrl.ToggleCardFilter(singleCard)">
<div class="col col-20">
<div ng-class="{'image-size-1-50 white-checked-image': singleCard.selected , 'image-size-1-50 white-unchecked-image': !singleCard.selected}"></div>
</div>
<div class="col col-80">
<div class="sub-title-white oslight">{{(singleCard.cardNumberMasked).slice(-5)}} <span class="m-l10 right {{transactionsCtrl.PlaceCardImageClassForFilter(singleCard.g_productSubCategory)}}"> </span></div>
</div>
I have a simple bootstrap page I need to load JSON data into it:
This is my script:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var tweets = JSON.parse(xhr.responseText);
var tweet = ' <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">';
var name = ' <h4 class="card-title">';
var photo = ' <div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">';
for (var i = 0; i < tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
document.getElementById('photo').innerHTML = photo;
document.getElementById('name').innerHTML = name;
document.getElementById('tweet').innerHTML = tweet;
// close all html tags
}
}
};
xhr.open('GET', 'empdata.json');
xhr.send();
And this is my HTML:
<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-block row">
<div id="tweet"> </div>
</div>
It loops correctly through all JSON data, but it displays all the pictures first then the names and finally the tweets separately. think the problem is related to the mechanism I follow in the loop.
I think you mean to do this. It can be much simpler but without changing your html I would do this:
var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
var name = ' <h4 class="card-title">';
name += tweets[i].name;
name += '</h4> </div>';
var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">'
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
container.innerHTML+='<div class="card"><div class="card-header">'+
photo+name+tweet+'</div></div>';
}
EDITED Try set innerText outside from the loop
for (var i=0; i<tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
...
photo += tweets[i].pic;
photo += '"></div></div>';
}
document.getElementById('name').innerHTML = name;
document.getElementById('photo').innerHTML = photo;
I'm using navbar for tabs with jquerymobile .
as you will notice my tabs are generated through jsonp.
I'm facing a problem when trying to load a div inside a tab . internal href doesn't seem to work .
what I want to do is , for example the with list loads when I change to tab x.
<script>
function order() {
var output = [];
$.ajax({
url: "http://192.168.22.102/me1.php",
dataType: "jsonp",
jsonp: "mycallback",
success: function (data) {
jsonArray = data;
jsonArray = data;
var ch = "";
for (i = 0; i < jsonArray.length; i++) {
ch = ch + '<li>' + jsonArray[i].nom + '</li>'
}
ch = '<div data-role="navbar"><ul>' + ch + '</a></ul></div>';
var s = $(ch).appendTo('.ui-content')
alert(ch);
$('#lm').append('<div data-role="navbar"></div>').trigger('create');
}
});
}
</script>
<body onload="order('');">
<div data-role="page" id="home">
<div data-role="content" id="lm">
<div id="1">
<ul data-role="listview" data-inset="true">
<li>stuff</li>
<li>stuff</li>
<li>so</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-postion="fixed">
<h1>Footer Text</h1>
</div>
</div>
update
I've solved the issue by adding a personal click handler
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;});