Develop Reference

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

Clickable link inside UI Sortable field

I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);

Cannot populate record to bootstrap modal when a link is clicked

Please I need some help, I have been working so hard to populate a record to bootstrap modal when a link is clicked so that user can edit and update the record. The link is not in form, its in a table.
Below are my nonworking codes:
The HTML
<div class="widget-content">
<form action="#" method="GET">
<table class="table table-striped table-bordered table-hover table-checkable datatable">
<thead>
<tr>
<th class="checkbox-column">
<input type="checkbox" class="uniform">
</th>
<th>Actions</th>
<th>Code</th>
<th>Full Name</th>
<th>Company Name</th>
<th>Business Location</th>
<th>Telephone</th>
<th>Credit Limit</th>
</tr>
</thead>
<tbody>
<?php
$query="select * from customer_vendor";
$result = mysqli_query($link,$query);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC) ){
$firstname = $row['first_name'];
$lastname = $row['last_name'];
$fullname = $firstname.' '.$lastname;
$climit = number_format($row['credit_limit'],2);
echo
"<tr>
<td class=\"checkbox-column\">
<input type=\"checkbox\" class=\"uniform\" >
<input type=\"hidden\" >
</td>
<td>
<ul class=\"table-controls\">
<li><a class=\"bs-tooltip\" id=\"updateit\" name=\"update_cv\" data-class=\"{$row['customer_vendor_id']}\" data-toggle=\"modal\" href=\"#update_customer_vendor\" title=\"Edit\"><i class=\"icon-pencil\"></i></a> </li>
<li><a class=\"bs-tooltip\" data-toggle=\"modal\" href=\"#delete_customer_vendor\" title=\"Delete\"><i class=\"icon-trash\"></i></a> </li>
</ul>
</td>
<td>{$row['customer_vendor_id']}</td>
<td>$fullname</td>
<td>{$row['company_name']}</td>
<td>{$row['business_location']}</td>
<td>{$row['telephone']}</td>
<td>$climit</td>
</tr>";
}
?>
</tbody>
</table>
</form>
<button class="btn btn-primary"><i class="fa fa-plus"> New</i></button>
</div>
The modal:
<div class="modal modal-wide fade" id="update_customer_vendor">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Updating customer - Vendor</h4>
</div>
<form action="#" method="POST">
<div class="modal-body" id="update_modal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" ><i class="fa fa-save"> Update</i></button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
The script:
<script type="text/javascript">
$(document).ready(function(){
$("#updateit").click(function(){
var studentClass =$("#updateit").val();
$.ajax({
type:"GET",
url:"update_cust_vend.php",
data:"updateit="+studentClass,
success:function(data){
$("#update_modal").html(data);
}
});
});
});
</script>

try following. i think that should fix it.
<li><a class=\"bs-tooltip\" id=\"updateit\" name=\"update_cv\" data-class="studentclass" data-toggle=\"modal\" href=\"#update_customer_vendor\" title=\"Edit\"><i class=\"icon-pencil\"></i></a> </li>
link must contain studentClass somewhere it's not a input field so can't use val() .
i.e data-class="studentclass" in above link.
$(document).ready(function(){
$("#updateit").on('click', function(e){
e.preventDefault();
var studentClass =$(this).data('class'); // get studentclass form link.
$.ajax({
type:"GET",
url:"update_cust_vend.php",
data:"updateit="+studentClass,
success:function(data){
$("#update_modal").html(data);
$("#update_customer_vendor").modal();
}
});
});
});

First of all add the following to your click event to prevent the default behaviour of the hyperlink:
$("#updateit").click(function(event){
event.preventDefault();
});
After that I am confused, you are taking the value of your hyperlink here:
var studentClass =$("#updateit").val();
Is this not a mistake? Because your hyperlink doesn't have a value...
You can store a value in a custom made attribute. To do so you must define your attribute with the data- prefix. So for example data-value.
So your hyper link would be:
<li><a class=\"bs-tooltip\" id=\"updateit\" ... data-value="1"><i class=\"icon-pencil\"></i></a></li>
To get the value use:
var studentClass = $(this).attr('data-value');
Where $(this) refers to your clicked hyperlink.
And in your success handler after populating the html you don't show the modal, add this:
$('#update_customer_vendor').modal('show');

HTML div becomes unresponsive after reloading by AJAX

Okay here I have a jsp page, in which I have used a jsp code in inflating elements in an HTML table using a loop...Now when i reload this table using AJAX...what happens simply is that it becomes unresponsive...ie...I'm unable to apply the onClick sorting and search bar which were working before reloading..
Here's my coding for the table
<div class="row-fluid sortable" id="tableRow">
<div class="box span12" id="teacherTableRow">
<div class="box-header" data-original-title>
<h2><i class="halflings-icon user"></i><span class="break"></span>STAFF TABLE</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>TN</th>
<th>TC</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<% while(resultset.next()) { %>
<tr>
<td> <%= resultset.getString(1) %> </td>
<td> <%= resultset.getString(2) %> </td>
<td class="center" >
<a class="btn btn-info" href="#">
<i class="halflings-icon white edit"></i>
</a>
<a class="btn btn-danger" href="deleteTeacherData.jsp?tc=<%=resultset.getString(2)%>" onclick="return deleteTeacher()" >
<i class="halflings-icon white trash" ></i>
</a>
</td>
</tr>
<% }%>
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
Here is my javascript code which I have tried so far to reload and get it active..
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow');
I also tried this, but no avail...
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow',function(){
$('#teacherTableRow').on("load",'HOD-page1.jsp #teacherTableRow'});

modal inside an ng-repeat directive causes crash

i am trying to put inside a table abutton that will open a modal.
but no matter which button i click it seems that it tries to open it many times.
i have put the openModal and closeModal inside the main controller.
i believe the problem might be because i am using it inside an ng-repeat?
but in any case i do not know what is going wrong. what am i doing wrong?
i am using this modal:
http://angular-ui.github.io/bootstrap/#/modal
the html code:
<div class="row">
<div class="span4" ng-repeat="court in courts">
<table class="table table-condensed table-bordered table-hover">
<caption><h4>court {{court.records[0].id}}<h4></caption>
<tr>
<th style='text-align:center'>Hour</th>
<th style='text-align:center'>Player 1</th>
<th style='text-align:center'>Player 2</th>
<th></th>
</tr>
<tr ng-repeat="record in court.records">
<td width="50" >{{record.hour}}</td>
<td ng-style="user1Payed(record)" style='text-align:center'>{{record.u1_first}} {{record.u1_last}}</td>
<td ng-style="user2Payed(record)" style='text-align:center'>{{record.u2_first}} {{record.u2_last}}</td>
<td> <!-- options button -->
<button class="btn" ng-click="openModal()">Open me!</button>
<div modal="shouldBeOpen" close="closeModal()" options="opts">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="closeModal()">Cancel</button>
</div>
</div>
</td> <!-- options button end -->
</tr>
</table>
</div>
</div>
and the controller code:
function CourtsController($scope, $window, $http, CourtsService, $timeout) {
$scope.openModal = function () {
$scope.shouldBeOpen = true;
};
$scope.closeModal = function () {
$scope.closeMsg = 'I was closed at: ' + new Date();
$scope.shouldBeOpen = false;
};
$scope.items = [
"Guest Payment",
"Member Payment",
"League (no payment)",
"no Payment"
];
$scope.opts = {
backdropFade: true,
dialogFade:true
};

Move you modal div of the ng-repeat and set $scope variable according your openModal().