Laravel 5.4 - How to make #section yield before javascript loads - javascript

I'm using javascript to dynamically create a form that takes answers from a chat and adds it to a form. The form exists in a separate blade file register.blade.php. I yielded the form in the home page (index.blade.php) but the #section('registration-form') yields to the page before the js is read. For that reason, the answers from the chat never get input into the form.
register.blade.php holds the (custom) form #section('registration-form'). From there I'd like to create a route::get('/index', 'CustomAuthController') in routes/web.php to store the forms data in my database. Any ideas on how to make this work?
Very new to Laravel. Using Laravel 5.4.
THE CODE:
layouts/app.blade.php
#include('includes.head')
<body>
#include('includes.navbar')
<div class="container">
#yield('content')
</div>
#include('includes.footer')
</body>
index.blade.php
#extends('layouts.app')
#section('content')
<main>
<section class="row" >
<!------ a bunch of content here ----------->
<!----- form yielded here -------->
#yield('registration-form')
<!--- form end ----->
<!------ more content -------->
</section>
</main>
#endsection
register.blade.php
#section('registration-form')
<div class="padding-32" id="signup-two">
<h4>Review and submit your information</h4>
<form method="POST" action="{{ route('signup') }}">
{{ csrf_field() }}
<div class="form-group" id="fname">
<label></label>
<input name="fname"/>
</div>
<div class="form-group" id="email">
<label></label>
<input name="email"/>
</div>
<div class="form-group" id="password">
<label></label>
<input name="password"/>
</div>
<div class="form-group" id="BMI">
<label></label>
<input name="BMI"/>
</div>
<div class="form-group" id="height">
<label></label>
<input name="height"/>
</div>
<div class="form-group" id="weight">
<label></label>
<input name="weight"/>
</div>
</form>
#endsection
I tried yielding #section(registration-form) in app.blade.php the form still did not load. I also couldn't figure out how to create a route and a controller for this. The code looked like this:
layouts/app.blade.php
#include('includes.head')
<body>
#include('includes.navbar')
<div class="container">
#yield('content')
#yield('registration-form')
</div>
#include('includes.footer')
</body>
</html>
routes/web.php
Route::get('/index', function () {
return view('registration-form', [
'fname' => 'fname',
'BMI' => 'BMI',
'height' => 'height',
'weight' => 'weight'
]);
});

Javascript is usually loaded when dom is ready.
But you want to load script before that specific DOM ( #yield(form) ) element is ready.
So you have to do something like "laravel load view using ajax", there are already some practical example around. How can I return a view from an AJAX call in Laravel 5?
You want to create a router for Ajax call, controller function to return the partial view (hence #section('form')). Call the ajax after the necessary code is ready in your js. Then Append the view to desire location. There are not easy way around.
You might want to reconsider you design for whatever you are trying to accomplish right now.
For things like data manipulation, calculation, etc. If they can be done and validated by backend, simply send them to the backend. One common mistake is Frontend is trying to handle the Backend tasks.

Related

Combobox losing properties when in form

I am using the combobox from this link: http://jqueryui.com/autocomplete/#combobox. When using this code on a normal page on my front-end, it works perfectly.
But when I try to integrate it into a form, it loses its properties, so it works only as a select, but I can't type anything.
The code looks somewhat like this:
<form>
...
<div style="float:left;margin-left:10px;">
<label for="nextdev1" style="color:white">Next Hop</label>
<div class="ui-widget">
<!-- rest of code here -->
</div>
</div>
</form>

Dynamically adding Spring MVC JSP form:input using JS giving binding errors

I have a code block where i am dynamically adding
Below is the code that i am using -
<form:form role="form" method="post" id="addForm" action="/data/SomeAction" modelAttribute="someModel">
<div id="rowCabin1">
<div id="rowCabinData1">
<div class="row" id="cabinRow1">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="form-group">
<form:input path="test" placeholder="Name" class="form-control" style="width:100%" />
</div>
</div>
</div>
</div>
</div>
</form:form>
Below is the javascript.
$().ready(function() {
var i=2;
$("#addRowCabin").click(function(){
$('#rowCabin1').append('<div id="rowCabinData'+i+'"><div class="row" id="cabinRow1"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="form-group"><form:input path="test" placeholder="Name" class="form-control" style="width:100%" /></div></div></div></div>');
i++;
});
$("#delRowCabin").click(function(){
if(i>2){
$("#rowCabinData"+(i-1)).remove();
i--;
}
});
});
Now when trying to load the page -
ERROR: org.springframework.web.servlet.tags.form.InputTag - Neither BindingResult nor plain target object for bean name 'test' available as request attribute
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'test' available as request attribute
at org.springframework.web.servlet.support.BindStatus.<init>(BindStatus.java:144)
My gut feel was that it is because of the form:input not being part of the form:form tag itself. but since i am adding in the form tag, that should not be the case.
Please suggest.
AJ
<form:input> is jsp tag which is evaluated during request processing on server. You cannot add it with javascript. If your javascript was part of the JSP then this is why it failed on load-time.
Instead look at generated HTML how existing input id and name look like and append raw HTML input tag.
Or better use c:forEach around field collection in JSP and add new dynamic field by AJAX request.
Nice article about binding a collection is here: http://viralpatel.net/blogs/spring-mvc-multi-row-submit-java-list/

AngularJS : form validation not working on hidden input

I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.

How to create hidden 'payment_method_nonce' input by braintree.js?

I configure braintree.js like this:
braintree.setup(
brainTreeClientToken= 'token_from_server'
'dropin', {
container: 'brainTreeDropin',
form: 'checkout'
});
</script>
As i understand from the documentation of developers.braintree, you need to send a request param named 'payment_method_nonce' to your server, but it is not present in request. I don't see any js fault in browser console by the way.
Here is my form:
<form id="checkout" method="post"
th:action="....">
<div id="brainTreeDropin"></div>
<div >
<div class="form-group">
<label for="cardNumber">Credit Card Number</label>
<input data-braintree-name="number" ..other details.. "/>
</div>
<div class="form-group">
<label for="cardHolder">Name on Card</label>
<input data-braintree-name="cardholder_name" ..other details.. />
</div>
</div>
<div >
<div class="form-group">
<label for="cvc">Security Code(CVC)</label>
<input data-braintree-name="cvv" ..other details.. />
</div>
<div class="form-group">
<label for="expDate">Expiration Date</label>
<input data-braintree-name="expiration_date" ..other details.. />
</div>
</div>
</form>
Any idea of what's my fault?
I work at Braintree on the SDK Team.
The Drop-In integration requires a button or type=["submit"] element to be present within the form. I tried out your integration and was able to get a payment_method_nonce value sent to my server by adding in a <button>Pay</button> element. Try that out to see if that fixes your integration.
Also, just out of curiosity, is it your intent to have 2 credit card input methods inside of the same form? The Drop-In form contains the necessary fields for Credit Cards and you shouldn't need the data-braintree-name annotated inputs.

Persisting Form data while adding additional copies of a <div> to the form

I am working on SpringMVC Webapp. I have a view which consists of a dynamic form. The dynamic elements of the form are shown in the below:
Now, the current scenario is:
I pass the variable ${worksiteCount} from my controller to the view (stored in my portlet session - defaulted to 1).
The form submit consists of a #ActionMapping that handles form data at the backend.
I have another Button in my page which allows the user to add additional engineering worksites if necessary - Additional Worksite #1 etc).
The click triggers a #RequestMapping that updates "worksiteCount" and returns the view with the additional form fields.
The issue with this is: Whatever data I have filled in the form gets deleted on click of this request.
How do I persist this data within the session? For example, should I use an Ajax Script (using DOJO/Vanilla JS preferably) to increase the variable {worksiteCount} asynchronously on the jsp side?
If so, how do I do it without refreshing the view?
I am a beginner in Ajax-Dojo(like the dojo.xhrGet/post), Spring framework. Kindly help.
<c:if test="${worksiteCount>1}">
<c:set var="i" value="0"/>
<c:forEach var="worksiteAddresses" items="${worksiteAddresses}">
<c:set var="i" value="${i+1}"/>
<c:if test="${worksiteCount>1}">
<div class="row">
<h2 id="worksiteAddress${i}" name="worksiteAddress${i}">Additional Worksite<span>${i}</span></h2>
</div>
</c:if>
<div class="row">
<div id="f-addr1" class="field">
<label>Address1<span><tag:requiredIcon/> </span></label>
<input class="" type="text" value="${worksiteAddresses.companyAddressLine1}" id="addressLine1${i}" name="addressLine1${i}" onblur="validateControl('addressLine1${i}');"/>
</div>
<div id="f-addr2" class="field">
<label>Address2</label>
<input class="" type="text" value="${worksiteAddresses.companyAddressLine2}" id="addressLine2${i}" name="addressLine2${i}" />
</div>
<br class="clear" />
</div>
<div class="row">
<div id="f-city" class="field">
<label>City<span><tag:requiredIcon/> </span></label>
<input class="" type="text" name="city${i}" id="city${i}" value="${worksiteAddresses.companyCity}" onblur="validateControl('city${i}');" />
</div>
<div id="f-zip" class="field">
<label>Zip<span><tag:requiredIcon/> </span></label>
<input class="" type="text" name="zip${i}" id="zip${i}" value="${worksiteAddresses.Zipcode}" onblur="validateZipControl('zip${i}',${i});" />
</div>
<br class="clear" />
</div>
</c:forEach>
</c:if>
If I am understanding this correctly and the ONLY effect of hitting the button on the page that updates the form with new fields for Additional Worksites there are several ways to handle that. The simplest might be:
1) Have the fields already ON the page, but hidden and use JS to make them visible. This way the existing form data is already preserved.
If some data needs to be pulled from the server side using existing data and changes somewhat the nature of the data already ON the form, then that really is a Submit and should be handled by the controller as such.
2) Either you can return all the original data modified however with new fields as well, or use AJAX to just get the NEW data in combination with answer #1.

Categories

Resources