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.
Related
In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>
Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>
I'm not really sure how to do this. I have a form with a language tag and I need to be able to have the 3rd party non editable text change to Spanish. In the form is a hidden field
So
if
<input type="hidden" name="lg" value="1">
then
$("#continue_shopping").val("Sigue Explorando");
$('#checkout_button a').text("Hagámoslo!");
else
$("#continue_shopping").val("Keep On Exploring");
$('#checkout_button a').text("Let's Do This!");
I have the English side done and I'm sure there is cleaner code to use but I'm just using
<script>
$("#continue_shopping").val("Keep On Exploring");
</script>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
Any help pointing me in the correct direction would be great.
Thank you
3rd party page code...
<div class="container">
<div class="col-sm-12">
<div class="col-sm-8">
<section id="cart_contents" class="fluid">
#cart_contents#
</section>
</div>
<div class="col-sm-3">
<section id="cart_details" class="fluid">
#cart_upsell#
#cart_shipping#
#cart_tax#
#cart_coupon#
#cart_message#
#cart_totals#
#cart_validation#
#cart_buttons#
</section>
<SCRIPT>
$("#continue_shopping").val("Keep On Exploring");
</SCRIPT>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
</div>
</div>
</div>
I have a login form with a link to a Forgot password, when this is clicked the login div hides using fadeOut() and then the Forgot Password div is shown using fadeIn().
But when I hade a child element to the Forgot password with the same class as in the div that's getting hidden the Forgot password doesn't show up at all.
Function that hides login and displays forgot password
function forgotPassword() {
$('.login, .register, .or').fadeOut(500).promise().then(function() {
$('.forgotpassword').fadeIn(500);
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box account login">
<div class="content">
<h3>Login</h3>
<div id="errorLogin">
<p id="errorLoginMsg"></p>
</div>
<label for="email2">
Email
<input name="email2" id="email2" placeholder="Email...">
</label>
<label for="pw3">
Password
<input name="pw3" id="pw3" type="password" placeholder="Password...">
</label>
<button id="submitLogin" disabled="true">Login</button>
<a id="forgotPassword_btn" onClick="forgotPassword()">Forgot password? Click here</a>
</div>
<div class="bg blue"></div>
</div>
<div class="box account forgotpassword" style="display:none;">
<div class="content">//Adding this class breaks the script
<p>Forgot password</p>
</div>
<div class="bg blue"></div>
</div>
Just change the place of style="display:none" to child div means it should be like this
<div class="box account forgotpassword"><div class="content" style="display:none;">//Adding this class breaks the script
<p>Forgot password</p></div><div class="bg blue"></div></div>
After a lot of search it turned out to be the CSS which for some reason didn't give a full height to the div that was going to be displayed.
I'd like to add that you shouldn't use onClick="", instead you should use an eventListener or if you can use jQuery's .click() function.
You could pass a callback function to .fadeIn() and .fadeOut() functions. Link here.
For example:
function forgotPassword() {
// fadeOut with callback
$('.login').fadeOut(500, function(){
// then...
$('.forgotpassword').fadeIn(500);
});
};
I have a very simple js file for my angular app.
angular.module('Account', ['firebase'])
.value('fbURL', 'https://myURL.firebaseio.com/')
.service('fbRef', function(fbURL) {
return new Firebase(fbURL)
})
.controller('Authorization', function($scope, $firebase, $firebaseObject, fbRef){
var auth = this;
auth.loginEnabled = function() {
alert('false');
return false;
}
auth.loginEmail = function() {
}
});
The auth.loginEnabled function gets called many times (the alert appears many times) when my html loads. Why is this?
In my html
ng-app is declared in my html tag as ng-app="Account"
ng-controller is delcared in my <div class="container"> that wraps an if for angular
ng-if is declared twice, once for a true return and once for a false.
In short, here is my html code: (all your missing is the ng-app code described above)
<div class="container login-container" ng-controller="Authorization as auth">
<div class="row">
<div class="col-sm-12">
<form class="" action="" method="">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="cover">
<img src="<?php echo $base; ?>assets/img/rotating_card_thumb2.png"/>
</div>
<div class="content" ng-if="auth.loginEnabled()">
<div class="main">
<h3 class="name">Login</h3>
<p class="profession">My Account</p>
<div class="form-group">
<input type="email" ng-model="email" class="form-control" placeholder="E-mail Address">
</div>
<div class="form-group">
<input type="password" ng-model="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="footer">
<button type="submit" class="btn btn-block btn-primary">Login <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div class="content" ng-if="!auth.loginEnabled()">
<div class="main">
<h3 class="name">Login</h3>
<p class="profession">Temporarily Unavailable</p>
<p class="text-center">We are currently updating our system for a better user experience! Please check back within a few hours.</p>
</div>
<div class="footer">
<i class="fa fa-reply"></i> Return Home
</div>
</div>
<div class="back">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I'm wanting to disable the login function all together at certain times, not see if the user is already logged in.
As Orel mentioned, the cause for the repeated alert is simply that your loginEnabled function is called upon every digest cycle. Without going into too much detail, Angular is frequently reevaluating those functions and values bound to the scope to ensure your UI is representing your data accurately.
Thus, it would be preferable to assign the loginEnabled value to a Boolean and query that within the scope:
auth.loginEnabled = false;
$rootScope.$on('myAuthenticationEvent', function () {
auth.loginEnabled = true;
});
The usage of the $rootScope isn't necessary, but serves to demonstrate that some other function in your controller (perhaps a Firebase observer) could be responsible for updating your auth.loginEnabled value. Hope this helps!
The reason is that your controller is called twice, may be because of this
ng-controller="Authorization as auth is mentioned in your view and also while configuring your route you might also include controller there too. like below
url: '/your url',
config: {
templateUrl: 'url',
controllerUrl: 'url',
controller:'Authorization'
}
If that is the case then, change your code to
url: '/your url',
config: {
templateUrl: 'url',
controllerUrl: 'url',
}
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 '#'.