LumX button (lx-button) won't work - javascript

I'm writing a web application using HTML, Javascript and AngularJS. For my UI I'm experimenting with LumX. I tried Angular Material but it was way too slow on IE.
However, I'm having difficulty simply submitting a form using LumX. The reason is I can't get the button to work. The LumX site clearly states:
"lx-button is a directive that create a link element if you specify a href or ng-href attribute
Otherwise, it creates a button element."
Here's what I have:
<lx-button id="add_button">Button</lx-button>
Then, in my functions.js file I have:
document.getElementById('add_button').addEventListener('click', add);
The add( ) function simply adds that item to a list. The function is working, because the program works as intended with a normal button. It's just when I use the lx-button tag that it stops working.
Thanks.

Related

Dynamics365 list view: where is custom javascript located?

I need to call custom javascript from custom dialog on the list view.
On list view user click on button (on ribbon). Button starts javascript. Custom javascript create the div dialog with some choices. Every choice has onclick javascript action. But where is my custom javascript code?
In the similar scenario, on form view I can find this cusom javascript as
document.getElementById("customScriptsFrame").contentWindow.<my_func>()
But where is similar location for custom javascript in list view?
If I understand your question,
You already have your html div dialog created in a webresource.
Do you already have Ribbon button in place? and Javascript behind it?
If not this is what you need.
There is an plugin in XRMToolBox called Ribbon Workbench. Use it, and you can add new button on list view.
On that button command you can add Javascript and function which will be called.
Now inside your javascript you can call your html code or you can directly call another webresource as well.
Right question was "where is stored the custom javascript on listview page". And answer is simple: in iframe named "contentIFrame0".
So, right onclick value is "document.getElementById('contentIFrame0').contentWindow.my_func();".

how to scroll top of the page automatically when page is submitted

Am working with angularjs in MVC architecture with thymeleaf. i want to push my page automatically to top when page is submitted or page is refreshed automatically.
I came to know that using below function it is achievable. But where exactly i have to write it ( have to write in script file or everypages of thymeleaf HTML page ?)and how to use in thymeleaf pages.
If i write in script file then how to and where to use that id in thymeleaf HTML pages?
$window.scrollTo(0, angular.element('put here your element').offsetTop);
Look into $anchorScroll I think it will provide what you're looking for.
It can scroll to a named input or the latest value of $location.hash()
As an example, here would be your method to submit the page:
submitForm() {
doStuff(); // Shortening what you would do for submitting;
this._$anchorScroll('#named-element-id');
}
Another example would be using the $location.hash() if you had set it elsewhere in your controller. Then you could call $anchorScroll() directly without an argument.

Trigger not working on newly created link

I am using the fasw javascript library - http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/ - to do page transitions in a webapp. It can only appear to be triggered via a data attribute on a link.
$('body').prepend('<a class="decider_link_trigger" href="#">[Trigger]</a>');
$('.decider_link_trigger').attr('data-ftrans', 'flip');
$('.decider_link_trigger').attr('href', selected.result);
$('.decider_link_trigger').trigger('click');
The above code adds such a link to the page with the provided data-ftrans attribute and is even clickable manually, but I can't figure out how to submit the link with jQuery (or event Javascript).
I cannot do a manual window.location.href = selected.result; as this will not use the transition library.
Thanks!

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

Javascript not trigering and alert function is working

I have Asp.net web application given by client with UI layer and its speaking with webservices. I am creating another asp.net web application copy pasted all the HTML,CSS and images other files.
ERROR :
I have Master page and child page.
In child pages I have lot of JavaScript for validating the text box.
Javascript like:
$(document).ready
rules and messages)
they getting form tag from master for binding.
But when I click the submit button, it's not validation the control
and I have placed alert box inside the JavaScript and its working.
Kindly help here...
alert box is working..and validation is not work in same JavaScript.
How to check the JavaScript is correctly bound with form tag?
Same problem appears in another set of master and Child page. I corrected the form tag. Like master page form tag should be in child page. It's validating properly.
alert outside the $(document).ready to check weather its coming inside the script also can you post the code for futhe

Categories