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 :)
Related
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 want to add some css-classes into my html document. When I use my app without json(simple $scope.resumes = [{..some data..}]) it works nice, but when I include json file it works bad(i see necessary data, but without css-classes)
var myApp = angular.module('myApp', []);
myApp.controller('ResumeListCtrl', function ($scope, $http) {
$scope.title="resume";
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
});
$(document).on("ready", function() {
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="expa col-xs-6 col-sm-6 col-md-6 col-lg-6" ng-repeat="resume in resumes">
<div class="box" >
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i
class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">
{{resume.description}}
</div>
</div>
</div>
Use ng-class-even and ng-class-odd like this:
<div class="box" ng-class-odd="'hvr-bubble-left margin_left_5 box-float-left'" ng-class-even="'hvr-bubble-right margin_right_5 box-float-right'">
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">{{resume.description}}</div>
</div>
If you use the append class on document ready, it might be too early.
Insert these two:
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
In here
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
When the document is ready does not mean that the JSON post is also ready :)
Click works just on first div with id plus but other divs with the same id dont work. I dont know whats the problem... I dont get what the problem is. Please help. Thanks!
Here is the code...
Edited:
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="41">Good</div>
<div class="minus" glas="41">Bad</div>
</div>
<div id="referenceInfo">
01:40 PM 06.09.2014.
</div>
</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="37">Good</div>
<div class="minus" glas="37">Bad</div>
</div>
<div id="referenceInfo">
01:38 PM 06.09.2014.
</div>
</div>
</div>
JavaScript
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
});
IDs should be unique. use same class instead of ids.Like this:
<div class="plus" glas="37">Good</div>
and then use:
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
$(".plus").click(...)
not
$("#plus").click(...)
There can and shall only be one item with a certain ID on the page. Use classes on those buttons instead.
Couple of issues. You have mismatched divs. This last div looks like its the culprit.
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div> <--this one
Your second issue is that you shouldnt have multiple ids that are the same on a page. Instead set it as a class with
<div class="plus"> Then reference them in jquery with
$(".plus").click( function()
I have to use class if you have more than one div. Try with .plus
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.
I have organized the page this way:
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="310"> </div>
<div class="formComment">
<textarea data-idPost="310"></textarea>
<button data-idPost="310">Insert</button>
</div>
</div>
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="304"> </div>
<div class="formComment">
<textarea data-idPost="304"></textarea>
<button data-idPost="304">Insert</button>
</div>
</div>
I used html5 data-attributes to distinguish posts and my jquery code is:
$(".formCommento button").click(function() {
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]').val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});
I think this is not the way to organize this kind of stuff. I have the problem that when i click on the button i have multiple actions running together so the same comment is inserted several times. What do you suggest to do?
If you are learning to "organize" as well, I would suggest only to use once your data-, like:
<div class="singlePost" data-postId="310">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
<div class="singlePost" data-postId="311">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
then, fire it for every button:
$(".singlePost .btn-submit").click(function() {
var singlePost = $(this).closest(".singlePost"), // get singlePost block
postId = singlePost.attr("data-postId"), // read data attribute
txt = singlePost.find("textarea").val(); // get it's own textarea value
// do your magic
});
Here's a live example: http://jsbin.com/iyomaj/1/edit
try this, pass related context, by default jQuery uses document as context so it search in whole document
$(".formComment button").click(function() {
var parentdiv = $(this).closest('.formComment');
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]',parentdiv ).val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});