Here is what I am trying to achieve: I have a topnav with a login button. When the login button is clicked, I want to display my login popup dialog.
Similarly, certain pages will have a giant "Register" button. I want the login popup to also appear when that button is clicked.
In order for both the topnav and other (outside) components to display the login popup, it was recommend that I create service for my login popup (See my previous question: (Separate controller from directive?)
My question is: Can someone please outline the steps I need to take in order to create this service? I'm having a bit of trouble, even after reading the documentation.
Here's what I have so far:
angular.module('myApp')
.factory('login', LoginService);
function LoginService() {
return {
showLoginPopup: function () {
// Need to show my login popup here
}
}
}
Is this correct so far? Where do I define my HTML for the login popup? Do I use the templateUrl attribute? Is there another recommended approach?
Thanks
Edit
For sake of example, let's assume my template is something very simple
<div class="login-popup">
<input type="text" id="Username" />
<input type="text" id="Password" />
<button>Submit</button>
</div>
I assume I'll need an ng-show attribute. What should this be linked to? Typically, I link it to a property of a controller... But since is initiated by a service, there is no controller object to it. What am I missing?
Related
Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />
I have a Google App Script addon. This addon is initiated by a click on a checkbox. I am trying to figure out the way I can redirect back once the add-on finishes installing.
view file
<div class="checkbox">
<label><input type="checkbox" required="true" onclick="window.location.assign('/path/to/addonscript/')" id="addon-checkbox">Enable Addon</label>
</div>
While the addon script Code.gs has some functions related to ad-on working. I am trying to implement a redirect mechanism to playframework view page.
A pretty close thing looks like the onInstall(e) trigger available here. Any pointers towards solutions?
Ok first of all lets look at your code:
<div class="checkbox">
<label><input type="checkbox" required="true" onclick="window.location.assign('/path/to/addonscript/')" id="addon-checkbox">Enable Addon</label>
</div>
It seems you want to redirect when the the checkbox is clicked. So, you could do this in two steps:
Add an event listener to the checkbox.
Send a redirect to the route, if a condition satisfies (such as something is true/false when the installation finishes).
You could have it something like this in your is code:
function onInstall(addOnElement) {
return true;
}
document.getElementById("checkBox").addEventListener('click', function(){
var addonElement ="whatever"; //or use docuement.getElementById if you need to get it from the page.
var isInstalled = onInstall(addonElement); //calling a function that returns true when the installation finishes.
if(installed){ //or simply use onInstall()
var redirectUrl = "/time/to/redirect";
window.location.replace(redirectUrl);
}
}
For the above code, you can remove the the onclick attribute; and add an id (e.g., id="checkBox").
Can a Genius help me out here?
I'm working on Spring MVC Web Project with jsp.
There is a parent page that shows list of subject,
and a popup page shows up when user clicks a subject to check its password.
popup page transfers the inserted password by a form to parent page and close itself, so parent page moves to other page that shows its content.
It works fine in Chrome, but not in Internet Explore.
In IE, popup disappears and another page comes up with its content.
Does any genius know how I prevent the third page, and just have first parent page moves to content page?
Here is my code.
Hope someone help me here....
//the form in popup page
<form action="readDetail.do" name="insertedPasswordForm" id="insertPasswordForm" role="form" method="post" target="parentPage">
<input type="password" id="typedPassword" name="typedPassword"/>
<input type="hidden" name="privateId" value="${privateId}"/>
</form>
<button onclick="insertPassword()" style="margin-left:200px;">확인</button>
//submit the form by this button with javascript
//javascript
function insertPassword(){
opener.name = "parentPage";
document.insertedPasswordForm.target = "parentPage";
document.insertedPasswordForm.submit();
window.close();
}
I just changed the way to transfer the values.
I used Modal, so there was no need to use pop up.
I'm using Django and I want my users to confirm that they really want something to be deleted. I'm considering pure Django solution (no Javascript confirmations).
According to what I think,I can create a new page containing "Yes" and "No" buttons. If user presses "Yes", my site will go on and delete the object from the database.
Is it the right way to do deletion without using Javascript? How would you implement the feature if you were me?
I would use Django's built in DeleteView, which will display a confirmation page for an HTTP GET request and perform deletion for an HTTP POST request.
The documentation gives this example:
from django.views.generic.edit import DeleteView
from django.core.urlresolvers import reverse_lazy
from myapp.models import Author
class AuthorDelete(DeleteView):
model = Author
success_url = reverse_lazy('author-list')
I'd recommend reading the documentation for the SingleObjectMixin which explains how to customise the way the view finds the object to delete (the default is to look for an URL keyword argument called pk), and for the TemplateResponseMixin which explains how to customise the template that is used (the default is 'myapp/author_check_delete.html').
This is just one of a number of class-based generic views that make basic operations (displaying a page for a single model instance, for a list of model instances, and handling editing, deletion etc.) very quick and easy to implement.
If you wanted to enhance this with JavaScript later you could always write some unobtrusive JS that detects links to the deletion confirmation page (by looking for a class, or a particular URL) and adds a click handler that pops up a confirmation dialog and then sends a POST request to the URL in the link's href attribute. You would also need to modify the view slightly to return a JSON object when request.is_ajax() is True, so that your JS would know if the deletion had succeeded or failed, which would probably involve overriding one of the methods inherited from the DeletionMixin.
That sounds fine. What I have done a couple of times is to create a confirmation template that can be used anywhere in the application:
{% extends 'base.html' %}
{% block content %}
<div class="confirmation-box">
<p>{{ message }}</p>
<div>
Cancel
<form action="{{ action_link }}" method="post">
<input type="hidden" name="next" value="{{ prev_link }}" />
<input type="submit" value="Send" />
</form>
</div>
</div>
{% endblock %}
You pass to it:
A confirmation message for the user (message)
The url to the page you are in (prev_link)
The url that should be called to perform the action (action_link)
If the user cancels the action, then she/he goes back to the original page.
If the user confirms, then the prev_link is passed as a hidden parameter, so the view can redirect the user to the original page after performing the action (although this is completely optional of course).
Which is pretty much what you propossed in your question.
This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});