Develop Reference

Javascript Append function won't duplicate img src on each card

I have the following code that is suppose to loop through the arrays and print a card out for each one. It works when I hardcode my img src to a path on my computer. When I try and use my image array, my cards stop duplicating. I know my array is populated because I pull from it in another place in my code. I am evidently not putting the right quotes around stuff. Can someone see anything wrong?
var names= <?php echo json_encode($Names); ?>;
var colors= <?php echo json_encode($Color); ?>;
var Images= <?php echo base64_encode($Image); ?>;
//Can use variable as selector, not that I'm using a specific selector
//Try using array of arrays and pick one to each loop over
$(document)
.ready(function() {
$.each(colors,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card0'>" +
"<div class='subcard_style box_title'>" +
"<img class='card_image' src='data:image/png;base64, " + Images[i] + "' alt='Item #1' />" +
'<div class="profile">' +
'<div class="card_number">' + value + '</div>' +
'<div class="card_name">' + names[i] + '</div>' +
'<div class="tag_row">' +
'<div class="sample_item sample_item4"></div>' +
'<div class="sample_item sample_item3"></div>' +
'</div>' +
'</div>' +
'</div> ' +
"<div class='subcard_style box_status'>" +

The quotes look fine in my eyes. But because Images is not an array
var Images= <?php echo base64_encode($Image); ?>;
this can't work
"<img class='card_image' src='data:image/png;base64, " + Images[i] + "' alt='Item #1' />"
[update]
In your php code you are using base64_encode($image[$i]). But with
var Images= <?php echo base64_encode($Image); ?>;
you are encoding the array, not the images in the array. Try this instead:
var Images = [];
<?php
for ($i = 0; $i < count($image); $i += 1) {
echo 'Images['.$i.'] = "'.base64_encode($image[$i]).'";';
}
?>
That way the value of each item in your javascript array Images is the base64_encoded
representation of the value in your php array $image.
Make sure, the spelling of $image is right. In your comment you are using $image[0] but in your code snippet it's $Image.

How to call a servlet from a JavaScript file

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>";
}

how to write select tag with javascript?

I have a website in which I am writing html code with javascript because I want to load everything into javascript code so that user won't feel any delay.But I am unable to implement "date of birth" part with javascript.Here is my code.
function getBasicProfileEditBody()
{
var basicProfileEditBody = "<div>"+
"<div>"+
"<span>gender</span><span>:</span><span><input type='radio' name='gender' value='female' />female<input type='radio' name='gender' value='male' />male"+
"</div>"+
"<div>"+
"<span>date of birth</span><span>:</span>"+
"<span>"+
"<select id='dateOfBirth'>"+
+"</select>"+
"</span>"+
"</div>"+
"<div>"+
"<span>my strengths</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span>my weaknesses</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span>persons i like</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span>things i like in others</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span>things i don't like in others</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span>my friends</span><span>:</span><span></span>"+
"</div>"+
"<div>"+
"<span><input type='button' value='edit' id='aboutProfileEdit' /></span><span><input type='button' value='cancel' id='aboutProfileCancel' /></span>"+
"</div>";
return basicProfileEditBody;
}
In this style if I have to write select tag for dates it is ok but how about select tag for years,it would be a burden to me?wouldn't it be?How to implement "date of birth" in this style?

To answer your question, try following way:
First step: Replace the source code "<select id='dateOfBirth'>"+</select>" by "div id='dateOfBirth'>"+</div>", because you need three select boxes.
Second step: Add some code to create each entries more or less automatically:
function getBasicProfileEditBody()
{
...
var startBirthYearRange = 1970;
var d = new Date();
var endBirthYearRange = d.getFullYear();
var yearEntries = endBirthYearRange - startbirthYear;
var selectBoxYearOfBirth = "<select id='yearOfBirth'>";
for (index = 0; index < yearEntries; index++)
{
selectBoxYearOfBirth += "<option>" + startBirthYearRange + index) + "</option>";
}
selectBoxYearOfBirth += "</select>";
var birthMonth = new Array();
birthMonth.push("1#January");
birthMonth.push("2#February");
birthMonth.push("3#March");
...
birthMonth.push("12#December");
var selectBoxMonthOfBirth = "<select id='monthOfBirth'>";
for (index = 0; index < 12; index++)
{
var itemArry = birthMonth[index].split("#");
selectBoxMonthOfBirth = += "<option value='" + itemArry[0] + "'>" +
itemArry[1] + "</option>";
}
selectBoxYearOfBirth += "</select>";
var selectBoxDayOfBirth = = "<select id='dayOfBirth'>";
for (index = 0; index < 31; index++)
{
selectBoxDayOfBirth = += "<option>" + (index + 1) + "</option>";
)
selectBoxDayOfBirth += "</select>";
//Then apped the new three variables to var 'basicProfileEditBody'
...
}

jquery mobile update without rewriting

I have this little code that works great except one thing: If i have my collapsible-set expanded, it will collapse back every 5 seconds because i set setTimeout(loadPage,5000). My question is: How to construct this little code without rewriting, so even if it's expanded it will update without collapsing . . .
$(document).bind('pageinit', function () {
var globalVar = {};
function loadData() {
$.ajax({
url: "http://jsbin.com/wulol/2.js",
async: false,
dataType: 'json',
success: function (data) {
globalVar = data;
}
});
}
function loadPage() {
var items = '';
$.each(globalVar, function (index, item) {
items += "<div data-role='collapsible' id='" + item.id + "'>";
items += "<h3>";
items += "<div class='ui-grid-c'>";
items += "<div class='ui-block-a'>" + item.airline + "</div>";
items += "<div class='ui-block-b'>" + item.number + "</div>";
items += "<div class='ui-block-c'>" + item.people + "</div>";
items += "<div class='ui-block-d'>" + item.time + "</div>";
items += "<div class='ui-block-a'></div>";
items += "<div class='ui-block-b'></div>";
items += "<div class='ui-block-c'></div>";
items += "</div>";
items += "</h3>";
items += "<p><input type='button' value='Button'></p>";
items += "</div>";
});
$("#result").html(items);
$("#result").trigger('create');
setTimeout(loadPage, 5000);
}
function ignite() {
loadData();
loadPage();
}
window.onload = ignite;
});
Here is the working DEMO
I really need your help, people of Earth ! ! !

You can use append() instead of html(), but before you need to check if the item already exist in #result or not.
DEMO : http://jsbin.com/yabopuzu/1/edit
$(document).bind('pageinit', function(){
var globalVar = {};
function loadData(){
$.ajax({
url: "http://jsbin.com/wulol/2.js",
async: false,
dataType: 'json',
success: function(data){
globalVar = data;
}
});
}
function loadPage(){
var items='';
$.each(globalVar,function(index,item)
{
if ($("#result #item"+item.id).size()==0)
{
items+= "<div data-role='collapsible' id='item"+item.id+"'>";
items+= "<h3>";
items+= "<div class='ui-grid-c'>";
items+= "<div class='ui-block-a'>"+item.airline+"</div>";
items+= "<div class='ui-block-b'>"+item.number+"</div>";
items+= "<div class='ui-block-c'>"+item.people+"</div>";
items+= "<div class='ui-block-d'>"+item.time+"</div>";
items+= "<div class='ui-block-a'></div>";
items+= "<div class='ui-block-b'></div>";
items+= "<div class='ui-block-c'></div>";
items+= "</div>";
items+= "</h3>";
items+= "<p><input type='button' value='Button'></p>";
items+= "</div>";
}
});
$("#result").append(items);
$("#result").trigger('create');
setTimeout(loadPage,5000);
}
function ignite(){
loadData();
loadPage();
}
window.onload = ignite;
});

Try adding the data-collapsed="false" attribute ot your wrapper.
Change:
items+= "<div data-role='collapsible' id='item"+item.id+"'>";
To:
items+= "<div data-collapsed="false" data-role='collapsible' id='item"+item.id+"'>";
See the Docs

Calling a Javascript function from PHP with variables created in php

I have a javascript function in a file comment_insert.js:
function comment_insert(data,ul_id) {
var t = '';
t += '<li class="comment-holder" id="_' + data.comment_id + '">';
t += '<div class="user-img">';
t += '<img src="' + data.profile_img + '" class="user-img-pic" />';
t += '</div>';
t += '<div class="comment-body">';
t += '<h3 class="username-field" >' + data.Username + '</h3>';
t += '<div class="comment-text">' + data.comment + '</div>';
t += '</div>';
t += '<div class="comment-buttons-holder">';
t += '<ul>';
t += '<li class="delete-btn">[x]</li>';
t += '</ul>';
t += '</div>';
t += '</li>';
$('#' + ul_id).prepend(t);
}
I want to call this function from a php file display.php as:
$smthng = new stdClass();
$smthng->comment_id = 24;
$smthng->Userid = 1;
$smthng->comment = "Hard coded comments";
$smthng->Username = "Sagar_username";
//$smthng->profile_img = "images/Setting-icon.png";
$data = json_encode($smthng);
$ul_id = "ul218";
comment_insert(jQuery.parseJSON($data),$ul_id);
The function being called is the same as in comment_insert.js which accepts 2 inputs (data and ul_id). These are being created in display.php and then I want to execute the function.

Assuming that the PHP code is in the same file as Javascript and is being used for front end out put to the browser, you can do this:
<?php
$smthng = new stdClass();
$smthng->comment_id = 24;
$smthng->Userid = 1;
$smthng->comment = "Hard coded comments";
$smthng->Username = "Sagar_username";
//$smthng->profile_img = "images/Setting-icon.png";
$data = json_encode($smthng);
$ul_id = "ul218";
?>
<script type="text/javascript">
comment_insert(jQuery.parseJSON(<?php echo $data ?>), <?php echo $ul_id ?>);
</script>
However, if this is not in a file that is producing output to the browser, you cannot execute Javascript server-side

In order to execute Javascript in PHP you'll need to install the V8js Extension.
After installing you should parse your comment_insert.js to a PHP variable via file_get_contents and execute it somehow like this:
<?php
$v8 = new V8Js();
/* Get you js file's content */
$JS = file_get_contents("PATH/TO/JS-FILE/comment_insert.js");
try {
$v8->executeString($JS, 'basic.js');
} catch (V8JsException $e) {
var_dump($e);
}
?>
Note: In order to make it work, I think you'll replace the jQuery call with native JS.
So modify you comment_insert.js to something like this:
function comment_insert(data,ul_id) {
var t = '';
t += '<li class="comment-holder" id="_' + data.comment_id + '">';
t += '<div class="user-img">';
t += '<img src="' + data.profile_img + '" class="user-img-pic" />';
t += '</div>';
t += '<div class="comment-body">';
t += '<h3 class="username-field" >' + data.Username + '</h3>';
t += '<div class="comment-text">' + data.comment + '</div>';
t += '</div>';
t += '<div class="comment-buttons-holder">';
t += '<ul>';
t += '<li class="delete-btn">[x]</li>';
t += '</ul>';
t += '</div>';
t += '</li>';
//$('#' + ul_id).prepend(t);
elem = document.getElementById(ul_id);
elem.insertBefore(t);
}