everyone. I have the following code which intercepts forms submition and make a Ajax call:
$(function () {
$('form').each(function (id, el) {
$(el).submit(function (event) {
event.preventDefault();
var _data = $(this).serialize();
alert(id);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: _data
})
.done(function (response) {
if (response === '') {
notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
$(el).find('textarea').val(' ');
} else {
notifyAlert(response);
}
})
.fail(function(data) {
notifyAlert(data.responseText);
});
grecaptcha.reset($(this).find('button').attr('id'));
});
});
$('textarea').click(function () {
if($(this).val() === ' ')
$(this).val('');
});
});
The code seems to be ok. However, when I run the site in my browser and put a breakpoint at line $.ajax({, it shows to me that it's executed 4 times when I try to submit a form. For debug reasons, I put a alert(id) to see what form it was submitting. My surprise is that the alert executes with the correct form ID, and a single time. In other words, only the AJAX line gets executed 4 times. The code before it don't. It's worthy to note that the callbacks (.done and .fail) also execute only one time. What can be happening here?
Here is the entire code:
var onLoadRecaptcha = function () {
$('form').each(function (id, el) {
$(el).ready(function () {
var submit = function () {
$(el).submit();
}
var _id = grecaptcha.render(
$(el).find('button').get(0),
{
'sitekey': '6LeDwBoUAAAAANMD7VBNK2F2agKXl6rduUlelf5U',
'callback': submit
}
);
$(el).find('button').attr('id', _id);
});
});
}
$(function () {
$('form').each(function (id, el) {
$(el).submit(function (event) {
event.preventDefault();
var _data = $(this).serialize();
alert(id);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: _data
})
.done(function (response) {
if (response === '') {
notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
$(el).find('textarea').val(' ');
} else {
notifyAlert(response);
}
})
.fail(function(data) {
notifyAlert(data.responseText);
});
grecaptcha.reset($(this).find('button').attr('id'));
});
});
$('textarea').click(function () {
if($(this).val() === ' ')
$(this).val('');
});
});
var notifyAlert = function (message) {
$("#notify-modal").find('.modal-body').removeClass('alert-success');
$("#notify-modal").find('.modal-body').addClass('alert-danger');
$("#notify-modal").find('.modal-body').text(message);
$("#notify-modal").modal('show');
}
var notifySuccess = function (message) {
$("#notify-modal").find('.modal-body').removeClass('alert-danger');
$("#notify-modal").find('.modal-body').addClass('alert-success');
$("#notify-modal").find('.modal-body').text(message);
$("#notify-modal").modal('show');
}
<!doctype html>
<?php
// error_reporting(0);
require_once('scripts/connect.php');
//require_once('scripts/fb.php');
$res = mysqli_query($mysqli, "SELECT * FROM `personas`");
?>
<html class="no-js" lang="pt-BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Campanha Anti-bullying | UNASP-EC</title>
<meta name="description" content="Uma campanha anti-bullying bem bacaninha">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section>
<div class="fill-viewport cover d-flex flex-column justify-content-center align-items-center text-uppercase container" style="background-color: #000; color: #FFF">
<img class="img-fluid" src="images/cover_text.png" alt="Bullying, esta brincadeira não tem graça!" />
</div>
</section>
<section> <!-- Apresentação -->
<div class="container my-5 text-justify stylize-text">
<p>O sol queimava, mas dentro da menina magra e de cabelos crespos existia uma tempestade provinda do Alasca. O céu se estendia num azul pintado de anil, porém, a menina tímida de pequeno porte, o enxergava cinza. Os pássaros cantavam, no entanto, a menina de óculos e pele negra ouvia apenas um tom dissonante. Talvez hoje o som seja algo semelhante ao da trilha de Bernard Herrmann no filme Psicose.</p>
<p>— Mãe, me dá R$0,50? — perguntou a pequena de oito anos.</p>
<p>— Por que você quer esse dinheiro? — retrucou a mãe desconfiada.</p>
<p>— Por nada mãe, eu só quero — respondeu, agora com os olhos lacrimejados.</p>
<p>A mãe não tinha ideia do que acontecia e atordoada com os fatos relatados pela filha, se viu sem forças para continuar o caminho tortuoso até a escola.</p>
<p>— Mãe ela me bate quando não dou o dinheiro e todos os dias eles me xingam e me deixam sozinha no recreio.</p>
<p>O trecho acima poderia ser facilmente confundido com aquelas histórias ficcional, não fosse um fato vivido por 46,6% dos alunos entrevistados pelo Instituto Brasileiro de Geografia e Estatística (IBGE). O último senso confirmou o crescimento significativo desde o último levantamento feito em 2012, onde apontou 35,3% o número de vítimas nas escolas. De acordo com a pesquisa, 7,4% dos entrevistados atribuíram a aparência como principal motivo para as agressões.</p>
<p>De acordo com o Código Civil Brasileiro, o <i>bullying</i> é crime e resulta em pena ao agressor, podendo ser advertência ou até mesmo restrição de liberdade. Alessandra Borelli, advogada e coordenadora do <i>Manual de Boas Práticas para Uso Seguro das Redes Sociais</i> da Ordem dos Advogados do Brasil de São Paulo (OAB/SP) e coordenadora do guia <i>Conhecendo para Prevenir bullying< e Cyberbullying</i>, explica as consequências de causar dano moral ou físico ao outro e lembra ser obrigação do agressor, dos pais ou até mesmo da escola reparar a ofensa. “Logo, se um menor for responsável pela prática de <i>bullying</i>, muito embora a legislação privilegie a adoção de medidas voltadas à orientação e resgate da boa disciplina, nada impede que a vítima do <i>bullying</i> promova medidas legais buscando a reparação dos danos suportados”, destaca. Ainda de acordo com Alessandra é responsabilidade de todos, família e escola, prestar ajuda necessária a vítimas de <i>bullying</i>, com o intuito de aliviar as consequências da agressão. “Considerando os aspectos morais que alicerçam as relações entre pais e filhos, alunos, escola e sociedade em geral, todos somos responsáveis e se, ao notarmos sinais de vítimas ou agressores em nossos filhos e alunos, devemos agir tempestivamente. Famílias e escolas precisam caminhar juntas”, pontua.</p>
<p>O Centro Universitário Adventista de São Paulo (Unasp), campus Engenheiro Coelho, entende o <i>bullying</i> como um problema real na vida de crianças e jovens e por esse motivo, aderiu à campanha “Essa brincadeira não tem graça”, com o objetivo de conscientizar vítimas e agressores, alunos de escolas e universidades públicas e privadas para a luta contra o <i>bullying</i>.</p>
</div>
</section>
<section> <!-- Imprensa -->
<div class="container py-5">
<h1>Imprensa</h1>
</div>
</section>
<section> <!-- Eu Cuido de Você -->
<div class="container py-5">
<h1>Eu Cuido de Você</h1>
<p class="text-justify stylize-text">Você acompanhou histórias reais de brincadeiras sem graça, mas isso não precisa continuar. Nós entendemos o momento difícil e delicado que envolve uma agressão, mas você deve saber que não está sozinho. O Unasp preparou uma equipe de psicólogos para te ajudar. Tudo o que você precisa fazer é nos contar sua história. Fique a vontade e desabafe nos comentários abaixo sobre o que você enfrenta em seu dia-a-dia. Fique tranquilo, pois não vamos contar para ninguém. Queremos cuidar de você!</p>
<ul class="list-unstyled form-list">
<?php while ($persona = $res->fetch_array(MYSQLI_ASSOC)) { ?>
<li class="card card-inverse rounded-0 mb-4" style="background-color: #333;">
<div class="card-block">
<form id="story-<?php echo $persona['id']; ?>" action="scripts/story_submit.php" method="post" class="h-100">
<input name="id" type="hidden" value="<?php echo $persona['id']; ?>" />
<div class="d-flex form-body">
<div class="d-flex flex-column">
<img src="./images/personas/<?php echo htmlspecialchars($persona['image']); ?>" alt="" />
<span class="persona-caption"><?php echo htmlspecialchars($persona['name']); ?></span>
</div>
<div class="d-flex flex-column w-100">
<textarea name="story" class="form-control" maxlength="500" required></textarea>
<button class="btn btn-primary g-recaptcha">Enviar</button>
</div>
<div class="recaptcha"></div>
</div>
</form>
</div>
</li>
<?php } ?>
</ul>
</div>
</section>
<!-- Notify Modal -->
<div class="modal fade" id="notify-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-body alert mb-0">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
</body>
</html>
<?php
$res->free();
$mysqli->close();
?>
Your issue is
$('form').each(function (id, el) {
$(el).submit(function (event) {
id is the index and el is the element (form). see here: https://api.jquery.com/each/
Just add the event handler
$('form').submit(function (event) {
That says "Find all the form elements present, add an event handler for submit."
Now inside that alert(id); change to alert($(this).index());
Thus your index (as shown) is the "id" of the element as you had it.
return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.
This should address that.
$(function() {
$('form').on('submit', function(event) {
event.preventDefault();
event.stopPropagation();// could have "return false;" at the end
var me = $(this);
var myid = $(this).index();
alert(myid); // not that this IS needed...
var _data = me.serialize();
$.ajax({
type: 'POST',
url: me.attr('action'),
data: _data
})
.done(function(response) {
if (response === '') {
notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
me.find('textarea').val(' ');
} else {
notifyAlert(response);
}
})
.fail(function(data) {
notifyAlert(data.responseText);
});
// just to be clear, this happens NOW, before the ajax completes
// is that what is desired?
grecaptcha.reset(me.find('button').attr('id'));
// return false; // instead of event.xx above
});
$('textarea').click(function() {
if ($(this).val() === ' ')
$(this).val('');
});
});
Side note
$("#notify-modal").find('.modal-body').removeClass('alert-success');
$("#notify-modal").find('.modal-body').addClass('alert-danger');
$("#notify-modal").find('.modal-body').text(message);
can perhaps be (avoid multiple DOM traversals)
$("#notify-modal").find('.modal-body')
.removeClass('alert-success')
.addClass('alert-danger')
.text(message);
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();
});
Problem: After I input a name and hit enter, the hash changes to 'pag2', showing different content. I click the red link that goes to other website and, once I am on that website, I go back via back button in the browser. It still is www.luisalmerich.com#pag2, but shows the content from the empty location hash (the one you see entering directly).
If I have explained it badly:
www.luisalmerich.com -> I input the text and hit enter -> www.luisalmerich.com/#pag2 -> www.siroppe.com (red link on #pag2) -> Back button on browser -> www.luisalmerich.com/#pag2 but with the content from www.luisalmerich.com
This is the web: http://www.luisalmerich.com/
My code isn't anything weird. Here is all the JavaScript the website has (it's probably causing the problem):
$(document).ready(function () {
$('#input1').keypress(function (e) {
if(e.which == 13){
location.hash="pag2";
}
});
});
$(window).on('hashchange', function() {
if (location.hash == "#pag2") {
$('#pag1').css("display", "none");
$('#pag2').css("display", "block");
$('#pag3').css("display", "none");
} else if (location.hash == "#pag3") {
$('#pag1').css("display", "none");
$('#pag2').css("display", "none");
$('#pag3').css("display", "block");
} else {
$('#pag1').css("display", "block");
$('#pag2').css("display", "none");
$('#pag3').css("display", "none");
}
});
And here is the important html
<ul id="lista">
<li id="pag1">
<label id="label1" for="input1">
Hola, soy Luis.<br/>
Bienvenido a mi web personal.<br/>
Antes de nada,<br/>
¿podrías indicarme tu nombre?<br/>
</label>
<input type='text' id="input1" autofocus autocomplete='off'/>
</li>
<li id="pag2">
<label id="label2">
<span id='nombre'>Buenos días X.</span>
Me llamo Luis Almerich de Haro. Además de trabajar como creativo en la agencia <a href='http://siroppe.com/'>Siroppe</a>, estudio Publicidad y Relaciones Públicas en la universidad CEU de Valencia.</br>
Nací hace 21 años en un pequeño pueblo de la costa gaditana y, desde que era un niño, me ha fascinado el mundo de la publicidad. También tengo otras pasiones como la tecnología, música, lectura, deporte y arte.</br>
Me defino como una persona muy curiosa. Me encanta aprender cosas nuevas y, al igual que esta web, soy un lienzo en blanco en el que queda mucho por completar.</br>
¿Te interesaría saber algo más sobre mí?</br>
</label>
</li>
<li id="pag3">
<label id="label3">Voy a hablar un poco sobre mis cualidades. Tengo una actitud positiva hacia cualquier trabajo y gran facilidad para comunicarme y relacionarme con mis compañeros. Confianza en el trabajo, adaptabilidad dentro del entorno laboral y en el trabajo en equipo, auto-motivación y pasión en el entorno laboral.</br>También he participado en diversos voluntariados:<ul><li>Organización del festival de publicidad la Lluna 2014, a cargo de CSG Servicios.</li><li>Organización del cóctel de navidad del Colegio Publicitario 2014.</li><li>Miembro activo del Observatorio Beyond The Line desde Septiembre del 2014.</li><li>Colaborador de la marca Maru Cruz.</li></ul></br>Di mi gran paso al mundo laboral trabajando para <a href='http://www.estudihac.com/'>Estudi{H}ac</a> como New Business and Research.</p><p>Soy proactivo, me gusta participar en concursos, eventos y actividades. Durante el curso 2014/2015 participé en el concurso anual de publicidad Naranja Below, donde obtuve el segundo puesto. También participé en NASA Space Apps Challenge 2015, donde obtuve una mención especial por la mejor presentación y manera de vender un proyecto.</label>
</li>
</ul>
Right now I'm not using pag3 because of this problem. Also, I know about the ASCII problems, I will fix them as soon as I can :)
As you can see, nothing special. What am I doing wrong? I just want to show the content of pag2 even when the user is returning from other web.
The $(window).on('hashchange' event is not actually firing when you come back from another site. The hash it's just there, since the beginning.
You will need to check for the hash in document.ready:
$( document ).ready(function() {
if(window.location.hash) {
// Fragment exists, do your staff to use it
}
);
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 have an entity mapped to other entity entreprise ,with js and jquery i have the chance finally to validate the two forms in one type with data-prototype name
but i can't have an ergonoy form to my entity entreprise how can i fix the problem
<div class="c col-md-4 col-xs-4">
<div class="form-group">
{{ form_rest(form,{ 'attr': {'class': 'form-control'} })}}
</div>
</div>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('bundles/GestionCompte/js/bootstrap.min.css') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_entreprises');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent entreprise');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterEntreprise($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterEntreprise($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire entreprise
function ajouterEntreprise($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la catégorie
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une catégorie
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
<!-- imbriquation du formulaire logistique-->
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_logistiques');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent logistique');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterLogistique($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterLogistique($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Logistique
function ajouterLogistique($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la logistique
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une logistique
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
</body>
</html>
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.