I'm pretty new to Angular and having a form like this (about 15 Inputs and Selects):
<div id="configForm" data-ng-controller="seutpController">
<form name="configForm" data-ng-submit="update()" novalidate>
<input id="id" type="hidden" data-ng-model="config.id" />
<input id="company" type="text" data-ng-model="config.company" data-ng-blur="test()"/>
<input id="street" type="text" data-ng-model="config.street" data-ng-blur="test()" />
</form>
<input type="submit" />
</div>
What's already working:
Making an AJAX Call on Submit which updates the Database with all values from the config object. No big Deal.
What I'd like to do:
Making an AJAX Call (on Blur), but I'd like to send only the one key/value pair which was changed by the user like:
$http({
url: 'api/setConfig.php',
method: 'POST',
data: {'company': 'value'}
})
Do I have to send $event as function param like ng-blur="test($event)" and get the Elements Id and Value from there?
Thanks # all!
Edit
Is it a possible option using $watchCollection and watching on the $scope.config object?
I would say it's probably best to send the $event, since that would be the most extendable solution. I've done something similar in the past:
<input name="title" ng-blur="ctrl.onFieldChanged($event)" type="text" ng-model="ctrl.title"/>
In my method, I named the input the same name as the ng-model its bound to, just for convenience. In the controller, here's what I do:
this.onFieldChanged = function ($event) {
var data = {};
data[$event.currentTarget.name] = self[$event.currentTarget.name];
$http({
url: '...',
method: 'POST',
data: data
});
};
Hope this helps.
In the view
onblur=test(config.company,'name')
In the controller
$scope.test = function(value,name){
$http({
url: '...',
method: 'POST',
name: value
});
Hope it helps
Related
Play framework 2.4.x. A button is pressed on my home page that executes some code via Ajax, and returns its results beneath the button without loading a new page. The results wait for a user to input some text in a field and press "submit". Those results Look like this:
<li class="item">
<div>
<h3>Email: </h3>
<a>#email.tail.init</a>
<h3>Name: </h3>
<a>#name</a>
</div>
<div>
<h3>Linkedin: </h3>
<form class="linkedinForm" action="#routes.Application.createLinkedin" method="POST">
<input type="number" class="id" name="id" value="#id" readonly>
<input type="text" class="email" name="email" value="#email" />
<input type="text" class="emailsecondary" name="emailsecondary" value="" />
<input type="text" class="name" name="email" value="#name" />
<input type="text" class="linkedin" name="linkedin" value="" />
<input type="submit" value="submit" class="hideme"/>
</form>
</div>
<div>
<form action="#routes.Application.delete(id)" method="POST">
<input type="submit" value="delete" />
</form>
</div>
</li>
Along with some jquery that slides up a li after submission:
$(document).ready(function(){
$(".hideme").click(function(){
$(this).closest('li.item').slideUp();
});
});
However, since a form POST goes inside an Action that must a return an Ok(...) or Redirect(...) I can't get the page to not reload or redirect. Right now my Action looks like this (which doesn't compile):
newLinkedinForm.bindFromRequest.fold(
errors => {
Ok("didnt work" +errors)
},
linkedin => {
addLinkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
if (checkURL(linkedin.url)) {
linkedinParse ! Linkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
Ok(views.html.index)
}else{
Ok(views.html.index)
}
}
)
Is it possible to return Ok(...) without redirecting or reloading? If not how would you do a form POST while staying on the same page?
EDIT: Here is my attempt at handling form submission with jquery so far:
$(document).ready(function(){
$(".linkedinForm").submit(function( event ) {
var formData = {
'id' : $('input[name=id]').val(),
'name' : $('input[name=name]').val(),
'email' : $('input[name=email']).val(),
'emailsecondary' : $('input[name=emailsecondary]').val(),
'url' : $('input[name=url]').val()
};
jsRoutes.controllers.Application.createLinkedin.ajax({
type :'POST',
data : formData
})
.done(function(data) {
console.log(data);
});
.fail(function(data) {
console.log(data);
});
event.preventDefault();
};
});
This is an issue with the browser's behavior on form submission, not any of Play's doing. You can get around it by changing the behavior of the form when the user clicks submit.
You will first want to attach a listener to the form's submission. You can use jQuery for this. Then, in that handler, post the data yourself and call .preventDefault() on the event. Since your javascript is now in charge of the POST, you can process the data yourself and update your page's HTML rather than reloading the page.
What you need is use ajax to submit a form, check this: Submitting HTML form using Jquery AJAX
In your case, you can get the form object via var form = $(this), and then start a ajax with data from the form by form.serialize()
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert('ok');
}
});
In order to accomplish this task, i had to use play's javascriptRouting
This question's answer helped a lot.
I'm not experienced with jquery so writing that correctly was difficult. For those that find this, here is my final jquery that worked:
$(document).ready(function(){
$("div#results").on("click", ".hideme", function(event) {
var $form = $(this).closest("form");
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();
var email = $form.find("input[name='email']").val();
var emailsecondary = $form.find("input[name='emailsecondary']").val();
var url = $form.find("input[name='url']").val();
$.ajax(jsRoutes.controllers.Application.createLinkedin(id, name, email, emailsecondary, url))
.done(function(data) {
console.log(data);
$form.closest('li.item').slideUp()
})
.fail(function(data) {
console.log(data);
});
});
});
Note that my submit button was class="hideme", the div that gets filled with results from the DB was div#results and the forms were contained within li's that were class="item". So what this jquery is doing is attaching a listener to the static div that is always there:
<div id="results">
It waits for an element with class="hideme" to get clicked. When it gets clicked it grabs the data from the closest form element then sends that data to my controller via ajax. If the send is successful, it takes that form, looks for the closest li and does a .slideUp()
Hope this helps
I'm trying to convert simple forms such as:
<form action="/api.php", method="get">
... radios, checkboxes etc
<input type="submit" value="Submit">
</form>
To perform ajax submission instead of reloading the page when hitting submit using angular.
I plan on removing the submit button and replacing it with a regular button with ng-click="submit()". My submit function would look something like this:
$scope.submit = function() {
$http.get('/api', { params: ??? })
.success(...));
}
However the difficulty I have here is attaching the get params from my form inputs. I'm not sure how to reference them. Would I have to add ng-model to every single input element?
I have a lot of forms that require "converting" and I was wondering what would be the least intrusive way (least changes to markup) to do this? The reason is because a previous developer has left me with a soup of ugly html changing things will be costly.
Yes, its EASY.
html
<form action="/api.php" ng-submit="submit()">
<input type="text" name="name" ng-model="user.name">
<input type="submit" value="Submit">
</form>
js
$scope.submit = function() {
$scope.user = {};
$http({
method: 'GET',
url: '/api.php?name=' + $scope.user.name
}).
success(function(data, status, headers, config) {
console.log(JSON.stringify(data));
});
};
I want to improve my website and figured out a good way to do it was by submitting forms via AJAX. But, I have so many forms that it would be inpractical to do $('#formx').submit(). I was wondering if there was a way to do this automatically by making an universal markup like;
<form class="ajax_form" meta-submit="ajax/pagename.php">
<input type="text" name="inputx" value="x_value">
<input type="text" name="inputy" value="y_value">
</form>
And have this submit to ajax/pagename.php, where it automatically includes inputx and inputy?
This would not only save me a lot of time but also a lot of lines of code to be written.
First question so I hope it's not a stupid one :)
Something like this should work for all forms. It uses jQuery - is this available in your project? This specific code chunk hasn't been tested per say, but I use this method all the time. It is a wonderful time saver. Notice I changed meta-submit to data-submit so that its value can be fetched using $('.elemenet_class').data('submit');
HTML
<!-- NOTE: All Form items must have a unique 'name' attribute -->
<form action="javascript:void(0);" class="ajax_form" data-submit="ajax/pagename.php">
<input type="text" name="inputx" value="x_value">
<input type="text" name="inputy" value="y_value">
<input type="submit" value="go" />
</form>
JavaScript
$('.ajax_form').submit(function(e){
var path = $(this).attr('data-submit'); //Path to Action
var data = $(this).serialize(); //Form Data
$.post(path, {data:data}, function(obj){
});
return false;
})
PHP
//DEBUGGING CODE
//var_dump($_POST);
//die(null);
$data = $_POST['data'];
$inputx = $data['inputx'];
$inputy = $data['inputy'];
you can create ajax fot text boxes so that it can update to database whenever change the focus from it.
<form id="ajax_form1">
<fieldset>
<input type="text" id="inputx" value="x_value" />
<input type="text" id="inputy" value="y_value" />
</fieldset>
</form>
<script>
$(document).ready(function()
{
$("form#ajax_form1").find(":input").change(function()
{
var field_name=$(this).attr("id");
var field_val=$(this).val();
var params ={ param1:field_name, param2:field_val };
$.ajax({ url: "ajax/pagename.php",
dataType: "json",
data: params,
success: setResult
});
});
});
</script>
I have a Form with AntiforgeryToken() value in Mvc project. while submiting the form, it validated with their corresponding controller Post action ValidateAntiforgeryToken in MvC project.
It goes to confirmation page. In the confirmation having two button which having hidden Form , this will go to same Post action in previous above.I have added Html.Antiforgerytoken() in that two hidden forms. while clicking the button, we don't need to Form Post[page reload], instead of this Using Ajax post.
I have tried using Ajax post (using Antiforgerytoken) but it does not hit Post action. Shows 404 error.
Can you please suggest how to enable AntiforgryToken using Ajax post? For that what type of code handle and where do it add?
Form details:
<form method="post" action="">
#Html.AntiForgeryToken()
<input type="hidden" name="Name" value="#downloadInfo.Name" />
<input type="hidden" name="Company" value="#downloadInfo.Company" />
<input type="hidden" name="Email" value="#downloadInfo.Email" />
<input type="hidden" name="Phone" value="#downloadInfo.Phone" />
</form>
Ajax Post:
$.ajax({
url: url,
type: 'POST',
data: JSON.stringify(Formdatas),
contentType: 'application/json; charset=utf-8',
beforeSend: showLoadingGraphic(id),
success: onSuccessfulPost
});
If you've received a 404 it's not from the token, you had an invalid URL or method.
You are including your token in your ajax form post, so look by using the tool Fiddler what URL is being requested and fix that first.
I'm guessing your Ajax call using 'URL' is incorrect
Try generating your form as it should (using the Html.BeginForm helper):
#using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { id = "myForm" }))
{
#Html.AntiForgeryToken()
<input type="hidden" name="Name" value="#downloadInfo.Name" />
<input type="hidden" name="Company" value="#downloadInfo.Company" />
<input type="hidden" name="Email" value="#downloadInfo.Email" />
<input type="hidden" name="Phone" value="#downloadInfo.Phone" />
}
and then:
var myForm = $('#myForm');
$.ajax({
url: myForm.attr('action'),
type: myForm.attr('method'),
data: myForm.serialize(),
beforeSend: showLoadingGraphic(id),
success: onSuccessfulPost
});
Now the antiforgery token and the hidden fields will be properly sent to the server.
I have this simple submission form and I want to "ajaxify" it so the user isn't redirected to this page thanks.php after submission. I want the content from thanks.php to respond and show inside the div.
What jquery code will plug right into this to show the response.
<div ><form method="post" action="http://domain.com/thanks.php">
<input type="text" placeholder="Enter Email" name="email" id="email" >
<input type="submit" name="submit" value="Submit" ></form></div>
I would give 'form' and 'div' a class or id so it is not so generic, but this should work.
$("form").submit(function (){
$.ajax({
url: "http://{url}/thanks.php",
type: 'POST',
data: {email: $("#email").val()},
success: function ( data ) {
$("div").html(data);
}
});
return false;
});