Develop Reference

Changing innerHTML of importedNode

I want to replace a string inside a template. It is already working, but I want to change it inside the importedNode and not inside the complete table.
I did not find a way to change the innerHTML of theimportTemplate.
let template = document.querySelector('#templateRow');
// add to document DOM
let importTemplate = document.importNode(template.content, true); // where true means deep copy
console.log(importTemplate);
table.appendChild(importTemplate);
console.log(table);
table.innerHTML = table.innerHTML.replaceAll("[i]", this.uid)
<template id="templateRow">
<tr id="row_[i]">
<td><i class="icon fa-sharp fa-solid fa-plus"></i></td>
<td id="name_[i]"></td>
<td id="mode_[i]"></td>
<td id="state_[i]"></td>
</tr>
<tr>
<td style="display: none;"></td>
<td style="display: none;" colspan="4">
<div id="columns_[i]" class="columns">
<div id="[i]_column_1" class="column"><button id="btnRemove_[i]" class="button is-danger is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-trash pr-2"></i></span><span>Remove</span></span></button></div>
<div id="[i]_column_2" class="column">
<button id="btnEnable_[i]" class="button is-success is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-play pr-2"></i></span><span>Enable</span></span></button>
<button id="btnDisable_[i]" class="button is-info is-small is-hidden"><span class="icon-is-small"><span><i
class="fa-solid fa-stop pr-2"></i></span><span>Disable</span></span></button>
</div>
<div id="[i]_column_3" class="column"><button id="btnDownload_[i]" class="button is-primary is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-download pr-2"></i></span><span>Download</span></span></button>
</div>
<div id="[i]_column_4" class="column">
<p id="[i]_p_1">Hash: <span id="hash_[i]"></span></p>
</div>
<div id="[i]_column_5" class="column">
<p id="[i]_p_2">Port: <span id="port_[i]"></span></p>
</div>
<div id="[i]_column_6" class="column">
<p id="[i]_p_3"><span id="rxbytes_[i]"></span></p>
</div>
</div>
</td>
</tr>
</template>

reload page asynchronously after success ajax

i'm trying to add a new entered value to a table after success method runs using ajax , i've used ModelForm . i want to add the new entry to the table body row ! , i've tried alot , but still i cant figure it out ! i most appreciate your helps
class MainGroup(models.Model):
admin = models.ForeignKey(User,on_delete=models.CASCADE)
main_type = models.CharField(max_length=40,unique=True)
date = models.DateTimeField(auto_now_add=True)
my views.py
#login_required
def create_maingroup(request):
lists = MainGroup.objects.all().order_by('-pk')
form = MainGroupForm()
if request.is_ajax() and request.method == 'POST':
form = MainGroupForm(request.POST)
if form.is_valid():
obj = form.save(commit=False)
obj.admin = request.user
obj.save()
return JsonResponse({'success':'success'})
else:
return JsonResponse({'sucess':False,'error_msg':form.errors,'error_code':'invalid'})
context = {
'form':form,'lists':lists
}
return render(request,'products/create_maingroup.html',context)
const form = document.getElementById('main_form')
form.addEventListener("submit",submitHandler);
function submitHandler(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url 'products:create-maingroup' %}',
data : $('#main_form').serialize(),
dataType: 'json',
success: successFunction,
});
}
function successFunction(data) {
console.log(data.success=='success')
if (data.success=='success') {
form.reset();
obj = $('#main_form').serialize();
//i have to append new entred values here
//but i dont know how to get inputs and set the admin
//name who created the post !
alertify.success("added")
}
else if(data.error_code=='invalid'){
for(var key in data.error_msg){
if(key == 'main_type'){
document.getElementById('main_error').removeAttribute('hidden')
document.getElementById('main_error').innerHTML = data.error_msg[key][0]
}
}
}
}
my html page
<div class="col-md-12">
<div class="card card-info">
<div class="card-header">
<div class="card-tools">
<button type="button" class="btn btn-tool" data-toggle="collapse" data-target="#main_form" aria-expanded="false" aria-controls="main_form">
<i class="fas fa-minus"></i>
</button>
</div>
<h3 class="text-center">add new data</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form id="main_form" role="form" method="POST">{% csrf_token %}
<div class="card-body">
<div class="form-group row">
<label for="mainGroup" class="col-sm-2 control-label">name</label>
<div class="col-sm-10">
{{form.main_type | attr:'id:mainGroup'}}
<p id="main_error" class="alert alert-danger" aria-disabled="true" hidden></p>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success">add</button>
</div>
</form>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="text-center">list of names</h3>
</div>
<div class="card-body table-responsive">
<table id="maingroupid" class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>#</th>
<th>admin</th>
<th>name</th>
<th>date</th>
<th>actions</th>
</tr>
</thead>
<tbody id="tableData">
{% for i in lists %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.admin}}</td>
<td>{{i.main_type}}</td>
<td>{{i.date | date:'d-m-Y h:i A'}}</td>
<td align="center">
<button class="btn btn-info bg-info" onclick="editMain({{i.id}})" data-toggle="modal" data-target="#myModal"><i class="far fa-edit"></i></button>
<button class="btn btn-danger bg-danger" onclick="deleteMain({{i.id}})"><i class="far fa-trash"></i></button>
</td>
</tr>
{% endfor %}
</tbody>
</tfoot>
</table>
</div>
</div>
</div>
is it possible without refreshing the page and display the new data please ? i need it so much

You could return the new table once edited
context = {} # whatever your context is
return render(request, 'path/to/table/template.html', context=context)
template.html is the table element of your template
<thead>
<tr>
<th>#</th>
<th>admin</th>
<th>name</th>
<th>date</th>
<th>actions</th>
</tr>
</thead>
<tbody id="tableData">
{% for i in lists %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.admin}}</td>
<td>{{i.main_type}}</td>
<td>{{i.date | date:'d-m-Y h:i A'}}</td>
<td align="center">
<button class="btn btn-info bg-info" onclick="editMain({{i.id}})" data-toggle="modal" data-target="#myModal"><i class="far fa-edit"></i></button>
<button class="btn btn-danger bg-danger" onclick="deleteMain({{i.id}})"><i class="far fa-trash"></i></button>
</td>
</tr>
{% endfor %}
</tbody>
</tfoot>
Then on success within ajax use
success: function (data, status) {
$('#maingroupid`).html(data);
}

MVC4 Razor Modal not showing value passed into custom Javascript function with the onclick event handler

The modal opens. The "Id" value is displayed in the readonly textbox with id = "Id". But the Description value does not display in the readonly textbox with the id = "Description". I stepped through the code and the correct value is present in the function on the master view. However, it is not displaying in the modal. Am I missing something? Why is the value not passing to the Description id in the partial?
Partial
#model AutoClickItOnline.Models.AdminViewModels.DeleteSubTypeViewModel
#{
Layout = null;
}
#using (Html.BeginForm("DeleteSubType", "Admin", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, null, new { #class = "text-danger" })
<div class="form-group">
<div class="col-md-12">
<label for="Id" class="text-dark">Subscription Type ID</label>
#Html.TextBoxFor(m => m.SubTypeId, new { #class = "form-control", #readonly = true, id = "Id" })
<label for="Name" class="text-dark pt-2">Descripiton</label>
#Html.TextBoxFor(m => m.Description, new { #class = "form-control", #readonly = true, id = "Description" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success">Delete Subscription Type</button>
</div>
</div>
}
Javascript:
#section Scripts{
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#user_table').DataTable({
"scrollY": "50vh",
"scrollX": true,
"autowidth": false
});
});
function DeleteSubType(id, Description) {
$('#Id').val(id);
$('#Description').val(Description);
$('#DeleteSubTypeModal').modal('show')
}
</script>
}
Main View:
#model AutoClickItOnline.Models.AdminViewModels.SubscriptionTypeTableViewModel
#{
ViewBag.Title = "SubTypes";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<section>
<div class="container">
<div class="row py-5">
<div class="col">
<div class="modal fade" id="newSubTypeModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">New Subscription Type Entry</h2>
</div>
<div class="modal-body">
#{
Html.RenderPartial("/Views/Admin/AddSubTypePartial.cshtml", new SubscriptionType());
}
</div>
</div>
</div>
</div>
<div class="modal fade" id="DeleteSubTypeModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Delete Subscription</h2>
</div>
<div class="modal-body">
#{
Html.RenderPartial("/Views/Admin/DeleteSubTypePartial.cshtml", new AutoClickItOnline.Models.AdminViewModels.DeleteSubTypeViewModel());
}
</div>
</div>
</div>
</div>
<div class="d-flex flex-row">
<h2 class="pr-2">Subscription Type Manager</h2>
<a class="btn btn-sm btn-primary ml-auto my-2 text-light text-center d-none d-md-block" href="#" data-toggle="modal" data-target="#newSubTypeModal"><i class="fa fa-plus text-light pr-1"></i>Add New Subscription Type</a>
<a class="btn btn-sm btn-primary ml-auto my-2 text-light text-center d-sm-none" style="max-height:50px;" href="#" data-toggle="modal" data-target="#newSubTypeModal">ADD NEW</a>
</div>
#if (Model.Message != null)
{
<div class="text-danger">
#Html.DisplayFor(modelItem => Model.Message, null, new { #class = "text-danger" })
</div>
}
<hr />
<table id="user_table" class="display small-table table-bordered border-dark" style="width:100%;">
<thead>
<tr>
<th style="font-size:11px; min-width:195px;">Id</th>
<th style="font-size:11px;">Description</th>
<th style="font-size:11px;">Length</th>
<th style="font-size:11px;">Cost</th>
<th style="font-size:11px;">Active</th>
<th style="font-size:11px; min-width:100px;">Date/Time Created</th>
<th style="font-size:11px; min-width:60px;">Created By</th>
<th style="font-size:11px; min-width:105px;">Date/Time Modified</th>
<th style="font-size:11px; min-width:65px;">Modified By</th>
<th style="font-size:11px;">Delete</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.SubscriptionTypes)
{
<tr>
<td style="font-size:11px">#Html.DisplayFor(modelItem => item.SubscriptionTypeId)</td>
<td style="font-size:11px">#Html.DisplayFor(modelItem => item.Description)</td>
<td style="font-size:11px">#Html.DisplayFor(modelItem => item.Length)</td>
<td style="font-size:11px">$#Html.DisplayFor(modelItem => item.Cost)</td>
#if (item.Active)
{
<td style="font-size:11px">Yes</td>
}
#if (!item.Active)
{
<td style="font-size:11px">No</td>
}
<td style="font-size:11px">#Html.DisplayFor(modelItem => item.DateTimeCreated) UTC</td>
<td style="font-size:11px">#AdminHelpers.GetUsersName(item.CreatedBy)</td>
<td style="font-size:11px">#Html.DisplayFor(modelItem => item.DateTimeModified) UTC</td>
<td style="font-size:11px">#AdminHelpers.GetUsersName(item.ModifiedBy)</td>
<td>
<input type="button" class="btn btn-sm btn-danger" value="X" onclick="DeleteSubType('#item.SubscriptionTypeId', '#item.Description'); return false;" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</section>

Why my edit page didn't work in Laravel? I used vue.js

Basically, I'm doing a dashboard to view the details. If the user want to edit the their details. They should click the edit button to edit it.If i click the edit button it's didn't response anything. Now the edit didn't work. I couldn't find the problem. I attach my codes over here.
index.blade.php
#extends('layouts.main')
#section('content')
<div class="justpaddingside" role="main" >
<div class="row w-100 Bfont">
<div class="col-xs-12">
<div class="havence-content">
<div class="havence-content-body">
<div class="dashboardbg">
<div class="x_title" >
<img src="https://img.icons8.com/bubbles/50/000000/important-mail.png" class="rounded float-left" >
<h2 class="p-3 font-weight-bold">Email Reminder Dashboard</h2>
<h4 class="text-right">{{date('d-m-Y')}}</h4>
<h5 class="text-right">{{date('H:i:s')}}</h5>
</div>
<div class="col-md-12 text-right">
<a href="mail" class="btn btn-danger badge-pill" > Create New Template </a>
</div>
</div>
<div class="contentbg p-5">
<div class="row w-100">
<div class="havence-content-datatable table-responsive">
<table class="table table-hover table-info" cellpadding="0" cellspacing="0" border="0">
<thead class="">
<tr>
<th scope="col">ID</th>
<th scope="col">Subject</th>
<th scope="col">Message</th>
<th scope="col">Condition</th>
<th scope="col">Module Name</th>
</tr>
</thead>
<tbody>
#foreach ($mailTemplates as $mailTemplate)
<tr>
<th>{{$mailTemplate->id}}</th>
<th>{{$mailTemplate->subject}} </th>
<th>{{$mailTemplate->message}} </th>
<th>{{$mailTemplate->condition_id}} </th>
<th>{{$mailTemplate->mod_name}}</th>
<td class="text-right">
<a href='edit/{id}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
<form action="{{ route('havence.automail.delete', $mailTemplate) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! Form::open(['method'=>'post', 'id'=> 'delete-frm']) !!}
#method('DELETE')
#csrf
{!! Form::close() !!}
</div>
#endsection
#push('stylesheets')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
#endpush
#push('scripts')
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script src="https://unpkg.com/sweetalert2#7.19.3/dist/sweetalert2.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
#endpush
#section('page-js')
<script>
</script>
#endsection
AutoMailController.php
public function edit($id)
{
$mailTemplates=AutoEmailTemplate::find($id);
return view('havence.automail.edit')->with('mailTemplates', $mailTemplates);
}
web.php
Route::get('api/email/create', ['as' => 'email.create', 'uses' => 'Havence\AutoMailController#create']);
Route::get('automail/mail', 'Havence\AutoMailController#mail');
Route::get('automail/index',['as'=>'email.index','uses' => 'Havence\AutoMailController#index']);
Route::get('automail/edit/{id}',['as'=>'email.edit','uses' => 'Havence\AutoMailController#edit']);
Route::get('automail/delete',['as'=>'email.delete','uses' => 'Havence\AutoMailController#destroy']);

Try to use :
<a href='{{ route("email.edit",["id"=>$mailTemplate->id]) }}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>

You're not passing the id from your href and user laravel string interpolation '{{ $variable }}'.
<a href='edit/{{$mailTemplate->id}}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
also if you want to open the route in another tab add target="_blank" in your 'a' tag.
<a href='edit/{{$mailTemplate->id}}' target='_blank' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>

what about replacing :
<a href='edit/{id}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
with:
<a href={{'edit/'.$mailTemplate->id}} class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>

Angularjs Page Load always return to page 1

When I chosen a page number, localStorage store this page number. But I redirect to other page, then I reback this page. It always return to page 1. Because function vm.loadAll recall again after page load init().
(function() {
'use strict';
angular
.module('eTransportApp')
.controller('ImprestBillController', ImprestBillController);
ImprestBillController.$inject = ['$state', 'ImprestBill', 'ParseLinks', 'AlertService', '$scope', 'eTransportAppConstants', '$localStorage', 'DateUtils'];
function ImprestBillController($state, ImprestBill, ParseLinks, AlertService, $scope, eTransportAppConstants, $localStorage, DateUtils) {
var vm = this;
vm.predicate = 'id';
vm.reverse = true;
vm.itemsPerPage = eTransportAppConstants.itemsPerPage;
vm.page = 1;
vm.loadAll = function() {
ImprestBill.query({
page: vm.page > 0? vm.page - 1: vm.page,
size: vm.itemsPerPage,
sort: sort(),
fromDate: DateUtils.convertLocalDateToServer($localStorage.searchForImprestBill.fromDate),
toDate: DateUtils.convertLocalDateToServer($localStorage.searchForImprestBill.toDate),
fromCost: $localStorage.searchForImprestBill.fromCost,
toCost: $localStorage.searchForImprestBill.toCost,
status: $localStorage.searchForImprestBill.status,
clientId: $localStorage.searchForImprestBill.clientId
}, onSuccess, onError);
function sort() {
return [vm.predicate + ',' + (vm.reverse ? 'desc' : 'asc')];
}
function onSuccess(data, headers) {
vm.links = ParseLinks.parse(headers('link'));
vm.totalItems = headers('X-Total-Count');
vm.queryCount = vm.totalItems;
vm.imprestBills = data;
$localStorage.pageForImprestBill.page = vm.page;
$localStorage.pageForImprestBill.predicate = vm.predicate;
$localStorage.pageForImprestBill.reverse = vm.reverse
}
function onError(error) {
AlertService.error(error.data.message);
}
}
vm.clear = function() {
$localStorage.searchForImprestBill = {};
$localStorage.pageForImprestBill.page = 1;
$localStorage.pageForImprestBill.reverse = true;
$localStorage.pageForImprestBill.predicate = 'id';
vm.reverse = true;
vm.predicate = 'id';
vm.loadAll();
}
/*$scope.$on(eTransportAppConstants.EVT_LOAD_RESULT_IMPREST_BILL, function(event){
vm.loadAll();
});*/
function init() {
if (!$localStorage.searchForImprestBill) {
$localStorage.searchForImprestBill = {};
}
if (!$localStorage.pageForImprestBill) {
$localStorage.pageForImprestBill = {};
}
vm.predicate = $localStorage.pageForImprestBill.predicate? $localStorage.pageForImprestBill.predicate: 'id';
vm.reverse = $localStorage.pageForImprestBill.reverse? $localStorage.pageForImprestBill.reverse: true;
vm.page = $localStorage.pageForImprestBill.page? $localStorage.pageForImprestBill.page: 1;
vm.loadAll();
}
vm.showClearBtn = function() {
return ($localStorage.searchForImprestBill && JSON.stringify($localStorage.searchForImprestBill) !== '{}');
}
init();
}
})();
<div>
<h2 data-translate="eTransportApp.imprestBill.home.title">Imprest Bills</h2>
<jhi-alert></jhi-alert>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 no-padding-right no-padding-left">
<div class="input-group no-padding-left">
<button class="btn btn-info" ui-sref="imprest-bill.search" >
<span class="glyphicon glyphicon-search"></span>
<span data-translate="eTransportApp.imprestBill.home.searchLabel">
Search new Imprest Bill
</span>
</button>
<button class="btn btn-info " ng-click="vm.clear()" ng-if="vm.showClearBtn()">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 no-padding-left">
<button class="btn btn-primary" ui-sref="imprest-bill.new" >
<span class="glyphicon glyphicon-plus"></span>
<span data-translate="eTransportApp.imprestBill.home.createLabel">
Create new Imprest Bill
</span>
</button>
</div>
</div>
</div>
<br/>
<div class="table-responsive">
<table class="jh-table table table-striped">
<thead>
<tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.loadAll()">
<th jh-sort-by="id"><span data-translate="global.field.id">ID</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="date"><span data-translate="eTransportApp.imprestBill.date">Date</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="totalCost"><span data-translate="eTransportApp.imprestBill.totalCost">Total Cost</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="status"><span data-translate="eTransportApp.imprestBill.status">Status</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="paidDate"><span data-translate="eTransportApp.imprestBill.paidDate">Paid Date</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="note"><span data-translate="eTransportApp.imprestBill.note">Note</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="client.name"><span data-translate="eTransportApp.imprestBill.client">Client</span> <span class="glyphicon glyphicon-sort"></span></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="imprestBill in vm.imprestBills track by imprestBill.id">
<td><a ui-sref="imprest-bill.edit({id:imprestBill.id})">{{imprestBill.id}}</a></td>
<td>{{imprestBill.date | date:'dd/MM/yyyy'}}</td>
<td>{{imprestBill.totalCost | number}}</td>
<td data-translate="{{'eTransportApp.ImprestBillStatus.' + imprestBill.status}}">{{imprestBill.status}}</td>
<td>{{imprestBill.paidDate | date:'dd/MM/yyyy'}}</td>
<td>{{imprestBill.note}}</td>
<td>
<a ui-sref="client-detail({id:imprestBill.client.id})">{{imprestBill.client.nickName}}</a>
</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
ui-sref="imprest-bill.edit({id:imprestBill.id})"
class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
<span class="hidden-sm-down" data-translate="entity.action.edit"></span>
</button>
<button type="submit"
ui-sref="imprest-bill.delete({id:imprestBill.id})"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="hidden-sm-down" data-translate="entity.action.delete"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center">
<uib-pagination boundary-links="true"
class="pagination-sm"
total-items="vm.totalItems"
ng-model="vm.page"
items-per-page="vm.itemsPerPage"
max-size="20"
rotate="false"
ng-change="vm.loadAll()">
</uib-pagination>
</div>

<div class="text-center" ng-if="vm.totalItems">
<uib-pagination boundary-links="true"
class="pagination-sm"
total-items="vm.totalItems"
ng-model="vm.page"
items-per-page="vm.itemsPerPage"
max-size="20"
rotate="false"
ng-change="vm.loadAll()">
</uib-pagination>
</div>