I am trying to do userLogin through a webservice. The project is using Bootstrap for css and angular in the backend.
I am having a login Screen with a hidden div that is shoown when user click login button.Its a animated login icon.
Everything is working fine.I just want to make the background that is whole page including the userId, password uneditable as well as signin button unclickable.
When you hit the login button you can make the input(s) and button(s) disabled to make sure they remain unchanged.
When you get a result from your REST call you can re-enable them all.
You probably already have a variable $scope.loginIn on your controller scope since you are showing an animated login icon while login. If you don't, add it to your login function, something like :
$scope.login = function(...) {
$scope.loginIn = true;
loginService.login(...).finally() {
$scope.loginIn = false;
}
}
then just use it on your input and buttons to disable them :
<div class="login">
<input enable="!loginIn">...</input>
<button enable="!loginIn">...</button>
</div>
(That might be off the context, if you give me some code I could probably be more accurate in my answer)
Related
I'm developing a single page application on React using 'create-react-app'. I'd like to use Facebook Pixel for retargeting and creating custom audiences on Facebook.
Example:
Whenever a user visits /pricing I want to add ReactPixel.track('viewPricing'). Whenever a user visits /checkout I want to add ReactPixel.track('viewCheckout').
Since it's a single page application all my events are firing at once, which, I guess, makes sense.
How do you work with custom page tracking and Facebook pixel for a single page application?
Here is what I ended up doing. First, do npm install react-facebook-pixel. Wherever you want to include FB tracking do the following:
import ReactPixel from 'react-facebook-pixel';
const options = {
autoConfig: true, // set pixel's autoConfig
debug: false, // enable logs
};
ReactPixel.init('Your-Pixel-Code', options);
This will fire a 'ViewPage'. Now, if you want to include a CustomEvent, just add an onClick to the links leading into your page:
<Button onClick={() => { ReactPixel.track('clickContact') }} variant="contained" color="primary" href="/contact/" >
That was the easiest way I could find.
Have base html admin_layout.html where i wrote this:
<body>
<div ng-include="'/static/partials/admin_navigation.html'"></div>
<div ng-view></div>
Interested to know how may remove admin navigation from login page?
Tryed to set variable hide_menu in LoginCtrl and hide it with ng-if="hide_menu", but this doesn`t work for me. It hide menu in all admin panel.
UPD: Fixed it adding to navigation div Menu controller. Or better create menu directive?
UPD2:
Added in admin_app.js:
adminApp.run(function($rootScope, $location) {
$rootScope.location = $location;
});
and in admin_layout.html:
<nav ng-include="'/static/partials/admin_navigation.html'" ng-if="location.path() !== '/admin/login'"></nav>
Now everything work fine
Fixed problem using code that i wrote in UPD2 of my question
As far as i understand it right now, your Problem is that the value of "hide_menu" does not depend on the route you're currently in.
So i would suggest you set the value in the controller according to the page you are currently displaying. You could for example listen for the $routeChangeSuccess event and read out the $route.current object accordingly.
If you need more specific help, please provide a plunkr!
yes you can work it with ng-show or ng-hide.
like for those URL's you dont want to have the nav bar you can hide iot using ng-hide i.e.
URL for which you wants to hide nav bar -http://**.com/view1.html
<div ng-include="'/static/partials/admin_navigation.html'" ng-hide="URL == '/view1.html'"></div>
Extjs prefers your app to be a single page app, but I'd still like to be able to do things like refresh my page and keep my current location in the app, and enter a url to get directly to a particular point in the app. Is there a solution for this?
Yes, I do the same in my app. You can use the Ext JS history mechanism to do so. Have a look at this example from Sencha.
You can listen to the history change event like this
Ext.History.on('change', function(token) {
// you navigate-to-target code goes here, e.g. change the viewport content
}
You can then initiate navigation by setting the browser hash to some navigation target
document.location.hash = yourNavigationToken;
This gives you also the ability to use deep-linking and forward/backward navigation with the browser buttons.
You need to init the history:
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
and add an iframe and a hidden input field to your page, like in the example:
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
How can i save the textfields and checkboxes to the DB without reloading the page?
Just to click on the button and then its in the DB. Nothing more. I don't get it. This means when I have a textfield where I type in a content -> then click the button, the content from the textfield should be in the DB and should do nothing more (not reloading the page, or go to top for example).
I don't get it.
EDIT:
When I have a a <div> tag with the id="testid" in the standard create.gsp:
def create() {
def mytestInstance = new Mytest(params)
}
and the <g:remoteLink> which should save this part looks like:
<g:remoteLink class="button" name="myForm" update="testid"
url="[controller:'mytest', action: 'create']" value="....." />
That does not work because the page is refreshing or something like this and the things are not stored in the DB, plus they are not in the textfields any more.
Use <g:formRemote> or <g:submitToRemote> to do the form submission with an Ajax call.
You should be able to use the formRemote tag to send the data to a controller via Ajax
Edit
As it says on that page;
This tag also requires the use of either the <g:javascript/>(link) or <g:setProvider/>(link) tags. See the AJAX section of the user guide to find out more.
Have you done that?
I've been trying to get this to work for 4 days now, with no luck.
I have a very simple jquery mobile app.
The app has a header, content and footer.
The footer is being generated dynamically on the 'pagecreate' event because it is always the same and I don't want to have its HTML in every page.
So I do something like this:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));
});
DrawHeader() and DrawFooter() simply prepent the header div to the page and append the footer div.
SetFooterEvents() sets the onclick events of the footer navbar buttons and SetActiveFooter() is SUPPOSED to set the ui-btn-active to the current active footer link.
To do this, I've added the data-active-footer attribute to the page div and the data-name attribute to the navbar elements. I'm searching for the current element according to the data-active-footer in the page and apply the ui-btn-active class.
function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");}
So far so good.
Now, say I've changed to a page and the navbar is lit (it has successfully recieved the ui-btn-active class), and I'm clicking on the previous page, the lit item in the navbar doesnt change back!
If i click on the the page again (ie: changed to second page [corrent lit], changed back to first page [second page is still lit], then clicked on first page again) it does light the navbar button.
What I found out was that jqm also changed the navbar of the previous page when I'm changing the navbar of the current page in the 'pagecreate' event.
I've tried to overwrite this behaviour using the 'pageshow' event, that is, trying to apply the ui-btn-active class to the current element in the navbar but the problem is that $(this) and e.currentTarget objects in the 'pageshow' event DO NOT CONTAIN THE FOOTER ELEMENT!!!
$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0
alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});
Any ideas?!
Thanks.
Before delving into more detail, please try adding .ui-state-persist together with .ui-btn-active
This makes sure active buttons stay active when you changePage and the footer is the same. Also make sure, all your footers have the same data-id attribute.
On a sidenote: check the latest blog post about upcoming features for jqm 1.1 - it will include a fetch link utility, which allows to ajax-update portions of a page. So you could use this functionality to grab and insert a footer on every page. I'm trying the same right now with a login form, which I need on every page.
Have you tried "ui-state-persist"?
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Home</li>
<li>Favorite</li>
</ul>
</div>
I still dont know why but jqm moves the footer from page to page, eventhough I assign a new footer to each page.
Maybe because I set the same ID to all of them.
Anyhow, I used this workaround to solve the problem:
On the 'pagebeforeshow' event, I set the button I want active to all the footers in the documents. I've set a special data-name attribute to each navbar button, I give it the 'ui-btn-active' class after removing it from the rest of the items.
var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");