i use https://angular.io/guide/dynamic-form angular dynamic form. How is it possible to intercept the click event on every input field of the web page? I tried
<pre>
<df-question [question]="question" [form]="form" ng-
click="onContainerClick($event);"></df-question>
</pre>
Thank you
Instead of applying the click to the tag, just in your DynamicFormQuestionComponent (df-question) add click event on the input field (code taken from the docs)
HTML:
<input (click)="onContainerClick($event)" *ngSwitchCase="'textbox'"
[formControlName]="question.key"
[id]="question.key" [type]="question.type">
BTW, you were using ng-click which is not Angular, but AngularJS.
TS:
onContainerClick(event) {
console.log('clicked')
}
DEMO (check console) https://plnkr.co/edit/MbwuhWJrJOwuW23ZbzsC?p=preview
Related
I Have Created Dynamic FilePicker Control on Button Click Event of Jquery
but the button click event of this dynamic control does not open the filepicker.io popup where files get uploaded on filepicker...
Below is the html code by which i have created this control in jquery
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none"> <button type="button" class="uploadImg btn border-blue-btn">Pick File</button>
Filepicker javascript library construct widgets immediately after script is loaded. Using filepicker with any client side rendering library requires manually call
filepicker.constructWidget();
method on Dom element. You need to set element type as 'filepicker' etc.
Basic example:
var input = $('<input>').attr({
type: 'filepicker',
class:'picker',
}).appendTo(config.results);
filepicker.constructWidget(input);
And full working example:
http://jsfiddle.net/krystiangw/hfg6k8u2/
Did you include filepicker.js library?
Please try this example (link: https://jsfiddle.net/gy2gLvkw/)
<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script>
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none" onchange="alert(event.fpfile.url)">
I've added onchange="alert(event.fpfile.url)" to input element so that the url is displayed after upload.
Good Day
I am using an ASP.NET webform where I have wrapped the following button inside the form tags:
<form runat="server">
<button class="btn btn-primary" onclick="window.location='http://google.co.za';">Login</button>
</form>
ISSUE: The problem is that when clicking on the button, it just directs to the current page...does not redirect. However, when I remove the form tags, the button works. If I leave the form tags and I use an anchor tag to relocate, it works as well...It is just the button that is giving me issues.
Why is that?
I am using Twitter bootstrap as well(extra info..)
Thank you
Add type="button" attribute to your button tag. Without it button works as submit.
I've coded a form with various value-bindings and a knockout viewmodel behind it. The form is submitted by an AJAX post (triggered by a click-binding on a form button). I've noticed that the model isn't correctly updated BEFORE the post when I make changes in a textfield, leave the cursor in it and directly click the submit button.
I'm aware of the "afterkeydown" option of the value binding, but I prefer not to use it, since it would also trigger my validation on every key strike. Is there a way to force the model update programmatically in my ajax submit function?
Try using the submit binding instead of click:
<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
</div>
<script type="text/javascript">
var viewModel = {
doSomething : function(formElement) {
// ... now do something
}
};
</script>
The documentation page on submit:
http://knockoutjs.com/documentation/submit-binding.html
I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div
I am having a problem when submitting a form.
Here is the situation
<form ....>
<input type="text" id="ajax"> <img onclick="saveTextBox">
<input type="text">
<input type="text">
<input type="text">
</form>
In the above form when the img is click on I call an Ajax script to save the button.
That's OK.
What I need is when I am focus on textbox Ajax call ajaxscript (without click img).
I add an jQuery to manage key=13 and call the script BUT the problem is that run the Ajax script AND submits the form too.
How can I override the form sumit when I am focus on Ajax text box and hit enter key?
First. Scrap the image and replace it with a real submit button.
Then. Handle all the JS interaction in the onsubmit event for the form element. Cancel the default action, so that the JS runs and the normal form submission doesn't (when JS is available).
In short: be pragmatic, build on something that works, and intercept events at the right moment. Don't ignore the primary purpose of an element and create an entirely new way to trigger something it does already.
Return false.
Sample event function that will stop the submit event:
function submitHandler() {
// do ajax stuff here
return false;
}