I want to make a Pagination control with a tabs of JSON data that I retrives from an AJAX request i pull it on a tabs like this :
I managed to display all the data and show only the 10 first and after the if i click on "page 2" it hide the 10 first and the 10 after to show the 10 that i need; with a max number of 10 per page, and number of page are dynamic, the active page works and i logged in the console the info to make it sure.
But when i click on a page number different than 1 the data are hide, but if i click on the first page it show the data.
https://www.youtube.com/watch?v=Xznn-ggD0GU i found this guy and I wanted to do the same but, i may forget something like a bad selected class or id...
HTML:
<div class="container">
<div id="conTable" class="table-responsive-xl">
<!-- Tableau de données des mails -->
<table class="table table-hover table-dark mail">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">From</th>
<th scope="col">To</th>
</tr>
</thead>
<tbody class="ItemMail">
<!-- Insertion infos des mails avec JQuery/AJAX depuis main.js-->
</tbody>
</table>
</div>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination d-flex justify-content-center">
<!-- Insertion du Bouton "Previous" -->
<!-- Insertion du nombres de pages -->
<!-- Insertion du Bouton "Next" -->
</ul>
</nav>
</div>
JQuery/JS code which take my data :
$("#contTable").toggleClass('d-block table-responsive-xl');
for(ligne in response) {
console.log(response[ligne].hits)
var res=response[ligne].hits;
for(ligne2 in res) {
var lastEventDate=res[ligne2]._source.last_event_date;
var from=res[ligne2]._source.from;
var to=res[ligne2]._source.to;
$(".ItemMail:last").append(
"<tr>"+
"<th scope='row'>"+(increment+=1)+"</th>"+
"<td>"+lastEventDate+"</td>"+
"<td>"+from+"</td>"+
"<td>"+to+"</td>"+
"</tr>"
);
}
}
And finally my Pagination code :
//Pagination
var TotalMail=response.hits.total;
var limitMailParPage=10;
// cache les mails au dessus du nombre max de limitMailParPage
$(".ItemMail:gt("+(limitMailParPage-1)+")").hide();
// compte le nombre de pages qu'il faudra pou stocker les mails
var nbrDePage=Math.round(TotalMail/limitMailParPage);
// Insertion du nombre 1 pour le mettre en active par défaut
$(".pagination li:first").after("<li class='page-item current active'><a class='page-link' href='javascript:void(0)'>"+1+"</a></li>");
for(var i=2; i<=nbrDePage; i++) {
$(".pagination li:last").before("<li class='page-item current'><a class='page-link' href='javascript:void(0)'>"+i+"</a></li>");
}
$(".pagination li.current").click(function() {
if($(this).hasClass("active")) {
return false;
}
else {
var currentIndex=$(this).index();
$(".pagination li").removeClass("active");
$(this).addClass("active");
$(".ItemMail").hide();
// marche pas à partir d'ici
var grandTotal=(limitMailParPage*currentIndex);
console.log(grandTotal+" GRAND TOTAL");
for(var i=grandTotal-limitMailParPage; i<grandTotal; i++) {
console.log(i);
$(".ItemMail:eq("+i+")").show();
}
}
});
Instead of show hide parent div toggle on tr . Please refer below code.
('.ItemMail') is your parent div class. You are hiding whole div thats why second page is blank. Try below code and it will solve your problem.
var TotalMail=response.hits.total;
var limitMailParPage=10;
// cache les mails au dessus du nombre max de limitMailParPage
$(".ItemMail tr:gt("+(limitMailParPage-1)+")").hide();
// compte le nombre de pages qu'il faudra pou stocker les mails
var nbrDePage=Math.round(TotalMail/limitMailParPage);
// Insertion du nombre 1 pour le mettre en active par défaut
$(".pagination li:first").after("<li class='page-item current active'><a class='page-link' href='javascript:void(0)'>"+1+"</a></li>");
$(".pagination li.current").click(function() {
if($(this).hasClass("active")) {
return false;
}
else {
var currentIndex=$(this).index();
$(".pagination li").removeClass("active");
$(this).addClass("active");
$(".ItemMail tr").hide();
// marche pas à partir d'ici
var grandTotal=(limitMailParPage*currentIndex);
console.log(grandTotal+" GRAND TOTAL");
for(var i=grandTotal-limitMailParPage; i<grandTotal; i++) {
console.log(i);
$(".ItemMail tr:eq("+i+")").show();
}
}
});
Related
I wanna know how to put a .js code in a button that it's in a bootstrap alert that when the user clicked accept, the alert box no appear again.
Thanks a lot.
This is the code that I have, but doesn't work.
JS:
$(".btn_cerrar").on({
click: function(){
location.reload(
$(".pb-element-alert").hidden();
});
});
<div id="modal">
<p style="text-align: center;">Este sitio web emplea cookies para ofrecerle un servicio más</p>
<p> personalizado.</p>
<p style="text-align: center;">Si continúa navegando entenderemos que acepta nuestra</p>
<p style="text-align: center;"><a title="Politicas" href="images/eventos/POLITICA_DE_TRATAMIENTOS_DE_DATOS.pdf" target="_blank"><strong>Políticas de tratamiento de la información</strong></a> de nuestro sitio web.</p>
<button class=" btn_cerrar btn pull-right btn-success" type="button" data-dismiss="alert"> Aceptar</button></div>
HTML:
`
Este sitio web emplea cookies para ofrecerle un servicio más
personalizado.
Si continúa navegando entenderemos que acepta nuestra
Políticas de tratamiento de la información de nuestro sitio web.
Aceptar
`
I am not sure what exactly is the alert you are talking about since it is not shown in your html.
The correct syntax of your script should be that:
$(".btn_cerrar").on('click', function(){
// Do what you want.
});
Now if the element you want hide can be selected from the selector $(".pb-element-alert") you mention in your question then you can use this:
$(".pb-element-alert").hide();
All of it together would be:
$(".btn_cerrar").on('click', function(){
$(".pb-element-alert").hide();
});
UPDATE
$( document ).ready(function() {
bool isBtnClicked = sessionStorage.getItem('buttonClicked') == true;
if(isBtnClicked){
$(".pb-element-alert").hide();
}
});
$(".btn_cerrar").on('click', function(){
sessionStorage.setItem('buttonClicked', true);
$(".pb-element-alert").hide();
});
I'm using a jQuery "homemade" script (that I found here) and I'de like to start this one when the scroll reaches the tab block (the blue and grey block at the end of the page).
Here is a live version
My HTML :
<section id="Block" class="container-fluid block">
<div class="row accordeon">
<div class="blue">
<ul class="nav nav-tabs" id="myTab">
<li class="active">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</li>
<li>2 - Comparez les devis et négociez librement</li>
<li>3 - Choississez le prestataire que vous voulez, quand vous voulez</li>
<li>4 - Payez le prestataire par le moyen de votre choix</li>
<li>5 - Evaluez le prestataire sur Codeur.com</li>
</ul>
</div>
<div class="gray">
<div class="tab-content">
<div class="tab-pane active" id="deposer">
<h4 class="text-left">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</h4>
<p>Sans même vous inscrire, vous publiez votre projet. Il correspond à un appel d'offres auquel les prestataires vont répondre. C'est gratuit et l'inscription se fait automatiquement et simultanément.</p>
<p>Une fois le projet publié sur Codeur, les prestataires concernés sont avertis. Vous n'avez rien d'autre à faire. Vous recevez rapidement des devis gratuits qui seront classés sous la description de votre projet.</p>
<p>En savoir plus sur le dépot de projet :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment créer mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment bien décrire mon projet ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="comparer">
<h4 class="text-left">2 - Comparez les devis et négociez librement</h4>
<p>Comparez les devis et discutez avec leurs prestataires par messagerie privée, par messagerie instantanée ou par téléphone (si vous le souhaitez). Vous pouvez aussi modifier votre projet et donner des précisions aux prestataires. Vous négociez librement et mettez les prestataires en concurrence pour obtenir les meilleurs prix et délais et les meilleures prestations.</p>
<p>En savoir plus sur :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment inviter un prestataire à faire une offre sur mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment utiliser la messagerie ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="choisir">
<h4 class="text-left">3 - Choississez le prestataire que vous voulez, quand vous voulez</h4>
<p>C'est vous qui décidez quand et si vous sélectionnez un prestataire. Vous sélectionnez la personne que vous voulez. C'est très simple, il vous suffit de le sélectionner à partir de la fiche de votre projet.</p>
<p>Choisir un prestataire sur Codeur vous permettra de l'évaluer à l'issue de sa prestation. Vous pouvez aussi demander, avant de commencer le projet, de signer un devis en bonne et due forme.</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment choisir un prestataire pour réaliser mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Pourquoi attribuer un projet sur Codeur.com est il plus sûr ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="payer">
<h4>4 - Payez le prestataire par le moyen de votre choix</h4>
<p>C'est vous qui décidez comment vous réglez votre prestataire. Vous discutez avec lui du moyen de paiement qui vous convient à tous les deux. Pour plus de sécurité, vous pouvez bloquer le paiement sur Codeur Tasks en début de projet, et vous libérez le paiement par étape : à chaque étape réalisée correspond un paiement. Cela permet d'éviter la plupart des litiges.</p>
</div>
<div class="tab-pane" id="evaluer">
<h4>5 - Evaluez le prestataire sur Codeur.com</h4>
<p>Dès la fin du projet, vous pouvez évaluer le prestataire. Votre évaluation sera publiée sur le site et si elle est positive, aidera le prestataire à trouver de nouveaux projets. Le prestataire pourra également vous évaluer et ainsi renforcer votre réputation sur Codeur.com pour trouver un prestataire lors de la publication d'un prochain projet.</p>
</div>
</div>
</div>
</div>
</section>
My script for scrolling :
<!-- Show anim on Scroll -->
<script>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.ShowMe').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
</script>
My script for the tab animation :
<!-- Tabs -->
<script>
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
</script>
I think first off all you need to check if the object is within your screen after you scroll. If you reach the object then check with an if statement if the object is visible and then you should execute your code.
Look at this DEMO and see the whole JS function.
JS
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
alert("Visible!!! Paste your code in this if function!")
} else {
// do nothing
}
});
In your case would that be:
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
} else {
// do nothing
}
});
Hope this helps!
---EDIT:
To solve that the function is called multiple times you need to unbind the scroll event.
Add this to your code: $(window).off('scroll');
$(window).on('scroll', function() {
if (checkVisible($('#Block'))) {
$(window).off('scroll'); # add this
var tabChange = function () {
I want to make a function that allows me by clicking on the square with the id of colors, in return me id = " retours_couleurs " the sentence containing the colors contained in the table in php files, sorry for my english i'm french
this is my html code
<fieldset class="appel">
<code>
Un clic simple sur le carré bleu appelle le contenu du fichier couleurs.php, en transmettant en paramètre l'ID de ce carré. La réponse du fichier appelé devra s'afficher dans l'espace prévu à cet effet (id="retour_couleurs").
</code>
</fieldset>
<br />
<fieldset class="appel">
<div class="carre-couleurs">
<div class="carre" id="jaune"></div>
<div class="carre" id="rouge"></div>
<div class="carre" id="bleu"></div>
<div class="carre" id="vert"></div>
<div class="clear"></div>
</div>
<br />
<br />
<fieldset class="retour">
<legend>Contenu du fichier</legend>
<div id="retour_couleurs"></div>
</fieldset>
</fieldset>
this is my ajax function
function appel_contenue_couleur(){
var cM = new XMLHttpRequest();
cM.open("POST","fichiers/couleurs.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = this.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
and this is my php code
$_couleurs = array("jaune", "rouge", "bleu", "vert");
$_citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$couleurs = $_POST['retour'];
if (in_array($couleurs,$_couleurs)){
for ($i=0;$i<count($_citations);$i++){
if (in_array ($couleurs,$_citations[$i])){
echo $_citations[$i];
}
}
}
If I understood your problem correctly, you're not getting any output from the AJAX request. That's probably because you're using the wrong PHP function to check if a sentence contains a certain word.
Try with this one:
if (stripos($_citations[$i], $couleurs) !== false) {
echo $_citations[$i];
}
I used stripos because you probably don't want to make a case sensitive check.
Complete code:
Javascript:
function appel_contenue_couleur(obj){
var cM = new XMLHttpRequest();
cM.open("POST","colors.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = obj.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
HTML:
<div class="carre-couleurs">
<div class="carre" id="jaune" onclick="appel_contenue_couleur(this);">1111111</div>
<div class="carre" id="rouge" onclick="appel_contenue_couleur(this);">222222222</div>
<div class="carre" id="bleu" onclick="appel_contenue_couleur(this);">33333333</div>
<div class="carre" id="vert" onclick="appel_contenue_couleur(this);">444444444444</div>
<div class="clear"></div>
</div>
PHP:
$colors = array("jaune", "rouge", "bleu", "vert");
$citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$color = trim($_POST['retour']);
//echo $color;
if (in_array($color,$colors)){
for($i=0;$i<count($citations);$i++) {
if(stripos($citations[$i],$color)!==false) {
echo $citations[$i].'<br>';
}
}
}
It is working, 100%, it's tested. Just change links, if needed.
I'm using a hand made jquery gallery based on this tutorial : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html
I've made a plugin of this gallery to use it several time in a same page.
From here, no real problem. My question is, how to add a text caption with this plugin. I've tried lots of things without finding a solution.
Here is the jquery gallery code :
jQuery(function($){
// définition du plugin
$.fn.ben_galerie = function(options) {
// définition des paramètres par défaut
var defaults = {
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "/ben/images/loader.gif"
};
// mélange des paramètres fournis et des paramètres par défaut
var settings = $.extend(defaults, options);
function initGallery(ul)
{
var thumbLinks = $(this).find("a"), //référence toutes les vignettes cliquables dans un tableau
firstThumbLink = thumbLinks.eq(0), //et extrait le premier élément
//listeLinks = $(this).find("li"),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title"); //supression de l'attribut title
elt.addClass(settings.activeClass).attr("title",settings.activeTitle); //ajout du nouvel attribut title pour l'image en cours de visualisation
},
loader = $(document.createElement("img")).attr({ //chargement des parametres du loader
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
});
highlight(firstThumbLink);
var imgViewer = $(document.createElement("p")).attr("class","viewer") //creation d'un paragraphe qui fera office de récepteur pour les images grand format
.append(
$(document.createElement("img")).attr({ //extraire le contenu de l'attribut href de la première vignette photo
alt: "",
src: firstThumbLink.attr("href") //et le renseigner en tant que valeur de l'attribut src d'un nouvel objet image créé
})
);
$(this).after(imgViewer);
var bigPic = imgViewer.children("img");
thumbLinks //fonction qui sera déclenchée au clic sur chaque élément ciblé
.click(function(e){
e.preventDefault(); //annule l'événement par défaut lors du clic sur le lien
var $this = $(this), //$(this) = vignette cliquée et stocké dans $this pour ne pas parcourir pls fois le DOM
target = $this.attr("href");
if (bigPic.attr("src") == target) return;
highlight($this);
imgViewer.html(loader);
bigPic
.load(function(){
imgViewer.html($(this).fadeIn(250));
alert(caption);
})
.attr("src",target);
});
}
$(this).each(initGallery);
// interface fluide
return $(this);
};
// utilisation du plugin
$(document).ready(function() {
$(".thumbs").ben_galerie({
activeClass: "ssg_active",
activeTitle: "ben galerie : Photo en cours de visualisation",
loaderTitle: "ben galerie : Chargement en cours",
loaderImage: "images/loader.gif"
});
});
});
And here is a part of the html associated :
<div id="bloc_page">
<div id="contenu">
<div class="item">
<div class="galerie">
<div class="thumbs">
<div class="mini">
<li> <img alt="Description illus 1" src="images/galerie/illus/small/mini1.jpg" /></li>
<li> <img alt="Description illus 2" src="images/galerie/illus/small/mini2.jpg" /></li>
</div></div></div></div></div>
I'm thinking of using the title or the alt attribute, but I don't known how :/
Any tips or ideas will be fantastic.
Thanks guys !
you should use the alt attribute for the caption put it into a variable and call that variable in a caption element from you gallery. for example something like this
caption = $('img').attr("alt").text();
$('.whatever you call your caption element').text(caption);
I am currently using this code .
However the text I wish to display must be in one line, and if there is a apostrophe ( ' ) in the text, it will not work anymore .
imgover(this, 'Text to display')
Is there a way to remplace the second variable of onmouseover by an id of a div so that it will display everything in the div please ?
Here is an example of the div :
<div id ="text1" >
<em><img class="floatLeft" src="images/F9979.jpg" alt="" />
TITRE DU FILM : Man of Steel
<br />
<br />
RESUME :
Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane
<br />
<br />
DUREE : 2H23
<br />
Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
</em>
</div>
I would like to remplace 'Text to display' from
imgover(this, 'Text to display')
by what's in the div (text1) so that at the place where there is the div ( tooltip) I will see the text and the image from the div ( text1).
I'm not really sure whether I understood your question properly but this should work. You need to put the value of the id tag of your html element in the parameter of getElementById
<script>
function imgover(img, tip) {
document.getElementById('text1').style.display = 'block';
document.getElementById('text1').innerHTML = tip;
document.getElementById('text1').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('text1').style.display = 'none';
}
</script>