I want to make a website, with articles that fit together like puzzle(post grid).
I used the source code of this codepen:
https://codepen.io/maximelafarie/full/bVXMBR/
When I put it this codepen in index.php, all work good.
BUT, I use AJAX in index.php, to take articles from fetch.php.
This is how index.php get the articles from fetch.php:
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("result_no").value = 0;
//var val = document.getElementById("result_no").value;
var val =0;
$.ajax({
type: 'post',
url: 'fetch.php',
data: {
getresult: val
},
context: this,
success: function(response) {
var content = document.getElementById("result_para");
content.innerHTML = content.innerHTML + response;
document.getElementById("result_no").value = Number(val) + 15;
}
});
});
</script>
<div id="content">
<div id="result_para" class="site__wrapper">
</div>
</div>
Plus in the end of the index.php, there is a those JS libraries/functions:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js'></script>
<script src="gridViewer/index.js"></script>
This is index.js:
(function() {
var $grid = $('.grid').imagesLoaded(function() {
$('.site__wrapper').masonry({
itemSelector: '.grid'
});
});
})();
From doing a research, I notices that the problem, probably lays on the JS of index.php, that doesn't apply on articles from fetch.php. I think there need to be a method that wait to the images of fetch.php to load, and then apply the JS on them.
This is the articles that came from index.php(when getting articles from fetch.php):
<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">
<div class="grid">
<div class="card">
<div class="card__image">
<article class="card-60">
</article>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card__image">
<article class="card-60">
<div class="flex-content">
<div style="padding-bottom:2em;"></div>
</div>
</article>
</div>
</div>
</div>
</div>
And when I only get the articles from index.php(don't get them from fetch.php), the articles I get are(This is how I want it to be, also with fetch.php):
<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">
<div class="grid" style="position: absolute; left: 0px; top: 24px;">
<div class="card">
<div class="card__image">
<article class="card-60">
</article>
</div>
</div>
</div>
<div class="grid" style="position: absolute; left: 304px; top: 24px;">
<div class="card">
<div class="card__image">
<article class="card-60">
<div class="flex-content">
<div style="padding-bottom:2em;"></div>
</div>
</article>
</div>
</div>
</div>
</div>
For some reason when I get the articles from fetch.php, the class grid don't have position:absolute, with left and top value.
Thanks for help.
Your function in index.js is fired on startup, while your fectched articles are not arrived yet (asynchronous). You can try to apply your function to your result div at the moment they arrive, something like this:
$.ajax({
type: 'post',
url: 'fetch.php',
data: {
getresult: val
},
context: this,
success: function(response) {
var content = document.getElementById("result_para");
content.innerHTML = content.innerHTML + response;
//Edit from comments, try to remove the imagesLoaded part:
//$('#result_para .grid').imagesLoaded(function() {
$('.site__wrapper').masonry({
itemSelector: '.grid'
});
//});
document.getElementById("result_no").value = Number(val) + 15;
}
});
(NOTE: you can remove the original function that fires on startup if you have no images to process in your page before you get the articles with fetch, or else you can just leave it)
Related
I created a sample code to view xml data. When the page is loading, my current code load full xml file. But I need to load XML file after the button click. How can I fix the issue?
here is the code
$(document).ready(function(){
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
Plunker
Just add a click event listener to the button and put the AJAX request inside the handler.
$(document).ready(function(){
// adding click event listener to the button
$('#myButton1').on('click', function() {
// make the AJAX request
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
});
function showCD(xml){
xml = $(xml).children();
$("#xmldata").empty();
xml.each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
So I have asp.net core 2 project where I have one master view with this html:
<div>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div id="factory-plot-content">
</div>
</div>
}
And one partial view with (html only)
<div class="row">
<div class="col-md-4">
<div id="flot-line-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="flot-pie-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="gauge"></div>
</div>
What I need is to get partial view for every #factory-plot-content in my master view for each of my factory.
Using ajax like below change only one of the #factory-plot-content - the first one (I understand why) but I don't know what is the best way to call ajax.get foreach of factory divs.
My ajax: (Which I call in master page. It will be great to call it while foreaching factories)
$(document).ready(function () {
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
$("#factory-plot-content").html(data);
}
});
})
The first idea I had is to make custom ids like "factory-plot-content-#Model.FactoryName" but I'm kinda sure that this is an ugly way to reach result I need.
You can try with following code:
<div>
<script>
var factoryNumber = 0;
</script>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div class="partial-data" id="factory-plot-content">
<script>
getPartialData(function(data){
let partialData = $(".partialData")[factoryNumber];
partialData.html(data);
factoryNumber++;
});
</script>
</div>
</div>
}
<script>
function getPartialData(cb){
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
cb(data);
}
});
}
</script>
Hope it helps :)
I searched a lot in internet for this and nothing working for me. Here is the relevant codes. I tried to follow this link Owl carousel with ajax demo, but may be something i missed.
HTML
<div id="footer-gallery" class="owl-carousel owl-theme">
</div>
JS
$.ajax({
url: siteUrl,
type: 'POST',
data: {
page_no: pageNumber,
},
success: function(data) {
if(data.status == 200)
owl.trigger('insertContent.owl',[data.html]);
},
error: function(e) {
}
HTML data from ajax
<div class="item"> image content here </div>
<div class="item"> image content here </div>
After the ajax call the initial html is changed like this.
Changed html
<div class="owl-carousel owl-theme owl-loaded" id="footer-gallery">
<div class="owl-stage-outer">
<div class="owl-stage"></div>
</div>
</div>
Unsatisfied with existing sliders (mostly because they're bloated code and require external script calls), I decided to try to write a simple, site-specific inline slider script. However, I get a stack overflow error.
<div id="featured">
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
</div>
<script>
var _rys = jQuery.noConflict();
_rys("document").ready(function(){
var timeOut = 5000;
setTimeout(nextSlide(1),timeOut);
});
function nextSlide(next) {
var i = 1;
var numberOfChildren = _rys("#featured").children().length;
_rys(".tween:nth-child("+next+")").fadeTo(500,1);
while (i<=numberOfChildren) {
// loop through the children and make those that are opaque invisible
if (i != next) {
if (_rys(".tween:nth-child("+i+")").css('opacity') != 0) {
_rys(".tween:nth-child("+i+")").css('opacity',0);
}
}
i++;
}
if (next>=numberOfChildren) {
setTimeout(nextSlide(1), 5000);
} else {
setTimeout(nextSlide(next+1), 5000);
}
}
</script>
Say I have the following HTML layout:
<div class="main">
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
</div>
... etc ...
How would I make it so that if you click the image in one of the comment classes, it shows HTML in the next open-me class?
Here's what I have so far:
$(document).ready(function() {
$(document).on("click", ".image-click", function() {
$.ajax({
url: 'show_html.php',
type: "POST",
success: function() {
$(this).find(".open-me").html(); /* this is where I'm stuck */
}
});
});
});
this inside your AJAX success method isn't referring to the clicked element anymore. For that, we can set a context variable of this:
$(document).on("click", ".image-click", function() {
var self = $(this);
$.ajax({
url: 'show_html.php',
type: "POST",
success: function(data) {
self.parents(".comment").next(".open-me").html(data);
}
});
});
You can use this to access the sibling open-me. Also, you should save a reference to $(this) outside of the .ajax().
// outside the ajax function
var that = $(this);
// inside the ajax function
that.parent(".comment").next("open-me").html();
jQuery's documentation about next() is relevant.