Develop Reference

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 on the server only intermittently .appends()

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

Generating id for each collapsible panel group dynamically using jquery

I Created a collapsible panel group dynamically with button click, my question is how can I generate id for each created panel.
Here is my jquery code:
var panel = '<div class="panel panel-default">';
panel += '<div class="panel-heading">';
panel += '<h4 class="panel-title">';
panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#1">' + $('#queuename').val();
panel += '</span>';
panel += '</h4>';
panel += '</div>';
panel += '<div id="1" class="panel-collapse collapse in">';
panel += '<div class="panel-body"></div>';
panel += '</div>';
panel += '</div>';
panel += '</div>';
var hash = 1;
$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash));
$('#Panelgroup').find(".panel-collapse").attr("id",hash);
$('#Panelgroup').append(panel);

You're resetting hash to 1 every time. You could make it into a global variable, and have a function that creates a new panel. Each time the function is called, you just increment the global variable by 1. This way hash won't be reset every time.
var hash = 1;
function createPanel() {
// code to create panel
hash++;
}

As I said in PO's comments, you are define your var hash every time the button clicked, in that case you will always get the same id.
there are more bugs in your code:
$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash));
$('#Panelgroup').find(".panel-collapse").attr("id",hash);
this above two line of code will find all class with those name and update which is not what you want to do, you want to update the one you just created.
Also this line:
panel += '<div id="1" class="panel-collapse collapse in">';
you don't need to specific the id as it will be handled by something like this:
panel += '<div class="panel-collapse collapse in" id="' + hash + '">';
$(document).ready(function() {
var hash = 1;
$('#btn').on('click', function() {
console.log('hash-->'+hash);
var panel = '<div class="panel panel-default">';
panel += '<div class="panel-heading">';
panel += '<h4 class="panel-title">';
panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#' + hash + '">' + $('#queuename').val();
panel += '</span>';
panel += '</h4>';
panel += '</div>';
panel += '<div class="panel-collapse collapse in" id="' + hash + '">';
panel += '<div class="panel-body"></div>';
panel += '</div>';
panel += '</div>';
panel += '</div>';
$('#Panelgroup').append(panel);
hash++;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Panelgroup">yep</div>
<button id="btn">
Create a panel
</button>

Process jQuery/Sizzle queries on string?

I have a string from a server that I need to modify before adding it to the DOM. I would like to replace <div data-role="placeholder" /> which come in a lot of formats (new line, etc) and extra attributes.
Here's an example of my string:
<span title="15 gold badges"><div data-role="placeholder" /></span>
<span title="25 starts"><div data-role="placeholder" id="test"></div></span>
How can I query for placeholders and replace it with another HTML string such as <div data-role="calendar" />?

I can see two ways of doing this. You either use the good old .replace() or you wrap it in a jQuery object and use the DOM manipulation methods.
Use string replace
var html = '<span title="15 gold badges">' +
'<div data-role="placeholder" />' +
'</span><span title="25 starts">' +
'<div data-role="placeholder" id="test">' +
'</div></span>';
$('body').append(html.replace(/data-role="placeholder"/g, 'data-role="calendar"'));
$('div[data-role=calendar]').text('yay!');
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use jQuery methods
var html = '<span title="15 gold badges">' +
'<div data-role="placeholder" />' +
'</span><span title="25 starts">' +
'<div data-role="placeholder" id="test">' +
'</div></span>';
$(html).find('[data-role]').attr('data-role', 'calendar').end().appendTo('body');
$('div[data-role=calendar]').text('yay!');
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Add onClick event

I'm having real trouble adding an onClick event to a script. Here's my code that basically shows Instagram photos. I want to add an onclick="panel_five.show();return false" to
<a href='" + data.data[i].images.standard_resolution.url +"' >
<img src='" + data.data[i].images.thumbnail.url +"' />
</a>
I'm having real trouble in syntax. Here's my complete code:
...
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>");
...

Is this what you want.
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' onclick='panel_five.show();' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>");

$(function () {
var parent = $('.ttl').first().parent();
parent.append('<div class="ttl"><div class="ttlpadding"><div class="item">'
+ "<a href='" + data.data[i].images.standard_resolution.url
+"' ><img src='"+ data.data[i].images.thumbnail.url +"' /></a>"
+"</div></div></div>"
);
parent.find('a').click(function() {
// some code here
});
});

try this I have test with my url and image src and it work fine
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' onclick='panel_five.show();return false;' /></a>" + '</div></div></div>');
Edit: If you have confused with " and ' you can use " and \" instead OR ' and \' as well
$("body").append("Stackoverflow");
$('body').append('<a href=\'http://stackoverflow.com\'>Stackoverflow</a>');
It's view result in body tag as
Stackoverflow
<a href='http://stackoverflow.com'>Stackoverflow</a>