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
Related
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
I have a delegated popup that is designed to display a modal on tablets and phones. Unfortunately, the modal appears to wait until the ajax call to #href is complete before it displays anything. From the docs it appears the modal should pop up with ajaxText filled in during the ajax call, but I see nothing until the popup suddenly appears. The call is predictably long enough (~5sec in development) that I know there isn't a chance that the loader isn't appearing for a split-second.
$('a.word').on(touchstart: touchWordPopup)
The following is in CoffeeScript, but follows convention from the official docs.
touchWordPopup: (event) ->
event.preventDefault()
// another function handles mouse hover popups,
// so let's disable that stuff.
$(this).off('mouseover mouseenter mouseleave')
$('#popup').jqm(
closeClass: 'close'
ajax: #href
ajaxText: '<h2>Loading...</h2>'
modal: true
).jqmShow()
HTML:
<html>
<head>...</head>
<body>
<div class='subscription'>
<a href="/words/foo" class='word'>Foo</a>
<!-- several more words... -->
</div>
<div id='popup' class='jqmWindow'></div>
</body>
</html>
I'm wondering whether delegation or CoffeeScript could be to blame, but I can't tell where the problem might be fixed.
The CoffeeScript is not to blame.
I've released jqModal 1.3.0, which immediately shows (displays) ajax enabled modals.
Documentation has been updated, and I've included an example (#5) to test for slower remote responses.
Because the equivalent of jqmShow() is now triggered immediately, if your ajax response includes elements that match closeClass, they will never attach. This is best corrected by patching jqModal and binding the event handler to the modal iteself, but for now you can use onLoad:
onLoad: function(hash){
var modal = hash.w;
$(hash.o.closeClass, modal).click(function(){
modal.jqmClose();
return false;
});
}
I have one form with text box, submit button, drop down list ..... I'm using <%Html.EnableClientValidation(); %> to validate all the elements in my form. But the probem is when I write <% using (Html.BeginForm()){ }%>, the validation works, But when I click on the submit button, it did nothing even though I complete all the condition of each elements. And the submit button is submitting while I use <form method="post"> instead of <% using (Html.BeginForm()){ }%>.
I use jquery tab in my view, so I have more than one submit button that do different task(I test the value of the submit button in my controller).
Could any one tell me, what did I wrong here?
Thanks in advanced.
I'd make sure that you wrap your entire form in the braces when using the <% using (Html.BeginForm()){ }%>. If your submit button is not contained within those braces, then it will not cause the form to post.
<% using(Html.BeginForm()) { %>
... form elements here ...
<% } %>
When you use this method, remove the other form tags on the page as this syntax is equivalent to writing:
<form>
... form elements here ...
</form>
I'm using jQtouch to build a page where the user can enter a kind of an ID and
get information (exam result) for this ID.
Because I take the results from the server, I used a form in the first page
with a text field and a submit button, and the action of this form send the user to the next page. Or at least, supposed to...
The problem is that also I'm being transferred to page with the results, and see the results properly, the Back button do nothing! BTW, in the address bar (above) I still see the name of the first page.
How can I go back to the "form" page? Thanks
<div class="current" id="byUserId">
<div class="toolbar">
<a class="back" id="goBack" > Back</a>
<h1> Exam Results</h1>
</div> ...
where the id="goBack" has a javascript:
$(function() {
$('#goBack').click(function() {
location.href = "enterId.jsp";
});
});
Using the regular back doesn;t work either:
<a class="back" href="#"> Back</a>
I now this is pretty late, but I had a similar frustrations and finally figured it out. The problem is that jQTouch intercepts all AJAX and form submit commands and safely send them itself. This isn't a problem except for when it's expecting some sort of callback, and there isn't one. In my case, I wanted to submit a form without a callback. To do this, look in the jqtouch.js library (around line 434) and comment out the following line:
if (href != '#') {
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data) {
**// var firstPage = insertPages(data, settings.animation);**
This basically just tells jQTouch to submit the AJAX call but do nothing afterwards (don't change div's, don't show any callbacks and don't do any animations). Hope this helps.
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;
}