How to hide div in html page in app.js - javascript

After login I am showing some user modules on html page. I want to hide it when user not have an access for that module by admin. I am use sencha/ ExtJs for front-end.
I want to hide this component after user login if he don't have permission for it.
here is my code(please see below Image)
I want to hide this Live Tracking On user login if user don't have access for this.
Design for this is bellow
I want to Create a function in App.js (In controller).
Can you help me for this...

Whenever you are validating the user or when it logs in, whenever that happens add style display:none
using javascript
document.getElementsByClassName('live-tracking').style.displ‌​ay= "none"

Your controller {
validateAndLogin : function () {
var isValidated = // check validation according your requirement.
if(isValidated) {
//display your html view and do following after adding id attribute to that
//div which you want to hide.
document.getElementById('livetracking').style.display='none';
}
}

Related

Hide fields from ADAPT UI configuration^in SAPUI5

Depending on certain conditions, I have to hide a button in the header of my app. The coding in the controller is as follows:
if (condition === true) {
this.byId(buttonId).setVisible(false); //works fine
} else {
this.byId(buttonId).setVisible(true); //also works fine
}
//Code edit: Button is created on the go to check if Adapt UI can still find it.
//However, it does not work still as expected. Button is visible to Adpat UI.
if (condition === true) {
var oButton = new sap.m.Button
({
text : "Save",
type :sap.m.ButtonType.Accept
});
oButton.placeAt('content');
}
Moreover, the inital visiblilty of the button is set to false in the view definition.
<Button id="buttonId" text="Button1" press="onPress" visible="false"/>
In my app, this works as intended; button is hidden. However, if user goes to Adapt UI settings, it shows list of all the available buttons in the header. It also shows button1, even if it is not required in header atm.
What I want to do?
I want to hide button in adapt UI settings also. Button's visibility should be handled only via controller file.
Does anyone know how to achieve this?
Thank you.
You could inject the button with code at run-time when you want to provide user access to it - this way the button does not form part of the View at the outset.
I suspect the Adapt UI will allow access to anything in the Static View as it stands.

Loader with python & flask

I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.
I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp, the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()).
At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.
Can you help me?
Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.
render_template('page.html', visible=True)
Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)
<script>
var hidden = {{ visible|safe }};
function action() {
if(hidden) {
document.getElementById('button').style.visibility = 'hidden';
} else {
document.getElementById('button').style.visibility = 'visible';
}
}
You can also change the variable with an onclick function on then page itself.
Your button to call a python function could look something like this.
<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />
Remember to use the #app.route("/functionName") before the python function.
Hope this is close to what you wanted.
Here are the steps to achieve this.
Add loading button with hidden class.
When you click update Product button, following things should happen.
$(".update_button").on("click", function(e){
$(".loading_button").show(); // show loading button
$(".update_button").hide(); // hide update button
$.ajax({}) // send ajax request to update product, on success, hide loader and show update button
});

Passing data from popup to page

i have a basic form where the users of an ERP can create ticket for quick support. In the form they have to put the client ID, but i want them to click a search icon to open a pop up (or something similar) and select the client.
In the pop up i want to load a list of client, and when they select the client, send de ID to the main page where they are creating the ticket...
How can i do this?
I use the next script to send data from child to main page:
$("button").click(function() {
var data = $(this).val();
window.opener.document.getElementById('cliente-nombre').value = data;
window.parent.close();
});
and in the button wich open the popup:
function openNominaCliente() {
window.open("/clientes/nomina", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,toolbar=no, menubar=no,width=500,height=500");
}
Thanks all!

How to check if angular spinner is active

I am working on angularJS web application. I have a modal popup on which I show spinner while loading screen. Now there is need to identify if spinner is active (by using it's name) in html template. Can anybody please let me know how can achieve this in angular. I google for answer but no success yet.
Please help..!!
How you are showing the spinner, must be a image inside a div and setting it's display to block i suppose.
so you can use ng-show="isLoading"
and set $scope.isLoading = true when you open the pop-up and so this will make the spinner display and inside your service ( http) call on success handler you can reset it to - $scope.isLoading = false so that it hides the spinner.
is that what you looking for?
Here is the basic logic:
In your controller initialize a $scope variable as so:
$scope.showSpinner = false;
Then inside the relevant js function, that executes on modal open, run this:
$scope.showSpinner = true;
You should also have a spinner in your view html which displays the spinner when rendered, for example:
<div id="spinner" ng-if="showSpinner"> </div>
If you need more info please post your code..

On Click: Open a Pop-up Div on a Different Page

On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/

Categories

Resources