Develop Reference

dynamic select option and dynamic data from php

I tried develop add several selectbox dynamically and get data from selectbox my codes:
this codes add new selectbox and work
var y = 1;
var z = 1;
$('#add_kind').on('click', function () {
var html = '';
html += '<div class="prInput-row">';
html += '<select name="kind_id" class="halfselect kinds">';
html += '<option value="0">Kinds</option>';
html += '<?php foreach($kinds as $kind): ?>';
html += '<option value="<?php echo $kind->id;?>"><?php echo $kind->name;?></option>';
html += '<?php endforeach; ?>';
html += '</select>';
html += '<select name="kind_desc_id" class="halfselect kind_descriptions">';
html += '<option value="0">Kind Descriptions/option>';
html += '</select>';
html += '<input type="text" name="stock_piece" class="halfselect" placeholder="Stock Piece"/>';
html += '</div>';
$('#kind_area').append(html);
$('.kinds').each(function () {
$(this).attr('class', 'halfselect kinds_'+y);
y++;
});
$('.kind_descriptions').each(function () {
$(this).attr('class', 'halfselect kind_descriptions_'+z);
z++;
});
});
$('.kinds').each(function () {
$(this).attr('class','halfselect kinds_'+y);
y++;
});
$('.kind_descriptions').each(function () {
$(this).attr('class','halfselect kind_descriptions_'+z);
z++;
});
this codes get data from db and not work,
var i = 1;
$(".kinds_"+i).on('change', function() {
var kindID = $(this).val();
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
i++;
});
how can change those codes and how can get dynamically datas
this picture my example

#anon, I solved thank you so much but 2 times write codes but how can write one time ?
$("#add_kind").click(function(){
$.each($("[class*='kinds_']"), function() {
$(this).on('change', function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
});
});
$.each($("[class*='kinds_']"), function() {
$(this).on('change', function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
});

you can get all element that have class started with "kinds_" with selector $("[class^=kinds_]") then do a loop to get your class index. So maybe something like this will work:
$.each($("[class^='kinds_']"), function() {
var selector = "."+$(this).attr("class");
$(document).on('change', selector, function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
})

Data is duplicated when click again in button in javascript

I'm able to display all data, but when I click again in My team the data is displayed twice. Clicking again and again means more times the data is displayed. How can I display data once? I mean just the 6 team members and no 6 team members repeated.
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
var data1 = "TEAMSEARCH";
$.ajax({
url: 'TeamAssignment',
type: 'POST',
data: {
data1: data1
},
success: function(result) {
var memberList = $.parseJSON(result);
for (var i = 0; i < memberList.length; i++) {
console.log(memberList[i].fullName);
document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>';
}
}
});
}
<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
<div class="popup" onclick="myFunction()">
<h6>My team</h6>
<span class="popuptext" id="myPopup">My team members:<br><h7 id="demo"></h7><br></span>
</div>
</div>
</div>
<ol class="breadcrumb"></ol>

You need to clear demo element, before starting the for loop:
success: function(result) {
var memberList = $.parseJSON(result);
document.getElementById("demo").innerHTML = '';
for (var i = 0; i < memberList.length; i++) {
console.log(memberList[i].fullName);
document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>';
}
}
Personally, i prefer following code instead, when working with jquery:
$.ajax({
url: 'TeamAssignment',
type: 'POST',
data: {
data1: data1
},
dataType: "json",
success: function(memberList) {
$("#demo").html('');
for (var i = 0; i < memberList.length; i++) {
console.log(memberList[i].fullName);
$("#demo").append('<li style="list-style:none;">' + memberList[i].fullName + '</li>');
}
}
});

Javascript append keep adding elements

I am trying to append list[i].name and list[i].email once every time sponsorListTree li is being clicked. I can append the document.getElementById("name").appendChild(div_group); but the problem occurs when i click the div a few times, the same data will add up instead of displaying the result only once
$.ajax({
url: 'test.php',
method: 'GET',
success: function(data){
var list = data;
for (i = 0; i < list.length; i++) {
$('#sponsorListTree li').attr('id', function(i) {
return 'sponsorListTree'+(i+1);
});
$('#sponsorListTree').append('<li class="button"><tbody><tr><td><span id="information" class="details"><br/><br/> '+ 'Email: ' + list[i].email + '</br></br> '+ 'Contact No: ' + list[i].contact.phone + ' </br></br> '+ 'Joined date: ' + list[i].date + ' </br> </br>'+ 'InvestedAmount: ' + list[i].account.investedAmount + '</span></td></tr></tbody><table></li>');
}
$("#sponsorListTree li").click(function() {
var name = $(this)[0].innerHTML;
var details = $(this).find('span')[0].innerHTML
var div_name = document.createElement('div');
var div_details = document.createElement('div');
div_name.innerHTML = name;
div_details.innerHTML = details;
div_name.className ="nameDetail";
div_details.className ="detail";
var div_group = document.createElement('div');
div_group.append(div_name);
div_group.append(div_details);
document.getElementById("name").append(div_group);
});
$(".button").click(function() {
$("span").toggleClass("details");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style=" overflow-x: auto; width: 400%; height: 600px;">
<li>
<a id="root" href="#"></a>
<ul id ="sponsorListTree">
</ul>
</li>
</ul>
<div id = "name" class="control-label"></div>

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

How to get data from webservice in jquery?

I have a web service with link: http://41.128.183.109:9090/api/data/getalllocations
I recived this data in dropdown using jquery .this data contains 2 objects LocationName and LocID. I want to display an alert with LocID in dropdown change function in jQuery. Here is my code:
$(document).ready(function () {
$.ajax({
type: 'Get',
url: 'http://41.128.183.109:9090/api/data/getalllocations',
success: function (data) {
var SubDropdown = $("#main");
for (var i = 0; i < data.length; i++) {
SubDropdown.append('<option value?' + i + '?="">' + data[i].LocationName + '</option>');
}
}
});
});
$("#countries").change(function () {
alert();
});
Here is my HTML code :
<select tabindex="-1" class="select2_group form-control" style="display: normal; width: 290px;" name="countries" id="countries">
<optgroup label="Select Your City" id="main"></optgroup>
</select>

please try following
$(document).ready(function () {
$.ajax({
type: 'Get',
url: 'http://41.128.183.109:9090/api/data/getalllocations',
success: function (data) {
var SubDropdown = $("#main");
for (var i = 0; i < data.length; i++) {
SubDropdown.append('<option value="' + data[i].LocID + '">' + data[i].LocationName + '</option>');
}
}
});
$("#countries").change(function () {
alert($("#countries").val());
});
});