Initializing datatable after the data is loaded into table - datatables

I am using datatable plugin
I have partial views and data is loaded into table by controller.
<script type="text/template" id="dealer-row-template">
<td>
<p><a class="dealer-record" href="#"><%- dealerId %></a></p>
</td>
<td>
<p><%- dealerName %></p>
</td>
<td>
<p><%- dealerType %></p>
</td>
<td>
<p><%- phone %></p>
</td>
<td>
<p><%- city %></p>
</td>
<td>
<p><%- state %></p>`enter code here`
</td>
<td>
<p><%- country %></p>
</td>
</script>
I have tried all the methods in the website and other solutions. I am not able to initialize datatable on table load. Please provide me with a solution.

Related

How to solve the SyntaxError: Unexpected identifier problem occurring during compilation of ExpressJS (ejs) file?

<% include partials/header.ejs %>
<div class="table-wrapper">
<% if (players.length > 0) {%>
<table class="table table-hovered">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Image</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Position</th>
<th scope="col">Number</th>
<th scope="col">Username</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<% players.forEach((player, index) => { %>
<tr>
<th scope="row"><%= player.id %></th>
<td><img src="/assets/img/<%= player.image %>" class="rounded-circle player-img" alt=""></td>
<td><%= player.first_name %></td>
<td><%= player.last_name %></td>
<td><%= player.position %></td>
<td><%= player.number %></td>
<td>#<%= player.user_name %></td>
<td>
Edit
Delete
</td>
</tr>
<% }) %>
</tbody>
</table>
<% } else { %>
<p class="text-center">No players found. Go <a href="/add" >here</a> to add players.</p>
<% } %>
</div>
</div>
</body>
</html>
This is the error being displayed after running the .ejs file from terminal,
SyntaxError: Unexpected identifier in C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\views\index.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass async: true as an option.
at new Function ()
at Template.compile (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:626:12)
at Object.compile (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:366:16)
at handleCache (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:215:18)
at tryHandleCache (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:254:16)
at View.exports.renderFile [as engine] (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\ejs\lib\ejs.js:459:10)
at View.render (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\A\Desktop\Ms\demo-app\node-mysql-crud-app\node_modules\express\lib\response.js:1012:7)
I am new to expressjs and this a code from a demo app in GitHub.
It would be a great help if this problem is solved.
Read this document https://github.com/tj/ejs and i think your foreach loop having some problem check this first and then try once.
<% for(var i=0; i<players.length;i++) { %>
<tr id="idrow_<%= players[i]._id%>">
<td id="id">
<%= players[i]._id%>
</td>
<td id="name">
<%= players[i].first_name%>
</td>
<td id="phone">
<%= players[i].last_name%>
</td>
<td id="email">
<%= players[i].position%>
</td>
<td id="vehicle">
<%= players[i].number%>
</td>
<td id="other">
<%= players[i].user_name%>
</td>
<td><button type="button" class="btn btn-secondary" id="edtbtn" onclick="edituser('<%= players[i]._id %>')" name="edit"><b>edit</b></button></td>
<td><button type="button" class="btn btn-secondary" id="delbtn" onclick="deleteuser('<%= players[i]._id %>')" name="delete">
<span><strong>Delete</strong></span>
</button>
</td>
</tr>
<% } %>
========================================================================

When returning a view to an iframe in MVC4, the viewbag, viewdata, or tempdata doesnt pass information back to the overall view.

I have a view that has some dropdowns that allows you to choose some surveys. When selected it loads the survey into an iframe. Loading the view into it works fine, but I am trying to display stats (summary) about this survey alongside the iframe. But since I'm returning the view to the iframe, the viewbag, viewdata, or tempdata doesnt return anything (imagine it does to the iframe), but I need it to return information to the overall view. Not sure how to do this.. Any help is greatly appreciated. Thanks
My view:
#using (Html.BeginForm("Survey", "Moderator", FormMethod.Post, new { target = modFrame" }))
{
<div id="jWizard" class="jWizard wizardStyle">
<table class="moderatorPage">
<tr>
<td > </td>
<td> </td>
<td> </td>
<td> </td>
<td>Study: #Html.DropDownList("SurveyID", Model.Surveys, new { onchange = "LoadGroups();", #class = "dropDownMain" })</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>Group: #Html.DropDownList("GroupID", Model.UserGroups, new { onchange = "LoadUsers();", #class = "dropDownMain" })</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>User: #Html.DropDownList("UserID", Model.Users, new { #class = "dropDownMain" })</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value="Start" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><iframe id="modFrame" name="modFrame" style="width:100%; height:1000px; border:0px"></iframe></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>#TempData["test"]</td>
<td>#ViewBag.test</td>
<td>#ViewData["test"]</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
}
And in my controller:
public ActionResult Survey(int SurveyID, string GroupID, string UserID)
{
ViewBag.UserID = UserID;
if (SurveyID != 0)
{
TempData["test"] = "test1";
ViewData["test"] = "test2";
ViewBag.test = "test3";
var userTypeRepo = new UserTypeRepository(new UnitOfWork());
ViewBag.UserType = userTypeRepo.Get(user.UserTypeID).Description;
var repo = new SurveyRepository(new UnitOfWork());
var survey = repo.Get(SurveyID, "MasterPages,MasterPages.MasterTickets");
return View(survey);
}
else
{
return View("Error", (object)"Survey ID is zero");
}
}
Welcome to Stackoverflow!
The ViewBag in your iframe is not exposed to the ViewBagin your hosting page. In fact, you will need a page refresh in the hosting page to reload it's own ViewBag.
If I were you, I would re-architect the solution to make use of ajax services and a view engine based on JavaScript (e.g. AngularJS) to retrieve your dynamic data; however, if there is some reason that you have to stick with this iFrame approach, then you probably need to just reload your entire page on a selection change, populate the host page's viewbag with the relevant data, and set the source of the iframe with a ViewBag parameter as well.
Good luck!

Accordion within table rows

I am using Twitter Bootstrap. Currently I am working on Master Details looks alike table, which I am planning to place an accordion into each table's row and if it is expanded, the partial view will be reload and displayed.
Somehow it does not work as expected but if I change it to Modal, the partial view loaded perfectly.
This is the controller that process and returning the values:
public ActionResult Index(int id,int? page)
{
List<CustomerProduct> customerProducts =
(from c in RepositoryProduct.Reload(id)
select c).ToList<CustomerProduct>();
return PartialView("_CustomerProducts", customerProducts);
}
and this is the table in the view :
<table id="tbl" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>
#Html.ActionLink("Customer Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.DisplayNameFor(model => model.First().CustLocalName)
</th>
<th>
#Html.ActionLink("Country", "Index", new { sortOrder = ViewBag.CountrySortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.DisplayNameFor(model => model.First().City)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr data-toggle="collapse">
<td style="display:none;">
#Html.DisplayFor(modelItem => item.CustID)
</td>
<td>
#Html.DisplayFor(modelItem => item.CustName)
</td>
<td>
#Html.DisplayFor(modelItem => item.CustLocalName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Country.CountryName)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
<a class="btn btn-small btn-info" type="button" href="#Url.Action("Index", "CustomerProduct", new { id = item.CustID })" data-toggle="collapse" data-target="##item.CustID" >Products</a>
</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="#item.CustID" class="accordian-body collapse" tabindex="-1">
<div class="accordion-header">
<label>
<strong>#item.CustName product(s)</strong>
</label>
</div>
<div class="accordion-body">TEST</div>
</div>
</td>
</tr>
}
</tbody>
</table>
this is part of the code that calling the controller Index function :
<a class="btn btn-small btn-info" type="button" href="#Url.Action("Index", "CustomerProduct", new { id = item.CustID })" data-toggle="collapse" data-target="##item.CustID" >Products</a>
Actually I would like to load the partialview(_CustomerProduct) in the div class="accordion-body" as what I did in div class="modal-body" but no success. May I know if it is possible to do it and if yes, may I know how?
Any help will be appreciated.
for me to get the view to work i used
<td colspan="6" class="hiddenRow">
<div id="#item.CustID" class="accordian-body collapse" tabindex="-1">
<div class="accordion-header">
<label>
<strong>#item.CustName product(s)</strong>
</label>
</div>
<div class="accordion-body">
#Html.Partial("_CustomerProduct")
</div>
</div>
</td>

Saving the value of a Selectlist item when used in a for each loop in a view

Part of my MVC 3 VB.NET has a view that uses a list(of model) and a for each on that model to list all the contents.. The problem is that a selectlist is part of each item.. When the value is selected for each item it is not being posted back to the controller with the rest of the items... The view code is as follows:
#ModelTYPE List(Of xxxxxxx.attendance)
#Code
ViewData("Title") = "Class Attendance Record"
End Code
#Using Html.BeginForm
#<fieldset>
<table>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Registrant ID
</th>
<th>
Course Status
</th>
<th>
Comments
</th>
</tr>
#For r As Integer = 0 To Model.Count - 1
Dim i As Integer = r
#Html.HiddenFor(Function(m) m(i).id)
#<tr>
<td>
#Html.DisplayFor(Function(m) m(i).firstName)
#Html.HiddenFor(Function(m) m(i).firstName)
</td>.
<td>
#Html.DisplayFor(Function(m) m(i).lastName)
#Html.HiddenFor(Function(m) m(i).lastName)
</td>
<td>
#Html.DisplayFor(Function(m) m(i).reg_id)
#Html.HiddenFor(Function(m) m(i).reg_id)
</td>
<td>
#Html.DisplayFor(Function(m) m(i).Completed_Class)
</td>
<td>
#Html.DropDownList("Completed_Class", New SelectList(ViewBag.courseStatus, "Status", "Status"), New With {.Completed_Class = "Completed_Class"})
#Html.HiddenFor(Function(m) m(i).Completed_Class)
</td>
<td>
#Html.TextBoxFor(Function(m) m(i).Comments, New With {.class = "AttenComment"})
#Html.HiddenFor(Function(m) m(i).Comments)
</td>
</tr>
Next
</table>
<p>
<input type="submit" name="submit" />
</p>
</fieldset>
End Using
Any ideas how I can assign the selectedvalue to the HiddenFor??
Instead of writing loops, I would recommend you using editor templates. Like this:
#ModelTYPE List(Of xxxxxxx.attendance)
#Code
ViewData("Title") = "Class Attendance Record"
End Code
#Using Html.BeginForm
#<fieldset>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Registrant ID</th>
<th>Course Status</th>
<th>Comments</th>
</tr>
#Html.EditorForModel()
</table>
<p><input type="submit" name="submit" /></p>
</fieldset>
End Using
and inside the corresponding editor template (~/Views/Shared/EditorTemplates/attendance.vbhtml or ~/Views/SomeController/EditorTemplates/attendance.vbhtml) which will be rendered for each element of the collection:
#ModelTYPE xxxxxxx.attendance
#Html.HiddenFor(Function(m) m.id)
#<tr>
<td>
#Html.DisplayFor(Function(m) m.firstName)
#Html.HiddenFor(Function(m) m.firstName)
</td>
<td>
#Html.DisplayFor(Function(m) m.lastName)
#Html.HiddenFor(Function(m) m.lastName)
</td>
<td>
#Html.DisplayFor(Function(m) m.reg_id)
#Html.HiddenFor(Function(m) m.reg_id)
</td>
<td>
#Html.DisplayFor(Function(m) m.Completed_Class)
</td>
<td>
#Html.DropDownList("Completed_Class", New SelectList(ViewBag.courseStatus, "Status", "Status"), New With {.Completed_Class = "Completed_Class"})
#Html.HiddenFor(Function(m) m.Completed_Class)
</td>
<td>
#Html.TextBoxFor(Function(m) m.Comments, New With {.class = "AttenComment"})
#Html.HiddenFor(Function(m) m.Comments)
</td>
</tr>
This being said, using all those hidden fields reminds me badly for the classic WebForms ViewState. You don't need it. Believe me, you really don't need this stuff. Use input fields if you allow the user to modify something (text fields, radios, checkboxes, etc...), but hidden fields, come on! A single hidden field containing the id of the model will largely suffice for the controller action to fetch the corresponding model from the datastore that it initially fetched it from.
As far as your dropdown is concerned:
#Html.DropDownList("Completed_Class", New SelectList(ViewBag.courseStatus, "Status", "Status"), New With {.Completed_Class = "Completed_Class"})
You should use a property on your view model to bind to and use the strongly typed version:
#Html.DropDownListFor(Function(m) m.CompletedCLass, New SelectList(ViewBag.courseStatus, "Status", "Status"), New With {.Completed_Class = "Completed_Class"})

Rails create and update model Cant resolve paths

I cant understand why edit and new links doesn't work. I have controller named CargoController and have model Car.
CargoController is:
def new_auto
end
def edit_auto
end
def index
#cars=Car.find_all_by_UserId(session[:user_id])
if #cars.nil?
end
end
Car model is:
class Car < ActiveRecord::Base
validates_presence_of :TransportTypeId
validates_presence_of :CarModelId
set_primary_key :CarId
has_one :TransportType
has_one :CarModel
belongs_to :User
has_many :PropertyOfCar, :dependent => :destroy
has_many :CarProperty, :through => :PropertyOfCar
end
The View CargoController index.erb is:
<%if !#cars.blank?%>
<table width="100%" border="0" cellpadding="0px" cellspacing=1px">
<% #cars.each do |car| %>
<tr valign="top" class="<%= cycle('list-line-odd', 'list-line-even') %>">
<td>
<table border="0" width="100%" style="color:black">
<tr>
<td width="15%" align="left" valign="top" >Тип ТС:</td>
<td width="70%" align="left" valign="top"><%= TransportType.find_by_TransportTypeId(car.TransportTypeId).Name %></td>
<td align="right" valign="top" rowspan="2">
<img alt="" src="/images/Truck-icon.png"/>
</td>
</tr>
<tr>
<td width="15%" align="left" valign="top">Car model:</td>
<td width="70%" align="left" valign="top"><%= CarModel.find_by_CarModelId(car.CarModelId).ModelName %></td>
</tr>
<tr>
<td align="center" valign="top" colspan="3">
<label class="Chars"> Properties</label>
</td>
</tr>
<tr colspan="3">
<td>
<%= button_to 'Edit', :controller=>:cargo,:action=>:edit_auto,:id=>car.CarId %>
</td>
</tr>
</table>
</td>
</tr>
<% end %>
</table>
<% end %>
the view edit and new is :
<div class="center">
<%= render 'form' %>
</div>
The template _form is:
<%= form_for(#car) do |form| %>
<table >
<tr>
<td>
<label for="transport_type">Car Type:</label>
</td>
<td>
<%= form.select(:TransportTypeId, TransportType.all.collect {|p| [ p.Name, p.TransportTypeId ] }, { :include_blank => 'Select type'},{:style=>'width: 200px'}) %>
</td>
</tr>
<tr>
<td>
<label for="transport_type">Car model:</label>
</td>
<td>
<%= form.select(:CarModelId, CarModel.all.collect {|p| [ p.ModelName, p.CarModelId ] }, { :include_blank => 'Select model' },{:style=>'width: 200px'}) %>
</td>
</tr>
<tr>
<td colspan="2">
<%= button_to "add property",{:controller=>:cargo,:action=>:new_property},{:class =>"Button_style"} %>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<%= form.submit "Add car", :class => "submit" ,:class =>"Button_style"%>
</td>
</tr>
</table>
<% end %>
So then i try to add or update car rails ask a car controller or write
ActionView::Template::Error (undefined method `model_name' for NilClass:Class):
1: <%= form_for(#car) do |form| %>
2: <table >
3: <tr>
4: <td>.
What shall i do to make it work?
In a routes i have
get "cargo/index"
get "cargo/new_auto"
match ':controller(/:action(/:id))'
I think that you don't create instance variables for each actions.
def new_auto
#car = Car.new
end
def edit_auto
#car = Car.find(params[:id])
end
And you should write "resources :cars" routes.rb as follwing:
resources :cars
I think that you should be able to see the new_auto page.