Angular.js form submit action missing? - html

I copied an old form to a new site, old form is working but the new form is not, I don't know what's missing.
The old form is at : http://nmjava.com/gate/Contact_Information.html
New form is at : http://gatecybertech.com/Contact_Information.html
I know HTML, but don't know Angular.js, I know when a submit button is pressed, the action in the form is called, but in my case it looks like this:
<form name="form" id="form" Method="post" class="form-horizontal" ng-hide="submitDone == true" ng-submit="onSubmit(form.$valid)" novalidate="novalidate">
After I looked into the code on that page, I can't find where "onSubmit(form.$valid)" is happening, I guess there must be some function that handles it, but where is it ?

Angular is an MVC framework, A.K.A Model, View, Controller. The view in this case is the UI (HTML), the model contains the business logic, for example state management or AJAX calls,
and the controller reacts to the view in order to get data from the model, to send back to the view.
there can be many views, controllers and models.
Angular parses the html for ng-* directives (as well as other, custom directives) and attempts to traverse the controller's scope in order to evaluate the property's value, in this case onSubmit(form.$valid).
In order to find the correct controller that contains your function,
you should consider the following:
Angular controllers are attached to a view using the ng-controller directive. An HTML element containing this directive will have its scope point to the controller specified in that directive's property value (ng-controller="mainCtrl"), and all child elements will have access to that scope as well.
Angular has scope hierarchy, meaning your code can be in any of the nested controllers which are parent elements of your ng-submit.
Angular also has a global scope, dubbed $rootScope, which can be accessed from within any part of your view, as well as controllers if the $rootScope dependency is injected into them.
So, in short, your function is in in one of the controllers. Using the above points you can narrow down the scope (no pun intended) of your search to one of the relevant controllers, usually found in a controllers folder in your application.

Related

dynamically change the asp.net core razor page form action

Is there any type of way to change the asp .net core 2.x form action in a razor page dynamically in javascript on the page?
Here is my scenario:
Two buttons on the page. Call them btn1 & btn2.
The code for btn1 needs to always be called.
The code for btn2 needs to only be called if btn2.
My assumption would be that I should either:
Set a variable that get's checked and see if the btn2 code needs to be called in the OnPost method.
I would think that I should do a little bit of refactoring to take my code out of the OnPost method and then put some javascript in to set the form properties appropriately.
Any thoughts on which is the better method to implement?
TIA for your suggestions,
Wally
The simplest approach is to just name your button:
<button name="btn2" type="submit">Click Me</button>
Then, after post, the key "btn2" will only be in the request if the user actually clicked that button. As a result, you can branch on that:
// do some stuff
if (Request.Form.ContainsKey("btn2"))
{
// do some other stuff
}

How to navigate from a presentational component using react-router?

I'm working on a personal project, it's a simple blog app using ReactJS. I have 1 screen for the entry list page, and 1 for the entry details page.
Now, I'm trying to follow the best practices, so I laid out my components as this:
Entry List Container: container component. Handles fetching entries retrieval and updating application state by dispatching redux actions.
Entry List: presentational component. Receives an Array of Entry objects and shows a list of them
Entry Details Container: container component. Handles more application state update logic, fetching, etc. Receives an Entry object
Entry Details: presentational component. Displays the entry.
Basically both containers renders their presentational counterpart.
Now, the problem is the navigation. In my App component I'm rendering a couple of Route components, one is rendering the EntryListContainer, and another one should render the EntryDetailContainer.
Problem is, how do I navigate from EntryList ?
My hierarchy is something like this:
EntryListContainer
EntryList
EntryRow -----> This contains a button to navigate.
EntryDetailsContainer
EntryPage
I suppose I could render a Link inside EntryRow, something like
<Link to={`${match.url}/{entry.id}`} />
But then I'd have to pass down the match object down from EntryListContainer to EntryList to `EntryRow, and it feels smelly.
How do I navigate properly?

Properly instantiating a template instance so that everything is present (model data, filters, event handlers)

I'm a bit of trouble instantiating a custom template, and making all the bindings work. My custom element which has to do this is quite similar to polymer/core-list, with a few differences. Like core-list, the parent adds the element invokes my custom element, and adds a template as its content, as seen here.
Unlike core-list, the element adds an id to this template, and creates a few templates which refer to that one, as seen here. Finally, when the time comes, these new templates are used to create a few elements and add them in the dom.
That's all fine and good, and mostly, it works correctly. The model data is used to fill the resulting element correctly, and the default filters work, thanks to the PolymerExpressions used as a bindingDelegate. However, event handlers do not seem to work.
I don't know whether the handler function can't be found in whatever scope is used, or something else is at play here. The only thing I currently know is that the on-tap attribute value is empty when I look at the polymer-icon-button through the web inspector. With a very similar usage using the core-list, the event handler works. The web inspector there shows the polymer expression as the value of the on-tap attribute. And both handlers are defined in the parent element which contains the invokations of core-list and my element, and the templates which are passed to the corresponding contents.

Kendo MVC non-unique id issues

Example: We have an employee list page, that consists of filter criteria form and employee list grid. One of the criteria you can filter by is manager. If the user wants to pick a manager to filter by, he uses the lookup control and popup window is opened, that also has filter criteria and employee list grid.
Now the problem is, that if the popup window is not an iframe, some of the popup elements will have same names and ids as the owner page. Duplicate ids cause Kendo UI to break as by default MVC wrapper generates script tags with $("#id").kendoThingie.
I have used iframe in the past, but content that does not fit in iframe window like long dropdown lists gets cut off and now IE11 especially causes various issues like https://connect.microsoft.com/IE/feedback/details/802251/script70-permission-denied-error-when-trying-to-access-old-document-from-reloaded-iframe.
What would be the best solution here? Generate unique ids for all elements on Razor pages? Modify partial page content that is retrieved by Ajax making ids unique? Something else?
It sounds like you are using a partial page as the content to a Kendo window. If this is the case then just provide your partial with a prefix like so at the top of the page.
#{
ViewData.TemplateInfo.HtmlFieldPrefix = "MyPrefix"
}
Now when you create a kendo control via the MVC wrapper like so
#(Html.Kendo().DropDownListFor(o => o.SomeProperty)
.....
)
The name attribute will be generated as "MyPrefix.SomeProperty" and the id attribute will be generated as "MyPrefix_SomeProperty". When accessing it within Jquery I like a shorter variable name so I usually do
string Prefix = ViewData.TemplateInfo.HtmlFieldPrefix
After setting the prefix. Then use
var val = $('##(Prefix)_SomeProperty').data('kendoDropDownList').value();
Note after this change. If you are posting a form from that partial you will need to add the following attribute to your model parameter on the controller method like so. So that binding happens correctly.
[HttpPost]
public ActionResult MyPartialModal([Bind(Prefix = "MyPrefix")] ModeViewModel model) {
.....
}
Now with all of that said. As long as you keep your prefixes different for each partial your control ids and names will be unique. To ensure this I usually make my prefix name be the same as my cshtml page that I am creating. You would just need to worry about JS function names. Also, note when closing a kendo window all DOM still exist. You just hide it. If this causes you the same issue you just need to be sure to clear the DOM of the modal on close. Similar to how BurnsBA mentioned. Note because of this is the reason why I try to make sure I use the least amount of kendo windows as possible and just reuse them via the refresh function pointing to a different URL.
$('#my-window').data('kendoWindow').refresh({
url: someUrlString
, data: {
someId: '#Model.MyId'
}
}).open().center();
Then on the modal page itself. When posting I do the following assuming nothing complicated needs to happen when posting.
var form = $('#my-form'); //Probably want this to be unique. What I do is provide a GUID on the view model
$('#my-window').data('kendoWindow').refresh({
url: form.attr('action')
, data: form.serialize()
, type: 'POST'
}).open().center();
We do something similar, and have the same problem. We have create/edit/delete popups that fetch data via ajax. Different viewmodels might reference the same model on the same page, and if you open multiple popups (create item type 1, create item type 2) then the second and subsequent popups can be broken (kendo ui error such that a dropdown is now just a plain textbox). Our solution is to delete all dom entries when the popup is closed so there are no conflicts between ids in different popups. We use bootstrap, so it looks like
<script type="text/javascript">
$('body').on(
// hook close even on bootstrap popup
'hidden.bs.modal', '.modal',
function () {
$(this).removeData('bs.modal');
$(this).find('.modal-content').html(''); // clear dom in popup
});
</script>
Note that our popup has some outer html elements and identifiers, but the content is all in
<div class="modal-content"> ... </div>

Connecting UI Elements in Google Apps Script (TabPanel - UiApp)

I've already asked a similar question, but I really can't figure out how to connect these elements together. I'm still not very good with Handlers, and I guess my question is:
How can I access UI Widgets (and their children) while outside of the doGet() function?
My use case is this: I have a list of projects/IDs. I have all the data I want based on the ID that will populate the Project Details tab of this application. I created 'unique' Buttons for each of these Projects, and threw them into a Grid. Now, I want to generate the Project Details (detailPanel) Widgets specifically for each Button if/when it is clicked.
I have the Project ID attached to each Button (uniquely) through a Hidden, but I can't seem to attach the Project Details tab (detailPanel) to the Button so that, when clicked, I can set the values for the TextBox, DateBox, ListBox, etc. Widgets of the detailPanel.
I think I'm missing something obvious about this. I want to avoid attaching each child Widget of the detailPanel as a callbackElement of the Button at all costs. There are around 40 elements (I've lost count), and it seems really inefficient. I'm almost sure that if I can add one Widget as a callback element, that I get access to all child Widgets. But I tried, and that doesn't seem to be the case.
Here is the link to the public UiApp, which shows the UI. And the sister Script Project (uneditable).
You dont need to add callback elements that you will write to, callback elements are only for reading their data. If the detailspanel id is dynamic have a hidden that has its id stored inside and pass it to the handler. from your handler you getelementbyid and set its data.