i'm developing android app using cordova + Ripple emulator + jq mobile. I want to change page after successful login. html of main (and the only) page:
<div data-role="page" id="login">
<div data-role="header">
<h1>
Вход
</h1>
</div>
<div class="ui-content">
<div id="loginFlashMsg">
</div>
<form id="loginFrm">
<div>
<label for="loginInptTxt">Ваш логин:</label>
<input type="text" id="loginInptTxt" />
</div>
<div>
<label for="pswInptTxt">Пароль:</label>
<input type="password" id="pswInptTxt" />
</div>
<button id="loginBtn">
Войти
</button>
</form>
</div>
</div>
<div data-role="page" id="lots">
<div data-role="header">
<h1>
Лоты
</h1>
</div>
<div class="ui-content">
<ul data-role="listview" id="lotsList">
</ul>
</div>
</div>
after json-authorization i want to change page:
App.prototype.ProcessResponse = function (response, textStatus, jqXHR) {
if (response['status'] != 'ok') {
this.notifyAboutError(response['status']);
} else {
switch (response['action']) {
case 'login':
this.user = new User($('#loginInptTxt').val(), response['sid']);
$.mobile.changePage("#lots");
break;
case 'getLots':
this.appendLots(response['lots']);
}
}
};
but it doesn't work. I know, changePage() is deprecated. I try to use
$(":mobile-pagecontainer").pagecontainer("change", "$lots");
but everything is still the same - nothing. Extract to another html page has no effect. How I can switch pages in my android app?
p.s. the best that I can achieve is that I see the header of lots-page and text "loading" after it but after second it disappear.
$.mobile.changePage("#id");
works. No problem the site that is shown changes to another page id.
If you want a fancy transition use e.g.
$.mobile.changePage("#id", {transition:"slide"});
Works like a charm :) Of course you can also navigate to new pages just use it without the '#'.
Related
I try set a default link in a modal, but not working (I am very new in javascript).
This is my full code:
<button class="md-btn md-btn-success" id="openmodal" data-uk-modal="{target:'#my_id', keyboard: false, bgclose: false}" style="display:none !important;"></button>
<div class="uk-modal" id="my_id">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<div uk-grid class="uk-grid">
<div class="modal-block">
<h3>Project</h3>
<b>project description, lorem ipsum... instagram</b>
</div>
<div class="modal-block">
<h3>Terms</h3>
<b>terms description</b>
</div>
<div class="modal-block">
<h3>Cookies</h3>
<b>cookies description</b>
</div>
</div>
</div>
<div class="uk-modal-footer uk-clearfix">
<a id="default-link" uk-tooltip="{title: okay, i accept!; pos: bottom}" class="us--main-button uk-float-right entersite uk-modal-close" href="javascript:void(0)">Accept and enter</a>
<a id="dont-def" uk-tooltip="{title: I do not agree!; pos: bottom}" class="us--leave-button uk-float-right" href="https://google.com">Deny and leave</a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#openmodal').trigger('click');
})
</script>
<script>
window.onload = function() {
document.getElementById("default-link").focus();
};
</script>
When I open the page in any browser, the default stated link will be the first (instagram)... Whats the wrong with this?
That code works when it comes to give the link focus, though if one hit enter (or click on it) nothing will happen since you've cancelled its action with href="javascript:void(0)"
Here is a sample that shows that the focus() does work.
Click "Run code snippet" and hit "Enter" and you'll get an alert.
window.onload = function() {
document.getElementById("default-link").focus();
};
<div class="uk-modal" id="my_id">
<div class="modal-block">
lorem ipsum... instagram
</div>
<div class="modal-footer">
<a id="default-link" class="uk-modal-close" href="javascript:alert('Accept')">Accept and enter</a>
<a class="uk-float-right" href="https://google.com">Deny cookies and leave</a>
</div>
</div>
I just now find out the really best solution for that, because the window.onload to slow, and when the site loading, the default link is over the first link in the current page...
So the best the html5 solution, very simple, and this really makes default from your any item, independently from the page or document loading:
<div autofocus>
i am trying to open a popup in JS function but its not working
Here is the JS function
function verifyUser(user,pwd)
{
var name = user;
var paswd = pwd;
if(name === 'user' || paswd === '123')
{
$( "#pwdpopup" ).popup('close');
$( "#aboutPopup" ).popup('open');
}
else
{
alert('Incorrect User Name or Password');
}
}
and here is the HTML
<div data-role="popup" id="pwdpopup">
<div data-role="header">
<h1>Authentication</h1>
</div>
<div data-role="content">
<label for="uname">User Name </label> <input type="text" id="uname" />
<label for="pswd" >Password </label><input type="password" id="pswd" />
<button onClick="verifyUser(uname.value,pswd.value);">Verify</button>
</div>
</div>
<div data-role="popup" id="aboutPopup">
<div data-role="header">
<h1>About Application</h1>
</div>
<div data-role="content">
<div id="version">
</div>
<div id="resDate">
</div>
<div id="release">
</div>
</div>
</div>
everything works fine the pwdpopup closes as well but the other popup is not opening
I think you should check the conditional "||", and try with "&&", I imagine is the comparison you want to make.
Are you including the jquery library along with the jquery mobile library? If not, the functions aren't going to work because the libraries are dependent on each other. There doesn't seem to be anything wrong with your code, and the console just keeps saying that your functions aren't defined. So I'm guessing this is the issue you're having.
A part of mark up for the current page.
<div class="que-plc">
<div class = "questionHolder">
<div class = "questionBorder">
<h3>A question?</h3>
<div>
<div ><a id="goto-que1" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
</div>
The mark up that has to be loaded into the current page:
HTML -- que1.html:
<div class = "questionHolder">
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que2" data-role="button" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
HTML -- que2.html:
<div class = "questionHolder">
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que3" data-role="button" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
The javascript to load que1.html and que2.html:
$("a.to-next-que").click(function(){
alert(this.id)
var cur_id = this.id.toString();
$(".questionHolder").remove();
var last = cur_id.length
cur_id = cur_id[last - 1];
$.get('level/level1/que'+cur_id+'.html',function(question) {
$('.que-plc').html(question).trigger('create');
});
});
The problem is after que1.html is loaded into the dom i,e inside the .que-plc container, then the successive clicks wont load que2.html, que3.html ... to the dom. What is happening?
I am using jquery-mobile 1.0.1, so using $.mobile.loadPage, $.mobile.changePage results in a error.
And also navigating from page1.html to page2.html via a link whose data-ajax="false" wont load the javascript that is in page2.html
That is:
<body>
<div data-role="page">
</div>
<script src="play.js"></script>
The play.jswont be available inpage2.html`. How can this be corrected?
You can use like this
$('#div_content').load("page.html");
Load page when click button
$('#button').click(function(){
$('#div_content').load('html.page');
});
I'm trying to follow this guide. I reach a problem when i try to change the HTML file when the user clicks a button.
This is my script:
<script>
window.$ = window.jQuery = WLJQ;
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
</script>
And this is my core HTML file (auto generated by Worklight):
<body onload="WL.Client.init({})" id="content" style="display: none;">
<!--application UI goes here-->
<div data-role="page" id="pagePort">
<div id="header" align="center">
<img src="images/logo.png">
</div>
<div data-role="content">
<div>
<input type="image" name="btnPromo" src="images/btnHotPromo.png" width="75%"/>
</div>
<div>
<input type="image" name="btnMall" src="images/btnMall.png" width="75%"/>
</div>
<div>
<input type="image" name="btnOutlet" src="images/btnOutlet.png" width="75%"/>
</div>
<div>
<input type="image" name="btnAbout" src="images/btnAbout.png" width="75%"/>
</div>
</div>
</div>
My goal is to change the #pagePort to MainPage.html every time the user clicks on #btnPromo.
The answer is i forgot to add the $(function(){}); at the start of the code, so the code should be :
$(function(){
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
});
And everything will be OK :D
I have a simple html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="c">
<div data-role="page">
<div data-role="header">
<h1> My Title </h1>
</div>
</div>
</div>
</body>
</html>
when the page loads this is how jquery "parses/formats" the body of that html:
<body>
<div id="c" class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
</div>
</body>
Note that tags have new attributes. Now my question is how can I know what function of jquery mobile library is doing that? I will like to call the method that is doing that!
The reason why I will like to call that method is because I replace the content of div id 'c' with ajax and the page does not render as I want it to. In other words doing:
$.ajax({
url: 'someUrl',
success: function (result) {
/*
result = "content of first example" =
<div data-role="page"><div data-role="header"><h1> My Title </h1></div></div>
*/
$('$c').html( result );
// I will like to call here something like: $('#c').RrenderHtml();
}
});
does not renders as I want it to. The reason why it not renders correctly is because the tags in the div id c does not have the attributes that jquery created on them when the page loads.
A solution to this problem will be return:
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
Instead of:
<div data-role="header">
<h1>
My Title
</h1>
</div>
On the ajax call. The problem with that solution is that I will have to figure out how each response will be formated on a new page by jquery when the page loads. Also some responses I am creating them dynamically like tables. Maybe I could create an iFrame place the jquery libraries in there also the response from the ajax call in the body wait for the page to load and then finally take the end resoult Hope I explained my self correctly.
You don't need to know the methods. There is already a method provided to enhance injected pages and it's:
.trigger('create')
More on this here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html