dynamically increase row size of HTML table in javascript - javascript

I am new to JavaScript and just learning the basics of it. I am doing a sample program and crated a javascript program to show some data in a html page inside div. but it is not dynamic. I have some values like name, addess, age and status of few staff and while log in with a user name showing the above details in html page. this is a simple program.
What i want to do is, i want to dynamically increase the size of the div or table where i can display details of use like address, age, status etc.. if some user has more details then i want to add that in the html page. how can i do it ??
in home.jsp i have the following code.
<table>
<div id="name1" width:400px;"></div>
<div id="address1" width:400px;"></div>
<div id="age1" width:400px;"></div>
<div id="status1" width:400px;"></div>
</table>
this is the function i use in home.js
function(json)
{
var content= $('#name1').replaceWith('<tr><td> Name: ' + json.name + '<tr><td>');
var content= $('#address1').replaceWith('<tr><td> Name: ' + json.address + '<tr><td>');
var content= $('#age1').replaceWith('<tr><td> Name: ' + json.age + '<tr><td>');
var content= $('#status1').replaceWith('<tr><td> Name: ' + json.status + '<tr><td>');
}

First you need to do a loop and in that
You have to use append() ex.
$( "#your_div_id" ).append( "<tr><td> your_label: ' + json.your_values + '<tr><td>'" );
Reference Link

First you need to change you HTML like,
<table>
<tr id="name1"></tr>
<tr id="address1"></tr>
<tr id="age1"></tr>
<tr id="status1"></tr>
</table>
And if your json is valid then you can use append() like,
$('#name1').append('<td> Name: ' + json.name + '</td>');
$('#address1').append('<td> Address: ' + json.address + '</td>');
$('#age1').append('<td> Age: ' + json.age + '</td>');
$('#status1').append('<td> Status: ' + json.status + '</td>');
Live Demo

You must read JQuery api Document.
url : http://api.jquery.com/append/
maybe you used .append(), .toAppend(), .prepand(), .after() etc..
code example(.after())
$('#table' tr:last).after('<tr><th width="10%">' + //your code here // + '</th></tr>');

Related

How to add <div></div> and name+size+delete appear in new div. javascript jquery

I have used ajaxSubmit to upload file to linux server successfully. After upload file, name+size+delete should be appear in my website.
For example, 1.jpg、2.jpg、3.jpg were uploaded to server, my submit website shoule be appeared like:
1.jpg 3k delete
2.jpg 4k delete
3.jpg 5k delete
Before upload files, My html structure is :
<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
</td>
After uploaded three files, I wanted html like:
<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
</td>
My files has fixed css style:
.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}
Here is my ajaxSubmit code:
var divD=1;
$(function () {
var files = $(".files");
newDiv = "<div class='files'+divD+''><b class='dataname'>'+data.name+'('+data.size+'k)</b> <span class='delimg' name='+data.name+'('+data.size+'k)' rel='+data.pic+'>delete</span></div>";
$("#fileupload").change(function(){
$("#myupload").ajaxSubmit({
dataType: 'json',
beforeSend: function() {
......
},
uploadProgress: function() {
},
success: function(data) {
$(newDiv).insertAfter($('#impPic div:eq('+divD+')'));
divD = divD + 1;
$('.files').html("<b class='dataname' >"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>delete</span>");
},
error:function(xhr){
......
}
});
});
});
But unfortunately, it failed. I suppose files'+divD+'.html is wrong. Who can help me ?
I see two problem with your code...
First was the html string "newDiv" that you are trying to insert and the second is the invocation for jQuery .html() on an string literal object "files'+divD+'".
You are expecting the newDiv object to have a concatenated html string with the value of divD and the data came from the response but object data is undefined until the logic flows in the success callback.
and I believe the second problem would return a jquery TypeError problem, as you are trying to call the .html() function on a non DOM - jQuery object .
Update your code and try it this way:
newDiv = "";
...
success: function(data) {
newDiv = "<div class='files" + divD + "'><b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' name='" + data.name + data.size + "k' rel='" + data.pic + "'>delete</span></div>";
$(newDiv).insertAfter($('#impPic div:eq(' + divD + ')'));
divD = divD + 1;
$(".files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");
},
...
EDIT:
You can update the html string and add an Id to have a unique selector on each of the element with files class and instead of the above selector, change the class selector "." to an Id selector "#".
and your code will look like these...
newDiv = "<div id='files" + divD + "'class='files'"...
...
$("#files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");
If that doesn't suit your needs you can just leave the first example above and update your css selector to:
[class^='files'] instead of `.files`.
This will select all of the element with a class that begins with "files".
files'+divD+' is a string, and you try to call method html from string, which does not exist.
Try $('.files' + divD).html('something'); or files.find('.files' + divD).html('something');

how to add html in dynamically created div

I create a div from a DB with the below code
<div id="' + row.flatno + '"></div>
How can I select this div in order to add html code?? I use this
$('input').keyup(function(){
$(this).html("SomeText: <strong>" + diff + "</strong>");
});
but nothing happens
As #xzoert mentioned with this you refer to input.
$('input').keyup(function(){
$('#'+row.flatno).html("SomeText: <strong>" + diff + "</strong>");
});
The part
$('#'+row.flatno)should query id that you are looking for.

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

Trying to get currency converter to work using jQuery

I'm working on a project using jQuery to make a currency converter. I'm getting the currency info from an api service and loading it up in a table with multiple currencies. After which, I want to be able to enter a number in one input and make the other inputs produce the correct currency according to the entered input.
As you can see in the following code, I'm trying to make the keyup function work on everything but the input of which the numbers are being entered at that moment.
My output result from the function is also incorrect.
If anyone can point out the very obvious mistake I'm making here that would be very helpful!
JS:
function parseCurrency(data) {
var container = $('.currency-data');
var iskInput = $('<tr>' +'<td>' + '<strong>ISK</strong>' +
'</td> ' + '<td>' + 'Íslensk króna' +
'</td>' + '<td></td>' + '<td>' + '1' + '</td>' +
'<td>' + '<input value="1000" class="input-value"></input>' + '</td>' +
'</tr>');
iskInput.prependTo(container);
$.each(data.results, function (key, currency){
var row = [];
row = $('<tr></tr>');
row.append('<td>' + '<strong>' + currency.shortName + '</strong>' + '</td>');
row.append('<td>' + currency.longName + '</td>');
row.append('<td>' + currency.changeCur + '</td>');
row.append('<td>' + currency.value + '</td>');
var input = $('<input class="input-value"></input>');
input.val((1000/currency.value).toFixed(2));
var td = $('<td></td>');
input.appendTo(td);
td.appendTo(row);
container.append(row);
})
var inputValue = $('.input-value');
var inputActive = $('.input-value:focus')
$.each(data.results, function (key, currency) {
inputValue.not(inputActive).keyup( function () {
inputValue.val((inputValue.val()/currency.value ).toFixed(2));
});
})
}
HTML:
<form name="converter"></div>
<h4>Collecting data from: m5 A bank Lb</h4>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Obj1</th>
<th>Obj2</th>
<th>Obj3</th>
<th>Obj4</th>
<th>Obj5</th>
</tr>
</thead>
<tbody class="currency-data">
</tbody>
</table>
<div class="loader lead" style="display:none;">Loading...</div>
</form>
That's a bit strange for me, because you select all the input field which are NOT focused, and in the keyup eventhandler you just work with the inputValue variable, which contains the focused input element too. By the way, you shouldn't iterate two times on the data.results. As charlietfl commented before it does not make any sense to put the bindings to the iteration. That's a big mistake also.
A simple Method
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function changeTo(toType){
if(toType=="Pound")
cvrate = 0.86;
else
cvrate = 0.78;
$(".currency_change").each(function (index, element) {
var og_val = $(this).data("og-value");
var cvd_val = (og_val*cvrate).toFixed(2);
return $(this).html(cvd_val);
});
}
</script>
</head>
<body>
<br /><span class="currency_change" data-og-value="1254">1254</span>
<br /><span class="currency_change" data-og-value="145">145</span>
<br /><span class="currency_change" data-og-value="54">54</span>
<br /><span class="currency_change" data-og-value="254">254</span>
<br /><span class="currency_change" data-og-value="147">147</span><br />
<button onClick="changeTo('Pound');">Conver To Pound</button>
<button onClick="changeTo('Euro');">Conver To Euro</button>
</body>
</html>

how to print jquery value in html

This is my code in jQuery, it's working fine when its alert popup, but i want to print this in html body i tried below but not working
// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
//'you select
Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});
<div id="manufacturer"></div>
You should use text to insert text inside div:
$('#manufacturer').text($('#manufacturer option:selected').text());
Docs: http://api.jquery.com/text/
If you want to add HTML inside div, you can use html instead of text
$('#manufacturer').html(('you select Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());
If you want to take more sophisticated approach I would recommend you to use templates.
One of many options would be to use official jquery-tmpl plugin.
You need to include jquery and http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js plugin to your site and then you can do for example:
Html:
<div id="target"></div>
Javascript:
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
You can adjust it to your needs and for eaxmple read the template (first parameter of tmpl) from some file
See this jsfiddle

Categories