I have the following function that create a card in my index.jsp. I'd like to call my servlet passing it a value. But the following code doesn't work. When I click the submit button nothing happens. Any Ideas?
function creaCard(p){
var misura='';
if(p.Taglia==null){
misura=p.Misura;
}else{
misura=p.Taglia;
}
var output = "";
output += "<div class='col-xs-12 col-sm-4 card'>";
output += "<div class='panel panel-primary'>";
output += '<div class="panel-heading">';
output += "<h2 class='panel-title text-center'>"+p.Abito+"</h2>";
output += "<h6 class='text-center'>"+p.Quantita+" disponibili</h6>";
output += "</div>";
output += '<div class="panel-body">';
output += "<img class='img-responsive' src='img/"+p.Abito+".jpg' alt='Immagine della "+p.Abito+"'/>" + "<br/>";
output += "<h5 class=''>Colore: "+p.Colore+"</h5>";
output += "<h5 class=''>Misura: "+misura+"</h5>";
output += "<h5 class=''>Prezzo: "+p.Prezzo+" EUR</h5>";
output += "<form method='post' action='../servletDispatcher'>";
output += "<input type='hidden' name='funzione' value='mettiCarrello'>";
output+="<label for='quantitaProdotto'>Numero da acquistare:</label>";
output += "<select class='form-control' name='quantitaCarrello'>";
output += "<option value='' disabled selected hidden>scegli...</option>";
for (i = 1; i <=p.Quantita ; i++) {
output+="<option value="+i+">"+i+"</option>";
}
output += "</select>";
output += "<input type='hidden' name='prodottoCarrello' value='"+p.Abito+"'>";
output += "<input type='hidden' name='prodottoCarrello' value='"+misura+"'>";
output += "<input type='hidden' name='prodottoCarrello' value='"+p.Colore+"'>";
output += "<input type='hidden' name='prodottoCarrello' value='"+p.Prezzo+"'>";
output += "</div>";
output += '<div class="panel-footer">';
output += "<button type='submit' class='btn btn-primary'>Metti nel carrello</button>";
output += "</div>";
output += "</form>";
}
Related
You can see the image which item i want to delete
The code of fetch is give below
var dbImages = firebase.database().ref("images");
dbImages.on("value", function(images){
if(images.exists()){
var categorieshtml = "";
images.forEach(function(image){
console.log(image.val().title);
categorieshtml += "<tr>";
//for category name
categorieshtml += "<td>";
categorieshtml += image.key;
categorieshtml += "</td>";
//for category description
categorieshtml += "<td>";
categorieshtml += image.val().title;
categorieshtml += "</td>";
categorieshtml += "<td>";
categorieshtml += image.val().desc;
categorieshtml += "</td>";
//for category thumbnail
categorieshtml += "<td> <img width='250' height='150' src='";
categorieshtml += image.val().url;
categorieshtml += "' /></td>";
categorieshtml += "<td>";
categorieshtml += "<button id='btn-delete' onclick='delete_row("+image.key+")'>Remove</button>"
categorieshtml += "</td>";
categorieshtml += "</tr>";
});
$("#images").html(categorieshtml);
}
});
function delete_row(childKey) {
firebase.database().ref().child('images/' + childKey + '/').remove();
alert('row was removed');
reload_page();
}
I want to delete node which given in image using button.
I can easily fetch the value but the delete button is not working please help guys.
I want to delete the item from the Firebase real-time database by clicking the button in JavaScript.
You're missing quotes around the argument in the call to delete_row here:
categorieshtml += "<button id='btn-delete' onclick='delete_row("+image.key+")'>Remove</button>"
If you check the generated HTML, you'll see that it looks like this:
delete_row(-N2j...JIWFH)
The argument here is interpreted as a token/variable, instead of as a literal string value.
To fix this, add yet another pair of quotes in your code:
categorieshtml += "<button id='btn-delete' onclick='delete_row(\'"+image.key+"\')'>Remove</button>"
I am creating dynamic table which I has 3 columns. First columns has campaign name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Nothing happens when I click on status button.
would be great if you can provide solution.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=function(){getRow(this)}/></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
function getRow(obj) {
var txt;
e.preventDefault();
txt = $(this).parent().prev().prev().text();
alert(txt + 'selected txt');
}
i have fixed your problem.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td class='parent'>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=getRow(this) /></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
}
function getRow(event) {
var txt = $(event).parent().prev().text();;
alert(txt + ' selected txt');
}
var a = ["test","test2"];
displayCampaigns(a);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
You could save the #demo object in a variable and attach an event listener to that. On click check if the event target has a class that you attach to your buttons, like telStatus (don't use that as id because having more than one row will result in several html elements having the same id). Add the campaign name as id or a data attribute to the table rows and just check the clicked buttons parentNodes to retrieve the id/data attribue.
var campaignNames = [
'abc', 'efg'
]
var demo = document.querySelector('#demo');
displayCampaigns(campaignNames);
function displayCampaigns(campaignNames) {
var html = "<table class='table table-responsive-md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr id='" + campaignNames[i] +"'>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' class='telStatus btn btn-success btn-circle btn-sm'/></td>";
html += "<td><img src='ready.jpg' /></td>";
html += "</tr>";
}
html += "</table>";
demo.innerHTML = html;
}
demo.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('telStatus')) return;
var parentTr = evt.target.parentNode.parentNode;
var campaignName = parentTr.id;
alert(campaignName + ' selected txt');
});
This is js app in electron framework. I am trying to get the updated text entered inside text box as shown in image but I am not able to retrieve any data. I have ensured that data is submitted. I have predefined data in a file ,initally, I have this values but onform submit, I modify those values.
function setData()
{
let server = mapServers[i];
var htmlForThisHostID = '<tr>';
htmlForThisHostID += '<td class="hostid-td-padding">';
htmlForThisHostID += "<input id=\"first\" type=\"text\" size=\"40\"
value=\""+server.name+"\"></input>";
htmlForThisHostID += "</td>\n";
htmlForThisHostID += '<td class="hostid-td-padding">';
htmlForThisHostID += "<input type=\"text\" size=\"6\" value=\"
"+server.pin+" \"></input>";
htmlForThisHostID += "</td>";
htmlForThisHostID += '<td class="hostid-td-padding">';
htmlForThisHostID += "<input style=\"width:50px;\" type=\"submit\"
value=\"Save\" onclick='Activate(\"" + server.name + "\"," + server.pin + ")'></input>\n";
htmlForThisHostID += "</td>";
htmlForThisHostID += "</tr>\n";
return htmlForThisHostID;
}
If you are letting the form submit itself with the inputs from your function, then the problem is that you have not set a name attribute for those inputs. Just give them a name.
Unnamed inputs do not get processed see this answer for further details https://stackoverflow.com/a/12543907/6127393
How I can get multiplying of two strings values (quantity and price) then get it in input of string netValue, where AJAX cs code as below:
protected void Page_Load(object sender, EventArgs e)
{
string brandName = "";
string itemName = "";
string itemId = "";
string quantity = "";
string price = "";
string netValue = "";
then
Response.ClearContent();
Response.ClearHeaders();
Response.Clear();
HTML Dynamic Table body:
string html = "";
html += "<tr>";
html += "<td class='style39'>";
html += "<input type='textbox' value='" + brandName + "' Width='98px'></input>";
html += "</td>";
html += "<td class='style39'>";
html += "<input type='textbox' value='" + itemId + "' Width='98px'></input>";
html += "</td>";
html += "<td class='style41'>";
html += "<input type='textbox' value='" + itemName + "' Width='169px'></input>";
html += "</td>";
html += "<td class='style43'>";
html += "<input type='textbox' value='" + quantity + "' Width='84px'></input>";
html += "</td>";
html += "<td class='style49'>";
html += "<input type='textbox' value='" + price + "' Width='95px'></input>";
html += "</td>";
html += "<td class='style51'>";
html += "<input type='textbox' value='" + netValue + "' Width='98px'> </input>";
html += "</td>";
html += "</tr>";
Response.Write(html);
Response.End();
Response.Flush();
}
I Solved it by:
decimal Result;
Result = Convert.ToDecimal(string.IsNullOrEmpty(quantity) ? "0" : quantity) * Convert.ToDecimal(string.IsNullOrEmpty(price) ? "0" : price);
netValue = Result.ToString();
But after row created and enter quantity value, there's no action defined to detect value entered in quantity input, so is there any solution for that?
I want to loop data of json and display to the radio button on html,
var link = "http://localhost/codeigniter/load";
var selector = "#result-media-uploader";
$.getJSON(link,function(data){
$.each(data,function(i,item){
var openTag = "<div class='col-lg-2'>";
var closeTag = "</div>";
openTag += "<input id='media-radio' type='radio' name='media-radio' value='"+item.id+"'>";
openTag += "<label class='label'><img width='100%' height='100%' src='"+item.post_content+item.post_title+"'></label>";
openTag += closeTag;
$(selector).append(openTag);
});
});
request is sended but in the output is none..
this is the server code
$data = $this->db->where('post_type','attachment')->where('post_mine_type','image')
->get('cs_posts')->result_array();
return json_encode($data);
I'm new on javascript, can you explain my mistake.. thanks for your help..
try this,
openTag += "<label class='label'><img width='100%' height='100%' src='"+item.post_content+""+item.post_title+"'></label>";
$("+selector+").append(openTag);
thanks guys.. (y)
this the final code..
js file
var folder = "/codeigniter";
var url = window.location.protocol+"//"+window.location.host+folder+"/admin/uploads/load";
$('#refresh-media-uploader').click(function(){
$.getJSON(url,function(data){
$.each(data,function(i,item){
var openTag = "<div class='row'><div class='col-lg-2'>";
var closeTag = "</div></div>";
openTag += "<input id='media-radio' type='radio' name='media-radio' value='"+item.id+"'>";
openTag += "<label class='label'><img width='100%' height='100%' src='"+item.post_content+"100x100-"+item.post_title+"'></label>";
openTag += closeTag;
$("#result-media-uploader").append(openTag);
});
});
});
and sirver side
$data = $this->db->where('post_type','attachment')->where('post_mine_type','image')
->get('cs_posts')->result_array();
echo json_encode($data);