We Keep Coding

Merging rows using javascript

This is the Category model:
var mongoose = require("mongoose");
var categorySchema = new mongoose.Schema({
name:String,
image:String,
description:String,
series: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Series"
}
]
});
module.exports= mongoose.model("Category",categorySchema);
And This is the series model
var mongoose=require("mongoose");
//making the schema
var seriesSchema = new mongoose.Schema({
name:String,
type:String,
application:String,
product:[{
type: mongoose.Schema.Types.ObjectId ,
ref:"Product"
}]
});
module.exports=mongoose.model("Series",seriesSchema);
So each Category includes some series that has a name and an application and series in an array.
My table and this is the original code:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function(series){ %>
<tr>
<td><strong><%=series.name%></strong></td>
<td><em><%=series.application%></em></td>
</tr>
<% }); %>
</tbody>
</table>
I want to merge rows that have the same content. I tried to use a for loop which ended up screwing the whole thing new results:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i=1;i<series.length;i++){ %>
<tr>
<td><strong><%=series[i-1].name%></strong></td>
<% var j=1;%>
<% console.log(series[i]);%>
<% if(series[i-1].application==series[i].application){ %>
<% j++; %>
<td rowspan="<%=j%>"><em><%=series[i-1].application%></em></td>
<% } else { %>
<td><em><%=series[i-1].application%></em></td>
<% } %>
<% j=0;%>
</tr>
<% }; %>
</tbody>
</table>

As far as I can see, you really don't have rows with equal content in them. They either differ in the first column or in both. Anyway, it appears to me as if you'd try to combine the rows if their contents are equal in the second column.
In case it is OK to loose the information inside the first column, you'll want to just skip the entire row. Just move the comparison before you render the <tr>. Don't forget that you have to render the first row in any case. For example:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i = 0; i < series.length; i++){ %>
<% if(i < 1){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% } else if(series[i-1].application !== series[i].application){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% }; %>
<% } %>
</tbody>
</table>
The other possibility would be to combine the values of the first column. Solving that inside the loop is going to get fuzzy. It's easier to combine the information before you render them, although you have to utilize a bit more extra JavaScript for it. The JS changes the structure in such a way, that it merges contents in the first column together (link in the code below) if they have the same application:
function mergeEqApplications (series) {
return series.reduce(function (acc, s) {
if (!acc.hasOwnProperty(s.application)) {
acc[s.application] = {
link: [{name: s.name, id: s._id}],
application: s.application
};
} else {
acc[s.application].link.push({name: s.name, id: s._id});
}
return acc;
}, {});
}
function objToArray (obj) {
return Object.keys(obj).map(function (key) { return obj[key]; });
}
function convert (series) {
return objToArray(mergeEqApplications(series));
}
Category.series = convert(Category.series);
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function (series) { %>
<tr>
<td>
<strong>
<% series.link.forEach(function (info) { %>
<a href="/categories/<%= Category._id %>/series/<%= info.id %>/products">
<%= info.name %>
</a>
<% }); %>
</strong>
</td>
<td>
<em><%= series.application %></em>
</td>
</tr>
<% }); %>
</tbody>
</table>

Laravel Ajax jquery get values on click tr rows

I have an html table that contains product information:
id
Title
And when I click on a row or several rows I would like to retrieve the ids in array and modify their title through the controller.
Example :
I click on the first row I get the first id and when I click on the second row I get the second id but the first id it disappears.
I try with this :
Ajax
var last_clicked;
$(document).on('click', "#Mytable tr:not(:first)", function () {
$('#id_product').val(last_clicked.find('[class="fill_id_product"]').html());
});
$('#update_product').click(function() {
var id = $('#id_product').val();
var array_id = array.push(id);
alert(array_id) ;
$.ajax({
type: 'POST',
url: "{{action('ProdcutController#updateProduct')}}",
data: {
id: array_id,
},
success: function(data){
alert("success");
}
});
});
HTMl :
<a id="update_product">Update Prodcut</a>
//Table
<table id="Mytable" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th>Id </th>
<th>Title</th>
</tr>
</thead>
<tbody>
#foreach($all_products as $all_product)
<tr>
<td>
<p class="fill_id_product">{{$all_product->id}}</p>
</td>
<td>
<p hidden class="fill_title">{{$all_product->title}}</p>
</td>
</tr>
#endforeach
<input type="text" name="" id="id_product">
</tbody>
</table>
And My controler :
public function updateProduct(Request $request){
$products = Product::where('id',$request->id)->get();
foreach($products as $product){
$product->title = "Title global";
$product->save();
}
return ['products' => $products];
}

What you need to do is to push the id into array on row click function.
Here is the code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a id="update_product">Update Prodcut</a>
<table id="Mytable" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th>Id </th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="fill_id_product">1</p>
</td>
<td>
<p hidden class="fill_title">Title 1</p>
</td>
</tr>
<tr>
<td>
<p class="fill_id_product">2</p>
</td>
<td>
<p hidden class="fill_title">Title 2</p>
</td>
</tr>
<tr>
<td>
<p class="fill_id_product">3</p>
</td>
<td>
<p hidden class="fill_title">Title 3</p>
</td>
</tr>
</tbody>
</table>
<script>
var clicked_ids = [];
$(document).on('click', "#Mytable tr:not(:first)", function () {
var product_id = $(this).find('[class="fill_id_product"]').html();
alert(product_id);
if(clicked_ids.indexOf(product_id) == -1){
clicked_ids.push(product_id);
}
console.log(clicked_ids);
});
$('#update_product').click(function() {
console.log(clicked_ids);
$.ajax({
type: 'POST',
url: "{{action('ProdcutController#updateProduct')}}",
data: {
id: clicked_ids,
},
success: function(data){
alert("success");
}
});
});
</script>
</body>
</html>
Also you need to change the controller login because you are now sending the ids in array no a single id so you need to change condition to where id IN($request->id)

Append to Table via AJAX Request - Not Appearing in Correct Position

I have a simple AJAX request as part of an infinite scroll on a page that fetches more records to add to an existing table that shows the first 20 rows. The AJAX request is working and returning the correct data but it's not appearing in the correct location (it's showing above the existing rows).
Here's an example of how the table looks:
<div>
<br />
<table class="table table-striped table-bordered">
<thead>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope=“col”>Location</th>
<th scope=“col”>Type</th>
<th scope=“col”>Manager</th>
</thead>
<tbody>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
<td> 4:00 PM</td>
<td> Sydney</td>
<td> In House</td>
<td> Barney Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
<td> 4:00 PM</td>
<td> Melbourne</td>
<td> External</td>
<td> Betty Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
<td> 5:00 PM</td>
<td> Dallas </td>
<td> External</td>
<td> Fred Flinstone</td>
</tr>
<div id="content"></div>
</tbody>
</table>
</div>
and here's the Javascript:
var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadArticle(skip);
skip += 20;
}
});
function loadArticle(pageNumber) {
$.ajax({
url: "getRecords.php",
type: 'POST',
data: "action=" + action + "&skip=" + skip,
success: function(html) {
$("#content").append(html); // This will be the div where our content will be loaded
}
});
return false;
I added a div after the last table row to insert the new rows into:
<div id="content"></div>
but the new rows are not appearing after the last row, rather above the existing rows.
Not sure what I'm doing wrong here. I'm using the Bootstrap framework if that helps.

You can't have a div after a tr in a table like that. The browser will not render it where you put it if you do that.
Get rid of the <div id="content"></div> and add the id to your tbody like this
<tbody id="content">

Add <tr> and in tr add <td> and then within td add div. Anything written in table which is not inside <td> will show before the table
<tr>
<td>
<div id="content"></div>
</td>
</tr>

how to insert only unique value in Editor templates in mvc

i want to enter only unique Machine_serial_no in my editor templates , user can add Machine_serial_no through browsing a file or can enter manually As shown in below code, i just want to make sure that user shouldnot allow to enter same value twice .your suggestion is always welcome
..Thanks in advance..
//main view
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<div id="cast">
<tr>
<td> File:</td>
<td><input type="file" id="file" /> </td>
<td> <input type="button" value="Upload" id="btnSubmit" /> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="manualSerial">
<td class="required">Total No of serial no U want to enter:</td>
<td>#Html.TextBoxFor(x => x.count, new { #Value = 0 })</td>
<td colspan="4">
<input type="button" value="Add Serial" id="addserial" />
#*#Html.ActionLink("Add Serial", "AddMachineSerial", "Import", new { #id = "addserial" ,})
#Html.ValidationMessageFor(model => model.serials.Machine_serial_no)*#
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="ShowModel" colspan="6">
<table id="tbl1" style="width:100%;">
<thead>
<tr>
<td>Brand</td>
<td>Machine</td>
<td>Model</td>
<td>Serial No</td>
<td>Mac Address</td>
<td>Action</td>
</tr>
</thead>
</table>
</td>
</tr>
<tr>
<td id="ShowModel" colspan="6">
<div style="height:253px; width:100% ;overflow: auto;">
<table style="width:100%;margin-left:0px;margin-right:0px">
#*<thead>
<tr>
<th style="width:45px;">Brand</th>
<th style="width:90px;">Machine</th>
<th style="width:80px;">Model</th>
<th>Serial No</th>
<th>Mac Address</th>
<th>Action</th>
</tr>
</thead>*#
<tr>
<td colspan="6" id="td_serial"></td>
</tr>
</table>
</div>
</td>
</tr>
//jquery
$('#addserial').click(function () {
var count = $('#count').val();
var i;
if ($('#searchid').val() != '') {
if ($('#count').val() != 0) {
for (i = 0; i < count; i++) {
$.ajax({
type: 'GET',
data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
url: '#Url.Action("AddMachineSerial","Import")',
success: function (response) {
$('#ShowModel').show();
$('#td_serial').prepend(response);
$('#count').val(0);
}
});
}
}
else {
alert("Enter no of serial you want to enter!")
}
}
else {
alert("select Model First!")
$('#count').val(0);
}
});
//editor Templates /parital view
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginCollectionItem("serialList"))
{
#Html.ValidationSummary(true)
<div id="DeleteTxt1">
<table id="tbl1" style="width:100%;margin-left:0px;margin-right:0px">
<tr class="importitem1">
<td>#Model.brandName</td>
<td>#Model.machineName</td>
<td>#Model.MachineModel</td>
#*<td class="required">Machine Serial No.:</td>*#
<td>
#Html.TextBoxFor(x => x.Machine_serial_no, new { placeHolder = "Enter Machine Serial here.", #class = "serial1"})
#Html.ValidationMessageFor(x => x.Machine_serial_no)
</td>
<td><input type="button" value="Cancel" id="DeleteBtn1" style="color:red;" /></td>
</tr>
</table>
</div>
}

Assuming you want to alert the user as soon as they enter a non unique value, then you need to handle the .change() event of the textbox, and since the textboxes are being added dynamically, you need to use event delegation
$('#td_serial').on('change', '.serial1', function() {
var isvalid = true;
var inputs = $('.serial1').not($(this));
var text = $(this).val();
$.each(inputs, function(index, item) {
if ($(this).val() && $(this).val() === text) {
isvalid = false;
return false;
}
});
if (!isvalid) {
alert('not unique!');
}
});
Note the alert('not unique!') is just for testing purposes - its not clear how you want to notify the user - e.g. include a div with an error message that your might show/hide as required
Next your partial includes #Html.ValidationMessageFor(x => x.Machine_serial_no) suggesting you have validation attributes. In order to get client side validation for dynamically created elements you need to re-parse the validator when the new elements have been added. Modify your script to
for (i = 0; i < count; i++) {
$.ajax({
type: 'GET',
data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
url: '#Url.Action("AddMachineSerial","Import")',
success: function (response) {
$('#ShowModel').show();
$('#td_serial').prepend(response);
$('#count').val(0);
// Reparse the validator
$('form').data('validator', null);
$.validator.unobtrusive.parse(form);
}
});
}
Side note - consider modifying this so that you only re-parse once all ajax calls are complete
Note also that you should only have one #Html.ValidationSummary(true) (your currently is adding one for each partial) and you need to remove the scripts from the partial - your should have one copy of the scripts only in the main view

I think this is you want to validate client side
$(function (){
$('#partialViewtextbox_Id').change(function (){
var partial = $('#partialViewtextbox_Id').val();
var main = $('#maintextbox_Id').val();
if(partial == main)
{
alert("value already available");
}
});
});

I'm using jquery's $.Ajax method to pull json data but it won't render it to the page

I can get part of the data to render to the page (specifically: request, ack, and return_info) however it will not render my user data (user_id, name, session_token, photo_url). I need all user data stored to render in a table.
$(document).ready(function () {
$.ajax({
url: "http://url/getaccount",
type: 'GET',
dataType: "json",
data: {
'account': 'all'
},
}).then(function (data) {
$('.request').append(data.request);
$('.ack').append(data.ack);
$('.return_info').append(data.return_info);
$('user_id').append(data.user_id);
$('.name').append(data.name);
$('.session_token').append(data.session_token);
$('.photo_url').append(data.photo_url);
});
console.log();
});
Html
<table class="table table-striped">
<tr>
<td><b>User</b>
</td>
<td><b>Turbo User ID</b>
</td>
<td><b>Name</b>
</td>
<td><b>Session Token<b></td>
<td><b>Request</b>
</td>
<td><b>Ack</b>
</td>
<td><b>Return Info<b></td>
</tr>
<tr>
<td class="photo_url"></td>
<td class="user_id"></td>
<td class="name"></td>
<td class="session_token"></td>
<td class="request"></td>
<td class="ack"></td>
<td class="return_info"></td>
</tr>
</table>
I will be using this for several hundred users. I am not sure if I will need a for loop of not. Thank you!

<table id="myTable" class="table table-striped">
<thead>
<tr>
<th><b>User</b></th>
<th><b>Turbo User ID</b>
</th>
<th><b>Name</b>
</th>
<th><b>Session Token<b></th>
<th><b>Request</b>
</th>
<th><b>Ack</b> </th>
<th><b>Return Info<b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function () {
$.ajax({
url: "http://url/getaccount",
type: 'GET',
dataType: "json",
data: {
'account': 'all'
},
}).then(function (data) {
for(var i = 0; i < data.accounts.length; i++){
$('#myTable tbody').append("<tr>");
$('#myTable tbody').append("<td class=\"photo_url\">" + data.accounts[i].photo_url + "</td>");
$('#myTable tbody').append("<td class=\"user_id\">" + data.accounts[i].user_id + "</td>");
//etc...
$('#myTable tbody').append("</tr>");
}
});
console.log();
});