OK Button Dialogbox isn't working - c#

I use jQuery for dialogbox. it's strange when I tried to delete some element on it. when I click ok button. diaolog box won't redirect even close itself. nothing happen.
this is my first content contained in dialogbox and it works.
<input type="button" class="ui-state-default ui-corner-all" id="indexbutton" onclick="book_tickets(this)" value="Book Seat" />
<div id="dialog" title="Time Limit">
<table>
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" id="txtName" value="" /></td>
</tr>
<tr>
<td> End of Time </td>
<td>:</td>
<td><input type="text" style="width: 100px;" id="timepicker_7" value="01:30 PM" /></td>
</tr>
</table>
</div>
when I tried to delete txtName, then OK button is not working or itsn't redirect to another page.
this is after I delete txtName element.
<table>
<tr>
<td> End of Time </td>
<td>:</td>
<td><input type="text" style="width: 100px;" id="timepicker_7" value="01:30 PM" /></td>
</tr>
</table>
this is how I write the dialogbox code
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
ShowArrData(lObjSeat);
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () { $(this).dialog("close"); }
}
]
});
});
and this is my showobjdata function
function ShowArrData(o) {
for (var i = 0; i < o.length; i++) {
seatname = o[i].Name;
time = jQuery('#timepicker_7').val();
var guest = document.getElementById("txtName").value;
console.log(guest);
var sid = btnId;
if (sid == 'indexbutton') {
var url = "CheckSeat.aspx?noSeat=" + encodeURIComponent(lObjSeat[0].Name) + "&endtime=" + encodeURIComponent(time);
window.location.replace(url);
} else {
var url = "AdminCheckSeat.aspx?noSeat=" + encodeURIComponent(lObjSeat[0].Name) + "&endtime=" + encodeURIComponent(time) + "&guest=" + encodeURIComponent(guest);
window.location.replace(url);
}
}
}
my showobjdata flow is, if website accessed by index then go to checkseat.aspx else go to admin.
what's the matter ?


replace var guest = document.getElementById("txtName").value inside clause else
because I put it out of else, so when condition is guest=null then showarrdata is didn't do anything.

Related

Error for bind data values in html.index with AngularJS

i am using AngularJS and I am not able to populate the data in index.view with the ng-repeat of angular.
I'll leave the code snippet for any help.
Remember, I have the status of the http 200 requests ok, just when I connect the data on the screen, I can not fill.
registerController.js
angular.module('Application').controller('registerController',
function($scope,
$http, registerService) {
$scope.registerUser = {};
$scope.GetAllRegisters = function () {
var registerServiceCall = registerService.GetRegisters();
registerServiceCall.then(function (results) {
$scope.registers = results.data;
}, function (error) {
$log.error('ERRO');
});
};
$scope.GetAllRegisters();
});
My service.js
angular.module('Application').factory('registerService', function ($http) {
return {
GetRegisters: function () {
return $http({
method: 'Get',
url: "http://localhost:51734/api/UserAPI"
})
},
};
});
And my index.html
<div class="row" style="">
<table class="table table-striped" style="">
<tbody>
<tr>
<th style="display:none">Id</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Ativo</th>
<th>Email</th>
<th>Editar</th>
<th>Remover</th>
</tr>
<tr ng-repeat="registerUser in registers" style="word-wrap: break-word;">
<td style="display:none">{{registerUser.UserId}}</td>
<td>{{registerUser.Name}}</td>
<td>{{registerUser.LastName}}</td>
<td><input type="checkbox" ng-model="registerUser.IsActive" disabled /></td>
<td>{{registerUser.Email}}</td>
<td>
<td>
</td>
</tr>
</tbody>
</table>
Any help or advice would be appreciated. Thanks

What is $scope.registers once the page loads?
As it stands right now your table will not render correctly because you cannot use ng-repeat on a tr because it will be inserted as a block-level element which will blow up your table. However, the data should still be inserted above your table. You will have to call ng-repeat on a custom directive to render the table properly.
Something like this:
<register-user-row ng-repeat="registerUser in registers"><register-user-row>
Then in the directive:
angular.module('Application').directive('regusterUserRow', function() {
return {
templateUrl: "directive path here",
restrict: "E",
scope: true
}
})
And the directive's html:
<tr style="word-wrap: break-word;">
<td style="display:none">{{registerUser.UserId}}</td>
<td>{{registerUser.Name}}</td>
<td>{{registerUser.LastName}}</td>
<td><input type="checkbox" ng-model="registerUser.IsActive" disabled /></td>
<td>{{registerUser.Email}}</td>
<td>
</td>
<td>
</td>
</tr>
Note: You were also missing a closing after your first link in the .

I want to serialize form data using jquery

Hello guys i working on data serialize using jquery
i have pasted my HTML code below.
HTML
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="ibox-content">
<form id="product">
<table class="table">
<thead>
<tr>
<th>Action</th>
<th>Product Name</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var _product in Model.ProductList)
{
<tr>
<td>Details</td>
<td>
<strong>
#_product.name
<input type="hidden" name="productId" value="#_product.productId" />
</strong>
</td>
<td id="price">#_product.wholesalePrice</td>
<td id="quantity"><input style="width:50px;" name="qty" value="0"><input type="hidden" name="total" id="rowTotal" /></td>
<td id="value"></td>
</tr>
}
</tbody>
</table>
</form>
<div class="ibox-content">
<button id="totalCal" class="btn btn-primary pull-right">Calculate</button>
</div>
<table class="table invoice-total">
<tbody>
<tr>
<td><strong>Sub Total :</strong></td>
<td id="result">$1026.00</td>
</tr>
<tr>
<td><strong>Shipping :</strong></td>
<td id="Shipping">$235.98</td>
</tr>
<tr>
<td><strong>TOTAL :</strong></td>
<td id="finalTotal">$1261.98</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Jquery function
function GetTblRow() {
var data = $("#product").serializeArray();
var from = JSON.stringify(data);
console.log(from);
};
Output
[{"name":"productId","value":"1"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"2"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"3"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"4"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"5"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"6"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"7"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"8"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"9"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"10"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"12"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"13"},{"name":"qty","value":"0"},{"name":"total","value":"0"}]
Expected Output
[{"ProductId":"1","qty":"0","total":"0"},"ProductId":"1","qty":"0","total":"0"},{"ProductId":"2","qty":"0","total":"0"},{"ProductId":"3","qty":"0","total":"0"},{"ProductId":"4","qty":"0","total":"0"}]
i did above code for serialize form data but i can not get above expected output. So can you help me with this?

you cannot directly use serializeArray() to get the expected json you have to separate the expected result from array
<script>
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$("#totalCal").click(function(){
alert(JSON.stringify($('#product').serializeObject()));
return false;
});
});
</script>

You can use some custom code to format your array. Here is the simplest solution:
function getFormattedArray(array){
var result = [];
for(var currentPosition = 0;currentPosition < array.length; currentPosition += 3) {
result.push({ProductId: array[currentPosition].value,
qty: array[currentPosition+1].value,
total: array[currentPosition+1].value});
}
return result;
}

Asp.net jQuery works outside, but not inside foreach loop

This is the script I am working with.
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length === $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
And this is the cshtml view.
<table id="notificationsTableId">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">
<input type="checkbox" id="selectall" />
</th>
</tr>
</thead>
<tbody>
<tr class="results-table-row odd">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
</td>
</tr>
<tr class="results-table-row even">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
</td>
</tr>
<tr class="results-table-row even odd">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();" />
</td>
</tr>
</tbody>
</table>
Right now the select button will work like it should, if i check it it will check all the dates inside that table.
But what I want to do is I want that button to select all the Check-boxes on the page.
But if I give a checkbox the same ID inside my foreach loop like this:
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" id="selectedId" name="isoDate" value="#isoDate"/>#day-#isoDate
</label>
}
It doesn't work, it will still only select those 3 check-boxes on the top of the page. I would assume it would check all the check-boxes correct?
It ends up like this:

You are using selectedId as id instead of class like other checkboxes. Use it as class attribute as shown below
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" class="selectedId" name="isoDate" value="#isoDate"/>#day-#isoDate
</label>
}

`<td>` will be calculated if the display of the `tr` is not none

In my cshtml file, I want the <td> to be calculated if the display of the tr is not none.
<tr id="abc" style="display:none;height: 30px;">
<td class="titleStyle">Page:</td>
<td align="left">#Html.DropDownList(("pages"),
(IEnumerable<SelectListItem>)ViewData["mypages"], new { onchange = "func()",
id = "page2", style = "float:left; width: 276px;height: 20px;" })</td>
so I tried something like:
<script type="text/javascript">
if ($("#abc").css("display") != "none") {
}
</script>
but how can I continue from here?
any help appreciated!

You mean something like this? Using window.getComputedStyle (IE9+)
HTML
<table>
<tbody>
<tr id="abc" style="display:none;height: 30px;">
<td class="titleStyle">Page:</td>
</tr>
<tr id="abcd" style="height: 30px;">
<td class="titleStyle">Page:</td>
</tr>
</tbody>
</table>
Javascript
var trs = document.getElementsByTagName("tr"),
length = trs.length,
i = 0;
while (i < length) {
if (window.getComputedStyle(trs[i]).display !== "none") {
trs[i].children[0].firstChild.nodeValue = "Page: 1";
}
i += 1;
}
On jsfiddle

how to Clone a row containing text box and dynamic dropdown box in a table

i have a table containing a row in which a text box and a dynamic drop-down list is present and i want to clone that row. To do that i am doing the below :
Below code is for displaying the tabel containng a row which has a text box and dynamic dropdown box:
<table>
<tr>
<td id="j" class="i">
Skills
<input data-bind="value:skl" name="skl" id="skl" style="width: 120px; height: auto"
data-type="string" class="k-textbox" />
<input id="styp" style="width: 120px; height: auto" /><span></span>
<button class="add" value="add">
Add</button>
</td>
<td>
</td>
<td>
#* <span data-for="styp" class="k-invalid-msg"></span></td>*#
</td>
</tr>
#*this code is to display the add rows and delete rows functionality*#
<tr id="fo" style="display: none">
<td width="100%">
<input type="text" class="k-textbox" id="a" width="100 px" height="20 px" />
<select style="width: 90px; height: auto" id="options" data-bind="value:skill" data-text-field="skill"
data-value-field="skillid" data-source="skilldatasource" data-role="dropdownlist">
</select>
<button type="button" id="b" class="delete" value="delete">
Delete</button>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
//Below code is for defining datasource to the dropdownlist
var skilldatasource = new kendo.data.DataSource({
transport: {
read:
{
url: "/ProfileMgmtProfileSearch/Skills",
type: "POST",
dataType: "json"
}
},
schema: {
model: {
id: "skillid",
fields: {
skillid: { type: "number" },
skill: { type: "string" }
}
}
}
})
skilldatasource.read();
$(document).ready(function () {
//Add button click functionality to Add new row to the Skills row with same fields //and also append a delete button to it:
$('.add').click(function () {
alert("cliked");
id++;
var prot = $("#fo").find("td").clone();
// $("#options").clone();
prot.attr("class", "")
prot.attr("id", id);
prot.addClass("new");
$('<tr/>').append(prot).insertAfter($('#theTable tbody>tr:last'));
var dropdownlist2 = prot.find("select#options");
alert("hai....");
alert(dropdownlist2);
dropdownlist2.kendoDropDownList({});
});
// button click functionality to delete the specified row containing that delete button
$('#theTable').delegate('.delete', 'click', function () {
$(this).closest("td").remove();
var first = dropdownlist.dataSource.get(c--);
dropdownlist.dataSource.remove(first);
})
});
=============================================================================
Here by executing the above code am able to clone the entire row but the dropdown box is not getting values in it i.e., datasource is not cloned, so plz help me out of these problem.

Categories