Reinitializing Bootstrap dropdowns after nav loaded via ajax - javascript

I need to load the header and footer for my site via ajax. This works just fine, but dropdown menus no longer function. I've tried various methods to reinitialize them, with some limited success. The best I can manage is dropdowns that open, but never close, and have somewhat limited functionality. What I've tried:
This was the simplest approach...
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$( "#header_placeholder" ).load( "/header/", function() {
$('.dropdown-toggle').dropdown;
});
$( "#footer_placeholder" ).load( "/footer/");
});
</script>
...but nothing happens. Clicking on menus still does nothing at all.
This gets me a little farther:
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
$('.dropdown-toggle').dropdown();
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
});
</script>
It results in dropdown menus that will open, but never close. The "hover" class is also never added to the li on open, which I imagine screws up a few things (including some of my styling).
I found a similar question (Bootstrap dropdown not working after initial ajax form submission), in which the asker had some luck reinserting the bootstrap javascript. On a lark, I tried it:
<script type="text/javascript">
function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
$('.dropdown-toggle').dropdown();
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
/*$( "#header_placeholder" ).load( "/header/", function() {
alert('waiting');
reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
$('.dropdown-toggle').dropdown;
});
$( "#footer_placeholder" ).load( "/footer/", function() {
});*/
});
</script>
No change in behavior. I also found Bootstrap dropdown doesnt work after ajax call (even after reinitializing) . It's similar, but they never get anywhere with a solution. Any help would be greatly appreciated.

I found the issue. .dropdown() may have been enough for a stock implementation of bootstrap dropdown menus, but my template had been converted from PSD by PSD2HTML.com and included some nice custom javascript to activate dropdowns on hover, as well as some mobile enhancements. In the end, my solution was:
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
//re-initialize dropdown menus after load
$('.dropdown-toggle').dropdown();
initTouchNav(); /* <-- the new, important bit */
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
});
</script>

Related

Reload javascript on html change

In my site's index.html I have a div element that changes when a menu item gets clicked (with jquery). The pages that get inserted into this element all have some javascript functions in them. However, I load my javascript files in the index.html right before the body closes. These files don't 'reload' when this div element changes, so the javascript doesn't work on these pages. How would I fix this issue? Do I have to reload the javascript files on the change of the element? And if so, how?
edit:
Sorry, these are the codes for the page inserts:
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
});
main-content is an empty div in index.html.
In one of the pages that gets inserted I use the jquery accordion in my html for example, but it doesn't work since it's included in the head, and the page doesn't refresh on insertion:
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
EDIT2: I have simulated my problem here: https://jsfiddle.net/ktoeon2f/2/
<script type="text/javascript" id="jsid">
//your script here
</script>
after onchange call
eval(document.getElementById("jsid").innerHTML);
after load
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
eval(document.getElementById("jsid").innerHTML);
// give an id (jsid) to script tag inside your loaded page
});
The problem was solved in this thread: jQuery: Changing the CSS on an element loaded with ajax?
The solution was to load the other function(s) in the succes function of an ajax call:
$('#main-content').load(
url,
function(){
accordionFunction();
}
);

HTML Grid view and List View

So I want my contents to change its appearance depending on what button i click (grid view and list view) ..
I did some research and most of the stuff can be done using jquery. But i want to use only javascript.
My questions are:
what elements should i use? I am currently patterning (if this is even a real word) my app by using semantic ui.
I found this snippet here in stackoverflow http://jsfiddle.net/LJf9p/794/
but I can't seem to make it run, i mean it runs but it doesnt change appearance depending on button click if i put on html, do i have to add some more stuff? it works on the fiddle but not when i run it on my local browser. thanks
$('button').click(function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
please add
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
and
$( document ).ready(function() { });
it works
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('button').click(function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
});
</script>

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

jquery datepicker doesn't activate if focus moves to it by default

http://www.frostjedi.com/terra/scripts/demo/jquery-datepicker.html
If you click outside of the textarea and reclick inside of it a calendar will appear. How can I make it appear when the page is first loaded?
Thanks!
$(function() {
$('#datepicker').datepicker('show');
});
This should give you the date picker without setting the focus.
This should work,
$(function() {
$('#datepicker').focus();
});
but the whole Jquery lib is not corectly included.
Try grabing jquery with :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
You can display it on DOM Ready:
$(function() {
$( "#datepicker" ).datepicker('show');
});
Also on the demo link you posted you are loading the jQuery js/css files from jqueryui.com domain and you get a 403 Forbidden HTTP error, so jQuery is not loaded.
If you want to use a CDN you should use http://code.jquery.com/. You will find both JS and CSS URLs there for jQuery and jQuery UI themes.

prettyPhoto and Ajax-loaded content

I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.
Page I'm working on is here: http://turningpointpro.com/page.php?id=10
I ended up finding two solutions. The first and best was to put this whole bit:
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
into the ajax callback, not the prettyPhoto.init(); function I was calling before.
I also had some luck with using the API instead of re-loading prettyPhoto again.
Hope this helps someone.
If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).
your code:
function pageLoad()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$(function() {
$('#navigation a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );
});
e.preventDefault();
});
});

Categories

Resources