through my journey on understanding ajax i came up with this problem and i don't know how to solve it first im requesting for datas in my table
load_data();
function load_data(page)
{
$.ajax({
url:"data.php",
method:"POST",
data:{page:page},
success:function(data){
$('#result').html(data);
},
error:function(exception){alert('Exeption:'+exception);}
})
}
this is just the table where it will be output
<table>
<thead>
<tr>
<th>name</th>
<th>details</th>
<th>price</th>
<th></th>
</tr>
</thead>
<tbody id = "result">
and this is the output from network tab
Response from network tab
there's a button from the response i tried to activate it using this jquery to submit its form but this doesn't work
$(document).on('click', '#add_details', function(){
$(this).parents("form").submit();
});
add id to the form you need to submit with button click like
<form id="myForm1">
//Other Code Here
and with your button just Use the id you added
$(document).on('click', '#add_details', function(){
$("#myForm1").submit();
});
Related
I am trying to use bootbox.confirm() for a simple confirmation box but dialog box is not showing up on the page. There are no problems in the chrome's console (in fact there is nothing in there). However when I click my button , for which the dialog box is supposed to appear, the additional div of the box can be seen in the elements section of the chrome's developer tools but nothing can be seen on the page.
here is the javascript.
$(document).ready(function () {
$("#customers .js-delete").on("click", function () {
var button = $(this);
bootbox.confirm("Are you sure you want to delete this Customer?", function (result) {
if (result==true) {
$.ajax({
url: "/api/customers/" + button.attr("data-customer-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove();
}
});
}
});
});
});
here is html of the page
<table id="customers" class="table table-bordered table-hover">
<thead>
<tr>
<th>Customer</th>
<th>Membership Type</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach (var customer in Model)
{
<tr>
<td>#Html.ActionLink(customer.Name, "Edit", "Customers", new { id = customer.Id }, null)</td>
<td>#customer.MembershipType.Name</td>
<td>
<button data-customer-id="#customer.Id" class="btn btn-link js-delete">Delete</button>
</td>
</tr>
}
</tbody>
</table>
I copied your code to my environment and its works fine. Just make sure you did initialize the bootbox.js in the bundleConfig file under the bootstrap library other way the bootbox will not render in your page
"~/scripts/bootbox.js"
I have a datatable it have a search box (date range filter) once i click the search button table body replace according to the filter(ajax).
my problem is i cant initialize table after ajax success.
HTML
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
Ajax
type: 'POST',
url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
data: "action=filterOc&" + url_data,
success: function (resultData) {
$('#occupancyBody').html(resultData);
$('#occupancy').dataTable();
}
});
sample screenshot
You can use below mentioned code to reinitialize table after ajax call.
While defining datatable, you can store in a variable.
var myTable = $('#occupancy').DataTable({ // all your configuration });
Now after ajax call you can call below line.
myTable.ajax.reload();
also remove this line in ajax:success function.
$('#occupancy').dataTable();
Let me know if it not works.
Please check here
$(document).ready(function(){
var table = $('#occupancy').dataTable();
$.ajax({
type: 'POST',
url: "../system/user/modules/controller.php",
data: "action=filterOc&",
success: function (resultData) {
$('#occupancyBody').html(resultData);
table.ajax.reload();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
The ajax.reload() API function should only work if you included the ajax option in Datatable's initialization (see here).
In this case, I'd recommend to add destroy:true to the initialization of Datatables, something like this:
$('#occupancy').DataTable({ destroy:true})
This would allow you to re-create the table every time the ajax call is successful.
hi i guess you selected wrong body id :
$('#occupancyBody').html(resultData);
but in your html :
<tbody id="dailyAct">
hope it's help,
I've been trying to fix a problem in my app for a couple of days now and I can't figure out what's happening.
I'm developing a MVC 4 application. I have a view in which there's a div that I load with more html with an ajax call that is executed on the $(function() { ... });. That ajax call works fine.
Problems start when I make the second ajax call. I paste the code below :-
In the main view :-
<div class="body" id="loadedData">
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
loadData("#Url.Action("Authorizations","User", new { id = Model.ID })");
});
function loadData(url){
$.ajax({
type: 'GET',
url: url,
success: function (data) {
$("#loadedData").html(data);
}
});
}
</script>
And the partial view that is loaded in the div it's this:
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
Remove
</td>
</tr>
}
</table>
}
The problem happens when I click on the link in the HTML that's loaded by ajax (Remove). When i click, the page 'blinks' but nothing happens. I've put a breakpoint in the RevokeAccess function in UserController and it never stops.
Please help!
Edit:
There's other thing, when i click on the link, in the Chrome console it's shown a "Uncaught SyntaxError: Unexpected token )" message, but it disappears very quickly, i don't know why.
As you are using jQuery don't use inline events. Bind click event using jQuery. As you are fetching Partial View you can use .load() which is much simpler.
Script
<script type="text/javascript">
$(function(){
$("#loadedData").load("#Url.Action("Authorizations","User", new { id = Model.ID })");
$("#loadedData").on('click', '.anchor', function(event){
event.preventDefault();//Stop default action
$("#loadedData").load(
$(this).data('url'), //Url
{ id: $(this).data('id'), op : $(this).data('op')}, //Parameters
function(){
//Perform any action if any
}
);
})
});
</script>
Change Your Partials as
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
<a class='anchor' href="#" data-url='#Url.Action("RevokeAccess", "User")' data-id="#ViewBag.UserID" data-op="#Int32.Parse(prod[1])">Remove</a>
</td>
</tr>
}
</table>
}
I'm working on a groovy grails application for a performance review tool. i'm currently making a form that creates a table which lists the supervisor(s) for an employee. This table has a delete button for each record in the first column. When clicked, the form will post to the delete action (which works fine). I'm trying to use jquery to make an ajax call to make the entire process happen without refreshing the page. If there is only one supervisor, the ajax call works fine but if there is more than one supervisor, the ajax call fails even though the delete happened.
list.gsp
<div class="form-action">
<div id="deleteSupervisorReport">
<g:render template="displaySupervisorsTemplate" model="[supervisorReportInstanceList: supervisorReportInstanceList]"/>
</div>
</div>
_displaySupervisorsTemplate.gsp
<g:if test="${supervisorReportInstanceList.size() > 0}">
<table class="table table-bordered table-hover table-striped table-dataTable">
<caption class="hide">Supervisor Reports</caption>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Employee Type</th>
<th>Start Date</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<g:each var="supervisorReport" in="${supervisorReportInstanceList}">
<tr>
<td>
<g:form action="delete" class="form-horizontal" method="post">
<g:hiddenField name="reportId" value="${supervisorReport.reportId}"/>
<g:hiddenField name="supervisorId" value="${supervisorReport.supervisorId}"/>
<g:actionSubmit class="delete" value="${message(code: 'default.button.delete.label', default: 'delete')}" />
</g:form>
</td>
<td><pr:personLink person="${supervisorReport.supervisor}" /></td>
<td>${fieldValue(bean: supervisorReport.supervisor, field: "employeeType")}</td>
<td>${fieldValue(bean: supervisorReport.supervisor, field: "currentTitle.startDate")}</td>
<td>${fieldValue(bean: supervisorReport.supervisor, field: "currentTitle.name")}</td>
</tr>
</g:each>
</tbody>
</table>
</g:if>
<g:else>
<p>You have no Reports.</p>
</g:else>
main.js
// Attach the delete supervisor submission handler
$("body").on("submit", "#deleteSupervisorReport form", function(e) {
e.preventDefault();
var method = this.method;
var action = this.action;
var data = $(this).serialize();
$.ajax({
type: method,
url: action,
data: data,
success: function(data) {
// Replace the table
$("#deleteSupervisorReport").replaceWith(data);
},
error: function(data) {
// this alert pops up whenever I try to delete a record when a person has more than one supervisor
alert("javascript Error, please refresh the page");
}
});
});
delete action
// Delete a specific SupervisorReport
def delete() {
withSupervisorReport { supervisorReportInstance ->
supervisorReportInstance.delete(flush: true)
withFormat {
html {
def list = SupervisorReport.findAllByReport(Person.get(params.reportId as Integer))
def message = 'Supervisor report deleted'
def messageType = "Success"
render(template:"/supervisorReport/displaySupervisorsTemplate", model: [supervisorReportInstanceList: list, message: message, messageType: messageType])
}
}
}
}
Sorry for the plethora of code but I don't even know where the problem is.
I'm trying to post on ajax from a ajax get.
Here is my code below that I'm using:
$(window).load(function() {
$.ajax({
url: "/masterScreen/ajaxdealerpaid/{{$id}}",
type: "GET",
data: {},
success: function(data) {
document.getElementById("dealerPaid").innerHTML=data;
}
});
});
And then i'm trying:
$(".pay").click(function(){
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
var id = $(this).attr('data-id');
var amountPaid = $("#payAmount_"+id).val()
$.ajax({
url: "/masterScreen/dealermarkpaid/"+id+"/"+amountPaid,
type: "POST",
data: {},
success: function(data) {
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
location.reload();
}
});
});
My HTML is...
<table style="width: auto;" class="table table-striped table-condensed" border="0" cellspacing="0" cellpadding="0">
<thead class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px;">
<tr>
<th class="span2">Quote ID</th>
<th class="span4">Customer name</th>
<th class="span4">Connection date</th>
<th class="span4">BDM</th>
<th class="span4">Owed</th>
<th class="span4">Amount</th>
<th class="span2"></th>
</tr>
</thead>
<tbody id="dealerUnpaid" style="display:block; overflow:auto; max-height:400px;">
</tbody>
<tfoot id="dealerUnpaidtot" class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px; font-weight: bold;">
</tfoot>
</table>
It displays the data from the first javascript, but I also have this code from the view it's GET from...
<td class="span4"><input type="text" placeholder="Enter Amount" class="payAmount" data=name="amount" data-id="{{$unpaid->id}}" id="payAmount_{{$unpaid->id}}"></td>
<td class="span2"><input type="button" class="btn pay" value="Pay" data-id="{{$unpaid->id}}"></td>
When I press the Pay button it doesn't do anything :/
Any help to make this work would be nice please.
Thanks guys
If I understand correctly, you're loading your markup (including the .pay element) using AJAX and then attempting to bind something to the .pay element's click event. Since the .pay element doesn't exist in the page at the time you're doing the binding, the binding isn't working. Change your binding from:
$('.pay').click(function(){
to
$(window).on('click', '.pay', function(){
That will attach the binding to the window, which has the effect of working even on elements that are added after the window is loaded.
$(".pay").click(function(){...
Works only on already create elements with class pay, it doesnt work on newly created elements by ajax call.
You can use delegate function to handle newly created elements
$("body").delegate(".pay","click",function(event){
event.preventDefault(); // prevent default handlings
alert("Test");
//do other code...
});