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>
Related
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 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)
I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.
<div class="header_slider">
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '32.882%',
minHeight: '50px',
loader : false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
// ]]></script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_1"></div>
</div>
</div>
<div data-src="{{media
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_2"></div>
</div>
</div>
<div data-src="{{media url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_3"></div>
</div>
</div>
</div>
<div class="clear"></div>
You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.
For example on the HTML
<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
And your Javascript
$('.clickMe').on("click", function() {
window.location.href = $(this).data('destination');
});
EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/
<div data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 6 years ago.
I need to create few div elements after click the button. So I decide to make something like template in external file and append in head div tag using jquery.
$('.socket-element').on('click', function (e) {
$.ajax({
url: '/my-site/tags/socket-box.php',
success: function (data) { $('#room-place').append(data); },
dataType: 'html'
});
});
And my external html file:
<div class="socket-box room-box-element col-xs-2 ui-draggable ui-draggable-handle">
<div class="row">
<div class="row">
<div class="box-header col-xs-12">
<div class="row">
<div class="col-xs-2">
<img class="down-arrow" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png" width="14" height="18" />
</div>
<div class="col-xs-8">
<h6>Temperature</h6>
</div>
<div class="col-xs-2">
<img class="settings" src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/settings-24-128.png" width="18" height="18" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="box-content col-xs-12">
<div class="row">
Test
</div>
</div>
</div>
</div>
So this code is working fine is add the external html on the original html file but when I need to use click event on appended html is not working.
So I need to use few events like click, draggable from jquery ui etc.
But when I need to use: this click event then for appended html is not working
$('.down-arrow').click(function (e) {
alert('Test');
});
How can I solve this problem.
Try this :
$('.socket-element').on('click', function (e) {
$.ajax({
url: '/my-site/tags/socket-box.php',
success: function (data) {
$('#room-place').append(data);
$('#room-place').ready(function(){
$('.down-arrow').click(function (e) {
alert('Test');
});
});
},
dataType: 'html'
});
});
Hope this will help:)
For dynamic events do write using event delegation like:
$(document).on("click",".down-arrow",function(){
//write your code here
})
Please Try to use the events inside the on ready function .. Trust me it will work properly.
$(document).ready(function(){
$('.down-arrow').click(function (e) {
alert('Test');
});
});
Please try this way.
Use event delegation
$(document).on('click', '.down-arrow',function(e){
});
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.