Basically, I want to handle hash listening and everything in my own code, but I can't get jQM to stop listening to hash change events and generally mucking about with the URL. I've tried the code from their documentation:
$(document).bind('mobileinit', function() {
$.extend($.mobile, {
hashListeningEnabled: false,
pushStateEnabled: false,
ajaxEnabled: false,
linkBindingEnabled: false
});
});
The mobileinit event doesn't ever get fired on the first page load though (even though it seems like it should), so that doesn't work for me. What does get the code to execute is putting it in $(window).bind('load'), and I can verify in the Firebug console via $.mobile.hashListeningEnabled === false that the values are getting set properly in there - but, they don't seem to do anything! When I enter, say, <mysite>/index.html in the address bar, it loads my default page, but if I enter <mysite>/index.html#anything it just shows the jQM loading spinner and never loads anything (I presume because it's looking for a page with data-role=anything inside the file, which is its default functionality). Additionally, the pushStateEnabled override evidently isn't working either, since if I run window.location.hash = /somethingelse.html the URL bar in any supported browser shows http://<mysite>/somethingelse.html, instead of the expected http://<mysite>/index.html#somethingelse.html.
Basically, what I want is for jQuery Mobile to handle page layout and DOM manipulation, and absolutely nothing else. Is this possible?
I do not know if these are the correct properties to be setting (did not check the documentation) but I had this issue before. To solve it you need to bind the event before you include the script so this:
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$.extend($.mobile, {
hashListeningEnabled: false,
pushStateEnabled: false,
ajaxEnabled: false,
linkBindingEnabled: false
});
});
</script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
The reason you must do this is that the mobileinit event fires when the jquery mobile file is loaded.
Related
Hey I'm making a custom backend for Wordpress, it's a bit 'ghetto' but it turned out to be bigger than expected so I'm running with it. Works perfectly fine stylistically and functionally but for some reason if I submit a new post with it, I get "Are you sure you want to navigate away from this page?" or whichever browser equivalent.
I've tried a shitton of variations of onbeforeunload = null, returning blank functions, etc, none of the solutions have worked on any browser, so I assume it's something to do with Wordpress backend constantly updating...?, I read that it might be a factor that you can't bind onbeforeunload like a normal event as well, so a combination of these two makes me wonder, how can I permanently silence "are you sure" notices on a page, no questions asked?
It seems everywhere on the web is a variation of this question and/or setting the onbeforeunload null worked for them, it does not in any sense for me, even in inline JS onthe form. I have no idea why it's even triggering, I assume I moved something when reconstructing the WP submit form that causes it to ungroup data... or something, but I just need to silence all dialog from this page that is "save changes", that's all, seems like it's easy enough with a bind/event handler but they haven't worked and I don't quite get how the event works.
I've tried this and some other binds thus far, as well as putting return onbeforeunload null function inline the form
window.onbeforeunload = function() {
return null;
}
window.onbeforeunload = null;
jQuery('a, input').click(function(){
window.onbeforeunload = null;
});
If the events were registered using jquery with $(window).on('beforeunload' you can remove them using $(window).off('beforeunload'
This example demonstrates the click event, but it works the same with the beforeunload event:
$(function() {
$(window).on('click', function() {
alert(1);
});
$(window).on('click', function() {
alert(2);
});
$(window).off('click')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I wonder if i've unset($_SESSION['enough']); and want to free it up on closing the page.
[ suppose visitor is viewing page of the website pages in new tab ]
i'm using this code
<script language="javascript">
window.onbeforeunload = function() {
console.log('event');
return false;
}
</script>
i wonder how can i apply to fire this code unset($_SESSION['login_id']); , it might look ridicules but this is the basic idea and i'm gonna give example what can be used for
For example : media website would like members not to watching more than one video in same time so the watching page drop session and free it on closing it so can watch more! js indeed is essential for website using jwplayer so no chance of talking about members with disabled js.
In order to load the killsession.php that runs the unset() command, you can run that page with ajax with async:false
Have a look at
Ajax request with JQuery on page unload
jQuery.ajax({url:"http://localhost/killsession.php", async:false})
You can use jQuery to fire on unload with the unload function (http://api.jquery.com/unload/).
$( window ).unload(function() {
// On the unload, we can fire a request back to the server
// .get(), .post(), and .ajax() may be useful.
});
I am trying to avoid my page being refreshed after submitting my form. In order to do this I've added into my javascript section
$("body").on('click',"#register",new_user_pop);
$("body").on('click',"#screen",pop_out);
$("body").on('click',"#new-user",pop_registration);
$('form[name=new-user-form]').on('submit',function(event) {
event.preventDefault();
alert("Not refreshing");
The function works properly as in order to debug it I pasted it on the Terminal from the Chrome's developer tools and it started working.
But for some reason I do not know it does not work it does not get loads at the beginning.
The previous function $("body").on('click')... work all fine.
Make sure your code runs after you've defined the HTML elements you want to attach your events to.
You can either do this by placing your script below the HTML bit you need.
Or you can wrap your code in an onready/load callback:
$(document).ready(function () {
/* code goes here */
});
I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks
You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.
An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.
I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.
The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});
I am adding some custom tabs to a jquery ui tab control.
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').attr("href","javascript:window.location='http://www.google.co.uk';");
Yes this is a bit of a hack, but it is exactly what i need and provide a nice way to give links back to previous parent pages.
jquery throws the following exception: "jQuery UI Tabs: Mismatching fragment identifier."
This is thrown on the line which appears to attempt to make the tab container visible in jquery ui (exact line wont help as is minified and custom build from official site).
Obviously im just redirecting but jquery has additional code to select the tab (which doesnt exist). In internet explorer, if the user has script errors enabled they will see the exception be thrown just before the window location changes, which I just cant have happen.
I cant put try catch around this code because it is the code inside jquery ui that throws the exception.
Is there anyway I can prevent this exception being thrown or achive the same thing but a different way without having to modified jquery ui ?
Edit: I am now wondering if there is a way to override the on click event hook placed on the element by jquery .. its definitely doing something there i cant see.
Edit: I have to log off now but I have made some progress, if someone can just help me get the right URL, using this code it prevents the exception, but redirects me to "http://myurl/undefined"
$('#tabs').bind('tabsselect', function(event, ui) {
if(ui.index<2) //ignore this will change to get current tab count -1 (so the end tab is left as it is
{
window.location=$('#'+ui.tab).attr("href"); //attr href is undefined, how do i use ui.tab properly to get the right url
return false;
}
});
It works OK for me in Chrome and IE8.
I also tried this code and it worked:
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').click(function() {
document.location='http://www.google.co.uk/';
});
Instead of changing href attribute, I add a handler on the click event of the new tab. This will make the tab to be switched and then the location changed.
From the jQuery UI docs:
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
Though, jQuery's tabs, uh, method, ought to support passing in a selector for the tabs and panels so you could just make things links, instead of having to kick against the pricks.