Javascript for adding table row after user input - javascript

I am trying to create a bill calculator that requires user input of their bill type and cost (i will get on to all the calculations after).
At the minute i have got a bootstrap table which is currently 3 rows.
My question is how do i get a new row for each time the user enters their input?
I have a "Bill type field" where the user would enter the type of bill they have.
Then i have the "Amount" for the user to enter how much it will cost.
Finally i have the "Have Paid?" button where the user would click to finish the bill.
Onclick of that button, i would like a new row to be inserted.
Any help would be very much appreciated.
This is my current HTML:
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content" ">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
Thanks!

Just to start, see following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody id="myGrid">
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
<script>
$(".yesBtn").click(function(){
var name = $("#billType1").val();
var amount = $("#amountType1").val();
$("#myGrid").append("<tr><td>" + name + "</td><td>" + amount + "</td></tr>")
$("#billType1").val("");
$("#amountType1").val("");
});
</script>
</body>
</html>

Let assume that your button has id="havePaidButton" and your table id="billTable" and the fields have ids billType, amount and isPaid, respectively.
Your code in the jQuery should look like this:
$('#havePaidButton').off().on('click', function() {
('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>');
});

Related

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

How to edit table td value using jquery

I want to edit td values and I did it partialy but it's not working properly. Please help me.Here is my jsfiddle snippet:https://jsfiddle.net/rKF8a/34/
Note:No need contenteditable="true" option because IE will not support.
HTML:
<table id="elencoMezzi" width="100%">
<thead>
<tr><th>Field 1</th></tr>
</thead>
<tbody>
<tr>
<td><span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
</tbody>
</table>
Js:
$(function(){
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
setTimeout(function(){
$(this).parent('span').css('display','none');
}, 500);
});
});
});
Use contenteditable="true" to edit the content.The contenteditable attribute specifies whether the content of an element is editable or not.
$(function () {
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">
<span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>
Next option is replace td with input on click and reverse it to span on button click. Here is an example. Note: yo need to update as per your logic.
$(function () {
$("#elencoMezzi tr").each(function() {
edittd();
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('.closed').find('button').on('click',function() {
var value = $(this).parent().prev('input').val();
$(this).parent().prev('input').replaceWith('<span class="value">' + value+ '</span>');
$(this).text("Saved");
edittd();
});
function edittd(){
$("td").find('.value').on('click', function(){
var value = $(this).text();
$(this).replaceWith('<input type="text" value="'+value+'">');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="value">Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>
Edit option?
<TD> is not normally used for an editable field. It's a cell in a table for data being output. You can add the attribute contenteditable which works on anyone who got the latest version of their browser in like the last 5 years so that a large part of internet users but by no means all.
<TD contenteditable="true">
Perhaps you need an <input> field.
If that's not what you mean I don't understand your question. Consider re-writing it.

Set Buttons to run Different Scripts

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here are the 2 scripts that I would like to run when the Select button is clicked in either table (first script for the top table and 2nd script for the 2nd table):
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateAccessories.php', {
itemID: itemID
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
if ($this.closest('tr').hasClass("success")) {
$this.closest('tr').removeClass("success");
} else {
$this.closest('tr').addClass("success");
}
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
At the moment clicking either button runs both scripts which I can understand as they both meet the criteria for:
$('button.btn-success:not([type="submit"])').click(function() {
but I'm not experienced enough to know how to make the necessary changes to have each button run a different script here?
A very basic way to differentiate between buttons would be to add an attribute called "id" to them.
<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>
Now you can reference each like this:
$('#button1').click(function() { ...
$('#button2').click(function() { ...
If you can change the markup then add a class from main and another for accessories in the button and do $('button.main') and $('button.accessories') instead of $('button.btn-success:not([type="submit"])')
If not then you need to be able to discern one from another.
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function(e) {
var t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
if(t.indexOf("Main") !== -1) {
// Has MAIN - put your main code in here
console.log("main stuff");
} else if (t.indexOf("Accessories") !== -1) {
// It's Accessories - put your accessories code in here
console.log("accessories stuff");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>

2 Tables on one page - buttons on Rows to run different script

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?
Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>
I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).

Window.location is not working on javascript

I need to redirect to another view using javascript on button click. The reason I need to use the javascript is because I need the "Account Id" of the row I am clicking. Below is the my code
This is to render the page
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
//$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td> #Html.DisplayFor(m => i.AcctId)</td>
<td> #Html.DisplayFor(m => i.EmployeeId)</td>
<td> #Html.DisplayFor(m => i.FirstName)</td>
<td> #Html.DisplayFor(m => i.MiddleName)</td>
<td> #Html.DisplayFor(m => i.LastName)</td>
<td> #Html.DisplayFor(m => i.BusinessName)</td>
<td> #Html.DisplayFor(m => i.AccountType)</td>
<td>Detail</td>
<td>Edit</td>
<td>Delete</td>
#*<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="EditSelected(this)">
<input id="btn_edit[]" type="button" value="Edit" class="btn btn-success form-control" />
</td>
<td>
<input type="button" value="Delete" class="btn btn-danger btn-success form-control" />
</td>*#
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
<tr>
<td>Account Type</td>
<td>
#Html.DropDownList("ddlAccount", new List<SelectListItem>
{
new SelectListItem{Text = "Supplier", Value = "Supplier"},
new SelectListItem{Text = "Employee", Value = "Employee"}
}, new{#class="form-control", id="ddlAccount"})
</td>
</tr>
</table>
</div>
This is the javascript to navigate me to another view
$('a.lnkDetail').on("click", function () {
var row = $(this).closest('tr');
var acctId = row.find("td:eq(0)").html().trim();
var url = '#Url.Action("ViewAccountDetail", "AccountWVehicle")?acctId=' + acctId;
Window.location = url;
return false;
});
When I use the alert(url), "I get the correct url like so "/ViewAccountDetail/AccountVehicle?acctId=7"
Your help is very much appreciated.
Try setting location.href to your new url, for example:
location.href = '/'
window.location.href = url; will work
Try this.
$('a.lnkDetail').on("click", function (event) {
event.preventDefault();
var row = $(this).closest('tr');
var acctId = row.find("td:eq(0)").html().trim();
window.location = '#Url.Action("ViewAccountDetail", "AccountWVehicle")?acctId=' + acctId;
});
More info here: What is the difference between Window and window?

Categories