Jquery, delete dynamically added content - javascript

I'm trying to delete some div block which contains a bunch of content, I have a div bloc inside it I can add some content dynamically using a button also existing withing the same div, without adding content deleting the block is working fine, however when I add some content inside this bloc its not totally deleted, the dynamically added content is not deleted.
Here's my code :
<div class="collection form_lignefacturefournisseur" >
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<div class="form-group">
<label class="col-md-1 control-label">N° BL</label>
<div class="col-md-2">
{{form_widget(ligneffm.idbl,{ 'attr': {'class': 'form-control'} }) }}
<span class="help-block">{{form_widget(ligneffm.idbl)}}</span>
</div>
</div>
<table class="table table-scrollable table-striped table-hover table-bordered table_form_lignefacturefournisseur{{ loop.index }}" id="lignedevistable{{ loop.index }}" >
<thead>
<tr>
<th style="width: 188px;">Produit</th>
<th>Quntité</th>
<th>Prix HT</th>
<th>Sous Total HT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for ligneff in ligneffm.ligneff %}
<tr class="ligneproduit{{loop.index}}">
<td>{{ form_widget(ligneff.idarticle,{ 'attr': {'class': 'form-control'} }) }}</td>
<td style="display:none;">{{ form_widget(ligneff.libelleligneff,{ 'attr': {'class': 'form-control'} }) }}</td>
<td>{{ form_widget(ligneff.qtLignefacturefournisseur) }}</td>
<td>{{ form_widget(ligneff.prixLignefacturefournisseur) }}</td>
<td style="display:none;">{{ form_widget(ligneff.listeprixarticle) }}</td>
<td class="inputdesible">{{ form_widget(ligneff.totalLignefacturefournisseur) }}</td>
<td> <a class="remove btn red" title="Remove" idx="{{loop.index}}"><i class="fa fa-eraser"></i></a></td>
</tr>
{% endfor %}
<tr id="lignefacturefournisseurtr" style="display:none" >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="clearBoth"></div>
<input id="form_lignefacturefournisseur_btn__namear__" class="form_lignefacturefournisseur_btn btn green fa fa-plus" type="button" value="Ajouter" /><i style="display:none" id="countTiwg">{{loop.length}}</i>
</div>
The deleted part of the code is :
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
And the other part that contains the added content is not deleted
The jQuery code is as following:
$('.tools a.remove').live('click',function(){
$(this).parent().parent().siblings('.portlet-body').remove();
$(this).closest('div [class*="form_lignefacturefournisseur"]').remove();
blCount--;
});
Note : Ive tried several methods of invocking the click event, the same thing/result.
Any idea , thanks in advance!

Thanks every one for trying to help me, what I found, is that the button I was working on, has some work in the background, I'm using a template that help me with functionnalities, what Ive done is that I let it and created another button, work with it :
$(".supprimer_bl").live("click", function() {
var idBl = $(this).parent().parent().parent().get(0);
console.log('the class of the element is : ', idBl);
idBl.remove();
// $('.'+classCont).remove();
// $(this).closest('div [class*="form_lignefacturefournisseur"]').contents().remove();
blCount--;
});

Related

Record filtering doesn't return all records

I have a JS code that filters the records of a table, the problem is that the table has a specific amount of records (5 records per page) and when I do a filtering test, only the records of the selected pagination are filtered. that records from other pagination pages don't show up unless I change the pagination page.
var filter = document.getElementById('name_client');
var table = document.getElementById('search_client');
filtro.onkeyup = function() {
var filterName = filter.value.toLowerCase();
for (var i = 1; i < table.rows.length; i++) {
var content = table.rows[i].cells[1].innerText;
var corresponds = content.toLowerCase().indexOf(Filtername) >= 0;
table.rows[i].style.display = corresponds ? '' : 'none';
}
}
<div class="contained">
<div class="row">
<div class="col-md-12 mt-2">
<div class="card">
<nav class="navbar bg-light">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search client" id="name_client" aria-label="Search">
</form>
</div>
</nav>
</div>
<div class="card-body">
<table class="table" id="table">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($clients as c)
<tr>
<td>{{ $c->id }}</td>
<td>{{ $c->name }}</td>
<td>
<form action="{{ url("delete/".encrypt($c->id)) }}" method="POST">
<i class="fa fa-arrows-rotate"></i> Update
{{ ' ' }} {{ method_field('DELETE') }} {{ csrf_field() }}
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Deletr</button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
{{ $clients->links() }}
</div>
</div>
</div>
</div>
How to solve it problem?

How do i make a javascript popup input field in php laravel?

I'm trying to make a popup module that once a button is clicked, it displays a popup with some fields like name surname etc that the user can fill out and save. However i tried to do that but i can't seem to connect it together. I'm not sure if anyone can give me directions on where i'm supposed to put the html css and javascript? As im using php laravel.
This is the view page.
#extends('layouts.adminmaster')
#section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
#csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</div>
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th>
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
#if (Auth::user()->role == "admin")
<th>Action</th>
#endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
#foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>
<td>
#if ($place->status==0)
<span style="color: green">Available</span>
#endif
#if ($place->status==-1)
<span style="color: gray"> Not Available </span>
#endif
#if ($place->status==2)
<span style="color: red"> Booked </span>
#endif
</td>
#if (Auth::user()->role == "admin")
<td> Edit /
#if ($place->status == -1)
Activate
#else
Deactivate
#endif
</td>
#endif
<td>
#if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END
#endif
#if ($place->status==-1)
<span>Book</span>
#endif
#if ($place->status==2)
<span>Booked</span>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
<script>
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
#endsection
You can do it something like this
<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (£)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#foreach($orderList as $result)
<tr>
<td>{{$result->id}}</td>
<td>
{{$output[0]}} </br> {{$output[1]}}
</td>
#endforeach
</tbody>
</table>
And then add model anywhere where your section ends
<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail
</div>
</div>
</div>
<div class="orderDetail"> Order Detail </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
now when you click the anchor tag each time it will open this model.

Rendering blade template base on Javascript Condition

I have
an account > index page with a table, and other modals, that I slice into a small blade views. On that page, I have 100000 accounts.
Problem
There is a section of PHP on top of my edit modal that is making 100000 curls requests, and cause a huge delay on my account > index page.
My goal
is to prevent rendering those blades right up front and only render if the user click on the Pencil icon.
Here is my account.index blade
#extends('layouts.internal.master')
#section('content')
<div class="panel account-panel" style="padding: 30px;">
<div class="panel-body">
<div class="col-sm-2">
<a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
</div>
<div class="table-responsive" style="margin-bottom: 0;">
<table class="table" id="account-table">
<thead>
<tr>
<th>#</th>
<th>Account ID</th>
<th>Customer Type</th>
<th>Name</th>
<th>Email</th>
<th class="text-center">Auto Provisioning</th>
<th class="text-center">AP</th>
<th style="min-width: 90px;">Action</th>
</tr>
</thead>
<tbody>
<?php
$x = 0;
?>
#foreach( $accounts as $account )
#if($account->email_address !== 'admin#benunets.com')
<tr>
<td>{{$x += 1 }}</td>
<td>{!! $account->account_id !!}</td>
<td>
{{-- <img src="{{ $image }}" width="30px"> --}}
<span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
<td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
<td>{!! $account->email_address !!}</td>
<td class="text-center" >
#if($user != null AND $user->auto_provisioning == 1)
{!! Helper::intBoolToIcon($user->auto_provisioning) !!}
#else
<i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
#endif
</td>
<td class="text-center" ><b>{!! $count_cpe !!}</b></td>
<td class="text-center">
<!-- Buttons -->
<div class="tool-buttons">
<ul class="button-list">
<!-- Edit -->
<li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>
<!-- Delete -->
<li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
</ul>
</div>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#include('account.modal.account.destroy')
#include('account.modal.account.create')
#include('account.modal.account.edit')
#section('pagescripts')
<script type="text/javascript">
/*=============================================================================================
= Edit =
============================*/
//Edit Mode
$('.account-edit').click( function() {
var id = $(this).data("id");
console.log(id);
//Style
var val2 = $("#auto_provisioning_switch-"+id).val();
//Set the AP switch
if(val2 == 1){
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
$("[name='auto_provisioning_switch']").val(1);
$('#service_plan_div-'+id).show();
// Set the service plan dd menu
var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
ajax.done(function (service_plan) {
console.log(service_plan+' | id : ' + id );
$('#service_plan-'+id).val(service_plan);
});
}else{
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
$("[name='auto_provisioning_switch']").val(0);
$('#service_plan_div-'+id).hide();
}
});
</script>
#stop
I only want to render
#include('account.modal.account.edit')
when I clicked on the pencil to edit.
OR
#include('account.modal.account.destroy')
when I clicked on the trash to delete.
How do I do that ?
Any hints on how to prevent that will be a huge help !!!
You can't cause the blade rendering to change with javascript code becuase the blade rendering is happening on your server and the javascript is happening on your browser.
What you CAN do is add javascript that hides the sections when a user interacts with your page.
Show or hide an element using javascript in all browsers

HTML with id's construct dynamically

I have an html page with a div that has a bootstrap button to collapse/expand a table. I want to click on it to toggle collpase/expand.
I am inspired by this fiddle.
The javascript is
$('.meu-painel-colapsar').on('click', function () {
var id1 = $('.meu-painel-colapsar').attr('id');
var id2 = $('.colapsar-competencias').attr('id');
alert(id1);
$('#' + id2 + ' .colapsar-competencias').collapse('toggle');
});
And the html is
#foreach($dados as $dimensaoNome => $dimensao)
<div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">
<button type="button" class="btn btn-success btn-xs"
id="dimensao_{{ $dimensao->id }}"
data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
</button>
<div class="panel panel-default">
#foreach($dimensao->competencias as $competenciaNome => $competencia)
<div class="panel-heading">
<div class="row">
<div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
<div class="col-md-6" style="padding-top:8px;">
</div>
</div>
<div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
<table class="table table-condensed">
<thead>
<tr>
<th>Situação atual</th>
<th class="col-md-6">Oportunidades identificadas</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>{{ $competencia->nivel->texto }}</p>
</td>
<td>
<div class="col-lg-12">
{!! $competencia->recomendacao !!}
</div>
</td>
</tr>
</tbody>
</table>
</div>
#endforeach
</div>
</div>
#endforeach
The id's accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }} are generated with the two foreach's.
The problem is that the javascript code only gets the first id's of accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }}.
I'm struggling with this for hours without success. How can I get this id's correctly when I click the button?
If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});
http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');

how to show the data in Ui if i am getting data in console in angular js

i have written one html file and corresponding controller logic for this page i am getting data in console but that data is not showing in my UI
<div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController">
<div class="panel-heading">Enter Notice here</div>
<div class="panel-body">
<tabset>
<!-- SECOND TAB -->
<tab heading="Notice List">
<div class="panel panel-default" ng-controller="NoticeController " >
<div class="panel-body">
Displaying all notices. {{ gradeFilter }} {{ sectionFilter }}
<div class="row">
<div class="col-md-12">
<div class="box-placeholder">
<!-- START DATATABLE 1 -->
<div class="panel panel-default {{ dataLoad }}">
<div class="panel-heading">
<a ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv" class="pull-right btn btn-sm btn-info">Export to CSV</a>
<div ng-if="gradeFilter" class="panel-title">Classes</div>
</div>
<div class="table-responsive ">
<table ng-table="table.tableParams" export-csv="csv" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="g in $data ">
<td data-title ="'Topic'" align="center" >{{g.noticeId}}</td>
<td data-title ="'Message'" align="center" >{{g.message}}</td>
<td data-title ="'Sender'" align="center" >{{ g.senderName }} </td>
<td data-title ="'Date'" align="center" >{{ g.date | cmdate:'dd-MMM-yyyy' }}</td>
<td align="center"><a ui-sref="admin.viewEditnotice({nid : g.noticeId})">View </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my controller file
enter code here/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
console.log('Notice loaded');
App.controller('NoticeController', ["$scope","$http","$stateParams","Notice","toaster","APISource",function($scope,$http,$stateParams,Notice,toaster,APISource) {
'use strict';
$http.get(APISource.currentApiPoint+"/app/notice")
.success(function(data){
console.log(JSON.stringify(data))
})
.error(function(data)
{
});
Define your data as, $scope.mydata = data and then in ng-repeat use, g in mydata
Set your AJAX response to controller model like this:
$scope.$data = data

Categories