I have a Jquery Mobile app and a page within it needs to display the equivelent of a MessageBox dialog to present a message to the user. I get the dialog to display fine but when the dialog box closes the page that called it reloads. I just want the dialog to go away and not do anything to the main page that called it. This is a problem as this main page may have options already selected by the user and this refresh clears the options.
Here is my test code to display the dialog:
Open dialog
The html for the dialog is located in a seperate page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Search</h1>
</div>
<div data-role="content">
<p>You must select a Location.</p>
<p><a id="close" onclick="$('.ui-dialog').dialog('close');" data-rel="dialog" data-role="button">OK</a></p>
</div>
</div>
</body>
</html>
If it matters at all, I am using the VS2010 MVC Razor 3 mobile template which uses the _layout.cshtml file and has in it $.mobile.ajaxEnabled = false; by default.
try to add return false; to your onclick
<a id="close" onclick="$('.ui-dialog').dialog('close'); return false;" data-rel="dialog" data-role="button">OK</a>
else the default link action won't be prevented
Related
I have a maybe-noob question for those who know how works jQuery mobile in its core :)
I see on some websites an ajax-like navigation, but with an URL completely changed after load (I mean, no hash at the end).
For example : http://m.wengo.fr/accueil
=> click on any link, you'll see a loader, and after a little animation the new page is loaded ; but the URL has no hash, it's a real new URL.
Is the page really fully reloaded after a first ajax-load behind ?
I don't see how this magic is did on their framework...
Thanks ;)
--
Damien
This is a rather easy implementation.
Page changes should be handled programatically with changePage function (jQuery Mobile 1.4 and below) or pageContainer change (jQuery Mobile 1.4 and above).
Solution:
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
What you need is changeHash set to false.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-page', function(){
alert('sdfsd');
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right" id="open-page">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
Update:
Information you need has nothing to do with jQuery Mobile.
I showed you one solution which jQuery Mobile can actually do. But this solution will permanently show original HTML file name. This is because initial HTML page is loaded into the DOM and every other page is loaded into it. jQuery Mobile thus have full control over link name.
But this is not what mentioned page is using. It is using some kind of rewrite engine. By default, rewrite engine maps a URL to a filesystem path. However, it can also be used to redirect one URL to another URL (which is done here), or to invoke an internal proxy fetch. They are probably using Apache web server with mod_rewrite module turned on.
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument
So i've got a problem like many others : Facebook Like Box is not diplaying in IE8 (IE7 OK).
I found many posts about that, tried all solutions but did not succed...
IE8 message : FB.FBXML Null or not an object
NB : there's a function which handle resizing of FB Like Box.
Here's my HTML5 code :
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
...
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
<body>
...
<article>
<div class="row" id="content">
<div class="twelvecol last">
<div id="fb-root"></div>
<div class="fb-like-box" data-href="http://www.facebook.com/divstudio" data-width="1140" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
</div>
</article>
...
<script>
$(document).ready(function(){
var contentwidth = $('#content').width();
$('.fb-like-box').attr('data-width', contentwidth - '40');
FB.FBXML.parse(document.getElementsByClassName('.fb-like-box'));
});
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
Any ideas ?
website : http://www.divstudio.fr/emergenza/jazz/actu.html
thx a lot
You should add these lines to the tag.
xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
If there are already any attributes in the tag, leave them as it is. So that the starting html tag becomes like this.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
Clear the cache if caching is enabled. It should work in IE-8
I had the same problem, and adding the appropriate xmlns attributes did not help. As it turns out, what was causing my problem is related to another problem: Facebook like box not showing up when user is not logged into Facebook. Igy and wasim kazi had the answers that led me to the solution. Here's how to solve the problem:
Log onto the Facebook account that manages the page you want reflected in the like box.
On the left nav bar, click on "Pages".
Click on the page title to bring up the admin panel for that page.
Click on Edit Page -> Edit Settings
You'll see a box labeled "Country Restrictions". If there are ANY countries listed in this box, your like box will be blank if the user isn't logged onto Facebook AND it will be blank in Internet Explorer (7, 8, 9). This makes sense: the only way Facebook would be able to enforce geographic restrictions with any certainty would be by making sure the user is logged in. Why this affects IE (whether the user is logged in or not) is a mystery, but that was the cause of the problem in my case.
I had the same issue with the facebook module for drupal 6.
I solved my problem by changing the markup type from XFBML to HTML5
I then added the HTML5 script in the <head> section:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I hope this fixes your problem as well.
I'm new on Grails and I have some troubles with Ajax (so I could have missed something). On my main gsp I want a select box, that, when I click on its options, makes appear another field on the same page to select other things. As the content in the second part is dynamic, I need somme Ajax. Anyway I haven't succeed yet. Here is my code :
main.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="layout" content="main" />
<title>Sample title</title>
<g:javascript library="jquery"/>
</head>
<body>
<h1>Selection de l'email</h1>
<div class="dialog">
<g:select name="selectTemplate"
from="${templateCategories}"
value="category"
noSelection="['':'--- choisissez un modèle ---']"
onchange="${remoteFunction(
controller:"email"
action:"printTestTemplate"
update:"listTemplates"
params:'\'category=\'+this.value'
)}"
/>
<div id="listTemplates">RRR</div>
</div>
</body>
</html>
EmailController
def printTestTemplate = {
println params.category //doesn't print anything
println "YEAAAAAAAAAH" //the same
render(view:"formSelectTemplate", model:[templates:EmailTemplate.findByCategory(params.templateCategory)])
}
formSelectTemplate.gsp
<h1>YOUHOUUU !</h1>
I've both tried to call a view or template (by renaming the gsp of course), but nothing worked. Nevertheless I don't understand, I followed the official doc. Notice that the HTML result creates no event on the select box, and that Firebug tells me there is no 404. So I must have missed something in the creation of the box.
select result in HTML :
<select id="selectTemplate" name="selectTemplate">
<option value="Refus">Refus</option>
<option value="Informations complémentaires">Informations complémentaires</option>
</select>
Did you forget comas between the arguments of your remoteFunction call ? like this:
onchange="${remoteFunction(controller:"email",
action:"printTestTemplate",
update:"listTemplates",
params:'\'category=\'+this.value' )}"
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>