Jquery mobile Pre-loaded page Stops working [duplicate] - javascript

This question already has an answer here:
jquery mobile autocomplete different behavior at loading page
(1 answer)
Closed 8 years ago.
My actually problem is below.I would be happy if this is solved.
I Want to know why jquery Preloaded url stops working.Below are steps to replicate my problem.
visit http://www.andymatthews.net/code/autocomplete/ .
Type "m"
You get list of names.Click any one.
For example i clicked http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland.
Now why Select tool is not working after page preload.
If i reload http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland It works fine
7. But if its preloaded whats the reason it stops working.
If that cannot be resolved , Tell me if any function available to stop the preload for single page.

i think this works, but you could use the data-ajax="false" attr on links and form actions

You have placed selectmenu change event inside .ready(), which shouldn't be used in jQuery mobile. The equivalent event is pageinit.
Also, instead of using window.location.href, use $.mobile.chagnePage() to activate Ajax navigation that jQuery Mobile uses.
$(document).on("pageinit", "#mainPage", function () {
$("#examples").on("change", function () {
var page = $(this).val();
setTimeout(function () {
$.mobile.changePage(page);
}, 100);
});
});

Just update your code.js on event handler to:
$('body').on('change', '#examples', function(e, ui) {
It'll work! Tested here.

Related

framework 7 on click not working while navigation

I have used framework built-in formToJSON() to get the form values. I have used click event to console the value.
$$("#query-submit").on("click", function () {
var queryForm = app.formToJSON("#query-form");
console.log(JSON.stringify(queryForm));
});
It works fine when page loads first time. But if I changed navigation to other page and return back to first page.
On debug, I found click event is not working when I went back to form page.
Also found this warning in console.
What is wrong here.
Note All pages were loaded via AJAX
Try this:
$$(document).on('click', '#query-submit', function(){
// your code
});

reload to top of page [duplicate]

This question already has answers here:
How to scroll to top of page with JavaScript/jQuery?
(28 answers)
Closed 8 years ago.
SOLVED
add this to the html:
<body onload="location.href='#menu'">
Its the only solution and not a duplicate of the scroll question....pff.
I have edited this question in hopes that the SO community would revisit it. None of the solutions in the supposed duplicate question work or I am using them incorrectly. I posted my code with two of the solutions to show that I am trying. Please help!
Super basic javaScript question I can't find.....I'm learning from trial, mostly error, and StackOverflow.
When I refresh I want to return to the top of the page (F5 or browser reload or any other way the page can be reset). I believe this was the 'old' way browsers worked but when I refresh I stay in the same place on the page. I'm testing in Chrome. Of course I would like this behavior in all browsers.
In this case I am building a single page app. Most mobile users will never use the refresh/reload as it is buried in the hamburger, but I would like to handle this event by going back to the home state. In this case the <div data-role="page" id="menu">.
I am using jquery but I want to make sure and learn javascript.
I thank you all.
code:
document.ready = init;
function init(){
var button = $('#facultyButton')
,facList = $('#facultyList')
,search = $('#facSearch')
,monikerBox = $('.monikerBox')
,events = $('#events')
,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
,html = "";
//executed on init
console.log('page init');
$('html').scrollTop(0);
//events
$(window).on('load',function(){
$('html, body').scrollTop(0);
});
button.click(function(){
var value = "a";
The window's load event only runs once right after the page is done loading. So this way you can be sure that after the page loads no matter what reason (first view or refresh) it will run.
$(window).on('load', function(){
$('html, body').scrollTop(0);
});

Refresh with back button when using anchor [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Handle URL anchor change event in js
How to do awesome refreshless page changes like GitHub
In my app I'm using this very simple code to add a hashtag:
<a href='#test'> <input type='submit'></input>
I would like the page to refresh when I press the back button. For now, it only goes from www.mysite.com/#test to www.mysite.com.
I saw different questions on this topic, but I didn't find how to accomplish that.
Thank you for your help.
A simple way would be to wait for the hash change event to occur and then react to it. Whenever the # changes, the function will be called and if the hash is empty, the page is going to be reloaded.
window.addEventListener('hashchange', function() {
console.log(window.location.hash);
if('' === window.location.hash) {
console.log('reload');
//window.location.reload();
}
});
http://jsfiddle.net/kcKLE/1/
I'd suggest using a library like jQuery for the event-binding stuff, since addEventListener doesn't work in any browser. (Hello IE)
https://developer.mozilla.org/en/docs/DOM/element.addEventListener
If you need something fancier, there is also a history api around.
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
I just found how to accomplish that. I'm using the onhashchange functionality. Here is my code:
document.body.setAttribute("onhashchange", "update()");
function update() {
if('' === window.location.hash) {
window.location.reload();
}
};
So when I press the back button the hash disappears and the page reloads.
Thank you for the hints everybody.

Call a JavaScript Function when Back Button of Browser is Clicked [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Best way to detect when user leaves a web page
How can I call a javascript or jQuery function when back button of browser is clicked?
I have seen some solutions but none of them worked for me.
Can anybody show me some example code?
In jQuery try this :
$(window).unload( function ()
{
// put your code here
});
In javascript :
window.onbeforeunload = function () {
// put your code here
}
<body onUnload="yourFunction();>
<!-- ... -->
</body>
You can use history.replaceState() (see browser support) to modify the previous URL you visited to the current page with an added parameter of your choosing like for instance redirect=<URL of previous actual previous page> (you can maybe get this URL from the referer?), then detect the parameter in document ready and perform the required actions.
This is just an untested theory, I might elaborate later on when I get to test it.

Change href attribute by jQuery in jQuery Mobile

I am creating an application by jQuery Mobile.
I want a link, which redirects to a page. for example:
Account
It is available on all of pages, and I want to change href of that link on every page to something like this:
Account
I have written this code, but it is not working when jQuery Mobile loads a page with Ajax navigation:
$(function () {
$(".useroptions").attr("href", "/Account/?returnUrl=" + encodeURIComponent(document.URL));
});
How to do that when every page is shown? (Which event should I use? ...)
I should use pageshow event of jQuery Mobile. see pageshow part of this page.
Modified version of jQuery code to work correctly:
$("div[data-role='page']").live("pageshow",function() {
$(".useroptions").attr("href", "/Account/?returnUrl=" + encodeURIComponent(document.URL));
});

Categories

Resources