Below is a script used to grab and spit out some of our data. The way it works is we create a variable then send it to the div id's located below.
function loadPregame() {
$.ajaxSetup({ cache: false });
$.getJSON("_schedule_" + seasontype + ".json",
function(data){
var game = data.gscd.g;
var status = game[gamenum].st;
//home team top nav
var homeTeamTop='<div class="homelogo col-md-5 col-sm-6 col-xs-12 pull-left">';
homeTeamTop+='<img src="logos/' + game[gamenum].h["ta"] + '.png" class="img-responsive" />';
homeTeamTop+='</div>';
homeTeamTop+='<div class="col-md-7 col-sm-6 col-xs-6 scorepad">';
homeTeamTop+='<span class="record score">' + game[gamenum].h["re"] + '</span>';
//homeTeam+='<br /><span id="homerank" class="rank"></span>';
homeTeamTop+='</div>';
// HOME TEAM
var homeTeam='<div class="homelogo col-md-5 col-sm-6 col-xs-12 pull-left">';
homeTeam+='<img src="logos/' + game[gamenum].h["ta"] + '.png" class="img-responsive" />';
homeTeam+='</div>';
homeTeam+='<div class="col-md-7 col-sm-6 col-xs-6 scorepad">';
homeTeam+='<span class="record score">' + game[gamenum].h["re"] + '</span>';
//homeTeam+='<br /><span id="homerank" class="rank"></span>';
homeTeam+='</div>';
// VISITOR TEAM
var visTeam='<div class="awaylogo col-md-5 col-sm-6 col-xs-12 pull-right">';
visTeam+='<img src="logos/' + game[gamenum].v["ta"] + '.png" class="img-responsive" />';
visTeam+='</div>';
visTeam+='<div class="col-md-7 col-sm-6 col-xs-12 scorepad pull-left">';
visTeam+='<span class="record score">' + game[gamenum].v["re"] + '</span>';
//visTeam+='<br /><span id="visrank" class="rank"></span>';
visTeam+='</div>';
document.getElementById("homeTeamTop").innerHTML=homeTeamTop;
//document.getElementById("visTeamTwo").innerHTML=visTeamTwo;
document.getElementById("visTeam").innerHTML=visTeam;
document.getElementById("homeTeam").innerHTML=homeTeam;
});
} //end function
What I can't seem to figure out is why the homeTeamTop won't proceed to my "HomeTeamTop" div. The others, which come after in progress have no issue. I've tried changing up the variable names and even redoing each manually. I then tried using the same info in the variables that work, but to no avail. <div id="visTeam"></div> and <div id="homeTeam"></div> which come next in progression print just fine. Is there a var_dump function as in PHP that I can use to see what's being rendered for homeTeamTop?
<div id="homeTeamTop"></div>
<div id="visTeam"></div>
<div id="homeTeam"></div>
Related
I am retrieving some user data with an ajax GET call, and want to display each user in a bootstrap card, so that I can filter these on the page using jQuery.
Currently, I get the data, iterate over each user and append some card elements to the <div class="card-deck"></div>:
jQuery:
$(document).ready(function() {
$.getJSON('/api/user/all')
.then(data => {
$.each(data, function (i, user) {
var userCard = '<div class="col-md-auto mb-4">' +
'<div class="card matches mx-auto" style="width: 18rem; height: 24rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">' + user.username + '</h5>' +
'<p class="card-text">' + user.jobTitle + '</p>' +
'<p class="card-text">' + user.city + '</p>' +
'</div>' +
"</div>" +
"</div>";
$('#userList').append(userCard);
});
})
})
ejs:
<div class="row">
<div class="card-container align-items-left">
<div class="card-deck" id="userList">
// cards go here ...
</div>
</div>
</div>
This works, but there will be a lot of html that goes into building the cards, so I would prefer to send the entire user object (below this is user) to the .ejs file, so that I can build the card there:
<div class="row">
<div class="card-container align-items-left">
<div class="card-deck" id="userList">
<div class="col-md-auto mb-4">
<div class="card matches mx-auto" style="width: 18rem; height: 24rem;">
<div class="card-body">
<h5 class="card-title"><%=user.username%></h5>
<p class="card-text"><%=user.jobTitle%></p>
<p class="card-text"><%=user.city%></p>
</div>
</div>
</div>
</div>
</div>
</div>
Is this a job fo the jQuery data method?
You need to implement an endpoint that fetches user information and forms the template for your userList div and sends the data back as a plain html string.
This endpoint has to be called from the client via an ajax call and set the response html to the div
Server
app.get('/api/user/all',(req, res){
//get user data
const data = [{username:"john",jobTitle:"a",city:"b"},{username:"doe",jobTitle:"a",city:"b"}];
res.render('userTemplate', {users:data} ,function(err, html) {
res.send(html);
});
Client
$.ajax({
url: "/api/user/all",
cache: false,
success: function(html){
$("#userList").innerHtml(html);
}
});
userTemplate.ejs
<% for(var i=0; i < users.length; i++) { %>
<div class="col-md-auto mb-4">
<div class="card matches mx-auto" style="width: 18rem; height: 24rem;">
<div class="card-body">
<h5 class="card-title"><%= users[i].username %></h5>
<p class="card-text"><%= users[i].jobTitle %></p>
<p class="card-text"><%= users[i].city %></p>
</div>
</div>
</div>
<% } %>
EJS is server-side code.
If you want to generate your HTML server side instead of modifying the DOM client side, then replace getJSON with an ajax call (with dataType: "html") and change /api/user/all to an endpoint (which you will have to create) which gets the data and inserts it into an EJS template.
I have a homepage where there is a menu with some categories and below there are the latest posts:
<ul class="Categories__Menu">
#foreach($categories->take(6) as $category)
<li class="ative">
{{$category->name}}
</li>
#endforeach
</ul>
<div class="row" id="posts">
#foreach($posts as $post)
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<div class="card">
<img class="card-img-top" src="{{$post->image}}" alt="Card image cap">
<h5 class="card-title">{{$post->name}}</h5>
<div class="card-footer d-flex justify-content-between align-items-center">
More
</div>
</div>
</div>
#endforeach
</div>
I want that when each category is clicked to show only the posts of that category in the homepage, but in the same homepage, not in a specific category page.
So I have this Ajax:
$(function() {
$("a[name='category']").on('click', function(){
var category_id = $(this).attr("id");
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
$.each(result,function(index, postObj){
$('#posts').append("<p>"+postObj.name+"</p>");
});
console.log(result);
},
error: function(error) {
console.log(error.status)
}
});
});
});
And its working fine, but instead of show just this:
$('#posts').append("<p>"+postObj.name+"</p>");
I want to show the posts with the real html above like:
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<div class="card">
<img class="card-img-top" src="{{$post->image}}" alt="Card image cap">
<h5 class="card-title">{{$post->name}}</h5>
<div class="card-footer d-flex justify-content-between align-items-center">
More
</div>
</div>
</div>
So Im using like this in ajax:
$("a[name='category']").on('click', function(){
var category_id = $(this).attr("id");
alert(category_id);
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
$.each(result,function(index, postObj){
//$('#posts').append("<p>"+postObj.name+"</p>");
$('#posts').append("<div class=\"col-12 col-sm-6 col-lg-4 col-xl-3 mb-4\">\n" +
" <div class=\"card box-shaddow\">\n" +
" <img class=\"card-img-top\" src=\"{{postObj.image}}\" alt=\"Card image cap\">\n" +
" <h5 class=\"card-title h6 font-weight-bold text-heading-blue\">{{postObj.name}}</h5>\n" +
" <div class=\"card-footer d-flex justify-content-between align-items-center\">\n" +
"\n" +
" More\n" +
" </div>\n" +
" </div>\n" +
" </div>");
});
console.log(result);
},
error: function(error) {
console.log(error.status)
}
});
});
But it appears an error:
Use of undefined constant postObj - assumed 'postObj'
Do you know why?
PostController:
public function WhereHasCategory(Request $request)
{
$posts = Post::whereHas('categories', function ($categories) use (&$request) {
$categories->where('id',$request->id);
})->get();
return response()->json($posts);
}
Route to the ajax part:
Route::get('posts/where/category/{id}','\PostController#WhereHasCategory')->name('category.posts');
Method to return the homepage view:
public function index(){
return view('home')
->with('categories', Category::orderBy('created_at', 'desc')->get())
->with('posts', Post::orderBy('created_at','desc')->take(8)->get());
}
Make sure you refer to variable in Blade template with $postObj, not postObj. I can see you use it without $, like postObj.image in your tag.
var imageData = region[0].images;
alert(imageData.length);
templeteData = '<div class="col-sm-12 bootstrap-no-padding" >\
<div class="col-xs-4 col-sm-4 col-md-4 bootstrap-no-padding" style="height:250px">\
<div class="borderAll black-carousel black-carousel-fixHW" uib-carousel no-pause="true" active="active" interval="5000" ng-if="imageData.length > 0" no-wrap="noWrapSlides">\
<div uib-slide ng-repeat="image in imageData" index="image.id" class="col-md-12">\
<div class="image-thumbnail-content GridPositionRelative cursor-pointer">\
<image style="height:100%;top: 0px; width:100%" class="image fallback-image GridPositionRelative" ng-src="{{image.imageBase64StringFormat}}"/>\
</div>\
</div>\
</div>\
</div>\
<div class="col-xs-8 col-sm-8 col-md-8 bootstrap-no-padding" >' + regionDescription + '</div>\
</div>'
in imageData is an array containing images as [0],[1].. etc
my problem is that the images are not getting displayed... I don't know if ng- does not work here.. can anyone help me
imageData must be a scope variable of angular to bind to the template.
So instead of declaring as variable using var you should declare it like
$scope.imageData = region[0].images
And make sure you have injected $scope if you are using controller
I want to javascript loop for wrapping two line of products layouts after i got a respond from ajax.
Purposed: I want to get result like below
<div class="owl-item">
<div class="row item">
<div class="product">
<div class="image">
<img src="asset/img/main/9.jpg" alt="img">
<div class="promotion"><span class="discount">4</span></div>
<div class="description">
<div class="price"><span>1.0000</span></div>
<h4></h4><p>short detial</p>
</div>
</div>
</div>
</div>
<div class="row item">
<div class="product">
<div class="image">
<img src="9.jpg"alt="img">
<div class="promotion"><span class="discount">4</span></div>
<div class="description">
<div class="price"><span>2.0000</span></div>
<h4></h4>
<p>short detial</p></div>
</div>
</div>
</div>
</div>
As the above html planned I want to loop <div class="owl-item"> one times then I will loop <div class="row item"> two times So my html layout will wrap my products as the below images.
$.ajax({
type: "GET",
url: "<?php echo base_url('main/dataaccess'); ?>",
dataType: "json",
cache: false,
success: function (data, st) {
if (st == 'success') {
$.each(data, function (i, obj) {
var out = '<div class="row item">';
out += '<div class="product">';
out += '<div class="image">';
out += '<img src="asset/img/main/9.jpg" alt="img" class="img-responsive">';
out += '<div class="promotion"><span class="discount">' + obj.prodId + '</span> </div>';
out += '<div class="description"><div class="price"><span>' + obj.prodPrice + '</span></div><h4>' + obj.prodName + '</h4>';
out += '<p>short detial</p>';
out += '</div>';
out += '</div>';
$(out).appendTo("#ps");
});
$("#ps").owlCarousel({
navigation: false,
pagination: false,
items: 8,
itemsTablet: [408, 2]
});
}
}
});
This is the layout that i want to get
But as my code I will got layout as below that I don't want it
Are one of those classes that are applying to your div set as display:inline-block ? I suggest inspecting the rendered page to confirm that the divs are display: block.
I'm building a list of ships, using jQuery's $.each loop and a JSON file created in Google Sheets (Tabletop.js), and trying to sort them with Isotope.js.
jQuery creates the list without any issues. However, when I click on my button to sort the elements via Isotope, nothing happens.
When I hardcode the elements into my HTML page, Isotope sorts everything no problem.
I've looked all over the Internet and couldn't find an answer.
The loop with a callback to another function that fetches my data from a spreadsheet. #port is a div in my HTML where everything is going.
Here's the code I'm working with.
function showInfo(data, tabletop) {
var shipData = tabletop.sheets('data').all();
var items=[];
$.each(shipData, function(i) {
//Put each ship in the port ^__-
var ship = "<div class=\"ship\"><div class=\"row\"><p class=\"name font-lg\">" + shipData[i].name + "</p><p class=\"cruise-line font-xs\">" + shipData[i].line +"</p><div class=\"ship-photo col-md-9 col-sm-9\"><img src=\"img/" + shipData[i].img + "\" class=\"img-responsive\"></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-4 col-xs-4\">Launched</div><div class=\"header font-xs col-sm-4 col-xs-4\">Length</div><div class=\"header font-xs col-sm-4 col-xs-4\">Tonnage</div></div><div class=\"row\"><div class=\"year font-lg col-sm-4 col-xs-4\">" + shipData[i].launchYear +"</div><div class=\"length font-lg col-sm-4 col-xs-4\">" + shipData[i].length + "'</div><div class=\"weight font-lg col-sm-4 col-xs-4\">" + shipData[i].tonnage + "</div></div></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-6 col-xs-6\">Max capacity</div><div class=\"header font-xs col-sm-6 col-xs-6\">Crew</div></div><div class=\"row\"><div class=\"max-passenger font-lg col-sm-6 col-xs-6\">" + shipData[i].maxCapacity + "</div><div class=\"crew font-lg col-sm-6 col-xs-6\">" + shipData[i].crewCapacity + "</div></div></div></div>";
items.push(ship);
});
$port.append(items)
}
Here's my Isotope sorting code:
// init Isotope
$('#port').isotope({
itemSelector: ".ship",
layoutMode: 'vertical',
getSortData: {
name: '.ship'
}
})
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var $this = $(this);
var sortValue = $this.attr('data-sort-value');
$('#port').isotope({
sortBy: sortValue
});
});
Here's my HTML:
<div class="compare">
<h3>How the ships compare</h3>
<div id="sorts" class="button-group">
<button class="button" data-sort-value="name">name</button>
<button class="button" data-sort-value="length">length</button>
<button class="button" data-sort-value="weight">weight</button>
<button class="button" data-sort-value="passengers">passenger</button>
<button class="button" data-sort-value="original-order">clear</button>
</div>
</div>
<div id="port"></div>
JSFiddle demo. One list is generated in JS while the other is made in HTML.
Two issues to fix.
Change #sorts to this:
<button id="sort" data-sort-value="name">Click to sort</button>
and your data function to this:
$.each(data, function (i) {
$('.port').append("<li><div class='name'>" + data[i] + "</div></li>");
});