<select>
<script type="text/javascript">
$.get(
'http://www.ufilme.ro/api/load/maron_online/470',
function(data){
var mydata = new Array();
var i = 0; // индекс массива материалов
$('name', data).each(function(){
if($(this).text()=='MATERIAL_ID') mydata[i++] = new Array(); // массив материалов
mydata[i-1][$(this).text()] = $(this).next().text();
});
var htm = '';
for(i in mydata) htm += "<option value=\"" + mydata[i]['TITLE'] + "\">"
+ mydata[i]['TITLE'] + "</option>";
$('#real').html(htm);
},
'xml'
);
</script>
</select>
ok problem 1 resolved now i want it to da like a selection .. and i added but it does not have any effect
That's because it's not valid syntax, specifically the option value, but also +''" You're missing quotes.
htm += "<option value=\"" + mydata[i]['TITLE'] + "\">"
+ mydata[i]['TITLE'] + "</option>";
Related
I try to get value in django from javascript but it's none value in some variable.
template.html
<script>
$(document).ready(function () {
first();
$('#btnAdd').click(first);
});
var choices = ["one", "two", "three"];
function first() {
var id = $('#cover div').length + 1;
var wrapper = $("<div id=\"field" + id + "\" class='row info'><p></p>");
var category = "";
category = "<div class='col-md-2'><select class='form-control' name=\"category" + id + "\">";
for (i = 0; i < choices.length; i = i + 1) {
category += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
}
category += "</select></div>";
var product = $("<div class='col-md-5'><input type='text' id='tags' name=\"product" + id + "\" class='form-control' size=40 placeholder='ชื่อสินค้า' required/></div>"); // สร้าง input
wrapper.append(category, product);
$('#cover').append(wrapper);
$(wrapper).find("input[name^='product']").autocomplete({
source: "/autocomplete_product?category",
minLength: 2,
});
}
views.py
product = request.GET['term']
category = request.GET['category']
I try to print request.GET, it show category and term variable. The term variable is normal (there is value) but category is null. I have question how to I send category to django.
category = "<div class='col-md-2'><select class='form-control' name=category>";
try this.
I am creating dynamic table and appending it to Div tag on my .php page. On my .php page, I have dynamic buttons and if I click on any of the dynamic buttons, the dynamic table is rendered which has multiple headers and rows (for which I have written for loops with ajax requests). The issue is that, if i click on any of the dynamic buttons again, the current dynamic table data is appended to the previous dynamic table, instead I want to remove previously appended table data and render the current dynamic table data. I tried to empty the div tag but nothing seems working here. Hope I get some help, thanks in advance. Below are my .php and .js files:
.php file- I didnt post the function definition for get_Btns() as it is the basic php function to fetch data from the database:
<?php
function get_Btns() {
include "config.php";
$btns = $stmtDivision->fetchAll(PDO::FETCH_ASSOC);
foreach($btns as $btn){
echo "<input type='button' id='".$btn['divisionid']."' value='".$btn['division_name']."'
onclick=getData('".$btn['divisionid']."') >" ; echo "<br/>"; ?>
<script src="./user.js"></script>
<?php }
}
?>
<?php include "templates/header.php"; ?>
<div id="buttons_panel" style="text-align:center">
<?php echo get_Btns();?> </div>
<div id="div" class="divClass" ></div> <br/>
.js file:
function getData(value) {
document.getElementById("div");
var tableHtml = $('<table></table>');
var selectedManager = value;
var isEmpty = $('#div').empty();
// document.getElementById("div").innerHTML === "";
// document.getElementById("div").HTML === "";
// var isEmpty = $("#div").html() === "";
//$(".divclass").empty();
var teams = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedManager=' + selectedManager,
async: false,
success: function(data) {
teams = JSON.parse(data);
}
});
for (var k = 0; k < teams.length; k++) {
const selectedteam = teams[k];
var selectedteamid = team[k].teamid;
var htmlth = "";
var html = "";
htmlth = "<tr>" + "<th id='thgrp' colspan='4' background-color: #013466;>" + teams[k].teamname + "</th>" +
"<th colspan='2' background-color: #62b8b6;>" + "<a href='Update.php?groupid=" + selectedteam.teamid + "' >" +
'Update Team member' + "</a>" + "</th>" + "</tr>" +
"<tr>" + "<th>" + "<img src='images/member.png'>" + "<b>" + "<div>" + 'Member' + "</div" + "</th>" +
"<th>" + "<img src='images/phone.png'>" + "<b>" + "<div >" + 'Phone' + "</div" + "</th>" +
"<th>" + "<img src='images/email.png'>" + "<b>" + "<div >" + 'Email' + "</div" + "</th>" + "</tr>";
tableHtml.append(htmlth);
var members = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedteamid=' + selectedteamid,
async: false,
success: function(data) {
members = JSON.parse(data);
console.log(members);
}
});
for (var i = 0; i < members.length; i++) {
html += "<tr>" + "<td>" + members[i].name + "</td>" +
"<td>" + members[i].phone + "</td>" + "<td>" + members[i].email + "</td>";
}
tableHtml.append(html)
}
$("#div").append(tableHtml);
value = "";
}
Issue solved, I tried to empty the dynamic table that I have created instead of emptying the div tag on my html page. I did this earlier but I didn't do it properly. Thank you so much everyone for your time
This is the code:
tableHtml.attr('id', 'tableHtmlId');
$('#tableHtmlId').empty();
I have the following code which works perfectly, but can I make the drop menu dynamic using quantityAllowed as the maximum the drop menu goes to. at the moment I have added 10 options for every print, but what i would prefer is the drop menus only have the correct quantity in. I think the loop I need would go where the options begin using the value of the loop, but when i have tried, i just get an error, so I know I have done something wrong.
function arrayData() {
var index;
var text = "<ul>";
var htmlTable = '';
var calcTable = [];
calcTable = [
{ printName:"Name1", printPrice:8000000, quantityAllowed:6},
{ printName:"Name2", printPrice:12000000, quantityAllowed:5},
{ printName:"Name3", printPrice:20000000, quantityAllowed:4},
{ printName:"Name4", printPrice:2000000, quantityAllowed:3},
];//end of array
for (index = 0; index < calcTable.length; index++) {
var myclass = 'class="printwant"';
$("#tbNames tr:last").after("<tr>" +
"<td style='padding:0px 0px 0px 36px;'>" + calcTable[index].printName + "</td>" +
"<td class='printpoints'>" + calcTable[index].printPrice + "</td>" +
"<td>" + calcTable[index].quantityAllowed + "</td>" +
"<td><select " + myclass + "><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select></td><td></td> </tr>");
}//end of loop
$("#tbNames tr:last").after("<tr>" + "<td colspan = '5' height=40 > </tr>");
}
You can separate out your HTML generation code from the jQuery DOM assignment. This makes it a little easier to read and manipulate. When you come to your select/option area, drop it into a for... loop to generate the appropriate number of options.
function arrayData() {
var index;
var text = "<ul>";
var htmlTable = '';
var calcTable = [];
calcTable = [
{ printName:"Name1", printPrice:8000000, quantityAllowed:6},
{ printName:"Name2", printPrice:12000000, quantityAllowed:5},
{ printName:"Name3", printPrice:20000000, quantityAllowed:4},
{ printName:"Name4", printPrice:2000000, quantityAllowed:3},
];//end of array
for (index = 0; index < calcTable.length; index++) {
var myclass = 'class="printwant"';
var output = '';
output += "<tr>";
output += "<td style='padding:0px 0px 0px 36px;'>" + calcTable[index].printName + "</td>";
output += "<td class='printpoints'>" + calcTable[index].printPrice + "</td>";
output += "<td>" + calcTable[index].quantityAllowed + "</td>";
output += "<td><select " + myclass + ">";
for( var i=0, x=calcTable[index].quantityAllowed; i<x; i++ ){
output += '<option value="' + i + '">' + i + '</option>';
}
output += "</select></td><td></td> </tr>";
$("#tbNames tr:last").after(output);
}//end of loop
$("#tbNames tr:last").after("<tr>" + "<td colspan = '5' height=40 > </tr>");
}
arrayData();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbNames">
<tr></tr>
<tr></tr>
</table>
Here is my code, I wanna get the element info in the click function like my annotation says.
for(var i = 0, len = json.length; i < length; i++) {
var curid = json['success'][i]['courier_id'];
var curname = json['success'][i]['courier_name'];
document.getElementById("gsid").value=curname;
var tr="<tr> ";
//here is where i want to use onclick function with curid and curname
var td1="<td>"+"<input type='radio' name='as' value='json['success'][i]['courier_id']' id='curiid' onclick='courierselect(<?php echo $shyam='\'+curname+\''; ?>);'/>"+"</td> ";
var td2="<td id='curnname'>"+json['success'][i]['courier_name']+"</td> ";
var td3="<td>"+json['success'][i]['country_charge']+"</td> ";
var td4="<td>"+json['success'][i]['estimate_delivery_time']+"</td> ";
var td5="<td>"+json['success'][i]['tracking_available']+"</td></tr> ";
$("#results").append(tr+td1+td2+td3+td4+td5);
}
I see three problems on your code
... value='json['success'][i]['courier_id']' ...
You didn't concact the variable with the string
... courierselect(<?php echo $shyam='\'+curname+\''; ?>) ...
echo $shyam='\'+curname+\''; you can't set a PHP variable with a JS value. Understand why
You echo a string value, so you have to add some quotes around curname
for(var i = 0, len = json.length; i < length; i++) {
var curid = json['success'][i]['courier_id'];
var curname = json['success'][i]['courier_name'];
document.getElementById("gsid").value = curname;
$("#results").append('<tr> ');
$("#results").append('<td><input type="radio" name="as" value="' + curid + '" id="curiid" onclick="courierselect(\'' + curname + '\');"/></td> ');
$("#results").append('<td id="curnname">' + curname + '</td> ');
$("#results").append('<td>' + json['success'][i]['country_charge'] + '</td> ');
$("#results").append('<td>' + json['success'][i]['estimate_delivery_time'] + '</td> ');
$("#results").append('<td>' + json['success'][i]['tracking_available'] + '</td></tr> ');
}
Below is my code for displaying dynamic controls using jquery, and its working fine
<script type="text/javascript">
$(document).ready(function() {
$("input[value='Add']").click(function(e){
e.preventDefault();
var year = new Date().getFullYear(),
DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>",
DDL_ToProfession = "<select name='ParametersToSch' id='DDL_ToSchYear'>";
for (var i = year; i >= 1950; --i) {
DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
if (i != year) {
DDL_ToProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
} else {
DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";
}
}
DDL_fromProfession += "</select>";
DDL_ToProfession += "</select>";
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td></tr>";
controls += "<br/><button type='button' class='btn_rmv'>Remove</button></td></tr>";
$('#Controls').append(controls);
return false;
});
$('#Controls').on('click', '.btn_rmv', function() {
var index = $(this).closest('tr').index() + 2
$('#Controls tr:nth-child(n+' + (index - 2) + ')').remove();
return false;
});
});
</script>
And below is my view page code where I add dynamic controls:
<tr>
<td align="center">
<table id="Controls"> </table>
<form method="post" action="" class="button_to">
<div>
<input value="Add" type="submit" />
</div>
</form>
</td>
</tr>
But i am using the remove button for removing dynamic controls and it's not working, Kindly suggest me where I make mistake.Thanks
Just remove the </td></tr> at the end of the line where you add the two dropdowns:
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession;
That was preventing the remove control from being added to the table.
Use only this line in the btn_rmvs click() function:
$(this).parent().parent().remove();
Fiddle
You were closing your row and then adding the remove button due to which the remove button was not appearing.
Please find the modified code below.
$(document).ready(function() {
$(document).ready(function() {
$("input[value='Add']").click(function(e)
{
e.preventDefault();
// var field = $("#field").val();
var year = new Date().getFullYear();
var DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>";
for (var i = year; i >= 1950; --i) {
DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
}
DDL_fromProfession += "</select>";
var DDL_ToProfession = "<select name='ParametersToSch' id='DDL_ToSchYear'>";
for (var j = year; j >= 1950; --j) {
if (j != year) {
DDL_ToProfession += "<option text='" + j + "' value='" + j + "'>" + j + "</option>";
}
else {
DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";
}
}
DDL_ToProfession += "</select>";
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td>";
controls += "<td><button type='button' class='btn_rmv'>Remove</button></td></tr>";
//$('#Controls').append(newRow);
$('#Controls').append(controls);
return false;
});
$('#Controls').on('click', '.btn_rmv', function() {
$(this).parent().parent().remove();
return false;
});
});
});
The code for remove is also modified, because the previous code removed all the fields instead of the current field alone.