We Keep Coding

How do i tell ajax to select the item clicked from a list

Im trying to make a list of people in vacations and I want to calculate their date of return when i click the "Data de Regresso" link. I managed to do that but when I click any of the buttons in the list it always passes the first ID in the list and not the ID of the item I clicked. I'm kinda new to this. I would really aprecciate any help.
Im using asp.net framework MVC 5.
Here is the View Code:
<div class="col-4">
<div class="card">
<div class="card-header text-white" style="background-color: #4d4d4f;">
Férias
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<td>Nome</td>
<td></td>
</tr>
</thead>
<tbody>
#if (Model.PessoasDFVM.Count == 0)
{
<tr>
Ninguém de férias.
</tr>
}
else
{
foreach (PortalInternoBBG.Web.Models.HomePage.PessoaDFVM pessoaDeFerias in Model.PessoasDFVM)
{
<tr>
<td>#pessoaDeFerias.Nome</td>
<td>
<div id="ResponseDiv">
<a href="#" onclick="GetDataDeRetorno('#pessoaDeFerias.IDstring')">
Data de Regresso
</a>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
And the ajax function:
function GetDataDeRetorno(id) {
var stringID = id;
$.ajax({
url: urlCalculaDataDeRetorno,
data: { "id": stringID },
type: "POST",
success: function (data) {
$('#ResponseDiv').replaceWith("<div>" + data + "</div>");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}

Append div class with the unique Id so that you will change the div data in ajax response with the help of it.
Please change the below code in html.
<div class="ResponseDiv_#pessoaDeFerias.IDstring">
<a href="#" onclick="GetDataDeRetorno('#pessoaDeFerias.IDstring')">
Data de Regresso
</a>
</div>
and in ajax success with the below code
success: function (data) {
$('.ResponseDiv_' +stringID).replaceWith("<div>" + data + "</div>");
}

Dynamically add Select2 to Row

why when i try to add select2 to new row the new select2 failed to initialize (it shown as select html tag).
Here's my code to create the table :
<table id="tbldet" class="table table-bordered table-striped table-hover" style="width:100%;margin:0 auto;">
<thead>
<tr>
<th><p>Nama Barang</p></th>
<th><p>Harga</p></th>
<th><p>Qty</p></th>
<th><p>Total</p></th>
<th style="width:50px"><p>Aksi</p></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="select2" name="det_brg" style="width:100%;">
</select>
</td>
<td>10000</td>
<td>4</td>
<td>930000</td>
<td><span class="btn btn-danger"><i class="fa fa-remove"></i></span></td>
</tr>
</tbody>
</table>
javascript function to initializeSelect :
function initializeSelect2(selectElementObj) {
selectElementObj.select2({
width: "80%",
tags: true,
language:"id",
ajax: {
url: "controller/barang_list.php",
dataType: "json",
type:"GET",
delay: 250,
data: function (params) {
return {
search: params.term
}
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
id:item.id,
text:item.text
}
})
};
},
cache: false
},
minimumInputLength: 3,
dropdownParent:$("#form-data")
});
};
$(".select2").each(function() {
initializeSelect2($(this));
});
here's the code to add new row :
//create new row
$("#add_row").click(function(e) {
//new row
$("#tbldet").append(
'<tr>\
<td>\
<select class="select2" name="det_brg" style="width:100%;">\
</select>\
</td>\
<td>10000</td>\
<td>4</td>\
<td>930000</td>\
<td><span class="btn btn-danger"><i class="fa fa-remove"></i></span></td>\
</tr>'
);
var newSelect=$(this).closest("tr").find(".select2");
initializeSelect2(newSelect);
})
i suspect there's problem with finding new 'select2' component on new row, but when i use alert(newSelect) it didn't show NULL / Undefined

Your suspicion is correct, your code will never find the new .select2 element. The reason has to do with the way .closest() works. You can investigate that here:
https://api.jquery.com/closest/
But in the mean time:
Change
var newSelect=$(this).closest("tr").find(".select2");
TO
var newSelect=$("#tbldet").find(".select2").last();

Javascript function works only on second click

I'm trying to get prescription details of particular patient and the corresponding result is displayed in modal window. Problem is first result is obtained only on 2nd click. On successive click result of previous data is obtained. Below is my HTML:
<table class="table">
<thead>
<tr class="text-center" style="font-weight: bold">
<td></td>
<td>Name</td>
<td>ID</td>
<td>Age</td>
<td>Registered On</td>
<td>View Prescription</td>
</tr>
</thead>
<tr class="text-center">
<td><input name="name" type="text"></td>
<td><input name="id" type="text"></td>
<td><input name="age" type="text"></td>
<td><input name="reg_on" type="text"></td>
<td>
<button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this.value)">
<span class="glyphicon glyphicon-share"></span>
</button>
</td>
</tr>
<div class="modal_show"></div>
function view_prescription_from_patient_list(patient_id) {
var dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
$.ajax({
type: "GET",
url: "ajax_get_data.php",
data: dataString,
dataType: "html",
success: function(response) {
$('.modal_show').append(response);
}
})
}
I tried on.click method within javascript but that also has the same problem.

Since you are already using jQuery you can wire the "onclick" event of your button using jQuery.
You need to wire your event handler up like this.
$(document).ready(function() {
$('#view_prescription_from_patient_list').on('click', function(e) {
e.preventDefault();
var patientId = $(this).parent().parent().find('input[name=id]').val();
// do your ajax call here...
});
});

You are passing a value of "register" (this.value from the button clicked).
Instead use jQuery to connect and handler the click event (delete the inline onclick handler).
e.g.
$('#view_prescription_from_patient_list').click(function(){
var patient_id = $(this).closest('tr').find('[name=id]').val();
var dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
$.ajax({
type: "GET",
url: "ajax_get_data.php",
data: dataString,
dataType: "html",
success: function(response) {
$('.modal_show').append(response);
}
})
}
});
This will fetch the patent-id from the name="id" TD (which presumably has the ID value - but not shown in your example HTML).
If your code does not follow the DOM elements it references you will also need to wrap it in a DOM ready handler:
$(function(){
// Your code here
});
Note: $(function(){ is just a shortcut for $(document).ready(function(){

Code with jquery on.('click' and you can get patient_id from the parent td
Like $(this).parent().parent().find('input[name=id]').val();
This code may help you to understand
$('#view_prescription_from_patient_list').on('click',function(){
var patientId = $(this).parent().parent().find('input[name=id]').val();
var dataString = "get_what=prescription_list_for_patient_list&patient_id="+patientId;
$.ajax(
{
type:"GET",
url:"ajax_get_data.php",
data:dataString,
dataType:"html",
success:function(response)
{
$('.modal_show').append(response);
}
}
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="text-center" style="font-weight: bold">
<td></td>
<td>Name</td>
<td>ID</td>
<td>Age</td>
<td>Registered On</td>
<td>View Prescription</td>
</tr>
</thead>
<tr class="text-center">
<td><input name="name" type="text"></td>
<td><input name="id" type="text"></td>
<td><input name="age" type="text"></td>
<td><input name="reg_on" type="text"></td>
<td><button id="view_prescription_from_patient_list" value="register" ><span class="glyphicon glyphicon-share"></span></button></td>
</tr>

You're reading wrong value as pointed out in previous answers.
I'd suggest also to use Unobtrusive JavaScript
$( document ).ready(function(){
$('#view_prescription_from_patient_list').on('click', function(){
var patient_id = $('[name="id"]', $(this).closest('tr')).val(),
dataString = "get_what=prescription_list_for_patient_list&patient_id="+patient_id;
$.ajax({
// ...
});
});
});
If you really need to stick to onclick attribute for some reason (althought you shouldn't), pass the button to the method:
<button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this)">
<span class="glyphicon glyphicon-share"></span>
</button>
and then in JS:
function view_prescription_from_patient_list(btn) {
var patient_id = $('[name="id"]', $(btn).closest('tr')).val(),
dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
$.ajax({
// ...
});
}

Multiple auto-refresh data bindings in one page using knockout

One data binding works well and display automatic data but when I add another copying the same pattern of first, second gives error and do not work. So in below example if I do comment anyone, another do not work.
HTML CODE:
<table>
<thead>
<tr><th>Item Name</th><th>Price</th></tr>
</thead>
<tbody data-bind="foreach: itemsdisplay">
<tr>
<td data-bind="text: Name" />
<td data-bind="text: Price" />
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th colspan="3" style="color:#06C">Stock Market Metal Rates</th></tr>
</thead>
<tbody data-bind="foreach: MetalDisplay">
<tr>
<td data-bind="text: Name" />
<td data-bind="text: Price" />
<td data-bind="text: Dated" />
</tr>
</tbody>
</table>
This is my JS code:
function GetProducts(handleData) {
$.ajax({
url: 'form.php',
type: "post",
data: '',
dataType: 'json',
success: function(data){
handleData(data);
},
error:function(data){
alert('Failed');
}
});
}
function GetMetals(handleData) {
$.ajax({
url: 'form2.php',
type: "post",
data: '',
dataType: 'json',
success: function(data){
handleData(data);
},
error:function(data){
alert('Failed');
}
});
}
$(function () {
var ItemDisplayViewModel = function() {
var self = this;
self.itemsdisplay = ko.observableArray();
self.update = function() {
GetProducts(function(output){
self.itemsdisplay.removeAll();
$.each(output, function (i) {
self.itemsdisplay.push(new product(output[i]));
});
});
}
};
var MetalViewModel = function() {
var self = this;
self.MetalDisplay = ko.observableArray();
self.update = function() {
GetMetals(function(output){
self.MetalDisplay.removeAll();
$.each(output, function (i) {
self.MetalDisplay.push(new metals(output[i]));
});
});
}
};
var ItemDisplayViewModel = new ItemDisplayViewModel();
window.setInterval(ItemDisplayViewModel.update,1000);
ko.applyBindings(ItemDisplayViewModel);
var MetalViewModel = new MetalViewModel();
window.setInterval(MetalViewModel.update,1000);
ko.applyBindings(MetalViewModel);
});
var product = function (data) {
return {
Name: ko.observable(data.Name),
Price: ko.observable(data.Price)
};
};
var metals = function (data) {
return {
Name: ko.observable(data.Name),
Price: ko.observable(data.Price),
Dated: ko.observable(data.Dated)
};
};
Can anyone help please!

You can do the following.
Provide id for both the tables
<table id="item">
<thead>
<tr><th>Item Name</th><th>Price</th></tr>
</thead>
<tbody data-bind="foreach: itemsdisplay">
<tr>
<td data-bind="text: Name" />
<td data-bind="text: Price" />
</tr>
</tbody>
</table>
<table id="metal">
<thead>
<tr><th colspan="3" style="color:#06C">Stock Market Metal Rates</th></tr>
</thead>
<tbody data-bind="foreach: MetalDisplay">
<tr>
<td data-bind="text: Name" />
<td data-bind="text: Price" />
<td data-bind="text: Dated" />
</tr>
</tbody>
</table>
The modify your script to pass the table element to ko.applyBindings method as below.
var itemDisplayViewModel = new ItemDisplayViewModel();
var x = window.setInterval(itemDisplayViewModel.update,1000);
ko.applyBindings(itemDisplayViewModel,document.getElementById("item"));
var metalViewModel = new MetalViewModel();
var y = window.setInterval(metalViewModel.update,1000);
ko.applyBindings(metalViewModel, document.getElementById("metal"));
Please refer 'Activating knockout' section in http://knockoutjs.com/documentation/observables.html - The part of text from the link given below.
For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.

What you are doing does not work. you need to do it like this.
ko.applyBindings(ItemDisplayViewModel,document.getElementById('first_div_id'));
ko.applyBindings(MetalViewModel,document.getElementById('second_div_id'));
Or here is another method
var viewModel = function(){
var self = this
self.Item = ko.observable(new ItemDisplayViewModel())
self.Metal = ko.observable(new MetalViewModel())
}
ko.applyBindings(viewModel)
And now
<table data-bind="with:Item">
.
.
.
</table>
<table data-bind="with:Metal">
.
.
.
</table>
And finally
window.setInterval(viewModel.Item().update, 1000);
window.setInterval(viewModel.Metal().update, 1000);
You can take a look at this post for better understanding.

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();
});