JQuery on the server only intermittently .appends() - javascript

As per below, I am calling an endpoint when the page is loaded to get some data and append it to a div. On localhost it works perfectly, but on the server it only works intermittently... When I look in dev tools, the network tab suggests the $.post works and returns the data... but the append doesn't.
I wondered if it was to do with the $.post completing before the html was rendered, so there was no div to append to... but not sure how to verify or fix this. I've tried moving the script in the html page to just before the close-body tag to ensure the html is rendered first. I've also made sure i define the functions in the JS before the $(Document).ready is called.
To see it not working LIVE... www.everythingproduct.com - If you try clicking on the blogs page multiple times, you'll see sometimes it hangs...
$(document).ready(function() {
var page = 'blog-articles';
$('#main-body-content').load('site/pages/' + page + '.php');
loadArticlesData();
$.post('endpoint/sendEvent.php', {
userID: '<?php echo $uid; ?>',
eventType: "pageView",
currentURL: window.location.href,
referer: '<?php echo $referer; ?>'
});
});
function loadArticlesData() {
$('#cover').show();
$.post('endpoint/getArticles.php', {
type: "All"
}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#articles').append(
'<a target="_blank" href="' + l.link + '">' +
'<div value="' + l.id + '" class="article">' +
'<div class="img">' +
'<img src="img/' + l.img + '" height="50px">' +
'</div>' +
'<div class="article-content">' +
'<h2>' + l.title + '</h2>' +
'<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' +
'</div>' +
'</div>' +
'</a>'
);
});
$('#cover').fadeOut("slow");
});
$.post('endpoint/getTags.php', {}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#tags').append(
'<span value="' + l + '" class="tag-word">' + l + '</span> '
);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover"></div>
<div class="body">
<div class="body-container">
<div class="body-left">
<div style="text-align: left; padding-left: 20px;">
<h1 style="font-weight: normal;">Blog Article Database</h1>
</div>
<div id="articles" class="articles"></div>
</div>
<div class="body-right">
<div class="filter-panel">
<h3>Browse (A-Z)</h3>
<div id="tags" class="tags">
<span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span>
</div>
</div>
</div>
</div>
</div>

You are interfering with the asynchronous requests. Only do one at a time and continue in the success
Try this:
$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData);
to wait until the first request is done - then move
$.post('endpoint/getTags.php', {}...
into the end of the success of the second request

Related

Create buttons with data from divs

So i have these divs created from wordpress post and they have data attribute which is taken from php <?php echo $rengdata->format('Y-m'); ?>
<div class="renginiai-box">
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-10"></div>
</div>
What I need right now is to create one single button with unique date. Result should be like this.
<div class="laikotarpis">
<button value="2017-09" class="laiko-btn">2017 09</button>
<button value="2017-10" class="laiko-btn">2017 10</button>
</div>
I have no idea what function could fit this. Should I make array or there is a jQuery function for this
You can use jQuery to iterate through all elements with the data attribute data-renginiolaikas and append a button:
$('[data-renginiolaikas]').each(function(s, e) {
var val = $(this).attr('data-renginiolaikas');
if(!$('.laikotarpis button[value=' + val + ']').length) {
$('.laikotarpis').append('<button value="' + val + '" class="laiko-btn">' + val.replace('-',' ') + '</button>');
}
});
Example: https://codepen.io/anon/pen/KZQgBw
I think that this is much closer :
$('[data-renginiolaikas]').each(function(s, e) {
if($('.laikotarpis button').val() != $(this).attr('data-renginiolaikas')){
$('.laikotarpis').append('<button value="' + $(this).attr('data-renginiolaikas') + '" class="laiko-btn">' + $(this).attr('data-renginiolaikas').replace('-',' ') + '</button>');
}
});
Fork of delinear's answer
https://codepen.io/boian-ivanov/pen/MrQjPy

Group button is not showing properly in inner html

Here in the JavaScript inner html i'm trying to show two buttons horizontally using Bootstrap Button Group. Like this picture
But actually it is showing just 1 button appearing like this.
Though it works fine in HTML but don't know why is it creating problem in inner HTML. Here goes the JavaScript code snippet
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = '<div class="container-fluid" style="background-color: #b5ffaa; height: auto; width: auto"\
<div class="row"\
<br>\
<div class="col-sm-8">\
<h2 style="color: #000000">' + name + '</h2>\
<h3 style="color: #000000">' + type + '</h3>\
<h4 style="color: #000000">Salary: ' + sal + '</h4>\
<h4 style="color: #000000">Location: ' + d[0] + ',' + d[1] + ',' + d[2] + ',' + d[3] + ',' + d[4] + ',' + d[5] +'</h4>\
<br>\
</div>\
<br><br><br>\
<div class="btn-group btn-group-lg">\
<button type="button" class="btn btn-primary" onclick="job_info()" href="#jobdetails">More Details</button>\
<button type="button" class="btn btn-primary">Apply</button>\
</div>\
</div><br></div>';
document.getElementById('content').appendChild(div);
it works fine here https://jsfiddle.net/gLw9bj7n/3/
but probably your code doesnt have created or doesnt have the scope access the the variables d, name, type, sal

jQuery Masonry.js not formatting correctly; what is the issue?

It looks like I'm doing everything alright; however, all the posts seem to just appear in rows equal to the height of the tallest image in that row.
1234
1200
0200
5678
5008
as opposed to
1234
1256
7258
0008
That picture may not make much sense so I've included a screenshot...
http://i.imgur.com/Sj2i7EX.png
HTML
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Masonry Testing</title>
<link rel='stylesheet' type='text/css' href='css/main.css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="grid">
</div>
<script src="https://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.min.js"></script>
<script src="js/app.js"></script>
<script>
jQuery(document).ready(function($){
$("#grid").masonry({
itemSelector: ".grid-item"
});
});
</script>
</body>
</html>
JavaScript
$.getJSON(
"http://www.reddit.com/r/pics.json?jsonp=?",
function foo(data)
{
$.each(
data.data.children.slice(0, 50),
function (i, post) {
$("#grid").append( "<div class='grid-item'>" );
$("#grid").append( "<img src='" + post.data.url + ".jpg' />" );
$("#grid").append( "<div class='post-title'>" + post.data.title +"</div>" );
$("#grid").append( "<div class='post-info'>");
$("#grid").append( "<div class='upvotes'>
<span><i class='fa fa-arrow-up'></i> " +
post.data.ups + "</span></div>" );
$("#grid").append( "<div class='comments'>
<span><i class='fa fa-comments'></i> " +
post.data.num_comments + "</span></div>" );
$("#grid").append( "<div class='sourcebtn'><span>View on Reddit</span></div>" );
$("#grid").append( "</div>" );
$("#grid").append( "</div>" );
}
)
}
)
My JavaScript code works fully -- the formatting is made silly because StackOverflow wants my code more neat than I tend to have it.
My question mainly is: Where's the error with Masonry.js? Why won't it properly stack segments?
The problem may be that jQuery(document).ready() is firing before the $.getJSON asynchronous request has finished, so Masonry is being activated on an empty div. I would try moving your Masonry initialization code to the end of your $.getJSON callback:
$.getJSON(
"http://www.reddit.com/r/pics.json?jsonp=?",
function foo(data)
{
$.each(
data.data.children.slice(0, 50),
function (i, post) {
// Add your divs
}
)
$("#grid").masonry({
itemSelector: ".grid-item"
});
}
);
jQuery's .append(html) function works differently than how you are using it. For example:
$("#grid").append( "<div class='grid-item'>" );
// Step 1: Find `#grid` element
// Step 2: Convert "<div class='grid-item'>" to DOM Elements
// Step 3: Append new DOM Elements to `#grid` element
So doing the following:
$("#grid").append("<div>");
$("#grid").append("<img src='someurl'>");
Will result in
<div></div>
<img src='someurl' />
Instead of
<div>
<img src='someurl' />
</div>
One solution is to simply write your append as one statement:
$("#grid").append(
"<div class='grid-item'>"
+ " <img src='" + post.data.url + ".jpg' />"
+ " <div class='post-title'>" + post.data.title +"</div>"
+ " <div class='post-info'>"
+ " <div class='upvotes'>"
+ " <span><i class='fa fa-arrow-up'></i> "
+ post.data.ups
+ " </span>"
+ " </div>"
+ " <div class='comments'>"
+ " <span><i class='fa fa-comments'></i> "
+ post.data.num_comments
+ " </span>"
+ " </div>"
+ " <div class='sourcebtn'><span>View on Reddit</span></div>"
+ " </div>"
+ "</div>" );

JQM after ajax, popup not rendering correctly

I'm having problems with my popup after ajax is success, it's not sizing to the center, but on the second time it resizes(because it's already loaded). I tried to follow this example, but have errors(not popping up). From my code, is it better to do dynamic popup or there is any method that can do like beforepageshow, or load to show it in the center? For exemple below:
//popup
<div data-role="popup" id="popupFood" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3>Preferences</h3>
<div class="ui-block-a" id="foood" style="width:50%"></div>
<button type="button" onclick="someaction()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Search</button>
</div>
</div>
//ajax success
function food(data, textStatus){
$('#foood').empty();
$.each(data, function (i, x) {
var foodTest = '<label for="grid-checkbox-' + x.id + '">' + x.description+ '</label>' +
'<input type="checkbox" name="grid-checkbox-' + x.id + '" id="grid-checkbox-' + x.id + '" value="' + x.id + '" data-mini="true" >';
$('#foood').append(foodTest);
});
$('#foood').enhanceWithin();
}
You can center popup by either
Opening it programmatically after successful Ajax. Note that you need to remove data-rel="popup" and set href to href="#" on Anchor tag.
$("#popupFood").popup("open");
Reposition it once it's open by listening to popupafteropen event and then override position using reposition option.
$("#popupFood").on("popupafteropen", function () {
$(this).popup("reposition", {
positionTo: "window"
});
});
Demo

Dynamically dom is not appending properly

i am trying to append my small template in in dom but some element's missing i don'nt know why it's behaving like awkward if some one can correct me what's going wrong and why it's not showing these elements dynamically excpet this complete template showing.
here is my code jquery:-
template = '<article id="ProfileBox" class="col-lg-3 ltr">' +
'<div id="ProfileImage" class="Profile_image colored_border">' +
'<img src="../images/about-me/' + ParsingJsonData.UserImageUrl + '" class="Rounded-Corners" width="220" height="162">' +
'</div>' +
'<div id="ProfileContact">' +
'<h5 style="text-align: center;">' + ParsingJsonData.UserName + '</h5>' +
'<p style="text-align: center;"><strong>Role : </strong><em>' + ParsingJsonData.UserRole + '</em></p>' +
'<p style="text-align: center;"><i class="fa fa-mobile FontThemeColor" style="font-size: 15px;"></i> ' + ParsingJsonData.UserCellNumber + '</p>' +
'<p style="text-align: center;"><i class="fa fa-envelope FontThemeColor" style="font-size: 10px;"></i> ' + ParsingJsonData.UserEmailAdress + '</p>' +
'</div>' +
'</article>' +
'<article id="ProfileBox1" class="col-lg-9 ltr">' +
'<h3 class="HeadingThemeColor">Describing My Self !</h3>' +
'<div class="Profile_divider"></div>' +
'<p>' +
ParsingJsonData.UserDescription
'</p>' +
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
'</article>';
$("#profileID").append(template);
After appending not showing elements:-
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
You are missing a concatenation operator between ParsingJsonData.UserDescription and '</p>'. It would be easier to read your code and avoid these mistakes if you would indent it properly. May I suggest you to use the following approach instead (it's also much more efficient)?
var template = [
'<article id="ProfileBox" class="col-lg-3 ltr">',
'<div id="ProfileImage" class="Profile_image colored_border">',
'<img src="../images/about-me/', ParsingJsonData.UserImageUrl,
'" class="Rounded-Corners" width="220" height="162">',
'</div>'
//...
].join('');
If you have a lot of markup generated in JS, maybe you should have a look at some templating libraries.

Categories

Resources