We Keep Coding

Loading content to the div using AJAX/jQuery

I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!

You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});

You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});

Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})

Bootstrap 4 dynamic javascript doesnt work, works fine in Bootstrap 3

I'm dynamically showing a modal using the following code:
// show ajax modal with content
$(document).on('click', '[data-modal]', function (event) {
event.preventDefault();
$.get($(this).data('modal'), function (data) {
$(data).modal('show');
});
});
So data-modal on that element would contain the URL for the AJAX call.
Now, in one of my modals, I have the following in the modal-body element:
<script>
console.log('hello world');
</script>
This works fine when using Bootstrap 3, as it shows hello world in the console after the modal is displayed. However, for whatever reason, when using Bootstrap 4 it does not work. It does not execute the script whatsoever.
What has changed between BS3 and BS4 which would cause this? Do I now have to use some type of injection library just to get this to work?

Well I figured it out.
$(document).on('shown.bs.modal', '.modal', function () {
$(this).find('script').each(function(){
eval($(this).text());
});
});
Credit: http://subinsb.com/how-to-execute-javascript-in-ajax-response

Bootstrap Popover fail with ajax

i would like use the Bootstrap Popover with ajax templates. The next script running good,...
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
content: d,
container: 'body',
title: title,
html: true
}).popover('show');
});
});
...but, if I open the popover by the first send a ajaxcall, this is right. I open the popover again, it showed me my html, but the html from the popover is old and not ajax-call..
When i use $().popover('destroy'), then i have no click-event on my button and it opens nothing.
if I have multiple, will make matters worse.

Loading a content via AJAX in a Bootstrap popover is a very common pattern and, although it is not supported out of the box by Bootstrap, it is very easy to get this functionality with jQuery.
First we should add a data-poload attribute to the elements you would
like to add a pop over to. The content of this attribute should be the
url to be loaded (absolute or relative):
blabla
And in JavaScript, preferably in a $(document).ready();
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
off('hover') prevents loading data more than once and popover() binds
a new hover event. If you want the data to be refreshed at every hover
event, you should remove the off.
Please see the working JSFiddle of the example.

Bootstrap Popover Not Working When Loaded With Ajax

When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.

The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.

with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer

<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.

Twitter Bootstrap manually close tabs

UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.

Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>