I'm writing a simple mobile web site using JQuery Mobile.
I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function and call the function from within the section in the . Here is the code:
function initPage() {
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
}
Here is my HTML fragment calling the code:
<html>
<head>
...
<script type="text/javascript">
initPage();
</script>
...
My code works fine, but I have a doubt, so here comes my question: should I wrap my code with $(document).on('pageinit')? Like this:
function initPage() {
$(document).on('pageinit', function(){
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
});
}
I am not sure whether do I need to do that for stuff that register an event, like vclick on specific elements.
Thanks for support.
Related
In my app I would like to re-use the panel so I call this function when opening index.html:
var add_panel=function() {
//add button
$('[data-role="header"]').append('Menu');
//panel
$.get('panel.html').success(function(data) {
$('div[data-role="page"]').append(data);
$('#leftpanel').trigger('create');
$('#leftpanel').panel();
});
//open panel
$('body').on('click', '.ui-icon-bars', function() {
$("#leftpanel").panel("toggle");
});
}
This works great on the first page and when returning to this page from another page.
I had hoped to call the same function inside "pagecontainertransition" to add the panel to other pages as well, but this doesn't seem to work:
//handle page transitions
$('body').on('pagecontainertransition', function(event, ui) {
add_panel();
});
Can this be done?
Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does
I'm looking to add code to my Onload handler but am unsure where it would be in an MVC application?
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://localhost:1414/"
});
});
The code above needs to be placed in the onload handler.
If I understand you correctly, you just need this expression below, if you are using jQuery:
<script>
$(document).ready(function() {
// Handler for .ready() called. Put your logic here.
});
</script>
or this one, without usage of jQuery:
<script>
window.onload = function(){
// Put your logic here.
}
</script>
to be included on your view.cshtml.
Here your meaning Adding Window Onload Event.
You can try this inside the js file:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
For more information Simon Willison’s Weblog
I think you can add it just like in any other html page into your cshtml..
#{
ViewBag.Title = "Authenticate";
}
<script type="text/javascript">
$(document).ready(function () {
CFInstall.check({
mode: "overlay",
destination: "http://localhost:1414/"
});
});
</script>
<h2>Congrats..</h2>
is there way to do jquery mobile page transitions when ajax is disabled?
As part of template I have
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxEnabled: false
});
});
</script>
ajaxEnabled is a global setting, which means page transitions are disabled even when specifically applying them to links with the data-transition attribute, so the short answer would be "no", alas.
However, if you really want the transitions, consider enabling ajax once more, and then overriding it for whatever scenario is a deal-breaker for you (e.g. if it's form submission, use the data-ajax="false" attribute on your form element). For links, you can override the ajax navigation model by either giving them a target attribute or setting the rel attribute to external. Not ideal I know, but may help?
well this works..
// JQUERY MOBILE PAGE INIT
$(document).on("pageinit", function () {
$("#test").click(function (e) {
$.mobile.changePage("/Home/Test", { transition: "flip" });
});
});
// JQUERY MOBILE INIT
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;
});
<a id="test"/>
I would like to prevent the default behaviour of a click on a link. I tried the return false; also javascript:void(0); in the href attribute but it doesn’t seem to work. It works fine in Firefox, but not in Chrome and IE.
I have a single tab that loads via AJAX the content which is a simple link.
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
},
success: function() {
alert('hello');
$('#lk').click(function(event) {
alert('Click Me');
event.preventDefault();
return false;
});
}
},
load: function(event, ui) {
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
}
});
});
</script>
<body>
<div id="tabs">
<ul>
<li>Link</li>
</ul>
</div>
</body>
The content of linkChild.htm is
Click Me
So basically when the tab content is loaded with success, a click event is attached to the link “lk”. When I click on the link, the alert is displayed but then link disappears. I check the HTML and the element is actually removed from the DOM.
$('#selector').click(function(event) {
event.preventDefault();
});
The event object is passed to your click handler by default - you have to have something there to receive it. Once you have the event, you can use jQuery's .preventDefault() method to cancel the link's behavior.
Edit:
Here's the fragment of your code, corrected:
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
Notice the addition of the word 'event' when creating the anon function (or you could use just e, or anything else - the name is unimportant, the fact there's a var there is.