We Keep Coding

Laravel edit data with using id in the same page

I want to list datas when I click tasks on the right side as edit section.
I cannot put the value of the clicked data into the input. And if it displays, it always shows the last index of array.
<a href="javascript:void(0)"
id="show-task"
onclick="showDiv('edittaskk')"
data-url="{{ route('as.show', $as->id) }}"><span class="task-title">{{$as->title}}</span></a>
Route::get('as/{id}', [HomeController::class, 'show'])->name('as.show');
<script type="text/javascript">
$(document).ready(function () {
/* When click show user */
$('body').on('click', '#show-task', function () {
var taskURL = $(this).data('url');
$.get(taskURL, function (data) {
$('#edittask').modal('show');
$('#as-id').text(data.id);
$('#as-title').text(data.title);
$('#as-duedate').text(data.duedate);
$('#as-status').text(data.status);
$('#as-prio').text(data.prio);
})
});
});
</script>
<div class="task-list-desc d-flex justify-content-between align-items-center">
<form action="{{route('edittask',['id'=>$as->id])}}" method="POST">
#csrf
<div>
<div class="modal-body">
<p><strong>Title:</strong> <span id="as-title"></span><div class="wrap-input100 validate-input m-b-16">
<input class="input100" name="title[]" value="{{$as['title']}}" type="text">
</div>
<p><strong>DueDate:</strong> <span id="as-duedate"></span><div class="wrap-input100 validate-input m-b-16">
<input class="input100" name="duedate" value="{{$as->duedate}}" type="date">

In a popup, how do I add a file to the ajax submit and stay in the popup for the results of the backend?

I found setting the title a bit awkward, it's complicated to exaplain in 1 sentence.. Some of our pages use popups where the user can fill in fields and then send. This is based on some Kallyas stuff and works fine with just text fields. After submitting, user staus on the same page, the form stays open and in it the message appears that the form has been sent (or not). There is also recaptcha handling in it.
Now I need to give the possibility to upload a file and this is where I am stuck. There is a .js file that does the handling. It picks up the form and does a ajax submit. I can see the form field of my input type="file" here, but with a fakepath/empty. If, in this javascript I try to append the file to the form I can submit, but the the backend says the form field is not there.
First, let me share the code.
The form :
<!-- Application form pop-up element content -->
<div id="application_panel" class="mfp-hide contact-popup">
<div class="contact-popup-panel">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<!-- Application form pop-up element -->
<div class="applicationForm pop-up-form" style="padding:50px;">
<!-- Title -->
<div id="jatitlewrapper">
<h3 class="m_title m_title_ext text-custom contact-popup-title c_title">
Some title
</h3>
<h4 class="tbk__subtitle fw-thin dark">
</h4>
</div>
<form id="appform" action="#request.projectname#/scripts/ajax/save/processform.cfm" method="post" class="contact_form row mt-40" enctype="multipart/form-data">
<div id="jafldwrapper">
<div class="col-sm-6 kl-fancy-form">
<input type="text" name="firstname" id="cf_firstname-pop-up" class="form-control" placeholder="Vul hier je voornaam in" value="" tabindex="1" required>
<label class="control-label">
VOORNAAM
</label>
</div>
<div class="col-sm-6 kl-fancy-form">
<input type="text" name="lastname" id="cf_lastname-pop-up" class="form-control" placeholder="Type je achternaam in" value="" tabindex="1" required>
<label class="control-label">
ACHTERNAAM
</label>
</div>
<div class="col-sm-12 kl-fancy-form">
<input type="text" name="place" id="cf_place-pop-up" class="form-control" placeholder="Voeg een onderwerp toe" value="" tabindex="1" required maxlength="78">
<label class="control-label">
WOONPLAATS
</label>
</div>
<div class="col-sm-12">
<label class="label_upl">
UPLOAD FILE
</label>
<input id="resume" style="padding-bottom:15px;" type="file" name="resume" id="cf_subject-pop-up" class="" placeholder="" value="" tabindex="1">
</div>
<cfif Application.isProductionURL>
<div class="col-sm-12" style="margin-left:15px;">
<div class="g-recaptcha" data-sitekey="somesitekey"></div>
</div>
<div class="col-sm-6">
<!-- Contact form send button -->
<button id="submitbtn" class="btn btn-fullcolor" type="submit" onClick="$('.g-recaptcha-response').attr('name','g_recaptcha_response');">
Send
</button>
</div>
<cfelse>
<div class="col-sm-6">
<!-- Contact form send button -->
<button id="submitbtn" class="btn btn-fullcolor" type="submit">
Send
</button>
</div>
</cfif>
<div class="col-sm-6" style="text-align:right;">
<button class="btn btn-fullcolor" type="button" onClick="closePopup();">
Cancel
</button>
</div>
</div>
<input type="hidden" name="fjobuuid" id="fjobuuid" value="">
</form>
</div>
<!--/ Application form pop-up element -->
</div>
<!--/ col-md-12 col-sm-12 -->
</div>
<!--/ .row -->
</div>
<!--/ .container -->
</div>
<!--/ .contact-popup-panel -->
<button title="Sluiten (Esc)" type="button" class="mfp-close">×</button>
</div>
<!--/ Application form pop-up element content -->
Some javascript for the popup to show :
window.onload = function() {
$('.abutton').magnificPopup({
closeBtnInside: true,
type: 'inline',
preloader: false
});
}
The standard js that handles the sumbit and works with all text fields on the form :
if(typeof($('.applicationForm form, .applicationForm.pop-up-form form, .contact_form form')) != 'undefined') {
$.each($('.applicationForm form, .applicationForm.pop-up-form form, .contact_form form'), function(index, el) {
var cform = $(el),
cResponse = $('<div class="cf_response col-sm-12"></div>');
cform.prepend(cResponse);
cform.h5Validate();
cform.submit(function(e) {
$('#g-recaptcha-response').attr('name','g_recaptcha_response');
e.preventDefault();
if(cform.h5Validate('allValid')) {
cResponse.hide();
$.post(
$(this).attr('action'),
cform.serialize(),
function(data){
console.log(data);
cResponse.html(data).fadeIn('fast');
if(data.match('success') != null) {
cform.get(0).reset();
}
}
); // end post
}
return false;
});
});
}
The backend does some handling of the fields and then produces a message, which is then visible in the popup :
<cfoutput><div class="alert alert-success alert-dismissible" role="alert"><p>Message sent, thank you</p></div></cfoutput>
or a message with class alert-danger if something went wrong.
Now I tried adding the file field 'resume' to the form by adding a cform.append, right after the cform.submit :
var files = $("#resume")[0].files;
for (var i = 0; i < files.length; i++) {
cform.append(files[i].name, files[i]);
}
It does loop and seems to append the file.
But the backend says form.resume is not there.
I tried writing my own submit :
$("#submitbtn").on("click", function(e) {
var form = $("#appform");
var params = form.serializeArray();
var files = $("#resume")[0].files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
$(params).each(function (index, element) {
formData.append(element.name, element.value);
});
$.ajax({
type: "POST",
url: $(form).prop("action"),
data: formData,
processData: false,
error : function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);}
,
success : function(data){
console.log(data);
}
});
})
Then the backend has all fields needed, including the actual file. But then I don't know how to integrate staying on the same url with the popup still in place and the message from the backend in the right place.
Then I tried changing the button type from sumbit to button, but then it won't let me send the file with the ajax call.
$.ajax({
type: "POST",
url: 'proctname//scripts/ajax/save/processform.cfm',
data: formData,
processData: false,
contentType: false,
error : function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);}
,
success : function(data){
var obj = $.parseJSON( data );
console.log(data);
}
});
Giving form field 'resume' is undefined. Apparently it needs to be a form submit.
Can I add the file field 'resume' to the standard code after the cform.submit, keep page and popup open, have the message handling etetc and if so, how?

Link in keyup function is not working

Here is screen shot of my problemI am using codeigniter and ajax.When keyup function is call on search bar then data is shown in suggestion box but when i click on link which is shown on suggestion box then this click is not working.No error of any script file.
Here is code of my view file:
<div class="container-fluid my_searchbar">
<div class="container my_searchbar_container">
<div class="nav nav-justified navbar-search navbar-nav">
<form class="search navbar-search" method="post" action="index.html" >
<div class="input-group">
<input type="text" name="search_area" id="search_area" placeholder="Search Area" class="form-control input-lg">
<div class="input-group-btn">
</div>
<input type="text" name="search_pro" id="search_pro" placeholder="Search Professional Category" class="form-control input-lg">
<ul id="show_search_pro" class="results" >
</ul>
<div class="input-group-btn">
Search
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my ajax code in view file.
$('#search_pro').keyup(function(){
// alert($(this).val());
var location_field = $('#search_area');
var search_cal_field = $(this);
$.ajax({
type: 'POST',
url: 'http://localhost/JustClick/User/search_professional',
cache : false,
dataType : 'html',
data :{location_id:location_field.val(), category_id:search_cal_field.val()},
success:function(data)
{
$('#show_search_pro').html(data);
}
});
});
Here is code of my controller through using ajax i get data on view page:
public function search_professional()
{
if($this->input->is_ajax_request())
{
$professional = $this->UserModel->search_professional($this->input->post('location_id',true),$this->input->post('category_id',true));
foreach ($professional as $row)
{
echo '
<li>
<a class="s_pro" href="'.base_url('Professional/show_professional_detail/'.$row->pro_id).'">'.$row->firstname.' '.$row->lastname.'<br /><span>Description...</span></a></li>';
}
}
else
{
show_404();
}
}
Help me how i solve this problem.

Send vote after click radio button

On my website I have a form that allows you to send select a vote and after that the choice of the vote allows you to send (optional) a comment or photo or audio, this button allows you to send everything.
The form of the vote appears after searching for a specific location.
Now I would like to change the functionality, I wish that after clicking on the vote is saved directly right away, and afterwards appear as always the ability to send comments and photos.
This is my form:
<script type="text/javascript">
$(".sinButtonVote > img").click(function(e){
$(this).parents("div.sinWebQuestion").addClass("voteChosen");
$("#sendVoteButton").removeClass("hidden");
$("#sendOpinion").removeClass("hidden");
});
$("div.sinBottomVoteButton").click(function(e){
$("#sendVoteButton").removeClass("hidden");
});
function afterOpinionSent() {
$("#wsCompany").val("Select Location").change();
}
</script>
<form th:action="#{/opinion/vote}"
enctype="multipart/form-data" method="post"
data-successHandler="afterOpinionSent"
class="s_ajaxForm">
<input type="hidden" name="webLocationId" th:value="${webLocation.id}" th:if="${webLocation!=null}"/>
<div th:each="webQuestion : ${webQuestions}" class="row WebQuestion">
<div class="col-sm-6">
<div th:text="${webQuestion.question}" class="sinButtonVoteLabel">Question?</div>
</div>
<div class="col-sm-6">
<label th:each="vote : ${ {3, 2, 1, 0} }" class="radio-inline ButtonVote">
<input type="radio" th:name="|questionVote[${webQuestion.id}]|" th:value="${vote}"/>
<img yada:src="#{|/res/img/question/${webQuestion.iconName+vote}.png|}" th:alt-title="|Voto ${vote}|">
</label>
</div>
</div>
<div style="text-align: center; margin-top: 15px;" id="sendOpinion" class="s_ajaxForm hidden">
<div style="float: left; width: 35%;" class="BottomVoteButton">
<label class="btn btn-default" data-toggle="collapse" data-target="#voteComment">
<img yada:src="#{/res/img/question/comment.png}" title="Comment">
<span>Opinion</span>
</label>
</div>
<div style="float: left; width: 30%;" class="BottomVoteButton">
<label class="btn btn-default btn-file">
<img yada:src="#{/res/img/question/photo.png}" height="35px" title="Photo"><br />
<span>Photo</span>
<input type="file" accept="image/*" capture="camera" class="hidden" name="photo">
</label>
</div>
<div style="overflow: hidden; width: auto;" class="BottomVoteButton">
<label class="btn btn-default btn-file">
<img yada:src="#{/res/img/question/Audio.png}" title="Audio">
<span>Audio</span>
<input type="file" accept="audio/*" capture="microphone" class="hidden" name="audio">
</label>
</div>
<div id="voteComment" class="collapse" th:if="${webLocation!=null}">
<div class="form-group">
<textarea class="form-control" rows="5" maxlength="1024" name="comment" placeholder="Comment..."></textarea>
</div>
</div>
</div>
<button id="sendVoteButton" type="submit" class="s_ajaxForm btn btn-default btn-block hidden">Send</button>
</form>
And this is my opinionController.java:
#RequestMapping("/vote") // Ajax
public String voto(FormOpinioni formOpinioni, HttpServletRequest request, HttpServletResponse response, Model model) {
WebLocation webLocation = null;
if (formOpinioni.getWebLocationId() != null) {
webLocation = webLocationRepository.findOne(formOpinioni.getWebLocationId());
}
if (webLocation==null) {
return "/yada/ajaxError";
}
YadaBrowserId yadaBrowserId = yadaBrowserIdDao.ensureYadaBrowserId(COOKIE_UUIDNAME, COOKIE_EXPIRATIONSEC, request, response);
// Save WebResult
String ipAddress = request.getRemoteAddr();
for (Map.Entry<Long,String> idAndVote : formOpinioni.getQuestionVote().entrySet()) {
long questionId = idAndVote.getKey();
int vote = Integer.parseInt(idAndVote.getValue());
boolean stored = webResultDao.storeResult(questionId, vote, yadaBrowserId, ipAddress);
}
// Save il comment
String commento = formOpinioni.getCommento();
if (!StringUtils.isBlank(comment) && webLocation.isEnabled()) {
boolean stored = webAttachmentDao.storeAttachment(WebAttachment.TYPE_COMMENT, comment, ipAddress, webLocation, yadaBrowserId);
}
// Save photo
saveUpload(WebAttachment.TYPE_IMAGE, formOpinioni.getPhoto(), webLocation, yadaBrowserId, ipAddress, response, model);
// Save audio
saveUpload(WebAttachment.TYPE_AUDIO, formOpinioni.getAudio(), webLocation, yadaBrowserId, ipAddress, response, model);
return thanksForOpinion("Registered opiniono", model);
}
private String thanksForOpinion(String title, Model model) {
return YadaNotify.instance(model)
.yadaOk().yadaAutoclose(2000)
.yadaTitle(title)
.yadaMessage("<p style='text-align:center; min-height:60px;'>Thanks You for opinion</p>")
.yadaSave();
}
How do I change the code?

You have to make following changes
<script th:inline="javascript">
$(".sinButtonVote > img").click(function(e){
$(this).parents("div.sinWebQuestion").addClass("voteChosen");
$("#sendVoteButton").removeClass("hidden");
$("#sendOpinion").removeClass("hidden");
});
$("div.sinBottomVoteButton").click(function(e){
$("#sendVoteButton").removeClass("hidden");
});
function afterOpinionSent() {
$("#wsCompany").val("Select Location").change();
}
$(document).ready(function(){
$("input[#name='YOUR_RADIO_INPUTNAME']").click(function(){
$("#YOUR_FORM_ID").ajaxSubmit({url: '/vote', type: 'post'});
});
});
</script>
Make a Action method which will can process only vote entry .

How To pass the modified data from dual listbox to controller?

I have created a form with two listboxes in which it is possible to move the items from one listbox into another.
The view also loads correctly, but I haven't figured out how to send the modified listbox data back to controller.
The view code is the following:
<script>
$(function() {
$(document)
.on("click", "#MoveRight", function() {
$("#SelectLeft :selected").remove().appendTo("#SelectRight");
})
.on("click","#MoveLeft", function() {
$("#SelectRight :selected").remove().appendTo("#SelectLeft");
});
});
#Html.Hidden("RedirectTo", Url.Action("UserManagement", "Admin"));
<h2>User</h2>
<div class="container">
<form role="form">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="SelectLeft">User Access:</label>
<select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, selectedOptions:ownership, optionsText:'FirstName'">
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<input class="btn btn-primary" id="MoveLeft" type="button" value=" << " />
<input class="btn btn-primary" id="MoveRight" type="button" value=" >> " />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="SelectRight">Owners:</label>
<select class="form-control" multiple="multiple" id="SelectRight" multiple="multiple" data-bind="options : availableOwners, selectedOptions:availableOwners, optionsText:'FirstName'">
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
var data=#(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
var selectedOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
var availableOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Owners));
function viewModel() {
this.username=ko.observable(data.Username);
this.password=ko.observable(data.Password);
this.email=ko.observable(data.Email);
this.isActive=ko.observable(data.IsActive);
this.userId = ko.observable(data.UserId);
this.ownership=ko.observableArray(selectedOwners);
this.availableOwners = ko.observableArray(availableOwners);
this.submit = function()
{
$.ajax({
url: '#Url.Action("UserSave", "Admin")',
type: 'POST',
data: ko.toJSON(this),
contentType: 'application/json',
});
window.location.href = url;
return false;
}
this.cancel = function()
{
window.location.href = url;
return false;
}
};
ko.applyBindings(new viewModel());
var url = $("#RedirectTo").val();
I would be very thankful if anyone could suggest the way to pass all the selected options back to controller by populating the data with modified lists when the submit function is executed.
Thanks!

Before form submission save one side items values in an hidden input element. (comma separated values of listbox items.) The value of hidden element is sent to server by submitting the form. In controller you can do the next things.