Everything works fine on the first click of the delete link, but subsequent clicks only delete the record, without refreshing the "quotes" div.
I'm not sure what I'm overlooking here.
My .js file:
$('.deleteRow').live('click', function (e) {
if (confirm('Delete?')) {
$.ajax({
type: 'POST',
url: this.href,
cache: false,
dataType: 'html',
success: function (response) {
$('#quotes').replaceWith(response);
$('#quotesTable').tablesorter().tablesorterPager({ container: $('#pager'), positionFixed: false });
}
});
}
return false;
});
and the html:
<tr>
<td>
Now is the time for all good men to come to the aid of their parties.
</td>
<td>
</td>
<td>
7/6/2010 10:13:44 PM
</td>
<td> <a class="editRow" href="/Quote/Edit/2">Edit</a></td>
<td> <a class="deleteRow" href="/Quote/Delete/2">Delete</a></td>
</tr>
<tr>
<td>
I'm a loser
</td>
<td>
146
</td>
<td>
7/6/2010 9:11:42 PM
</td>
<td> <a class="editRow" href="/Quote/Edit/1">Edit</a></td>
<td> <a class="deleteRow" href="/Quote/Delete/1">Delete</a></td>
</tr>
I'm looking at this on an iPhone, so I can't see all of your code but you should probably be using ".html" instead of ".replaceWith". The former replaces the content inside the specifies tag, the latter wipes out the tags, too.
Related
I'm trying to add some rows data in a datatable, first via Pug and then later on via javascript.
I add the first rows getting data via controller call, and then adding it via pug parse:
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
<thead>
<tr>
<th>
<th>Aprovado</th>
</th>
<th>Nome</th>
<th>Email</th>
<th>Data de nascimento</th>
<th>Cidade</th>
<th>Gênero</th>
<th>Escolaridade</th>
<th>Instituição de ensino</th>
<th>Semestre</th>
<th>Token</th>
<th>Selection Status</th>
</tr>
</thead>
<tbody>
for candidate in candidates
- var formatedCandidate = candidateService.formatCandidateForDataTable(candidate, newTrueCheckbox, newFalseCheckbox);
<tr>
<td>
<th>
if formatedCandidate.isCandidateApproved
<input type="checkbox" id="check-all" class="flat" checked>
else
<input type="checkbox" id="check-all" class="flat">
</th>
</td>
<td>
= formatedCandidate.name
</td>
<td>
= formatedCandidate.email
</td>
<td>
= formatedCandidate.bornDate
</td>
<td>
= formatedCandidate.city
</td>
<td>
= formatedCandidate.gender
</td>
<td>
= formatedCandidate.educationLevel
</td>
<td>
= formatedCandidate.educationInstitution
</td>
<td>
= formatedCandidate.educationSemester
</td>
<td>
= formatedCandidate.token
</td>
<td>
= formatedCandidate.selectionStatus
</td>
</tr>
</tbody>
</table>
This way, it manages to render the checkbox with the right style:
Later on, I try to update the rows via a "reload" button, getting data via a get request and then adding rows via javascript:
$.get("candidates/getCandidatesForTable", function(candidatesArray){
candidateTable.clear().draw();
candidatesArray.forEach((candidate, index) => {
debugger;
if (candidate[1]) {
candidate[1] = `<th>
<input type="checkbox" id="check-all" class="flat" checked/>
</th>`;
} else {
candidate[1] = `<th>
<input type="checkbox" id="check-all" class="flat"/>
</th>`;
}
candidateTable.row.add(candidate).draw();
});
});
Although I inserted the HTML code via javascript using the same properties as it was added via pug, the checkbox was rendered different: it is rendered, but the css style is now gone:
How should I add the a checkbox via javascript and still get the correct css styling?
I am using jquery datatables in my MVC ASP.Net application and get an alert warning while the application is running. The alert is "Warning: Scroller requires DataTables 1.10.0 or greater". I have verified that my version of DataTables is 1.10.10 and the DataTables work fairly well except for a few issues.
My issues with DataTables is when pages using it initially load, the number of rows that are supposed to be displayed do not match how many are shown. All rows are shown on a page load. Once I interact with the table, everything is fixed.
I am loading the javascript and css in my BundleConfig.cs file.
One of my views is as follows:
#model IEnumerable<Q5.ViewModels.ProjectVM>
#{
ViewBag.Title = "Projects";
}
<h2>Projects/Deals</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table table-striped table-hover display" id="projects" cellspacing="0">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayName("Last Updated")
</th>
<th>
#Html.DisplayName("Sales Person")
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink(item.Name, "ProjectProfile", new { id = item.Id })
</td>
<td>
#Html.DisplayFor(modelItem => item.LastUpdated)
</td>
<td>
#Html.DisplayFor(modelItem => item.AssignedToUserName)
</td>
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#projects').DataTable();
})
</script>
You could have the table refreshed after load:
$('#example').dataTable( {
"initComplete": function(settings, json) {
alert( 'DataTables has loaded.' );
$('#example').dataTable().ajax.reload( null, false );
}
} );
This may not be 100% syntax, just typed off the cuff. I seem to remember having to do this for a project, but the details escape me. I never could figure out why it happened so I slapped this band aid on it.
I integrated HDIV and Spring MVC. Now I have a form on which there are three dropdown lists contract, taskorder and subtask. The select change of contract will update the content of taskorder dropdown list via ajax and then the select change of the task order will update the content of dropdown list subtask via ajax. The form looks like this:
<c:url var="url" value="/admin/user/newstafftask" >
<c:param name="_MODIFY_HDIV_STATE_" value="${taskOrder.id}" />
</c:url>
<form:form action="${url}" commandName="newRequestStaffTasks">
<form:hidden path="subId" />
<table >
<tr>
<td> <label>Contract </label></td>
<td>
<form:select path="newRequestStaffContract.id">
<option></option>
<form:options items="${contractList}" itemValue="id" itemLabel="contract.contractNbr" />
</form:select>
</td>
</tr>
<tr>
<td> <label>Task Order </label></td>
<td>
<form:select path="taskOrder.id">
</form:select>
</td>
</tr>
<tr>
<td> <label>SubTask Code </label></td>
<td>
<form:select path="subtask.subTaskId">
<option></option>
</form:select>
</td>
</tr>
</table>
</form:form>
When I tried to submit the form, I got the error message "INVALID_PARAMETER_NAME" about the taskOrder.id. I understand the problem is the values of two dropdown lists were updated on the client side.I tried _MODIFY_HDIV_STATE_, but it did not work with this case. So I am not sure how to deal with it now. Please help. Thanks.
Update 1
I already exclude the Ajax request from the HDIV validation. Below is the code snippet that update taskOrder list when the contract select change:
$(".modal-body").on("change", "#newRequestStaffContract\\.id", function() {
getTaskOrderByContract($(this));
});
function getTaskOrderByContract(o) {
contractId = o.val();
if (contractId) {
$.get("../../ajax/getTaskOrderByContract", {
contractId : contractId
}
, function(data) {
var options = '<option value=""></option>';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].id + '">' +data[i].taskNum+ '</option>';
}
$('#taskOrder\\.id').html(options);
});
};
};
I am all new to Durandal and have been playing around with it for a few hours now. It seems very promising - but now I have run into a problem, I cannot figure out - and cannot find a solution with Google.
I have a view with three tables of data - creditCardLines, cashLines and drivingReimbursementLines. They fetch data from three different data sources - and the user can add new lines to cashLines and drivingReimbursementLines (left out the forms).
Problem: In the viewmodel, I can easily bind a list for data to the first foreach - but I cannot figure out how to bind data to the second and third.
In the activate function I make an ajax call to my server API to get the data for the first foreach - and then returns the promise, when this finishes. How do I get data for the second and third foreach here?
ViewModel:
define(function () {
var submit = function () {
this.displayName = 'Expenses';
this.creditCardLines = ko.observableArray();
var me = this;
this.activate = function () {
return $.get('/submit/GetCreditCardLines').then(function (creditCardLines) {
me.creditCardLines(creditCardLines.Data);
});
};
};
return submit;
});
View:
<section>
<h2 data-bind="html:displayName"></h2>
<h3>CreditCard lines</h3>
<table class="table">
<tbody data-bind="foreach: creditCardLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
<td><input type="checkbox" data-bind="checked: ApprovedEmployee" /></td>
</tr>
</tbody>
</table>
<h3>Cash lines</h3>
<table class="table">
<tbody data-bind="foreach: cashLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<h3>Driving reimbursement lines</h3>
<table class="table">
<tbody data-bind="foreach: drivingReimbursementLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Distance"></td>
<td data-bind="text: Rate"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<!-- Approve and save all lines as a quote with lines -->
<input type="submit" value="Submit quote" />
</section>
This is how I've been dealing with multiple jQuery deferred calls in my view models:
return $.when(
$.get('/submit/GetCreditCardLines'),
$.get('/submit/GetCashLines'),
$.get('/submit/GetReimbursementLines'))
.then(function (creditCardLines, cashLines, reimbursementLines)
{
processCreditCardLines(creditCardLines);
processCashLines(cashLines);
processReimbursementLines(reimbursementLines);
})
.fail(function (status)
{
// Do whatever you need to if it fails
});
You don't need the process methods if you don't want them, but if you're doing anything complicated, I think it's neater to have them.
You should check out BreezeJS. It has an option to make a single Ajax call to pull multiple lookups.
Take a look at the BreezeJS docs for a detailed explanation: http://www.breezejs.com/documentation/lookup-lists
I am getting an error: 'share' is not a member of 'ASP.default2_aspx'.
OnClick of Button1, I need this data TxtLocation, TxtDistance, Date to be shared on Facebook. Its very similar to 'Run with friends app' Simulate the same as Run with friends app'. So would it be possible to use a fb.ui stream_publish method on click of Button1 with all the three text box vales.
This is what I have in default.aspx
//stream publish method
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt) {
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function (response) {
});
}
function share() {
var share = {
method: 'stream.share',
u: 'http://thinkdiff.net/'
};
FB.ui(share, function (response) { console.log(response); });
}
</script>
<p><fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button></p>
<form id = "form1" runat="server">
<div id="Event" runat="server">
<h1>
Add your event</h1>
<table>
<tr>
<td>
Where did you go
</td>
<td>
<asp:TextBox ID="TxtLocation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Number of miles
</td>
<td>
<asp:TextBox ID="TxtDistance" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Date(MM/DD/YYYY)
</td>
<td>
<asp:TextBox ID="TxtDate" runat="server">TxtDate</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="Add Distance" onclick="share();return false" BackColor="Blue" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Maybe it's because share is already the name of the function.
Try changing the name of the var inside the function share.
Bye ;)