I inject html for dialog via script like:
$("#misc-cntr").append('<div id="chk" data-rel="dialog" > </div>');
then in ajax success callback I have:
success: function(msg) {
$('#chk').html(msg)
// open dialog here
// $('#chk').dialog('open') does not work
}
Given above how can I open the dialog programatically?
You'll need to change the page to it, something along the lines of:
$.mobile.changePage($('#chk'), 'pop', false, true);
If you want to close the dialog via javascript, you'll need:
$('#chk').dialog('close');
Hope this helps.
Here's what I used. It's very dirty, but it uses an actual dialog instead of a popping page.
The div:
<div data-role="page" id="score" data-theme="d" data-transition="pop" />
The jQuery code:
var a = $('<a />').attr({
href: '#score',
"data-rel": 'dialog'
}).click();
The changePage function takes an object as second argument. In it you can specify things as role and transition. For your case you need to set role to 'dialog'.
$.mobile.changePage( $('#chk'), { role: 'dialog', transition: 'slide'} );
$.mobile.changePage($('#mydialog'),{'transition':'pop'});
OR
$.mobile.changePage($('#mydialog'),'pop');
Related
I'm trying to create a pop up window which is triggered upon selecting an option from a dropdownlist using JQM .
The popup datarole:
<!--popup window inside index page -->
<div data-role="popup" id="puProd"> TODO POP UP STUFF </div>
And this is the JS code:
$(document).ready("#index", function (event) {
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
Am I doing something wrong? Because the pop up won't open.
Will appreciate answers
Thank you
Use the jQuery Mobile pagecreate event instead of document ready:
$(document).on("pagecreate","#index", function(){
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
});
DEMO
Lets say i have 10 Tabs. And one of these tabs will link to external URL. How to do it please?
I prefer to make it perform like a normal HREF action. Because when i use:
onclick="window.location='http://www.google.com';"
or
$("#tab-08").click(function(){ ........... });
.. there definitely is a DELAY about 1 or 2 seconds, upon the click of that particular Tab.
So how do i override a jQuery UI TAB back to normal link please?
Some more code would be useful but how about something like this?
Javascript:
$("#tabs").tabs({
active: false,
collapsible: true,
beforeActivate: function (event, ui) {
window.open($(ui.newTab).find('a').attr('href'), '_blank');
return false;
}
});
HTML:
<div id="tabs">
<ul>
<li>Page</li>
<li>Page</li>
</ul>
</div>
Your solution also works, but I think you are dealing with a browser related problem that is causing the delay.
I'm trying to load dynamic pages with jQuery, following this example.
(EDIT): Updated the code to provide a better view of the context
Here is a code sample
<div data-role="page" id="pageSample">
<div data-role="header">title</div>
<div data-role="content">
<a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
</div>
<div data-role="footer">Footer</div>
</div>
$(document).bind( "pagebeforechange", function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
The back button may be dynamically generated or not (such as this snippet). In both cases, it does not work reverse, as changePage is triggered through pagebeforechange.
Therefore, I inserted a reverse variable in changePage() options.
I can't find a way to retrieve the data-direction value of the clicked item.
I tried this just before changePage():
reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
reverse = true;
});
But the reverse value is not updated in changePage(). I guess both codes run synchronously.
Is there a way to update the reverse value in changePage() ?
Final update
As per our discussion and your example http://jsfiddle.net/Iris/UZBhx/21/
Change this
$('a').on("click", function()
to
$(document).on("click", 'a', function()
Another update
Binding the $.mobile.changePage to pagebeforechange triggers all your code twice. Thus you lose the value of reverse or it gets neglected when the command executes the first time.
Try binding it to pagebeforehide as below.
$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
Update
To use reverse effect on specific buttons, you can follow this method.
First, assign a class for buttons with reverse effect, e.g. ui-reverse and add the below script.
$(document).on('click', '[data-role='button'].ui-reverse', function() {
$.mobile.changePage( url, {
transition:"slide",
reverse: true,
dataUrl:url
});
});
"Back" button links - Jquery Mobile
data-direction="reverse"
Is meant to simply run the backwards version of the transition that will run on that page change, while data-rel="back" makes the link functionally equivalent to the browser's back button and all the standard back button logic applies.
data-rel="back"
This will mimic the back button, going back one history entry and ignoring the anchor's default href.
Adding data-direction="reverse" to a link with data-rel="back" will not reverse the reversed page transition and produce the "normal" version of the transition.
In your case, you want to reverse transition, use the below code.
$.mobile.changePage($(page), {
transition:"slide",
reverse: true, // this will reverse the affect of the transition used in the page.
dataUrl:url
});
Read more about it here.
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
You know how when you have your mouse over a link, in most browsers, it shows the link in the lower left corner (aka chrome) or in the status bar? How can I disable this?
The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.
Go To SO
becomes
<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>
another idea: use a redirector.
Set the link to your own page (aspx) and in that page you do a Response.Transfer. When using aspx, you can use attributes (in the querystring) if you like, to use it for multiple links. This way the user still knows it is a link, but can't see the actual URL when hovering.
I got the same issue today .. and here is a out of the box way to solve it:
Just replace the <a> with a <span> and hide the address in a hidden component,
Then use Jquery to create the page redirect / Ajax.
HTML:
<span class="fake-link" >
<span class="url" style="display:none;">www.my-url.com</span>
Go to My-URL page
</span>
Jquery:
$(function(){
$('.fake-link').on('click', function(e){
var url = $(this).find('.url:first').html();
window.location = url;
});
});
Change the onclick event:
Link
<script type="text/javascript">
function changeOnClick() {
document.getElementById("linkid").onclick=function(e) {
location.href="http://www.your-site.com";
return false;
}
}
window.onload=changeOnClick;
</script>
You can change the "#" to whatever you want the status bar to show.