Develop Reference

Getting the value of appended select list in jquery

I just want to ask how to get the selected value from appended select list using jquery. Please help me. Thanks in advance.
var wrapper1 = $(".column1");
array1 = ["sample1", "sample2", "sample3"];
var myRoot = window.location.origin + "/";
$.ajax({
url: myRoot + 'Payslip/GetDataFromAppend',
type: 'GET',
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ id: $this }),
async: true,
success: function (data) {
$(wrapper1).append(appendOption(data, array1[0]));
}
});
var appendOption = function (data, txtData) {
var appendfor = '<label class="col-sm-4 control-label"><label> ' + txtData + '...</label></label><div class="col-sm-7">' +
'<select class="form-control" asp-for="PayslipID" asp- items="ViewBag.PayslipID" data- val="true" data- val - required="The Payslip ID field is required." id= "PayslipID" >';
for (var i = 0; i < data.length; i++) {
console.log(data[i].value);
appendfor += '<option value="' + data[i].value + '">' + data[i].value + '</option>';
}
appendfor += '</select ></div >';
return appendfor;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group column1"></div>

The 'form-control' element is added to the page dynamically so you need to use event delegation, try this:
$(document).on('change', ".form-control", function(){
alert($(this).val())
});
'column1' should also work in place of 'document' assuming that it is a static element.

Cannot set property 'innerHTML' of null in javascript

guys i have a column which contains text and button and what i want is when click on the button the text changed .. here is my code
var count = 0;
$(document).ready(function() {
$("#jqGrid").jqGrid({
data: data.rows,
datatype: "local",
styleUI: "Bootstrap",
colModel: [
{
label: 'Customer ID',
name: 'CustomerID',
width: 180,
editable: true,
edittype: "custom",
id: "CustomerID",
editoptions: {
custom_element: function(value, options) {
var parts = value.split(' ');
var elemStr = '<div><input size="6" id="txt_"' + count + '" value="' + parts[0] +
'" /><input type="button" size="5" value="..." onclick="setText();"/></div>';
count++;
// return DOM element from jQuery object
return $(elemStr)[0];
},
custom_value: function(elem) {
var inputs = $("input", $(elem)[0]);
var first = inputs[0].value;
return first;
}
}
},
],
});
});
function setText() {
document.getElementById("txt_" + count).innerHTML = "hey";
}
so why it gives me that exception ? .. plz help .. btw i am beginner

the count inside setText is undefined.
1st change onclick function of button to pass the count variable
var elemStr = '<div><input size="6" id="txt_"' + count + '" value="' + parts[0] +
'" /><input type="button" size="5" value="..." onclick="setText(' + count + ');"/></div>';
then accept the count as parameter
function setText(count) {
document.getElementById("txt_" + count).innerHTML = "hey";
}

You can pass count to the function:
var count = 0;
$(document).ready(function() {
$("#jqGrid").jqGrid({
data: data.rows,
datatype: "local",
styleUI: "Bootstrap",
colModel: [
{
label: 'Customer ID',
name: 'CustomerID',
width: 180,
editable: true,
edittype: "custom",
id: "CustomerID",
editoptions: {
custom_element: function(value, options) {
var parts = value.split(' ');
var elemStr = '<div><input size="6" id="txt_"' + count + '" value="' + parts[0] +
'" /><input type="button" size="5" value="..." onclick="setText(' + count + ');"/></div>';
count++;
// return DOM element from jQuery object
return $(elemStr)[0];
},
custom_value: function(elem) {
var inputs = $("input", $(elem)[0]);
var first = inputs[0].value;
return first;
}
}
},
],
});
});
function setText(count) {
document.getElementById("txt_" + count).innerHTML = "hey";
}

create input and send value whit jQuery but value dosnt send

I want to add input whit js and send value whit jQuery but value dosnt send.
Actually fields value dosn't define in jQuery.
function addElement(myDiv, type) {
var ni = document.getElementById(myDiv);
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value - 1) + 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my' + num + 'Div';
newdiv.setAttribute('id', divIdName);
newdiv.innerHTML = '<input class="name" name="name[]" value="" placeholder="عنوان"><input class="value" name="value[]" value="" placeholder="توضیحات"><input type="hidden" class="type" name="type[]" value="' + type + '"><input type="hidden" class="position" name="position[]" value="' + myDiv + '">'
ni.appendChild(newdiv);
}
$('#add_field').live('click', function() {
var id = $('#id').val();
var name = $('#name').val();
var value = $('#value').val();
var type = $('#type').val();
var position = $('#position').val();
var name = [];
var value = [];
var type = [];
var position = [];
$(".name").each(function() {
name.push($(this).val());
});
$(".value").each(function() {
type.push($(this).val());
});
$(".position").each(function() {
size.push($(this).val());
});
$.ajax({
type: 'POST',
url: '../inc/add.field.php?id=' + id,
data: {
name: name,
type: value,
size: type,
position: position
},
success: function(data) {
$('#result').html(data);
}
});
});
PHP
print_r($_POST['name']);
print_r($_POST['value']);
print_r($_POST['type']);
print_r($_POST['position']);
echo $_GET['id'];
Notice: Undefined index: name
Notice: Undefined index: value
Notice: Undefined index: type
Notice: Undefined index: position

Use this ajax. Note that the $('form') selector needs to be a valid selector that targets your <form> tag. If you serialize, the arrays will be passed as arrays in HTTP, not as a javascript array value. With this mode, PHP will recognize them as arrays, not as [OBJECT object] value
$.ajax({
type: 'POST',
url: '../inc/add.field.php?id=' + id,
data: $('form').serialize(); // that's the change
success: function(data) {
$('#result').html(data);
}
});
EDIT
Test with serializeArray():
$.ajax({
type: 'POST',
url: '../inc/add.field.php?id=' + id,
data: $('form').serializeArray(); // that's the change
success: function(data) {
$('#result').html(data);
}
});
More info: https://api.jquery.com/serializeArray/
EDIT 2
As I said in comments, you can make it with serialize():
http://jsfiddle.net/tZPg4/15519/
It works perfectly.

page is not refreshing implicitly in jquery ajax while deleting

I have this two ajax jquery function to add ,display and delete data from table the table ,delete works fine ut while adding the data gets saved but only gets displayed when i refresh ,how do i fix this?
<script type="text/javascript">
$(document).ready(function() {
(function ($) {z
$.fn.serializeFormJSON = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
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;
};
})(jQuery);
$('form').submit(function (e) {
e.preventDefault();
var data = $(this).serializeFormJSON();
console.log(data);
console.log(JSON.stringify(data));
$.ajax({
type: "POST",
contentType: "application/json",
url: "createajaxuser",
data:JSON.stringify(data),
dataType: "json",
success: function(result) {
a
}
});
});
$.ajax({
url: 'listusersjson',
type: 'GET',
success: function(response) {
var trHTML = '';
var count =0;
$.each(response, function(i, item) {
console.debug("i is"+i);
var success="success";
var danger="danger";
var info="info";
var color ;
if(count==0)
{
color =success;
count++;
}else if(count==1){
color =danger;
count++;
}else{
color =info;
count=0;
}
trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password + '</td><td>' + item.email+
'</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
'</td></tr>';
});
$('#delTable').append(trHTML);
$('button').click(function() {
var val = $(this).attr("id");
console.debug("saurabh userid", val);
var rowElement = $(this).parent().parent();
$.ajax({
type: "DELETE",
url: "ajaxuserr/"+val,
success: function(result) {
rowElement.find('td').fadeOut('3000',
function() {
rowElement.remove();
}
);
}
});
});
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<div>
<label for="name">Name</label> <input type="text" name="name"
id="name" />
</div>
<div>
<label for="email">Email</label> <input type="text" name="email"
id="email" />
</div>
<div>
<label for="password">Password</label> <input type="password"
name="password" id="password" />
</div>
<p>
<input type="submit" value="Send" />
</p>
</form>
<div class="container">
<table class="table table-bordered table-hover" id="delTable">
<thead>
<tr>
<th width="100">Name</th>
<th width="100">ID</th>
<th width="100">Password</th>
<th width="100">Email</th>
<th width="100">Delete</th>
</tr>
</thead>
</tbody>
</table>
</div>

I am posting this answer because you are getting confused when I am tring to explain in comments,
So initially put your ajax call that builds the table tbody into a new Function like below.
function GetListOfUsers(){
$.ajax({
url: 'listusersjson',
type: 'GET',
success: function(response) {
var trHTML = '';
var count =0;
$.each(response, function(i, item) {
console.debug("i is"+i);
var success="success";
var danger="danger";
var info="info";
var color ;
if(count==0)
{
color =success;
count++;
}else if(count==1){
color =danger;
count++;
}else{
color =info;
count=0;
}
trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password + '</td><td>' + item.email+
'</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
'</td></tr>';
});
$('#delTable tbody').append(trHTML); //Note I am trying to append into tbody you were directly appending to table without tbody
$('button').click(function() {
var val = $(this).attr("id");
console.debug("saurabh userid", val);
var rowElement = $(this).parent().parent();
$.ajax({
type: "DELETE",
url: "ajaxuserr/"+val,
success: function(result) {
rowElement.find('td').fadeOut('3000',
function() {
rowElement.remove();
}
);
}
});
});
}
});
});
}
And then you can call this method in the success method of the form submit ajax call. like below
$('form').submit(function (e) {
e.preventDefault();
var data = $(this).serializeFormJSON();
console.log(data);
console.log(JSON.stringify(data));
$.ajax({
type: "POST",
contentType: "application/json",
url: "createajaxuser",
data:JSON.stringify(data),
dataType: "json",
success: function(result) {
$('#delTable tbody').html(''); //empty the tbody
GetListOfUsers(); // call this function so that it rebuilds the tbody
}
});
});
Also since now we moved the ajax call that builds the tbody into a new function, you have to call this once in your initial script load. So that it builds up the tbody. So you can place this line of code after your form submit event handler
GetListOfUsers();

Dynamic Partial Views of Payments collected in Main View using Javascript MVC 3 ASP.NET

I am some what new to javascript and mvc3 just for your information.
I have been having troubles trying to figure out multiple payment models on one view without the javascript getting all messed up.
What I am trying to do:
Create a parent model so that all the children models will have one or two attributes from the parent model.
Use javascript in order to get data from the server to gather and post data without messing up each other payments on the view already.
If there is an easier way to collect multiple payments and return them to the control please give me a link or some information to research... Thank you!
In the main view all I do is display the first partial view and two buttons(post, add new payment) the post button submits the payment to the server, and the new payment adds another partial view payment model.
the issue I am having is getting the partial views to work with the javascript, which only targets the first payment. I have been looking up this issue for a few days now and can't find a good answer. The only answer that makes sense to me is to change the id's of all the elements on the partial view and have my javascript reference the updated id's but I don't know how to change the id's dynamically in order for the javascript to change with it.
I apologize if I am missing anything, I am new to this stuff.
Payment Partial View:
#model SBTools.Models.Payment
#*AJAX TO RETRIEVE BILLING COMPANY LIST DATA*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: '#Url.Content("~/AddPayments/GetBillingCompanies")',
type: 'POST',
data: {},
success: function (data) {
var items = "<option>Select Billing Company</option>";
$.each(data, function (i, item) {
var val = item.OCN;
var txt = item.OCNDescription;
items += "<option value=" + val + ">" + val + " " + txt + "</option>";
});
$('#OCN').html(items);
}
});
});
</script>
#*AJAX TO RETRIEVE CARRIERNAME LIST
PARAM1: Billing Company OCN*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#OCN').on("change", function () {
var OCN = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetConnectionString")',
type: 'POST',
data: { OCN: OCN },
success: function (data) {
$('#connectionString').val(data);
connectionString = data;
$.ajax({
url: '#Url.Content("~/AddPayments/GetGLAccounts")',
type: 'POST',
data: { connectionString: connectionString, OCN: OCN },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=" + item.ID + "/" + item.AccountNumber + ">GL:" + item.AccountNumber +
"   &#160" + item.AccountName + "</option>";
});
$('#GLAccount').html(items);
}
});
}
});
$.ajax({
url: '#Url.Content("~/AddPayments/GetCarriers")',
type: 'POST',
data: { OCN: OCN },
success: function (data) {
var items = "<option>Select a Carrier</option>";
$.each(data, function (i, item) {
if (item.CIC) {
items += "<option value=" + item.CarrierId + ">" + item.CIC + " CIC  " + item.CarrierName + "</option>";
} else if (item.OCN) {
items += "<option value=" + item.CarrierId + ">" + item.OCN + " OCN  " + item.CarrierName + "</option>";
}
});
$('#CarrierName').html(items);
}
});
});
});
</script>
#*AJAX TO RETRIEVE BAN/INVOICE/AMOUNT DATA
PARAM1: Billing company ocn
PARAM2: Carrier ID*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#CarrierName').on("change", function () {
var isZeroBalanceShowing = false;
if ($('#isZeroBalanceShowing').prop("checked"))
isZeroBalanceShowing = true;
var carrierID = $('#CarrierName').val();
var ocn = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetAccount")',
type: 'POST',
data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
var inv = item.Invoice;
var ban = item.BAN;
var initAmnt = item.InitAmount;
var amnt = item.Amount;
var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();
items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
});
$('#BAN').html(items);
}
});
});
});
</script>
#*AJAX TO SHOW ZERO BALANCES IN INVOICE DROPDOWN*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#isZeroBalanceShowing').click(function () {
var isZeroBalanceShowing = false;
if ($('#isZeroBalanceShowing').prop("checked"))
isZeroBalanceShowing = true;
if ($('#CarrierName').val() != null) {
var carrierID = $('#CarrierName').val();
var ocn = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetAccount")',
type: 'POST',
data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
var inv = item.Invoice;
var ban = item.BAN;
var amnt = item.Amount;
var initAmnt = item.InitAmount;
var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();
items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
});
$('#BAN').html(items);
}
});
}
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var amnt = "";
$('#Amount').blur(function () {
if ($('#Amount').val().toString().charAt(0) === '$') {
amnt = $('#Amount').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#Amount').val()).toFixed(2);
}
$('#Amount').val(amnt);
});
$('#Deposit').blur(function () {
if ($('#Deposit').val().toString().charAt(0) === '$') {
amnt = $('#Deposit').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#Deposit').val()).toFixed(2);
}
$('#Deposit').val(amnt);
});
$('#CheckAmount').blur(function () {
if ($('#CheckAmount').val().toString().charAt(0) === '$') {
amnt = $('#CheckAmount').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#CheckAmount').val()).toFixed(2);
}
$('#CheckAmount').val(amnt);
});
});
</script>
#*DATEPICKER FOR DATE RECIEVED*#
<script>
$.datepicker.setDefaults({
constrainInput: true,
dateFormat: 'yyyy/mm/dd',
gotoCurrent: true,
hideIfNoPrevNext: true,
minDate: '-3m',
maxDate: 0,
showOn: 'both'
});
#*DATEPICKER FOR CHECKDATE*#
// To date - default to today's date
$(document).ready(function () {
$('#Date').datepicker({
maxDate: '0',
defaultDate: new Date(),
onSelect: function (dateStr) {
$('#CheckDate').datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
}
});
});
$(document).ready(function () {
$('#CheckDate').datepicker({
maxDate: '0',
defaultDate: new Date(),
onSelect: function (dateStr) {
$('#Date').datepicker("option", "maxDate", '+0m +0w');
}
});
});
</script>
<h3>Payment #Html.DisplayFor(x => x.AccountID):</h3>
#Html.HiddenFor(x => x.AccountID, new { id = "ID" })
#Html.HiddenFor(x => x.connectionString, new { id = "connectionString" })
<table id="tblAcct" class="display">
<tr class="spacer" />
<tr>
<td>Billling Company (First**):#Html.ValidationMessageFor(model => model.OCN, " *Select a Value")</td>
<td>Carrier Company (Second**):#Html.ValidationMessageFor(model => model.CarrierName, " *Select a Value")</td>
<td>Deposit Amount:#Html.ValidationMessageFor(model => model.Deposit, " *Enter a Value") </td>
</tr>
<tr>
#*OCN*#
<td>
<select required id="OCN" name="OCN" style="width: 200px;" tabindex="0" ></select></td>
#*CarrierName*#
<td>
<select required id="CarrierName" name="CarrierName" style="width: 200px;"></select></td>
#*DEPOSIT*#
<td>$#Html.TextBoxFor(a => a.Deposit, new { style = "width:200px;" })</td>
</tr>
<tr class="spacer" />
<tr>
<td>Check Date:</td>
<td>Check Amount:#Html.ValidationMessageFor(model => model.CheckAmount, " *Enter a Value")</td>
<td>Check Number:#Html.ValidationMessageFor(model => model.CheckNumber, " *Enter a Value")</td>
</tr>
<tr>
#*CHECKDATE*#
<td>#Html.EditorFor(model => model.CheckDate, new { id = "CheckDate" })
#Html.ValidationMessageFor(model => model.CheckDate, "mm/dd/yyyy")</td>
#*CHECKAMOUNT*#
<td>$#Html.TextBoxFor(a => a.CheckAmount, new { style = "width:200px;" })</td>
#*CHECKNUMBER*#
<td>#Html.TextBoxFor(a => a.CheckNumber, new { style = "width:200px;" })</td>
</tr>
</table>
<table id="tblAcctInvoice" class="display">
<tr class="spacer" />
<tr>
<td>Invoice:             
#Html.CheckBoxFor(model => model.isZeroBalanceShowing, new { id = "isZeroBalanceShowing" }) Zero Balances
#Html.ValidationMessageFor(model => model.Invoice, " *Select a Value")</td>
<td>Payment Date:</td>
<td>Payment Amount:#Html.ValidationMessageFor(model => model.Amount, " *Enter a Value")</td>
<td>GL Account:#Html.ValidationMessageFor(model => model.GLAccount, " *Select a Value")</td>
</tr>
<tr>
#*BAN*#
<td>
<select required id="BAN" name="Invoice" style="width: 351px;"></select></td>
#*PAYMENT DATE*#
<td>
<div class="Date">
#Html.EditorFor(model => model.Date, new { id = "Date" })
#Html.ValidationMessageFor(model => model.Date, "mm/dd/yyyy")
</div>
</td>
#*PAYMENT AMOUNT*#
<td>
<div class="currency">
$#Html.TextBoxFor(a => a.Amount, new { style = "width:150px;", id = "Amount" })
</div>
</td>
#*GLACCOUNT*#
<td>
<select required id="GLAccount" name="GLAccount" style="width: 200px;"></select></td>
</tr>
</table>
<table id="tblAcctComment" class="display">
<tr>
<td>Comments:       
#*ISSERVICEBUREAU*#
#Html.CheckBoxFor(a => a.isServiceBureauCollection, new { #checked = "checked" }) Service Bureau Collection:</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(a => a.Comment, new { style = "width:99%; height: 20px;" })
</td>
</tr>
</table>

This is happening because you are dynamically loading html(partial Views) in your pages and the new html element added to the page are not binded with any javascript events.
jquery always work only on those element that are loaded in HTML dom. To get your page working
you have to call all your jquery event for that partial page on success callback.