i have table render with PHP using foreach loop.
#foreach ($comments as $comment)
<tr>
<td>{{ $comment->lot_date }}
<br>
#if (count($comment->ourcar) >= 1)
<p>Saved</p>
#else
<form method="POST" action="/comments/{{ $comment->id }}/ourcars">
{{ csrf_field() }}
<button type="submit" class="btn btn-xs btn-primary">Our Car</button>
</form>
#endif
</td>
<td>
{{ $comment->bid }}
</td>
<td>{{ $comment->auction_name }}</td>
<td class="block">
#foreach(explode('#', $comment->pics_urls, 3) as $pic)
<a href="{{ $pic }}" class='iframe'>
<img src="{{ $pic }}" class="img-fluid" width="30" height="32">
</a>
#endforeach
</td>
<td>{{ $comment->company }}</td>
<td>{{ $comment->model_name_en }}</td>
<td>{{ $comment->model_type_en }}</td>
<td>{{ $comment->grade_en }}</td>
<td>{{ $comment->model_year_en }}</td>
<td>{{ $comment->color_en}}</td>
<td>{{ $comment->displacement }}</td>
<td>{{ $comment->transmission_en }}</td>
<td>{{ $comment->scores_en }}</td>
<td>{{ $comment->mileage_num }}</td>
<td>{{ $comment->start_price_en }}</td>
<td><div class="comment-body">{{ $comment->body }}</div></td>
<td>{{ $comment->lot->result_en or '---' }}</td>
<td>{{ $comment->user->name }}
<td>
<button data-id="{{ $comment->id }}" class="btn-link editButton"><span class='glyphicon glyphicon-edit'></span></button>
</td>
<td>
<form method="POST" action="{{route('comments.destroy', ['id' => $comment->id]) }}">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<div class="form-group">
<button type="submit" class="btn-link" onclick="return confirm('Are you sure?')"><span class='glyphicon glyphicon-trash' style="color:red"></span></button>
</div>
</form>
</td>
</tr>
#endforeach
I create a modal window to add comment to the row using JS. After i submit comment and modal is closed and i want to refresh content in <td class="comment-body">comment</td>
So i have a problem with refreshing div by class, i can use an id because table is looped:
$(function() {
$('.editButton').click(function (e) {
var button = $(this);
var geturl = '/comments/' + button.data('id') + '/edit';
var posturl = '/comments/' + button.data('id');
$.get(geturl)
.done( (response) => {
bootbox.dialog( {
title : "Add comment",
message : response,
buttons : {
addButton : {
label : 'Add comment',
className : 'btn btn-primary',
callback: () => {
var modalForm = $('#modalForm');
if ($('#commentBody').val()) {
$.ajax({
type : 'POST',
url : posturl,
data : modalForm.serialize(),
success : (response) => {
if (response === "ok") {
bootbox.hideAll();
$('.comment-body').toggle();
}
}
})
}
return false;
}
},
closeButton : {
label : 'Close',
className : 'btn btn-default'
}
}
})
})
.fail( ( errorResponse ) => {
bootbox.alert('Error! Comment is not added');
});
});
});
</script>
My modal view:
<div class="modal-body">
<form action="#" id="modalForm" data-id="{{ $comment->id }}">
<div class="form-group">
{{ csrf_field() }}
{{ method_field('PUT') }}
<textarea name="body" id="commentBody"
placeholder="Add Your Comment Here." class="form-control" required>{{ $comment->body }}</textarea>
</div>
</form>
</div>
This is the result:
I tried to use $('.comment-body').toggle(); but it is not working. How should i refresh that div after editing comment?
If I got your point .. I think its very simple
1st: you need to use after var button = $(this);
var comment_section = button.closest('tr').find('.comment-body');
2nd: on ajax success callback function
comment_section.text($('#commentBody').val());
var old_comment = $('.comment-body').text();
$('.comment-body').text(old_comment + '\n' + new_comment);
I don't really understand about your refresh. The code above is to append a new comment to old ones.
Set the innerHTML of the element to populate it, or use empty string to clear it:
$('.comment-body').html("New Comment") // New contents
$('.comment-body').html("") // Clear contents
If you have a .comment-body in more than one row of your table, and you only want to "refresh" one of them, then you'll need to specify an id so you can pinpoint the row that contains the cell. E.g...
<tr id="row1"><td class="comment-body">..comment..</td><tr>
$("#row1").find(".comment-body").html("New Comment Text")
NB: Instead of .html you may also use .text to prevent html code in users' comments from being injected into your page.
$('.comment-body').('');
Try this or
$('.comment-body').html('');
Related
What is the problem with my JQuery code when I click on the button it does not work, I searched a lot and tried many ways but my problem not solved. I used this code in other files, on there it works correctly but it not work in this file.
this my table:
<table class="table table-bordered">
<tbody>
<?php
$insideOrders = \App\OutsideModel::where('total_id', '=', $order->order_id)->get();
?>
#foreach($insideOrders as $index => $inside)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $inside->menu->name }}</td>
<td>{{ $inside->menu->category->name }}</td>
<td>{{ $inside->order_amount }}</td>
<td>
#if($order->status=='1')
<button id="send_order" class="btn btn-primary btn-xs"
order_id="{{$order->order_id}}">ارسال<i id="send_icon"></i>
</button>
#else
<button class="btn btn-success btn-xs" disabled>ارسال شده</button>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
This is my js:-.
$('table tbody').on('click', 'button', function () {
var order_id = $(this).attr("order_id");
$.ajax({
url: '{{route('sendOrders')}}',
type: 'GET',
dataType: 'json',
data: {
'id': order_id
},
success: function (response) {
if (response) {
alert('ارسال شد!');
window.location.reload();
}
else {
alert('ارسال نشد!')
}
}, error: function (err) {
}
})
});
I solved my problem, I put my table inside a dive like below, I don't know what happens when I put it inside a dive. but it works now.
<div id="apended_tb">
<table class="table table-bordered">
<tbody>
<?php
$insideOrders = \App\OutsideModel::where('total_id', '=', $order->order_id)->get();
?>
#foreach($insideOrders as $index => $inside)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $inside->menu->name }}</td>
<td>{{ $inside->menu->category->name }}</td>
<td>{{ $inside->order_amount }}</td>
<td>
#if($order->status=='1')
<button id="send_order" class="btn btn-primary btn-xs"
order_id="{{$order->order_id}}">ارسال<i id="send_icon"></i>
</button>
#else
<button class="btn btn-success btn-xs" disabled>ارسال شده</button>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Then:-
$('#apended_tb table tbody').on('click', 'button', function () {........}
Replace this
$('table tbody').on('click', 'button', function () {
with following:
$(document).on('click', '#send_order', function () {
And there is a mistake change order_id with
data-order_id
I have a table filled with data. I have displayed it but now when I click on the History button on each row, to get chat_id of that row and pass it to controller. So far I am passing an array of IDs but I cant make it work.
Below is my code so far:
//views
<?php $arr = 0; ?>
#foreach($chat as $row)
<tr>
<td>{{ $row->chat_id }}</td>
<td>{{ $row->fullname }}</td>
<td>{{ $row->email }}</td>
<td>{{ $row->plaintext }}</td>
<td>{{ $row->transcript_text }}</td>
<td>{{ $row->duration }}</td>
<td>
<button type="submit" name="history" onclick="javascript:getID('{{$row->chat_id}}','{{$arr}}')">History</button>
<input name="recordid[]" id="recordid[]" type="hidden">
</td>
</tr>
<?php $arr++; ?>
#endforeach
<script type="text/javascript">
function getID(id, arr){
$('[id^=recordid]').eq(arr).val(id);
}
</script>
//controller
public function showMessage(){
$id = Input::get('recordid');
$history = Chat::where('chat_id','=', $id)->get();
return View::make('chat.chatview')->with(array('history'=>$history));
}
The name of your array what you gives to your Template is history with(array('history'=>$history)); and not chat #foreach($chat as $row) loop through history #foreach($history as $chat) to get result
I am trying to implement a scrolling pagination, for this I tried many tutorials at the end found this Tutorial. i wrote the code in a way it was instructed but not getting the desired output.
HTML :
<tbody infinite-scroll="getMoreData()">
<tr ng-repeat="amenitydetail in amenitydetails">
<td class="text-right">{{ currentOffset + $index + 1}}</td>
<td>{{ amenitydetail.name}}</td>
<td>{{ amenitydetail.address}}</td>
<td>{{ amenitydetail.phoneNumber}}</td>
<td>{{ amenitydetail.mobileNumber}}</td>
<td>{{ amenitydetail.city.name}}</td>
<td>{{ amenitydetail.location.name}}</td>
<td>{{ amenitydetail.amenity.name}}</td>
<td>{{ amenitydetail.latitude}}</td>
<td>{{ amenitydetail.longitude}}</td>
<td class="">
<a data-ui-sref="admin.masters_amenity_detail.edit({ amenity_detailId: amenitydetail.id })"
class="btn btn-primary">
<i class="fa fa-pencil"></i>
</a>
<a data-ui-sref="admin.masters_amenity_detail.delete({ amenity_detailId: amenitydetail.id})"
class="btn btn-danger">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
My JS is as follows :
$scope.amenitydetails = AmenityDetailService.findAmenityDetails(function (amenitydetails) {
angular.forEach(amenitydetails, function (amenitydetail) {
amenitydetail.amenity = AmenityService.get({
'id': amenitydetail.amenityId
});
amenitydetail.location = LocationService.get({
'id': amenitydetail.locationId
});
amenitydetail.city = CityService.get({
'id': amenitydetail.cityId
});
});
});
$scope.data = $scope.amenitydetails.slice(0, 5);
$scope.getMoreData = function () {
console.log("Coming to get more data?");
$scope.data = $scope.amenitydetails.slice(0, $scope.data.length + 5);
}
My log inside getMoreData function is not getting printed.Can anyone let me know where I am getting wrong??
I had a JavaScript click function on a table row, but when I click it, the function only works on the first row. How do I fix this?
<script type="text/javascript">
$(document).ready(function(){
$('#detpanel').hide();
$("#showdet").click(function(){
$('#detpanel').slideDown(500);
});
$("#hidedet").click(function(){
$('#detpanel').slideUp(500);
});
$('#showdet').hover(function(){
$(this).divhover("background-color", "yellow");
});
});
</script>
<tbody>
<?php $i = 0; ?>
#foreach ($auser as $res)
<?php $i += 1; ?>
<tr #if($i%2==0) class="bgcolor dihover" #endif id='showdet' class="dihover">
<td>{{ $res->id }}</td>
<td>{{ $res->name }}</td>
<td>{{ $res->email }}</td>
<td>
<a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a> |
<a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
</td>
</tr>
#endforeach
</tbody>
ID of an element must be unique, since you are creating the elements in a loop use class.
When using ID selector it will return only the first element with the said ID, so in your case the click handler is getting registered to only the first element
<tbody>
<?php $i = 0; ?>
#foreach ($auser as $res)
<?php $i += 1; ?>
<tr #if($i%2==0) class="bgcolor dihover" #endif class='showdet' class="dihover">
<td>{{ $res->id }}</td>
<td>{{ $res->name }}</td>
<td>{{ $res->email }}</td>
<td>
<a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a> |
<a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
</td>
</tr>
#endforeach
</tbody>
then use class selector to register the click handler
$(document).ready(function () {
$('#detpanel').hide();
$(".showdet").click(function () { //use class selector here
$('#detpanel').slideDown(500);
});
$("#hidedet").click(function () {
$('#detpanel').slideUp(500);
});
$('#showdet').hover(function () {
$(this).divhover("background-color", "yellow");
});
});
I'm trying to send an array of row id's to a controller in order to do a batch update, I think I already did the array part (i'm not good at jQuery, still learning) but I have no idea how to send to the controller the array that contains the ids of the rows to update.
Here's my twig:
{% block javascripts %}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll(id) {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length == $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
var ids = [];
ids.concat(id);
} else {
$("#selectall").removeAttr("checked");
removeItem = id;
ids = jQuery.grep(arr, function(value) {
return value != removeItem;
});
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
</script>
{% endblock %}
{% block body %}
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>{{ 'general.date'|trans }}</th>
<th>{{ 'general.order_number'|trans }}</th>
<th>{{ 'general.description'|trans }}</th>
<th>{{ 'general.company_name'|trans }}</th>
<th>{{ 'general.name'|trans }}</th>
<th>{{ 'form.status'|trans }}</th>
<th>WinPoints</th>
</tr>
</thead>
{% for details in details %}
<tbody>
<tr>
<td><div align="center"><input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll({{details.id}});" /></div></td>
<td>{{ details.date | date("m/d/Y") }}</td>
<td>{{ details.order_number }}</td>
<td>{{ details.description }}</td>
<td>{{ details.company }}</td>
<td>{{ details.name }}</td>
<td>{{ details.status }}</td>
<td>{{ details.winpoints }}</td>
</tr>
</tbody>
{% endfor %}
</table>
<form action="{{ path('advd_group_batch_p_r_status') }}" method="post" {{ form_enctype(formBase) }}>
{{ form_widget(form) }}
<input class="input_button" type="submit" value="Procesar" />
</form>
{% endblock %}
Any ideas? Plus, if you see any mistakes on the jquery code, please let me know what i'm doing wrong, i haven't been able to test it because I don't know how to send the array to the controller.
Thank you for any help you may offer me.
{% block javascripts %}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll(id) {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length == $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
var ids = [];
ids.concat(id);
} else {
$("#selectall").removeAttr("checked");
removeItem = id;
ids = jQuery.grep(arr, function(value) {
return value != removeItem;
});
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
$(function(){
$('.input_button').click(function(){
$.ajax({
url:"advd_group_batch_p_r_status",
dataType:'json',
type:'post',
data:$("#formC").serialize()
});
});
});
</script>
{% endblock %}
{% block body %}
<form action="{{ path('advd_group_batch_p_r_status') }}" method="post" {{ form_enctype(formBase) }} id="formC">
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>{{ 'general.date'|trans }}</th>
<th>{{ 'general.order_number'|trans }}</th>
<th>{{ 'general.description'|trans }}</th>
<th>{{ 'general.company_name'|trans }}</th>
<th>{{ 'general.name'|trans }}</th>
<th>{{ 'form.status'|trans }}</th>
<th>WinPoints</th>
</tr>
</thead>
{% for details in details %}
<tbody>
<tr>
<td><div align="center"><input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll({{details.id}});" /></div></td>
<td>{{ details.date | date("m/d/Y") }}</td>
<td>{{ details.order_number }}</td>
<td>{{ details.description }}</td>
<td>{{ details.company }}</td>
<td>{{ details.name }}</td>
<td>{{ details.status }}</td>
<td>{{ details.winpoints }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{{ form_widget(form) }}
<input class="input_button" type="submit" value="Procesar" />
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
I have a Newsletter form in my application that is posted with the following javascript:
<script type="text/javascript">
function subscribeButtonPressed() {
$.post('{{path('mailchimp_subscribe')}}',
{
EMAIL: $("#mce-EMAIL").val(),
listid: $("#listid").val()
},
function (response) {
ga('send', 'pageview', '{{ path('mailchimp_subscribe') }}');
console.log(response);
if (response.code == 100 && response.success) {//dummy check
var alert = '<div class="span12 padding20" id="formContainer">\n\
<h1>Great!</h1>\n\
</div>';
$('#formContainer').fadeOut('slow', function () {
$('#thanksContainer').append(alert).hide().fadeIn('slow');
});
}
}, 'JSON');
}
$(document).ready(function () {
$('#mc-embedded-subscribe')
.click(function (event) {
var btn = $(this);
if ($("#mce-EMAIL").val() != "") {
event.preventDefault();
btn.button('loading');
subscribeButtonPressed();
}
});
});
</script>
I also log the event via google analytics and show some response html. But I guess you get the idea, just use $.post with the path where you want to send it to. And I pick the single values of my form, but you could also just send the whole form.