I'm using Boostrap (2.3.1) Modal to show forms (those are loaded with ajax). However, when i try to replace a textarea triggered by the "shown" event and CKEDITOR.replace(id) (CKEditor 4.2), it won't be replaced in IE 9 (Firefox & Chrome are fine).
If I set a timeout, it at least replaces the second time you call the dialog:
$("#bok-modal-form").on("shown", function() {
$(this).find(".modal-body").find(".bokCKE").each( function() {
var id = $(this).attr("id");
if( CKEDITOR.instances[id] ) CKEDITOR.instances[id].destroy(true);
window.setTimeout(function() {
CKEDITOR.replace(id);
}, 1000);
});
});
Otherwise only the second time ie debugger shows the error that "document" is not set, pointing me to the following ( # a.editable(new j(a,e.$.contentWindow.document.body)); ).
Not quite sure what I am doing wrong here?
CKEDITOR not replacing on the first time seems to be an issue with the shown event. In ie the modal-body is still empty. I surrounded the each loop with a setTimeout (300), and it seems to work (bit more testing required).
Update: that did the trick.
Related
Got an issue with safari loading old youtube videos when back button is clicked. I have tried adding onunload="" (mentioned here Preventing cache on back-button in Safari 5) to the body tag but it doesn't work in this case.
Is there any way to prevent safari loading from cache on a certain page?
Your problem is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.
When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.
Kludgish solution is to force a reload when page is loaded from bfcache.
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
If you are using jQuery then do:
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
All of those answer are a bit of the hack. In modern browsers (safari) only on onpageshow solution work,
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
but on slow devices sometimes you will see for a split second previous cached view before it will be reloaded. Proper way to deal with this problem is to set properly Cache-Control on the server response to one bellow
'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'
Yes the Safari browser does not handle back/foreward button cache the same like Firefox and Chrome does. Specially iframes like vimeo or youtube videos are cached hardly although there is a new iframe.src.
I found three ways to handle this. Choose the best for your case.
Solutions tested on Firefox 53 and Safari 10.1
1. Detect if user is using the back/foreward button, then reload whole page or reload only the cached iframes by replacing the src
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
//window.location.reload(); // reload whole page
$('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
}
2. reload whole page if page is cached
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
3. remove the page from history so users can't visit the page again by back/forward buttons
$(function () {
//replace() does not keep the originating page in the session history,
document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
});
You can use an anchor, and watch the value of the document's location href;
Start off with http://acme.co/, append something to the location, like '#b';
So, now your URL is http://acme.co/#b, when a person hits the back button, it goes back to http://acme.co, and the interval check function sees the lack of the hash tag we set, clears the interval, and loads the referring URL with a time-stamp appended to it.
There are some side-effects, but I'll leave you to figure those out ;)
<script>
document.location.hash = "#b";
var referrer = document.referrer;
// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
if(document.location.hash!="#b") {
// clear the interval
clearInterval(hashCheck);
var ticks = new Date().getTime();
// load the referring page with a timestamp at the end to avoid caching
document.location.href.replace(referrer+'?'+ticks);
}
},100);
</script>
This is untested but it should work with minimal tweaking.
The behavior is related to Safari's Back/Forward cache. You can learn about it on the relevant Apple documentation: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5
Apple's own fix suggestion is to add an empty iframe on your page:
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this frame prevents back forward cache
</iframe>
(The previous accepted answer seems valid too, just wanted to chip in documentation and another potential fix)
I had the same issue with using 3 different anchor links to the next page. When coming back from the next page and choosing a different anchor the link did not change.
so I had
House 1
View House 2
View House 3
Changed to
House 1
View House 2
View House 3
Also used for safety:
// Javascript
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
// JQuery
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
None of the solutions found online to unload, reload and reload(true) singularily didn't work. Hope this helps someone with the same situation.
First of all insert field in your code:
<input id="reloadValue" type="hidden" name="reloadValue" value="" />
then run jQuery:
jQuery(document).ready(function()
{
var d = new Date();
d = d.getTime();
if (jQuery('#reloadValue').val().length == 0)
{
jQuery('#reloadValue').val(d);
jQuery('body').show();
}
else
{
jQuery('#reloadValue').val('');
location.reload();
}
});
There are many ways to disable the bfcache. The easiest one is to set an 'unload' handler. I think it was a huge mistake to make 'unload' and 'beforeunload' handlers disable the bfcache, but that's what they did (if you want to have one of those handlers and still make the bfcache work, you can remove the beforeunload handler inside the beforeunload handler).
window.addEventListener('unload', function() {})
Read more here:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
I am experimenting with the new way of handling page events in jqM and have run into a curious issue. When handling the pagecontainerbeforechange event
$(document).on('pagecontainerbeforechange',function(e,u){test(e,u,'changing');})
function test(e,u,msg){console.log($(u.toPage));}
Attempting to put a jQuery object wrapper around u.toPage - as done above - produces strange behavior.
Check out this fiddle to see what I mean
Click on the Second Page button and then view the console. Nothing will happen (the second page is not shown) and you will see a message along the lines of *Uncaught error:syntax error, unrecognized expression http://jsfiddle.net/egn7g5xb/1/show/#second
Now comment out Line 7 and run the fiddle again. No such issue this time and the second page gets shown.
Perhaps someone here might be able to explain what is going on here?
On initial run, jQuery Mobile creates a fake page before navigating to first page in DOM. At that stage, pagecontainerbeforechange fires twice and returns .toPage as an object.
Later on, upon navigating to other pages, it fires twice again; however, it returns a string first time (URL/hash) and second time it returns an object which is the page itself.
Therefore, when using that event, you have to determine whether .toPage is an object or a string.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string") {
/* parse url */
}
if (typeof data.toPage == "object") {
/* manipulate page navigating to */
}
});
Note that pagecontainerbeforetransition is similar to beforechange, however, it fires once and returns .toPage as an object.
First, create your pagecontainer events within $(document).on("pagecreate", "#first", function(){ .. }).
Then the selector for these events should be $(":mobile-pagecontainer") or $("body") NOT $(document).
function test(e,u,msg)
{
console.log(msg);
var IsJQ = u.toPage instanceof $;
console.log(IsJQ);
if (IsJQ){
console.log(u.toPage.data());
} else {
console.log(u.toPage);
}
console.log('---');
}
$(document).on("pagecreate", "#first", function(){
$(":mobile-pagecontainer").on('pagecontainerbeforechange', function (e, u) {
test(e,u,'changing');
});
$(":mobile-pagecontainer").on('pagecontainerchange',function(e,u){
test(e,u,'changed');
});
});
Updated FIDDLE
I am having some issues with a jquery on function that works in all browsers except IE.
jquery code is as follows:
$('#FormIndustryId, #FormIndustries').on("change", function () {
if ($(this).val()) {
$.getJSON('/categories/list_categories/industry_id:' + $(this).val(),
function (cats) {
if (cats !== null) {
populateCategorySelect(cats);
}
});
}
});
From a front end point of view this can be tested here: http://www.beanclaim.com/ - there is a field with the label of industry selection which is the dropdown with #FormIndustries assigned to it, it should when an industry is selected update the second dropdown with the ajax content. Chrome, Firefox and Safari it works but it seems to do nothing in IE.
Any ideas what I am doing wrong? Thanks
It's because only in IE do you have this code execute:
// IF IE (BROWSER) USE jQUERY TO SET THE PLACEHOLDER
// -------------------------------------------------->
if ( $.browser.msie ) {
$("#TemplateName").placeholder();
$("#FormIndustries").placeholder();
}
But, that returns this JS error:
SCRIPT438: Object doesn't support property or method 'placeholder'
and stops your JS from executing properly. I don't know what placeholder is (and neither does IE :) ), but if you fix that, the page works just fine in IE.
Write the same exact function, but make a copy using:
$('#FormIndustryId, #FormIndustries').on("click", ...
Well, I'm developing a firefox addon that reload a given set of url automatically with some modification. Its not possible to show the whole code. So, I've just copy paste the part of the code which is giving me the error.
The DOMContentLoaded event is suppose to be triggered everything a page is loaded, and it do it properly. The problem is that, if i open a new tab, then DOMContentLoaded event is not triggered in the old tab.
//Any code here runs only for the first time u start the browser
window.addEventListener("load", function() { myExtension.init(); }, false);
var myExtension = {
init: function()
{
var appcontent = document.getElementById("appcontent");
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
},
onPageLoad: function(aEvent)
{
var doc = aEvent.originalTarget; // doc is document triggered "onload" event
//execute on one the top page (not on iframes)
if ((aEvent.originalTarget.nodeName == '#document') && (aEvent.originalTarget.defaultView.location.href == gBrowser.currentURI.spec))
{setTimeout(function(){showInError(doc.location='about:home'}, 500);}
},
}
I'd like to write the problem in a simple way (sorry for my bad English)
1) i run firefox, and the tab (say tab no.1) is continuously reloaded as i want.
2) the tab no.1 page continues to load repeatedly if i leave the page uninterrupted(that's what it want)
3) if i open a new tab (say tab no. 2), the new tab (tab no. 2) begins to reload continuously as i wanted. However, the tab no. 1 stops reloading.
what i want is to to keep on reloading both tab no 1 and tab no. 2. How to do it? what is wrong is my code?
It looks like you are executing the script only on currently displayed page (active tab).
If you want to execute it on other tabs, you should attach event listeners to new tabs as you open them (and don't forget to remove them when you close the tab). You can get useful snippets for this functionality at this page:
https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads#WebProgressListeners
Try using gBrowser instead of document.getElementById("appcontent");
gBrowser.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
https://developer.mozilla.org/en/Code_snippets/On_page_load#Basic_onPageLoad_for_a_browser_window
Ok, so i have two ways to perform div refresh
$('#player').load('/videos/index');
in my rails app. One is through link
next
other is through shortcut of that button. And they work fine, until i discovered, that if I refresh player twice in a row through the link, and then through the shortcut, it loads div twicely. If i refresh through the link three times in a row, than through the shortcut, than it's loading div three times. And so on..
So, i've started to trying configure binds (as I assumed, that was the reason), but there were mo result.
Here is my messed up in binds shortcut part of application.js
$(document).ready(function(){;
$(document).bind('keydown', 'space', function() {
$('#player').unbind('load');
$('#player').load('/videos/index');
$(document).unbind();
});
});
I tried to click on link through the shortcut, but the same result, so I've assume, the problem is in load. Any suggestions would help.
The best way to avoid a double refresh, is having an state flag, indicating if it can load again, or if it's loading:
$(document).ready(function() {
var loading = false;
function reloadDiv() {
if(!loading) {
loading = true;
$('#player').load('/videos/index', null, function() { loading = false; });
}
}
$('#nextb').click(reloadDiv);
$(document).bind('keydown', 'space', reloadDiv);
});
Good luck!