In my project I have this code who takes results from mysql query and put it into comment DIV and a jquery code who takes me more results when I scroll down my page via a another page code
<body>
<div id="container">
<div class="comment">
<div id="comm">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var offset = $('.comment:last').offset();
$(window).scroll(function(){
if((offset.top-$(window).height() <= $(window).scrollTop())
&& load==false && ($('.comment').size()>=5) &&
($('.comment').size()!=$('.nb_com').text())){
var theme = $('.comment').attr('idtheme');
$.ajax({
url: 'ajax_scroll.php',
type: 'get',
data: 'theme='+theme,
success: function(data) {
$('.comment:last').after(data);
offset = $('.comment:last').offset();
}
});
}
});
});
</script>
I would like to apply this javascript below for my comment DIV but it works only for the DIVS before I scroll down the page
$('#confirmdelete a').click(function(){
var id_comm=$(this).attr('id');
if(confirm("Delete?")) {
$.ajax({
url: 'commentsdelete.php',
type: 'post',
async: false,
data:{
'id_comm': id_comm
},
success:function(){
}
});
}
else
{
}
return false;
});
How I can apply this javascrip code for all the DIVs (before scrolling and after scrolling)
Thanks.
Solution 1:
Add your click function to the global scope, if the content is changed reassign:
var onclickfunc=function(){
alert("clicked");
}
$('#confirmdelete a').click(onclickfunc);
//later in your ajax
sucess:function(data){
//add the content
//reassign:
$('#confirmdelete a').click(onclickfunc);
}
Solution 2(even better):
Detect if a parent element was clicked, and than check if it was a confirmdelete element:
$(document).on("click","#confirmdelete a",function(){
//yourcode here
});
See: http://api.jquery.com/on/
Related
Html (if there are not results - example):
<div id="fixedsearch"></div>
Html (with results - example):
<div id="fixedsearch">
<div>
<h3>Title</h3>
<img src="/imagesource.jpg">
</div>
</div>
jquery:
$('#searchinput').on('keyup', function(){
$value=$(this).val();
$.ajax({
type: 'get',
url: '{{URL::to('ajaxsearch')}}',
data: {'states':decodeURIComponent($value)},
success:function(data){
$('#fixedsearch').html(data);
if(data == ''){
$('#fixedsearch').slideUp();
}else{
$('#fixedsearch').slideDown();
}
}
});
});
What I need is:
1) If data is not null (and there are existed div inside #fixedsearch) do a smooth animation like slidedown() to show the results inside the #fixedsearch,
2) If data is null do a smooth animation like slideup() to hide smoothly the div.
That is the general idea but I can't accomplished with this jquery code.
Your if condition is wrong. Instead of testing for data == '', you should instead test for data.length > 0 if you want to test for the presence of data to output.
success:function(data){
$('#fixedsearch').html(data);
if(data.length > 0){
$('#fixedsearch').slideUp();
}else{
$('#fixedsearch').slideDown();
}
}
Try adding some timeout delay along with stop() with true to clear the pending animation queues that got triggered when multiple keyup events got triggered.
jQuery(document).ready(function() {
$('#searchinput').on('keyup', function() {
//when no data from server
data = $(this).val();
if (data.length) {
$('#fixedsearch').stop(true, true).slideUp(1000, function(){
//you can do some process
});
} else {
$('#fixedsearch').stop(true, true).slideDown(1000, function(){
// you can do some process
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchinput" />
<div id="fixedsearch">
<div>
<h3>Title</h3>
<img src="/imagesource.jpg">
</div>
</div>
You should check for length of data:
find the tag and check if it returns length zero. If it does, there is no data returned.
$('#searchinput').on('keyup', function(){
$value=$(this).val();
$.ajax({
type: 'get',
url: '{{URL::to('ajaxsearch')}}',
data: {'states':decodeURIComponent($value)},
success:function(data){
var dataHtml = $('#fixedsearch',data).find('div').length;
$('#fixedsearch').html($('#fixedsearch',data).html());
if(dataHtml == 0){
$('#fixedsearch').slideUp();
}else{
$('#fixedsearch').slideDown();
}
}
});
});
using .html().length
After appending the data into your div you can check the content length. You can check that by using .html().length on your div. Use this code in your success callback
success:function(data){
var $fixedSearch = $('#fixedsearch'); // hold the object in a variable since you are using it multiple times, Just a performance concern
$fixedSearch.html(data);
if($fixedSearch.html().length == 0){ // check if the contents exist or not
$fixedSearch.slideUp();
}else{
$fixedSearch.slideDown();
}
}
Ok here is problem in your code ...
I think you are missing really important property about slideDown() function as I know-
slideDown() works on elements hidden with jQuery methods and
display:none in CSS (but not visibility:hidden); if your div has no css like display:none then slideDown() has no effect.
and slideUp() will work in displayed element but you have to callback function in that. I think you should have code like below-
$('#searchinput').on('keyup', function(){
$value=$(this).val();
$.ajax({
type: 'get',
url: '{{URL::to('ajaxsearch')}}',
data: {'states':decodeURIComponent($value)},
success:function(data){
// $('#fixedsearch').html(data);- this will set html to recent and if data is empty then you div with id fixedsearch automatically hidden
$('#fixedsearch').html(data);
if(data == ''){
$('#fixedsearch').slideUp("slow",function(){
$('#fixedsearch').html(data);
});
}else{
// this will hide your div abrupty
$('#fixedsearch').css('display':'none');
// now set div with you new html; hope you are getting response in html
$('#fixedsearch').html(data);
$('#fixedsearch').slideDown();
}
}
});
});
After many attempts I saw the height was the problem.
$('#searchinput').on('keyup', function(){
$value=$(this).val();
$.ajax({
type: 'get',
url: '{{URL::to('ajaxsearch')}}',
data: {'states':decodeURIComponent($value)},
success:function(data){
$('#fixedsearch').html(data);
$('#fixedsearch').css({"height": "296px"});
if(data != ""){
$('#fixedsearch').slideDown();
}else{
$('#fixedsearch').slideUp();
}
}
});
});
Now what I need is to get the height dynamically when the div is not empty. Everything else is perfect now. Thank you for your support.
I want when I click a link with attribute "linkdata" = "page" to change the body's code to a loading image and after it's done to change the whole document's HTML to the result. Here is the current code I have:
$('a[linkdata="page"]').each(function() {
$(this).click(function () {
var attribute = $(this).attr("href");
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$.ajax({ type: "GET", url: attribute }).done(function (data) {
$(document).html(data);
});
return false;
});
});
The result:
It changes the body's HTML code to the image and always fails with the request (which is http://somelink.com/home - using CodeIgniter, tried with .fail(function() { window.location="/error/404" });)
$('a[linkdata="page"]').on('click',function(k,v){
var attribute = $(this).attr("href");
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$(document).load({ type: "GET", url: attribute });
})
$('a[linkdata="page"]').click(function(e){
e.preventDefault();
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$.ajax({url:$(this).attr("href") })
.success(function(data){$(document.body).html(data);})
.error(function(x,s,e){alert('Warning! '+s+': '+e)});
});
I am learning jquery and i am stuck with a problem. Here is the code
$(function(){
var gotProducts=new Array();
var productsWithDelete=new Array();
$('.addProducts').on('keyup',function(event) {
var searchVal=$(this).val().trim();
if(searchVal.length > 0) {
$.ajax({
url: 'http://localhost/url',
data: { products: $(this).val(), },
type: 'POST',
dataType: 'html',
success: function(msg) {
$('#printTheProducts').html(msg);
}
});
}
});
$('.productsButton').click(function() {
alert('yes');
});
});
The response I am getting from the ajax call is a button having class productsButton.
Now when i try to click that button I got through ajax then it does not alert yes. I mean it does nothing.
Question:-
What might be the problem?
Try event delegation using .on() for generated button, As they are generated dynamically
$('#printTheProducts').on('click','.productsButton',function(){
alert('yes');
});
Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!
Syntax:
$(closestparentelement).on('event','targetselector',function(){
});
I'm very new to jQuery. I need to display customer testimonials from a database on a certain time interval. Something like the one shown on this site. There is a Testimonials container on this site within which testimonials are displayed one by one from the database on a certain time period. I tried for a long time on Google but to no luck. If you know any links where I can download such a script, it will be very helpful to me. Thanks.
Well, you could look at how it's done at the site you linked, right here
(function ($) {
$(document).ready(function () {
var el = $("#testimonial");
if (el) {
RotateTestimonial();
setInterval(RotateTestimonial, 20000);
}
});
function RotateTestimonial() {
var pageUrl = "RandomTestimonial.php"
$.ajax({
type: "GET",
url: pageUrl,
cache: false,
success: function (msg) {
$("#testimonial").slideUp('slow').fadeOut(3000, function () {
var el = $("#testimonial"); //Refers to some container tag like <div> or <span> where the random message is to be written.
el.html(msg);
el.slideDown('slow').fadeIn('slow');
});
}
});
}
})(jQuery)
This code sets a 20 second timer to load HTML returned from YourPageHereReturnsHTML.aspx into the testimonial div.
<div id="testimonial">
</div>
<script>
(function($){
$(document).ready(function(){
var el = $("#testimonial");
if (el){
RotateTestimonial();
setInterval(RotateTestimonial, 20000);
}
});
function RotateTestimonial(){
var pageUrl = "YourPageHereReturnsHTML.aspx"
$.ajax({
type: "GET",
url: pageUrl,
cache:false,
success: function(msg) {
$("#testimonial").slideUp('slow').fadeOut(3000, function (){
var el = $("#testimonial");
el.html(msg);
el.slideDown('slow').fadeIn('slow');
});
}
});
}
})(jQuery)
</script>
I have two problems
I am trying to open a jQuery colorbox and it is very slow. The reason is I am trying to get html content from a different page (I cannot use iframe because I just need a part of this page). The following code works but it takes time after the button is clicked:
$(document).ready(function() {
$(".cart-link a").click(function(event) {
$(this).colorbox.close();
});
$(".rest-menuitem a").click(function(event) {
event.preventDefault();
var result = null;
var sURL = $(this).attr("href");
$.colorbox({
html: function() {
$.ajax({
url: sURL,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return $(result).find('.product');
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
});
});
I want to know if there is a alternative way to do it. I dont mind if the colorbox popup and then takes time to load the content. The above version can be fount at this url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products).
I am also trying to close the colorbox when a user clicks on add to cart. But some reason it is not triggered. $(".cart-link a").click is not triggered when I click on add to cart. Is there a special way to add jquery to colorbox content?
Try this instead:
$(".rest-menuitem a").colorbox({
href: function(){
return $(this).attr('href') + ' .products';
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.
For your question 2 can you try this ?
$(document).ready(function() {
$(".cart-link a").live('click',function(event) {
$(this).colorbox.close();
});
});
For your question 1..it will be slow since you are fetching it from different page.Use a different logic for that
For your question no 1
$('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
$.ajax({
url :'Your url',
data : {}, //data to send if any
type : "POST" //or get
success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
$('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
}
});
}});