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">
Related
$(document).ready(function (){
$('#myForm').submit(function (e) {
e.preventDefault(); //Do not submit the form
var dataflow=$(this).serialize(); //Get the inputs value
$.post('{{route('homepage.update')}}', dataflow, function (data){ //post.create is the route name
//The request is done, do something with the server response
});
});
});
I use this to save form without refresh
Here is my route
Route::post('/homepage/update', 'AdminController#Update')->name('homepage.update');
And my html
{{ csrf_field() }}
<div class="form-group">
<label for="title"><b class="fa fa-pencil"></b> Title</label>
<input id="title" class="form-control" value="{{ $article->title }}" name="title">
<br />
<label for="content"><b class="fa fa-home"></b> Desc</label>
<div class="box-body pad">
<textarea id="content" name="content" rows="10" cols="80">
{{ $article->content }}
</textarea>
</div>
</div>
<center>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm"><b class="fa fa-save"></b> Submit</button>
</form>
My function who update ajax data
public function HomePage(Request $r) {
$article = Article::find(1);
$article->title = $r->input('title');
$article->content = $r->input('content');
$article->homepage = 1;
$article->save();
}
The problem is i must click twice button to save two forms when i click one it submit only title! Please help how to fix that
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.
I am trying to append a div multiple times when clicking a button, the problem is that is only appending once. I need to append same div as user keeps clicking.
DIV I need to append multiple times is stored in a variable named $htmlDivForm in the jquery code.
I'm using bootstrap.
HTML code:
<div class="container">
<div class="row">
<div class="col-md-3">
<form id="formUser" action="index.html" method="post">
<div class="text-center">
<button id="moreFieldsBtn" class="btn" type="button" name="button">+</button>
</div>
</form>
</div>
<div class="col-md-9">
More Content...
</div>
</div>
</div>
jquery code:
var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');
//Add input text field
$($moreFieldsBtn).click (function() {
$($formUser).append($htmlDivForm);
});
I had gone through your question.
I have Updated the example.
Removed the Object and just inserting plain HTML
var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');
var htmltext = '<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>'
//Add input text field
$($moreFieldsBtn).click (function() {
$($formUser).append(htmltext);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3">
<form id="formUser" action="index.html" method="post">
<div class="text-center">
<button id="moreFieldsBtn" class="btn" type="button" name="button">+</button>
</div>
</form>
</div>
<div class="col-md-9">
More Content...
</div>
</div>
</div>
<div>
You can't append the same div multiple times, you need to instantiate new divs and attach those. You also don't need to re-wrap the jQuery objects to attach the handlers:
var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
//Add input text field
$moreFieldsBtn.click(function() {
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');
$formUser.append($htmlDivForm);
});
I have a template that I will simplify as follows:
<script type="text/template" id="contactTemplate">
<div id="contactentry" class="row contact-info">
</div>
<div class="form-group">
<label for="name1">First Name</label>
<input type="text" class="form-control" id="FirstName" name="Contacts[{{ID}}].FirstName" required>
</div>
<div class="form-group minus">
<label for="contactMinus{{ID}}"> </label>
<a id="depminus{{ID}}"><i class="fa fa-minus-circle"></i>Remove</a>
</div>
</script>
I allow insertion of the template, multiple times via the following code, this part works:
<script type="text/javascript">
var clone = (function () {
var cloneIndex = -1;
var template = $('#contactTemplate').text();
return function () {
//Replace all instances of {{ID}} in our template with the cloneIndex.
return template.replace(/{{ID}}/g, ++cloneIndex);
}
})();//self executing function.
var contacts = $('#contacts')
$("#contactadd").on("click", function () {
contacts.append(clone());
window.controlManager.FindControls(contacts);
});
</script>
<div id='contacts'>
<div class="col col-lg-1">
<a id="contactadd"><i class="fa fa-plus-circle"></i>Add</a>
</div>
</div>
Now I am trying to figure out how to make javascript code to remove each element when/if the minus button is clicked (in the template).
I'm not sure what kindof code I could then use to delete the contacts, via the depminus{{ID}} control. Any tips to get me started?
I want to save the edited data into DB and also display in frond-end on clicking save button in the form .. i did the first part but i struggling to show this in frond end with out refreshing the page
<div class="leftbar_menu">
<div class="short_res_header">
<h3 style="margin-top: 10px;">
<span style="float:left;">About</span>
<span style="font-size:small;float: right;"><a data-edit-id="40322" data-clickmode="edit" class="pers" data-id="40322" style="display: inline;">edit</a></span><span style="font-size:small;float: right;"><a class="pers" data-close-id="40322" data-clickmode="close" data-id="40322" style="display: none;">close</a></span> </h3>
</div>
<div class="leftbar_content">
<div data-id="40322" style="display: none;" class="about_toggle formarea">
<script type="text/javascript">
window.onLoad = imageRefreshBig();
$(document).ready(function(){
$('#profileshortresume').attr('maxlength','250');
$("#profileshortresume").css({
"max-width": "350px"
});
});
</script>
<div class="ajaxfiy_edit_profile">
<form enctype="multipart/form-data" method="post" action="http://10.0.1.21/firstplanet/dev/action/profile/edit/" onsubmit="return validateForm()" style="margin-left: 10px;" id="profile_edit_form" class="profile_edit_form_40322" name="profile_edit_form" novalidate="novalidate">
<div style="float:left;width:100%;" id="mypage_about" class=""><dl class="profileshortresume"><dt>About you<font style="color:#FF1800;font-size: 11px;padding-left: 3px;"> *</font><br></dt><dd>
<textarea title="" required="" id="profileshortresume" name="profileshortresume" class="input-textarea" maxlength="250" style="max-width: 350px;">good</textarea></dd></dl></div><input type="hidden" value="90d0e928746b45b9886292d1d0e08d5e" name="__elgg_token"><input type="hidden" value="1396426813" name="__elgg_ts"><input type="hidden" value="40322" name="cat_id"><input type="hidden" value="39242" name="custom_profile_type"><input type="hidden" value="job_1394777243" name="username">
<div class="subt_butt">
<a class="buttonS"><span><input type="button" value="Save" class="edit_save_button" style="text-align:center;"></span></a>
</div>
<br>
</form>
</div>
</div>
<div style="padding-right: 6px; display: block;" class="short_res" data-content-id="40322">
good
</div>
</div>
</div>
// Below script will open the form when edit is clicked
<script type="text/javascript">
$('a.pers').click(function(){
var formid = $(this).attr('data-id');
var clickmode = $(this).attr('data-clickmode');
/*Closing All Open Div */
$('div.short_res').show();
$('div.formarea').hide();
if(clickmode == 'edit') {
$('a[data-clickmode=create]').show();
$('a[data-clickmode=edit]').show();
$('a[data-clickmode=close]').hide();
$('a[data-create-id='+formid+']').show();
$('a[data-close-id='+formid+']').show();
$('a[data-edit-id='+formid+']').hide();
$('div[data-id='+formid+']').show();
$('div[data-content-id='+formid+']').hide();
}
if(clickmode == 'close') {
$('a[data-create-id='+formid+']').show();
$('a[data-edit-id='+formid+']').show();
$('a[data-close-id='+formid+']').hide();
$('div[data-id='+formid+']').hide();
$('div[data-content-id='+formid+']').show();
}
if(clickmode == 'create') {
$('a[data-clickmode=close]').hide();
$('a[data-clickmode=edit]').show();
$('a[data-close-id='+formid+']').show();
$('a[data-create-id='+formid+']').hide();
$('div[data-id='+formid+']').show();
$('div[data-content-id='+formid+']').hide();
}
});
// am using below script for update the data in db and display in front end
$(".edit_save_button").click(function(){
var formid = $(this).parent().parent().parent().parent().attr("class");
var url = $("form."+formid).attr('action');
var data = $("form."+formid).serialize();
$(".thewire_previous_img").show();
var details = $(this).parent().parent().parent().parent().parent().parent().next().attr("class");
$.ajax({
type: "POST",
url: url,
data: data,
context: details ,
success: function(data){
$(".formarea").hide();
$('div.short_res').show();
$('a[data-clickmode=close]').hide();
$('a[data-clickmode=edit]').show();
$(".thewire_previous_img").hide();
}
});
});
That's simple if you not want the page to refresh just not use <form> element and button as <input>,
Just get the elements value with JQuery .val() and get click event of a <button type="button"> element.
When you send a form the navigator automatically always will refresh the page or redirect you to the page that is referenced in the form.