this is my script in a blade page :
function manageRow(data) {
//alert('inside row'+data);
var rows = '';
$.each( data, function( key, value ) {
if(value.user_id=={{Auth::user()->id}}){
getcomment(value.id);
rows+='<div class="post"><div class="user-block">#if($user->sex=='female' && $all->avatar=='default.jpg')<img class="img-responsive img-bordered-sm" src="public/theme/dist/img/default1.jpg" alt="user image">#else<img class="img-responsive img-bordered-sm" src="public/theme/dist/img/{{$all->avatar}}" alt="user image">#endif<span class="username">{{$all->username}}<i class="fa fa-times"></i><p style="font-size: 10px"><i class="fa fa-clock-o" aria-hidden="true"></i> '+value.created_at+'</p></span></div><p>'+value.status+'</p><ul class="list-inline"><li><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</li><li ><i class="fa fa-comments-o margin-r-5"></i> Comments(5)</li></ul><div><form action="{{route('post_comment.store')}}" method="post"><input type="hidden" id="post_id" name="post_id" value="'+value.id+'"><input type="hidden" name="_token" value="{{ csrf_token() }}"><div class="input-group"><input class="form-control input-sm" name="comment" type="text" placeholder="Type a comment"><span class="input-group-btn"><button class="btn btn-secondary btn-sm comment-btn2" type="submit"><i class="fa fa-send"></i></button></span></div></form></div><div class="all-comments"></div></div>';
}
});
$("#status-id").html(rows);
}
function getcomment(id){
$(".all-comments").html('<p>awlad</p>');
}
i want to set this html into the rows above
but it prints undefinied instead of awlad..
anyone please help
You're trying to append value to element all-comments when it's not created yet :
rows+='<div class="post"><div class="user-block">....';
getcomment(value.id);
Hope this helps.
I don't think the html you are creating will work. You are inserting some blade syntax, but at that time the blade file has already been parsed
Related
I have this HTML code:
<div class="cart-plus-minus">
<input class="cart-plus-minus-box quantity" id="{{ $item->id }}" name="quantity[{{ $i }}]" value="{{ $item->quantity }}" type="text">
<input name="product_id[{{ $i }}]" value="{{ $item->id }}" type="hidden">
<div class="dec qtybutton" data-attribute="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
<div class="inc qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-up"></i></div>
</div>
My jQuery code is this:
$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
var element = jQuery(event.currentTarget);
var url = element.attr("attribute");
alert(url);
});
When I click in desc it displays an alert but the thing is that the value comes undefined, and I know that it is because it says $(document) but it's only way that it has worked... I wonder how can I get the value in data-attribute?
Thanks!
To get data use .data("foo") or .attr("data-foo")
$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
var url = $(this).data("attribute");
alert(url);
});
Example:
$(document).on('click', 'div.cart-plus-minus > div.dec', function(event) {
var url = $(this).data("attribute"); // That's not an URL but OK
alert(url);
});
<div class="cart-plus-minus">
<input class="cart-plus-minus-box quantity" id="888" name="quantity[0]" value="0" type="text">
<input name="product_id[0]" value="888" type="hidden">
<div class="dec qtybutton" data-attribute="888"><i class="zmdi zmdi-chevron-down"> DEC</i></div>
<div class="inc qtybutton" data-id="888"><i class="zmdi zmdi-chevron-up"> INC</i> </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Given the example from your link you have something like this:
$(".dec, .inc").on('click', function() {
const $inp = $(this).closest('.cart-plus-minus').find('.cart-plus-minus-box');
let val = Number($inp.val());
val += $(this).is('.inc') ? 1 : -1;
$inp.val(Math.max(0, val));
});
<div class="cart-plus-minus">
<input class="cart-plus-minus-box" name="quantity" value="1" type="text">
<button type="button" class="dec qtybutton"><i class="zmdi zmdi-chevron-down">-</i></button>
<button type="button" class="inc qtybutton"><i class="zmdi zmdi-chevron-up">+</i></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Also, fix the templating issues.
Use data() instead of attr:
element.data("attribute");
You can do something like this:
$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
alert($(this).data('attribute'));
});
hope all be will. I face to like this problem anyone can help me.
I get the value of dropdown and I put it to input, but I am unable to search it.
I used from jQuery to get the value from bootstrap dropdown to give for input.
<!-- HTML Code With Form -->
<!-- Basic dropdown -->
<form method="post" enctype="multipart/form-data" action="team.php"
class="form-inline active-purple-3 active-purple-4" style="width:400px;
margin-top:-50px; margin-left:125px; ">
<button id="sb" class="btn btn-primary dropdown-toggle mr-4" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="margin-top:20px; margin-left:-140px;">Search By</button>
<div class="dropdown-menu" id="dm" style="margin-left:89px; margin-
top:-963px;">
<a class="dropdown-item" id="dl" href="#" value="ID">BY ID</a>
<a class="dropdown-item" id="dl" href="#" value="Name">Name</a>
<a class="dropdown-item" id="dl" href="#" value="Positon">Position</a>
</div>
<input type='hidden' name='thenumbers'>
<!-- Basic dropdown -->
<!-- Search form -->
<i class="fa fa-search" aria-hidden="true" style="margin-top:15px;"></i>
<input name="txtSearch" class="form-control form-control-sm ml-3 w-75"
id="in" type="text" placeholder="Search" style=" margin-top:15px; border-
radius:5px 5px 5px 5px;" aria-label="Search">
<button type="Submit" name="searchrec" class="btn btn-primary"
style="margin-left:365px; margin-top:-55px;">Search</button>
</form>
<!-- jQuery Code -->
<script>
$(document).ready(function(){
$('#dm a').on('click', function(){
$('#sb').text($(this).text());
});
});
</script>
<script>
$(function(){
//Listen for a click on any of the dropdown items
$("#dm a").click(function(){
//Get the value
var value = $(this).text();
//Put the retrieved value into the hidden input
$("input[name='thenumbers']").val(value);
});
});
</script>
<!-- jQuery Code End -->
<!-- PHP Code -->
<?php
include "Config.php";
if(isset($_POST['searchrec']))
{
$txtSearch=$_POST['txtSearch'];
$column=$_POST['thenumbers'];
if($column == "BY ID")
{
$query1="SELECT * FROM ourteam WHERE id LIKE '%$txtSearch%'";
$result1=mysqli_query($db,$query1);
$count=mysqli_num_rows($result1);
if($count == 0)
{
}else{
while($rowr=mysqli_fetch_array($result1))
{
$id=$rowr['id'];
$name=$rowr['name'];
echo "<script>alert($name);</script>";
}
}
This PHP code is just for ID and I used elesif statement also for other entities.
First, get the values not the text:
//Get the value
var value = $(this).attr('value'); // instead of text
Then, map it on the server side
$allowed_columns = ['id', 'name', 'position'];
$column = $_POST['thenumbers'];
$txtSearch = $_POST['txtSearch'];
// Check the field name
if (!in_array($column, $allowed_columns)) {
// Throw some exception, or do whatever you want
}
// Sanitize the value
$txtSearch = mysqli_real_escape_string($txtSearch);
$query1="SELECT * FROM ourteam WHERE `$column` LIKE '%$txtSearch%'";
// ...
I have a functionality to select the document and add the file that document type.
Iam unable to send that values to the controller.
Actually i am using add new functionality to the form. So i name it as array and trying to send the details. But iam not getting the details here.
FYI i am using codeigniter for the server scripting.
Can any one help me out.
Here is my view file checklist.php.
<div ng-controller="checklist">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<form class="form-horizontal" role="form" name="checkForm" action="#/customer/adddocument" novalidate>
<a id="button" onlick="duplicate()">Click me</a>
<div id="duplicater">
<div class="row">
<div class="form-group col-md-6" ng-controller="documentController" >
<label class="col-sm-3 control-label no-padding-right">Documents</label>
<div class="col-sm-9">
<select class="form-control" name="document[]" required ng-model = "checklist.document[]">
<option value="">Select document</option>
<option ng-repeat="option in documentsList.data" value="{{option.AGENT_ID}}">{{option.AGENT_NAME}}</option>
</select>
</div>
</div>
<div class="col-md-6">
<input type="file" name="file" />
</div>
</div>
</div>
<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
// clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
</script>
<div class="modal-footer" >
<button ng-show="sub" ng-click="submit(checklist)" ng-disabled="checkForm.$invalid" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save
</button>
<button ng-show="edt" ng-click="update(checklist)" ng-disabled="checkForm.$invalid" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Edit
</button>
<button ng-show="edt" ng-click="cancel()" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Cancel
</button>
</div>
<input type="submit" name="submit">
</form>
And here is my controller file checklist.js.
project.controller('checklist', ['$scope', '$http', 'services', '$location', 'uiGridConstants', '$timeout','$interval','$q','$rootScope','$filter', function($scope, $http, services, $location, uiGridConstants, $timeout,$interval,$q,$rootScope,$filter,uibDateParser) {
$rootScope.$broadcast("globalgrid",{'displaycolumns': discolumns, 'gridservice':gridservice , 'grid_service_param':grid_service_param });//,'gridload':func_name, 'addnew': "Submit"
//$scope.selectedDate = Date();
$scope.sub = true;
$scope.edt = false;
$scope.uploadfiles = "";
console.log($scope.date);
$scope.custsub = function(e){
var fd = new FormData();
fd.append('file', $scope.uploadfiles);
var f = $scope.uploadfiles;
console.log(f);
console.log(e);
services.addCustomerinfo(res.data,e.icno,e.customername);
$rootScope.submit(submitfun);
});
}
in the controller when i check with console i am not getting anything.
can any one help me out.
1.) You need to create a rest api which returns your posted data from form,
2.) create an angular service which makes a request from that api,
3.) include that service in your controller and send retrieved data to view.
I have the following code:
#foreach($results as $result)
<tr>
<td>{{$result->my_id}}</td>
<td>{{$result->province_name}}</td>
<td>{{$result->city_name}}</td>
<td>
<a class="btn btn-primary" href="{{route('city-edit', $result->my_id)}}"><i class="fa fa-edit"></i></a>
<a class="btn btn-danger" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
How to add a confirmation on delete each data?
I prefer a more easier way, just add onclick="return confirm('Are you sure?')", as bellow:
<a class="btn btn-danger" onclick="return confirm('Are you sure?')" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
If this is your link:
Delete
Use this Javascript:
var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('href');
}
});
}
Note: the <a> needs the delete in class.
This solution uses Unobtrusive JavaScript and should work with IE 9 or newer.
<a class="btn btn-danger" onclick="return myFunction();" href="{{route('city-delete', $result->my_id)}}"><i class="fa fa-trash"></i></a>
<script>
function myFunction() {
if(!confirm("Are You Sure to delete this"))
event.preventDefault();
}
</script>
<a href="{{ route('city-delete', $result->my_id) }}"
class="btn btn-danger" data-method="DELETE" data-confirm="Are you sure?"> Delete</a>
With brexis/laravel-data-method package, you can specify appropriate HTTP method and a confirmation text.
This is helpful if you have this for example into your routes file:
Route::get('cities/{city}', 'CityController#show')->name('city-show');
Route::delete('cities/{city}', 'CityController#destroy')->name('city-delete');
If this is your link:
<i class="fa fa-trash"></i>
Route:
Route::get('/icrm/venues/property_area/delete/{propertyarea}', 'VenuePropertyAreaController#deletepropertyarea')->name('venuepropertyarea.delete');
Use this Javascript:
var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('href');
}
});
}
Note: the <a> needs the delete in class.
This solution uses Unobtrusive JavaScript and should work with IE 9 or newer.
index.blade.php
<form action="{{route('todos.destroy', $todo->Id)}}" method="post">
<input type="hidden" name="_method" value="DELETE">
#csrf
<button id="btnDelete"class="btn btn-danger btn-sm">Delete</button>
</form>
<script type="javascript">
document.onsubmit=function(){
return confirm('Sure?');
}
</script>
I used pure PHP Form, the method DELETE has to be passed as hidden on the submit page action, so I catch it trough javascript and I get the confirmation alert.
<a class="btn btn-danger px-5 radius-30" onclick="return confirm('Are you sure you want to Unassign this agent?')" href="{{ route('unassign.agent', $report->id) }}" >Unassign</a>
the right route method
I cannot remove input field dynamically, I can add field but my remove option is not working.
I am using jquery for dynamically add/remove field and bootstrap 3 for my layout.
Here is my markup:
<div class="row margin-bottom">
<div class="col-md-12 col-sm-12">
<button type="submit" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
</div>
</div>
<?php $attributes = array('class' => 'form-horizontal', 'role' => 'form'); echo form_open_multipart('config/upload_image', $attributes);?>
<div class="text-box form-group">
<div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput"/></div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload</button>
</div>
</div>
<?php echo form_close();?>
Here is my jquery code:
$(document).ready(function(){
$('.add-box').click(function(){
var n = $('.text-box').length + 1;
if(n > 5)
{
alert('Only 5 Savy :D');
return false;
}
var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput'+ n +'"/></div><div class="col-sm-2"><button type="submit" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
$('.text-box:last').after(box_html);
box_html.slidedown('slow');
});
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).parent().remove();
return false;
});
});
The error is in the remove button click event handler. You need to remove the closest form group rather than the immediate parent:
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).closest(".form-group").remove();
return false;
});
check this bootply for a working example: http://www.bootply.com/x8n3dQ6wDf
EDIT
for animation on remove you can use jQuery slideUp like this:
$('.form-horizontal').on('click', '.remove-box', function(){
var formGroup = $(this).closest(".form-group");
formGroup.slideUp(200, function() {
formGroup.remove();
});
return false;
});