I'm developing a jquery mobile site that is only available to users that are logged in.
I have a function that checks a server for their logged in status:
function checkLogin() {
$(function () {
$.getJSON(root_url + 'manageUsers/checklogin/?callback=?', null,
function (data) {
if (data.logged == 'false') {
$("#index_Container").html("<h2>Login Required</h2></div><p>We've noticed you're not logged in, please login to use this app.</p><p><a href='login.html' data-role='button'>Click here to login</a></p>").trigger('create');
$.mobile.changePage('login.html');
} else {
$(".logged_in").text(data.username);
$(".logged_in").addClass('logout');
$(".header_div").trigger('create');
}
});
});
}
I can't seem to figure out how to implement this so everytime the index page is loaded and any other page loads this is fired prior to rendering anything else on the page. Currently, the page will load and show the HTML, then do $.mobile.changePage('login.html'):
EDIT: If anyone has any ideas on how to implement this in a better way I'd love to know, every page in the app requires the user to be logged in.
In order to have this function run every time you load anew page, you will need to bind it to the pagebeforeload event, and potentially cancel the user navigation if it does not validate the login.
$( document ).bind( "pagebeforeshow", function( event, data ){
event.preventDefault(); //prevents usual load of page
checkLogin(data);
});
You will have to make changes to checkLogin, notably because as the page does not exist yet, so you cannot make changes to the DOM. You can see an quick and dirty example in this fiddle, giving hints as to how do it considering the asynchronous nature of your call.
Related
<button class="alt-button" ion-item detail-none (click)="goToAbout()" clear small >
<ion-icon name='person' item-left></ion-icon>About us</button>
Button action
goToAbout() {
this.menu.close();
// close the menu and Goto About page
this.app.getRootNav().push(AboutPage);
}
api call
ionViewDidLoad(){
this.loading.present();
this.aboutservice.getPost().then(
response => {
this.items = response
this.loading.dismiss();
},
error=>{
this.error = error
this.showError('There was problem with server');
this.loading.dismiss();
});
}
it loads the api data everytime,but I want to load api data once and same button action i have used for sidemenu,Its working fine.please give any idea.
It seems strange behavior according to the doc here.
ionViewDidLoad
Runs when the page has loaded. This event only happens once per page
being created. If a page leaves but is cached, then this event will
not fire again on a subsequent viewing. The ionViewDidLoad event is
good place to put your setup code for the page.
But you can use it inside the constructor() as shown below.
constructor() {
//your Api call here
}
I have a table where users are allowed to "tick" or "cross" out a row. Ticking a row changes the status value to "Approved" and crossing it changes it to "Disapproved". I'm currently using the Edit scaffold to perform it. How do I do this without having the user being redirected to the view. I just want the user to click it and the page refreshes, with the status value being updated.
I'm not sure what code to post here either since I don't know how to write it. If any part of my program is required, please let me know. I'll include it here. Thank you :>
Add css classes to the 2 buttons "approve-btn" and "reject-btn".
Create javascript function to approve and reject and bind them to
the 2 classes
Create 2 backend functions
Make ajax calls from the JS functions to your backend functions passing the id of the row item
In the "success:" of the ajax call manage the change of the status to show "approved" or "rejected"
To make ajax call you can use the following example (although there are tons of example on google). Since you're modifying data you should use POST call and since it is a POST call, you should add a RequestVerificationToken to prevent CSRF attacks.
function Approve(id){
securityToken = $('[name=__RequestVerificationToken]').val();
$.ajax({
url: '/YourControllerName/Approve/' + itemId,
type: 'POST',
data: {
"__RequestVerificationToken": securityToken
},
success: function (data) {
if (data == 'success')
//use jQuery to show the approved message;
else
alert("something went wrong");
},
error: function (request, err) {
alert("something went wrong");
}
});
}
The Token should be created in the View adding this line:
#Html.AntiForgeryToken()
i am working on a project which is based on jquery Mobile. i am a biggner in this field, so sorry for the silly question. the question is -- i have a page 'Page1' and i am using post method to fetch data from database. On success i am showing a notification to user through a notification dialog(without cancel and ok button). now what i want this success message on another page "page2", and the message should be there up to 2 sec and then disappear automatically. i have tried
function sendAddGuest(data, dialog) {
$.post("/GuestsList/AddGuest", data, function (response) { //using the post method
//alert(JSON.stringify(response));
$('.error').html("");
hideLoading();
if (response.result == 'success') { //if the process done
$.mobile.changePage('/GuestsList/Index', { dataUrl: "/GuestsList/Index", reloadPage: false, changeHash: true }); //To another page "page2"
// window.setTimeout('showToastMessage("Guest added successfully with window");',2000); //i have tried this
setTimeout(function () { showToastMessage("Guest added successfully test2"); }, 100); //and this also i want to show this message on other page "page2"
}
}
I am also beginning with Jquery Mobile, based in the toy project I am working with I would suggest the following:
Use popup from jquerymobile instead of showToast, then you could call
the .close() of the element in the settimeout function.
This is the div you create for your popup (you put it in the page 2):
<div data-role="popup" id="myPopup" class="ui-content" data-theme="e">
<p>Guest added successfully</p>
</div>
This is how you could call the function to open once in the new page (use the pageload event):
$('#myPopup').popup('open');
This is how you could call the function to close (in the same pageload event):
window.setTimeout(function(){ $('#myPopup').popup('close'); }, 2000)
Sorry I have no time to code a complete example, but I think this is the way to go.
Hope this helps!:-)
I have a simple JQM site I'm working on. I'm trying to validate the availability of a username on the fly in a form. I'm using jquery $.get() ajax to return "success" or "fail" however the return data is being replace with the code of the previous page.
$(document).on('pageinit', function () {
// check to see if username is available
$("#username").change(function() {
$.get("controller.php", { action: "check_username", username: username }, function(data) {
console.log(data);
}
});
The controller.php is checking for availability of the username and return "pass" or "fail" When I do the console.log(data) which I'm expecting to be pass or fail, it's logging out the code from the previous page??
I'm thinking maybe it's a JQM caching issue so I tried to disable cache with no effect. I was orginally using a JQM dialog box to display the form. Thinking that had something to do with it I pulled that out and loaded a straight link. That didn't fix it so I tried to load the page directly using
$.mobile.changePage( "user-new.php", { reloadPage: true});
I am stumped. Why would a $.get ajax call return data be returning code from the previous page?
Here's a face palm! My controller was authenticating and kicking it back out to a login page. Apparently php redirects act funky with ajax return data. Rather then returning the login page code it was returning the previous page code. I Removed the authentication and it works fine. Unbelievable! I'm going to go work at a gas station or something :)
I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});