set a javascript value in a html body in laravel - javascript

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

Getting Undefined Value jQuery and Html

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'));
});

How to search dropdown with input on PHP

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%'";
// ...

How to pass the form values with array to angular controller

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.

delete confirmation in laravel

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

How to dynamically Add/Remove file type input field using jquery?

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;
});

Categories

Resources