I have the below angular link which is in an aspx page
<a ng-if="SFpage.entryPointType == 0 && SFpage.hideHeader == false" ng-click="moveToHold();" id="saveProgressBtn" class="btn btn-secondary ng-binding ng-scope">Save Progress</a>
How can I hide the above link in run time in browser? I have an option to insert code into this running aspx page but cannot access aspx page directly.
I tried using JS but it didn't work
<script type="text/javascript">
document.getElementById("saveProgressBtn").style.visibility = "hidden";
</script>
Try ng-if="SFpage.entryPointType == 0 && SFpage.hideHeader == false" you don't need to use & in angularjs directives.
Related
I have the following file setup:
In forms.py
class TableCheckInForm(forms.Form):
guest_count = forms.IntegerField(min_value =0)
In views.py:
def table_checkin_view(request):
if request.method == 'POST':
form = TableCheckInForm(request.POST)
if form.is_valid():
cd = form.cleaned_data
else:
form = TableCheckInForm()
return render(request,
'table/table_checkin.html', {'form': form})
In the template table_view.html
<script src="{% static 'js/table.js' %}"></script>
...
<button class="button checkin_button" onclick="openForm()">Check In</button>
...
In another template table_checkin.html
{% load static %}
<script src="{% static 'js/table.js' %}"></script>
<div id="table_checkin_form">
<h1>Check-In</h1>
<form class="form-container" method="post">
{{ form.as_p }}
{% csrf_token %}
<button type="submit" class="table_checkin" onclick="closeForm()">Check In</button>
</form>
</div>
In static Javascript file table.js
function openForm() {
document.getElementById("table_checkin_form").style.display = "block";
}
function closeForm() {
document.getElementById("table_checkin_form").style.display = "none";
}
In urls.py
urlpatterns = [
...
path('', views.table_view, name='table_view'),
path('1/checkin/', views.table_checkin_view, name='table_checkin_view'),
...
]
I am trying to implement a popup panel that contains the form above, similar to this example from W3Schools here.
Suppose I am currently on the template table_view.html. When I click the button checkin_button, I would like to have the form popup in a small panel that renders table_checkin.html. That means, in the background, I would like still see the template table_view.html.
But the form in my case always appear in a completely new page (since it has its own url).
Putting aside the css effect, is it possible to have one view containing a form being rendered as a popup on top of another view?
If you have other suggestions to implement this effect, that would be great. Thanks.
You don't need to open a separate URL to render the form.
To create the example you're referencing, the form is included as a div in what would be your table_view.html page. It's hidden by default, then the div is displayed when on clicks the Open Form button.
Sticking the code from the first button in the W3Schools example to the end of the script (before the closing body tag) into table_view.html should make their example run for you. Then replace the form and action info. Add CSS as needed.
I shifted all my page inline scripts to .js files. I have installed the optimisation package from nuget and have setup my css and javascript bundles.
Everything is working fine, until i set EnableOptimisation = true. That's when i start to see random errors in firebug console.
I tried going through all my inline scripts and cannot seem to see any issues with it.
For example, this is the login screen and these are the errors i am getting in the console:
This is the button where the ValidateLogin is called on client click:
<asp:LinkButton runat="server"
ID="cmdLogin" CssClass="btn btn-primary btn-lg" Text="Login"
OnClick="cmdLogin_Click" OnClientClick="return ValidateLogin();">
<span><i class="fa fa-fw fa-sign-in"></i></span>  Login
</asp:LinkButton>
This is the .js file where the ValidateLogin function is defined:
var results;
function ValidateLogin() {
results = 0;
var username = $('[data-input=username]').val();
var password = $('[data-input=password]').val();
checkEmpty(password, 'Password cannot be blank!');
checkEmpty(username, 'Username cannot be blank!');
if (results > 0) { return false; }
}
This is the part in the Login page where i reference the scripts:
<%:Scripts.Render("~/Script/core") %>
<%:Scripts.Render("~/Script/displayModal") %>
<%:Scripts.Render("~/Script/clientValidation") %>
<%:Scripts.Render("~/Script/loginValidation") %>
<%:Scripts.Render("~/Script/enquiryValidation") %>
<%:Scripts.Render("~/Script/loginSetup") %>
What could be the problem?
I am hating asp.net...
I have a really simple web site. In my master page I have a form runat="server".. I need it because in some page I have server side controls (login control for example, or my custom control)..
Now I have a simple page, with a really simple form. And in this page, I would like to use angularjs..
What I want is that (simply) when I submit this angularjs form, I arrive on the server just when the form is valid.
In this page I have tried different solution but no solution works!
The problem I think is that I have a (angularjs) form (in the page, this is not runat="server") that is nested in asp.netform (in the master page, runat="server")..
Here what I tried:
1) remove the asp.net form from the master page and add different asp.net form just where i need, but in some page i had more than one form with `runat="server" and this is not possible:
two form runat=server
2)remove the angularjs form, don't do a submit, but manage a simple ng-click event, but in this way I go on server always, even if form is not valid...
3)leave the angularjs form a do a submit, but in this way I obtain an "invalid postback error"... I have tired this solution but it does not work:
Invalid postback error
What I simply want is to use angularjs and go on server just when form is valid... How can I do? Thank you..
UPDATE:
My MasterPage is:
<body>
<form runat="server">
...
<asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
...
</form>
</body>
My Page is:
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-resource.min.js"></script>
<script type="text/javascript">
(function (angular) {
var public_area = angular.module("public-area", ['ngResource']);
public_area.factory("PresentaUnAmicoService", function ($resource) {
return {
piani_tariffari: $resource("/api/PresentaUnAmico/")
};
});
public_area.controller("PresentaUnAmicoController", function ($scope, PresentaUnAmicoService) {
$scope.sendInvitation = function ()
{
var invitation =
new PresentaUnAmicoService
.piani_tariffari($scope)
.$save();
}
});
})(angular);
</script>
<div data-ng-app="public-area" data-ng-controller="PresentaUnAmicoController">
<form name="presenta_amico-form" novalidate>
<table class="three_column" data-ng-class="{ 'ng-submitted' : submitted }">
... //Here there is my form
<button type="button" class="button link" id="btnSendInvitation" runat="server" data-ng-click="submitted=true" ng-submit="sendInvitation()">
<span><b>INVIA EMAIL</b></span> <img class="middle" src="/Styles/img/continue_24x24.png" />
</button>
...
</table>
</form>
</div>
</asp:Content>
I Know, It's not correct have a form inside another form.. but I am looking for a solution...
What you need in order to nest form is to use
eg:
<form runat="server">
<ng-form name="myFormName" ...>
//Your Code
</ng-form>
</form>
have a look here
I have a grid with edit option ,and on edit button click i need to redirect to an edit page .
the requirement is to get this edit page as a popup with background (prev page) greyed out.
i tried modal popup, but the controls are on a separate page .
i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .
Thanks
Rajat
i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...
plus i was looking for the answer of ur question and i came across this article where it says:
You May use Modal Popup Extender to open some part of the page as
Popup. But there we don't have any property to open other html or aspx
page in Popup window.
http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/
and also found people asking same question as you did and the response they got is here
use Iframe or user control
Is there a way to open another page using ModalPopup Extender?
and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...
hope this help ...
I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
Just an idea but what about using the jquery "contents()" function?
You could set an interval to look for an element within the iframe from the parent page.
(You're using .net so you could make it appear upon postback on the iframe's page).
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var watchForClose = setInterval(function () {
if ($('#testIframe').contents().find('#closeModal').length > 0) {
clearInterval(watchForClose);
/* call function to close modal here..*/
alert('Close modal');
};
}, 100);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
</div>
</form>
</body>
</html>
The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).
We can open an aspx as popup using IFrame as follows,
First take a button and provide onclick event as follows
<input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>
Next In the page provide a "Div" tag with id as follows
<div id="MyDialog">
</div>
Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME
function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}
The Four parameters are sent as follows URL,height,width,title
function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {
urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
url = urlBase + url;
$('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#MyDialog").dialog({
title: t,
modal: true,
autoOpen: true,
height: h,
width: w,
resizable: false,
position: ['right-10', 'top+30'],
closeOnEscape: false,
dialogClass: "alert"
});
}}
Google custom search code is provided as a form tag. However, Asp.net only allows a single form tag on a page. What is the best way to implement their code so you can include it on an aspx page (say as part of a Masterpage or navigation element).
You can have multiple form tags on an ASP.NET page. The limitation is on server-side (runat="server") form tags.
You can implement two form tags (or more) as long as only one has the runat="server" attribute and one is not contained in the other. Example:
<body>
<form action="http://www.google.com/cse" id="cse-search-box"> ... </form>
<form runat="server" id="aspNetform"> ... </form>
<body>
You may be able to have multiple form tags, but note that they cannot be nested. You'll run into all kinds of weirdness in that scenario (e.g., I've seen cases where the opening tag for the nested form apparently gets ignored and then its closing tag winds up closing the "parent" form out).
You'll need to remove the form tag and use javascript send the query. Have a look at
http://my6solutions.com/post/2009/04/19/Fixing-Google-Custom-Search-nested-form-tags-in-asp-net-pages.aspx
I have included the before and after code as well. So you can see what I've done to integrate it with blogengine .net.
You could use Javascript:
<input name="Query" type="text" class="searchField" id="Query" value="Search" size="15" onfocus="if(this.value == 'Search') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search'; }" onkeydown="var event = event || window.event; var key = event.which || event.keyCode; if(key==13) window.open('http://www.google.com/search?q=' + getElementById('Query').value ); " /><input name="" type="button" class="searchButton" value="go" onclick="window.open('http://www.google.com/search?q=' + getElementById('Query').value );" />