I've got a load more button, which when clicked it displays the next 4 items, by doing an ajax call.
However, sometimes (for no apparent reason), the content is duplicated and returned twice, even though when I alert the results, there's only 1. This also happens when you double click the button.
Any help would be appreciated!
Here's my code:
/* load more */
$('.load-more').on('click',function(e){
e.preventDefault();
e.stopPropagation();
$('.pagination-holder').fadeOut(250,function(){
$(this).remove();
});
var start = $(this).data('start'),
limit = $(this).data('limit'),
page = $(this).data('page'),
type = $(this).attr('href');
$.ajax({
url:'/index.php?route=news/news/getnext&start=4&limit=4&page=2',
method:'GET',
data:{start:start,limit:limit,page:page},
dataType:'json'
}).done(function(data){
var html = '';
html +='<div class="row next" style="display:none">';
$.each(data.newss,function(i,news){
html +='<div class="col-md-3 pt30">';
html +=' <div class="image mb30"><img src="'+news.image+'" alt="'+news.title+'" class="responsive" /></div>';
html +=' <div class="text">';
html +=' <h3>'+news.title+'</h3>';
html +=' <p class="date mb5">'+news.date+'</p>';
html +=' <p class="mb30">'+news.description+'</p>';
html +=' Read';
html +=' </div>';
html +='</div>';
if ((i+1) % 4 === 0) {
html +='<div class="clear"></div>';
}
});
html +='</div>';
//alert(html); /* when I alert this, it displays one row, as it should do, but when i don't alert this, it can append duplicates */
$('#'+type+'-list').find('.row').after(html).ready(function(){
$('.row.next').fadeIn(500).removeClass('next');
});
});
});
I've seen similar questions throughout stackoverflow and I've tried to solve the issue, but I can't figure it out.
Hey you can use my same answer on it:
https://stackoverflow.com/questions/45788916/jquery-isnt-getting-dynamically-updated-data-from-button
Related
So i've got this :
<script>
{% block js %}
$('#add_file').on('click', function(){
html = '<div class="row">';
html += '<div class="col s6 input-field">';
html += '<input placeholder="Komentaras" name="file_description" type="text" />';
html += '</div>';
html += '<div class="col s2 top_20">';
html += '<a class="btn-floating red tooltipped delete" data-position="top" data-delay="20" data-tooltip="Trinti"><i class="material-icons" id="delete_files">delete</i></a>';
html += '</div>';
html += '</div>';
$('#files').append(html);
});
{% endblock %}
</script>
This block of code generates and adds extra divs depending on the click, the question is, how to delete every generated html one by one, by pressing that generated red btn?
$('a.delete').click(function() {
$(this).closest('.row').remove();
})
Note: do not use the same id id="delete_files" on the icon
Because it's dynamically added, you can't just use normal jQuery to target it. jQuery works with the DOM that's loaded - not anything after.
So you'd write a function that does:
$('#files').on('click', '.delete', function()
{
$(this).parents().eq(1).remove()
})
refs:
https://api.jquery.com/parents/
https://api.jquery.com/eq/
https://api.jquery.com/remove/
Okay, so I want to have a LOT of buttons on a page, which each open a different modal, populated with a gif with php. As you may have guesse, downloading a lot of quite big gifs takes a ton of time.
Solution: load the gifs only when the modal containing them is actually displayed. I was advised to use the following jQuery snippet:
echo '<script>' . "\r\n";
echo '$("#btn_'.$id.'").click(function(){' . "\r\n";
echo '$("#img_'.$id.'").attr("src", "'.$id.".gif" . '"); });';
echo '</script>' . "\r\n" . "\r\n";
More readable clean, PHP-free version:
<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });
</script>
The id is replaced with an actual id in php of course.
Now this snippet doesn't actually PULL the gif from the server, so in the end nothing gets displayed at all...
edit: more code
<button id="img_id" class="modalbutton" style="background-image: url(thumbs/id.gif); cursor:pointer;" onclick="document.getElementById('modal_id').style.display='block'"></button>
<div id="modal_id" class="w3-modal w3-animate-zoom" onclick="this.style.display = 'none'">
<span id="span_id" class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">×</span>
<div class="modal-content" onclick="this.style.display='none'"><img id="img_id" src=""></div>
</div>
<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });</script>
Demo
$(document).ready(function() {
$("button").click(function(event){
var $id = event.target.id;
document.getElementById('modal_'+$id).style.display='block';
var $image = $('#img_'+$id);
var $downloadingImage = $('#imagehelper_'+$id);
$downloadingImage.attr('src', $id+'.gif');
$downloadingImage.on('load', function() {
$image.attr('src', $id+'.gif');
}).each(function() {
if(this.complete) $(this).load();
});
});
});
The script gets the id of the calling element, so I don't need a lot of different snippets.
thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.
I am generating a dynamic div using a for loop and I was surprised by the output. The code looks as follows:
for(continent in CityList)
{
$('<div id="'+continent+'Display"><div class="row top-buffer">').appendTo('#Display');
currentcontinent = CityList[continent];
for(city in currentcontinent) {
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#Display');
}
$('</div></div>').appendTo('#Display');
}
The output html using
alert($("div#Display").clone().html());
is:
<div id="AmericaDisplay"><div class="row top-buffer"></div></div><div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>Boston</h3><a data-name="Boston" href="#Boston"> <img src="undefined" style="min-height:250px;height:250px;"></a></div></div></div>...
As you can see there are two </div></div> after the first append, but I expect those to be at the end of the html since I call them last in the for loop. Is there any reason for the loop to behave like this?
when you parse a tag with jQuery it creates a DOM object, which includes closing tags as well. If you want $('<div class="col-md-4"><div class="thumbnail">... to go inside $('<div id="'+continent+'Display"><div class="row top-buffer">') you need to append it to '#' + continent + 'Display' like so:
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#' + continent + 'Display');
also, get rid of $('</div></div>').appendTo('#Display');, it serves no purpose when parsing elements with jQuery.
The code $('<div id="Display"><div class="row top-buffer">') will create jquery object so if you append it, the html will look like this
<div id="Display">
<div class="row top-buffer">
</div>
</div>
if you want to append the </div></div> in the end then save all the html in a variable and append it in the end
for(continent in CityList){
var data = '<div id="'+continent+'Display"><div class="row top-buffer">';
currentcontinent = CityList[continent];
for(city in currentcontinent) {
data += '<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>'
}
data += '</div></div>';
$(data).appendTo('#Display'); // or ('#Display').append(data);
}
I have a function that adds a product to the basket and then displays a success message at the top of the main content area of the page. I have got the ajax call on the onsuccess function working. I can't however, get the success message inserted on the page before a div with the id breadcrumbBar. Here is my onSuccess function:
onSuccess: function(transport) {
if(transport.responseText == "oos") {
alert("We're sorry, this product is out of stock. If the product has different options, why not try a diffrent combination?");
}
else
{
container.update(button);
successMessage = document.createElement('div');
successMessage.id = "basketAddSuccess";
successMessage.insert('<p>Test</p>');
alert($('breadcrumbBar'));
document.body.insertBefore(successMessage, $('breadcrumbBar'));
}
}
Here is the php which generates the html for the start of my content:
<div id="content" style="overflow: visible;">
<section role="main">
<div class="breadcrumbs floatLeft" id="breadcrumbBar">
<p class="floatLeft"><?php echo $product->cat_name; ?> > <span class="green" style="font-weight: bold;"><?php echo $product->prod_title; ?></span></p>
<?php genSaleIcon($product->sale); ?>
</div>
Any ideas?
insertBefore must be carried out on the parent node, in your case on the "main" section.
$('breadcrumbBar').parentNode.insertBefore(successMessage, $('breadcrumbBar'))