Develop Reference

docent display pop up with table id

When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});

Javascript problem, script works 100% only with an alert(); in place ODD

calling all JavaScript Gurus. I'm going bananas, in the following script if I remove the Alert the code does not work. But I obviously cannot leave a pop up in the middle of my ASP.NET web App
Not that it matters much but this code is in a Index.cshtml that contains a partial called IndexSearch Results.cshtml. Code at the bottom but its just the Javascript below I think is the issue ::
Something is missing I cannot figure it, many thanks for looking...
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
Here is Index.CSHTML:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<style>
.tooltiptext {
display: none;
}
</style>
<h2></h2>
<fieldset>
<legend>
<img width="50" height="50" src="~/content/images/bPremise.jpg" /> Use the Search fields provided to Locate a Premise
</legend>
<table class="NoHighlight">
<tr>
<td></td>
<td>
SSID<br />
#Html.TextBox("SearchSPID", string.Empty, new { style = "float:left;width:150px;" })
<div style="clear:both;"></div>
</td>
<td></td>
<td>
Premise Name<br />
#Html.TextBox("SearchPremise", string.Empty, new { style = "float:left;width:170px;" })
<div id="Div1" style="float:left; padding-left:5px;"></div>
<div style="clear:both;"></div>
</td>
#*<td>
Effective Start >=<br />
<div class="col-md-10">
#Html.TextBox("StartDate")
</div>
</td>
<td>
Effective End<br />
<div class="col-md-10">
#Html.TextBox("EndDate")
</div>
</td>*#
<td>
<a href="#test" class="btn btn-default" id="searchButton" >Search</a>
<div class="tooltiptext">
Key less by entering only part of a Search String <b>i.e.</b> key <i>Garage</i> to find <i>all premises containing this text</i> quickly
</div>
</td>
<td>
<div id="LoadingGif"></div>
</td>
</tr>
</table>
</fieldset>
<div id="ResultsList" style="clear:both;">
#Html.Partial("IndexSearchResults")
</div>
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
}
and here is IndexSearchResults.cshtml:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<p><h5><div id="noRecords">Your search returned #Model.Count() items</div></h5></p>
<table class="tablesorter" id="myTable">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.SPID)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointName)
</th>
<th>
#Html.DisplayNameFor(model => model.GazateerRef)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointEffectiveDateTime)
</th>
<th>
Premise Type
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr rowid="#item.SupplyPointId">
<td>
<img src="~/Content/images/edit.png" id="imgEdit" alt='Edit Details' title='Edit Details'>
</td>
<td>
#Html.DisplayFor(modelItem => item.SPID)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointName)
</td>
<td>
#Html.DisplayFor(modelItem => item.GazateerRef)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointEffectiveDateTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointType.SupplyPointTypeName)
</td>
</tr>
}
</tbody>
</table>
<div class="pager" id="pager">
<form>
<img src="~/Content/Images/first.gif" id="iFirst" class="first" />
<img src="~/Content/Images/prev.gif" class="prev" />
<input type="text" class="pagedisplay" />
<img src="~/Content/Images/next.gif" class="next" />
<img src="~/Content/Images/last.gif" class="last" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>

jQuery.load is asynchronous, so it will return before the content is loaded. In the Init function, you are trying to use the content before it has been loaded. The alert() is making it succeed, since it allows the content to be loaded.
Instead of calling Init() immediately after the load() call, you should move it inside the callback.
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
Init(); // <--- Here
});
$('#LoadingGif').empty().html(' Loading...');
});

Updating a table based on selected dropdown using Jquery in ASP.NET MVC?

I've got the below code on my view, and everything is working fine. I've got a dropdown, and got a list of tables below the drop-down. I'd like to write a jquery code that only displays one table at a time depending on the selected drop-down value. My first method would be having all the tables on client-side and just 'filtering' them using jquery, and my second method would be using an ajax request to the server and updating the table. Please have a look at the code below. Any help would be greatly appreciated - Thanks
<div id="dropDown" class="span11">
<div class="row-fluid">
<div class="span4">
Select Year of Manufacturing
</div>
<div class="span8">
#Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, #productItems)
</div>
</div>
foreach (var item in Model.Products) {
<h3>#item.Year</h3>
<div id="dropDownDiv">
<table class="table table-bordered">
<tr>
<th>
ProductId
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
Price
</th>
<th>
Proposed Price
</th>
</tr>
<tr>
<td>#item.Id
</td>
<td>#item.Name
</td>
<td>
#item.Description
</td>
<td>#item.Price
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
</div>
}
</div>
For Ajax Request, I'm thinking to do something like this, but not sure how to proceed.
<script>
//Filter By Year
$(function () {
$("select#Year").change(function (evt) {
if ($("select#Year").val() != "-1") {
$.ajax({
url: "/AjaxDropDown/FilterByYear",
type: 'Post',
data: { Year: $("select#Year").val() },
success: function (data) {
//Need some code here
}
});
}
});
});
</script>
Also, at some point I would like to enable inline editing on this table using ajax, so that the users can submit their proposed price..Thanks

First I would update your markup like so in order to keep id's unique and to add a nice means of selecting the divs:
<div id="dropDown" class="span11">
<div class="row-fluid">
<div class="span4">
Select Year of Manufacturing
</div>
<div class="span8">
#Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, productItems)
</div>
</div>
foreach (var item in Model.Products) {
<div id="#string.Format("dropDownDiv_{0}", item.Year)" class="dropDownDiv">
<h3>#item.Year</h3>
<table class="table table-bordered">
<tr>
<th>
ProductId
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
Price
</th>
<th>
Proposed Price
</th>
</tr>
<tr>
<td>#item.Id
</td>
<td>#item.Name
</td>
<td>
#item.Description
</td>
<td>#item.Price
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
</div>
}
</div>
and then you can filter by year like so without the ajax request if they're all on the page:
$(function () {
$("#Year").change(function (evt) {
var year = $("#Year").val();
// Hide all divs with class dropDownDiv but show the one with the appropriate id
$('.dropDownDiv').hide().filter('#dropDownDiv_' + year).show();
});
});
jsFiddle: http://jsfiddle.net/dg5bZ/6/

<script>
//Filter By Year
$(function () {
$("select#Year").change(function (evt) {
if ($("select#Year").val() != "-1") {
$.ajax({
url: "/AjaxDropDown/FilterByYear",
type: 'Post',
data: { Year: $("select#Year").val() },
success: function (data) {
var records = $.evalJSON(data);
var Years= $("select#Year");
// clear all previous options
$("select#Year > option").remove();
// populate the records
for (i = 0; i < records.length; i++) {
Years.append($("<option />").val(records[i].Value).text(records[i].Text));
}
}
});
}
});
});
</script>

auto increment the serial number when row increases and automatically readjust the numbering order when a row gets deleted in jquery

I want the serial no: to increase whenever a row is inserted dynamically. and when any row is deleted whether in the beginning or in the end or in-between, the numbers should rearrange themselves in proper order. I'm a fresher and could not get a logic on how to do it. Can anyone pls guide me on the same. Thanks in advance for the support.
I have given my sample coding below. On clicking the "(+)" button, the row increases automatically. when that is happening, i want the serial no also to increment automatically. And when any row is deleted, (even in middle of the table), then the numbers should automatically adjust themselves in proper order. Pls guide me on the same.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =1;
$('#butVal').click(function(){
var master = $(this).parents("#table-2");
id++;
var sample = master.find('.tabRow').clone();
sample.attr("id", id + "item");
master.find('.tabRow').removeClass('tabRow');
master.find('tbody').append(sample);
//alert(master);
//alert(sample);
//alert(sample.html());
//alert(master.html());
var rowLen = $('#table-2 > tbody >tr').length;
//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}
}
);
$('table#table-2 button.remove').live('click', function(){
if($("table#table-2 tbody tr").length > 1)
{
if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
{
$(this).parents('tr').prev().addClass("tabRow");
}
$(this).parents('tr').remove();
}
else
{
alert("you can.t remove this record");
}
} );
});
//jquery ends here
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%;
}
.add select,input
{
width:100%;
}
</style>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> Description</th> <th> Quantity </th> <th> Price </th> <th> Total </th >
<th> <button id="butVal"> + </button></th></tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno"> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/> </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Grand Total </td>
<td> </td>
<td> <button id="proceed" onClick="payment();"> Proceed </button> </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

I made some changes to your code at jsfiddle.net. The link is: http://jsfiddle.net/2nzgG/30/. All my comments can be found in the javascript section. I hope this is what you are looking for. Let me know if you need anything else.
EDIT:
I also added the code below, but the comments will be found in the link...
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
//FOR Serial Number- use ON
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});

Show/Hide rows based on search textbox

I am trying to do the following effect, the rows are already present on the page, so I guess is something about jquery syntax, but I am not very smart on jquery, yet.
http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/
Its just not working, and yes the jquery libraries are included.
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
<th>
Index Column
</th>
</tr>
#foreach (var item in Model) {
<tr class="indexColumn">
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
#Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}
</table>
The generated HTML is the following one,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Eva 1.0</h1>
</div>
<div id="logindisplay">
Welcome <strong>eva</strong>!
[ Register New User ]
[ Log Off ]
[ Change Password ]
</div>
<nav>
<ul id="menu">
<li> DashBoard</li>
<li> Positions </li>
<li> Prospects </li>
<li> Prospect History </li>
<li> Technical Interview </li>
<li> Manager Interview </li>
<li> Current Employees </li>
<li> Current Employees History </li>
</ul>
</nav>
</header>
<section id="main">
<h2>Index</h2>
<p>
Create New
</p>
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>").hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
Years of Experience Required
</th>
<th>
Index Column
</th>
<th>
Actions
</th>
</tr>
<tr class="indexColumn">
<td>
.net developer
</td>
<td>
5
</td>
<td>
.net developer
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr class="indexColumn">
<td>
java developer
</td>
<td>
5
</td>
<td>
java developer
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
</section>
<footer>
</footer>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</body>
</html>

When I test your code in JS bin everything is working.
http://jsbin.com/ipobiz
You can edit it in the right corner.
He did give a warning about a line break in your
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
thou but that's probably because I just copied pasted the code from here.
Possible fixes
Your previous javascript files might be cached. Try CTRL + F5 to do a full refresh of everything.
Try separating your code from your view and try it again because that seems to work just fine here.
Add a alert(t); or console(t);in this function:
This will show you the values that are put in the IndexColumn. If he doesn't show any of your values then something is wrong with the for each in your jquery.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
//alert(t); or console(t); here
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
});