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.
Related
When I click on my "php1" div it doesn't do anything.
The location.reload() is a placeholder, just an easy way of knowing whether or not the onClick works.
<div class="php-task">
<h1>PHP</h1>
<div id="php1" class="text">
<p>Display/setvars</p>
</div>
</div>
$("#php1").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {page: "task",task: 1},
success: function (response) {
location.reload();
}
});
});
Just to show you that it won't work for duplicate id elements (and that it does work as a reduced example for the first div with that id, which must be unique):
$("#php1").click(function (e) {
console.log('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="php-task">
<h1>PHP</h1>
<div id="php1" class="text"><!-- clicking this will trigger the handler -->
<p>Display/setvars</p>
<p>clicking this will trigger the handler</p>
</div>
</div>
<div class="php-task">
<h1>PHP</h1>
<div id="php1" class="text"><!-- clicking this will NOT trigger the handler -->
<p>Display/setvars</p>
<p>clicking this will NOT trigger the handler</p>
</div>
</div>
I think in your case with multiple divs php1,php2,php3... it will be better to attach the click event using classes instead :
$(function() {
$(".php-task .text").click(function(e) {
e.preventDefault();
console.log('Task with id : ' + this.id + ' clicked.');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="php-task">
<h1>PHP</h1>
<div id="php1" class="text">
<p>Display/setvars</p>
</div>
</div>
<div class="php-task">
<h1>PHP</h1>
<div id="php2" class="text">
<p>Display/setvars</p>
</div>
</div>
<div class="php-task">
<h1>PHP</h1>
<div id="php3" class="text">
<p>Display/setvars</p>
</div>
</div><br><br><br>
Can you try below code? Might be your HTML is dynamically loaded after page load.
$(function(){
$('body').on('click', '#php1', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {page: "task",task: 1},
success: function (response) {
location.reload();
}
});
});
});
$(document).ready(function () {
$("#task").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {
page: "task"
},
success: function (response) {
location.reload();
}
});
});
});
Adding the following did the trick:
$(document).ready(function()
I am retrieving an AJAX response from a server (the server processed an update of a shoppingcart) that contains various elements. Here is an example of how it looks like:
<div id="blockcart-wrapper">
<div class="shoppingcart-background" id="bg-div"></div>
<div class="blockcart cart-preview" data-refresh-url="//localhost/backend/index.php?fc=module&module=shoppingcart&controller=ajax">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="someImage"
onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">
<a href="#" onclick="toggleClass()">
<img class="icon" height="20px" width="20px" src="someImage">
</a>
</div>
<h1 class="shopping-cart-header">Shoppingcart</h1>
<div class="products-container">
<div class="product">
<span class="product-image"><img src="someImage"></span>
<div class="product-details">
<h2 class="name-header">Name</h2>
<div class="product-quantity-details">
<span class="quantity">19</span>
-
<a id="link1" href="https://backend/decrease" class="js-increase-product-quantity" data-link-action="update-quantity">+</a>
<span class="color-circle">
</span>
</div>
<div class="price-open">
<span class="product-price">14,16 €</span>
<span class="product-link">öffnen</span>
</div>
<a
class="remove-from-cart"
data-link-action="remove-from-cart"
data-id-product="6"
data-id-product-attribute="0"
href="http://backend/remove"
rel="nofollow"
>
Remove
</a>
</div>
</div>
</div>
<div class="checkout">
<div class="meta-data-wrap">
<div class="cart-total label-row">
<span class="label">Total</span>
<span class="value">269,06 €</span>
</div>
</div>
<a href="/index.php?controller=order" class="checkout-step">
<button type="button" class="dark">Checkout</button>
</a>
</div>
</div>
The problem is, that the respone contains about 25000 LOC which are mostly irrelevant. So I want to parse this part of the response and insert it into the actual HTML. What I did so far:
document.getElementById('link1').addEventListener('click', function(ev){
ev.preventDefault();
console.log(ev);
$.ajax({
url: this.href,
type: "GET",
dataType: "html",
success: function(data) {
console.log($(data).text());
}
});
});
This gives me the complete response. So from this on, I tried to find the div with the id blockcart-wrapper, which is my 'entry point' for replacing the old HTML, so I did:
document.getElementById('link1').addEventListener('click', function(ev){
ev.preventDefault();
console.log(ev);
$.ajax({
url: this.href,
type: "GET",
dataType: "html",
success: function(data) {
console.log($(data).find('#blockcart-wrapper'));
}
});
});
But this gives me a jQuery object and not The HTML content within this div.
Could someone help me to parse the mentioned div and replace the 'old' with the new parsed?
But this gives me a jQuery object and not the HTML content within this div.
You must use .html() to return the HTML code inside the div like :
console.log( $(data).find('#blockcart-wrapper').html() );
If you cannot get a smaller response, try getting a partial:
Note the space before the selector
url: this.href + ' #blockcart-wrapper'
or
$("#container").load(location.href + ' #blockcart-wrapper')
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)
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo