I'm trying to make an action when someone click on a element of my dropdown.
I don't understand why, click function doesn't work.
My html code :
<div class="row">
<div class="dropdown col-lg-12">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Veuillez sélectionner la manière dont vous souhaitez nous contacter
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Etre rappelé</li>
<li>Envoyer un message</li>
</ul>
</div>
</div>
My Jquery code :
var phoneForm = $("#phoneForm");
console.log($("#callback"));
console.log($("#phoneForm").hasClass("hidden"));
$("#callback").click(function(){
console.log("entre dans la fonction click");
if(phoneForm.hasClass("hidden")){
console.log("entre dans le if");
phoneForm.removeClass("hidden");
}
});
Never it goes in click function.
Thanks
It looks like your javascript code is getting executed before those elements exist,
I suggest you to try like this
$(function(){ // Wait until you have all html printed
var phoneForm = $("#phoneForm");
console.log($("#callback"));
console.log($("#phoneForm").hasClass("hidden"));
$("#callback").click(function(){
console.log("entre dans la fonction click");
if(phoneForm.hasClass("hidden")){
console.log("entre dans le if");
phoneForm.removeClass("hidden");
}
});
});
Use JQuery version above 1.9.1
with following code
$(function(){ // Wait until you have all html printed
var phoneForm = $("#phoneForm");
console.log($("#callback"));
console.log($("#phoneForm").hasClass("hidden"));
$("#callback").click(function(){
console.log("entre dans la fonction click");
if(phoneForm.hasClass("hidden")){
console.log("entre dans le if");
phoneForm.removeClass("hidden");
}
});
});
Related
I am trying to create a function that changes the redirect link of a button if the url contains the word "TicketPreDateable".
So I have a button like this one:
<div class="col-12 col-md-6 col-xl-4" id="myproductid">
<figure class="effect-product mx-auto"><img class="figure-img img-fluid" src="myimage">
<figcaption><span class="badge badge-danger" style="top: -2.7em; background-color: red;">OFFRE SPÉCIALE</span>
<h2 class="mt-0" style="color: white !important;"><span>My </span>Product Title</h2>
<p>Profitez des pistes le samedi lorsque d'autres sont occupés à faire leurs valises ou coincés dans les bouchons. Un tarif unique à 24€ vous donne accès en toute liberté au domaine skiable pour la journée.</p>
<a onclick="produrlmobile("https://www.mylink.com/fr/ProductsNgTicket/ticketPreDateable?poolNr=13&projNr=495&ticketTypeNr=122&preDatable=True&groupId=1&Day=11&Month=12&Year=2021")" href=""></a>
</figcaption>
</figure>
</div>
And my function look like this :
function produrlmobile(produrl) {
if (produrl.includes("TicketPreDateable")) {
if (window.innerWidth < 960) {
window.location.href = produrl.replace(
"TicketPreDateable",
"TicketPreDateableMobile"
);
} else {
window.location.href = produrl;
}
} else {
window.location.href = produrl;
}
}
I have the impression that it is because of special characters in the url that the function does not work, but I do not know how to avoid that.
Thank you for your help and have a nice day !
See Sarens comment for issues with the HTML.
Also, note that the replace method is case sensitive. In your function it looks like you are trying to replace the string TicketPreDateable, but the url only contains ticketPreDateable.
I would recommend checking you are handling cases correctly, for both the old and new strings in the replace method arguments.
document.querySelectorAll('button:nth-child(2)').click()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="Dialog ui-dialog-type-message" style="min-width: 300px;"><header><h1 class="dialog-title">Pile Nouveaux éléments pleine</h1></header><div class="dialog-body"><p class="dialog-msg">Vous ne pouvez pas acheter cet élément car vous avez 5 éléments ou plus dans votre pile d'éléments non attribués.</p><div class="ut-button-group"><button class=""><span class="btn-text">Annuler</span><span class="btn-subtext"></span></button><button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button></div></div></section>
I'm making a chrome extension and i'm looking to click on the following button :
<button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button>
On the console with query selector i've got the element :
document.querySelectorAll('button:nth-child(2)')[4]
It is the right button, every thing is good so far but when i add .click() after the element like so, the element doesn't get clicked either:
document.querySelectorAll('button:nth-child(2)')[4].click()
How can i get this to click on my button ?
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();
}
}
});
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 () {