We Keep Coding

Image source is getting deleted after uploading new image to Flask using Javascript

I have method to upload images to Flask in JavaScript. Below is the code used to upload images and display text in chatbot. This is used in my Chatbox class on button click:
For text there is no issue, it's working fine. However when uploading an image, previously uploaded images are getting deleted, ie. the previous img tag src is not visible in the DOM inspector.
var i = 1;
let formData = new FormData();
formData.append('question', $("#question").val());
formData.append('questionImageFile', $("#question-image")[0].files[0]);
let question_id = $("#question").val();
let question_image_file = $("#question-image")[0].files[0];
let msg1;
if ($("#question").val() === "" && $("#question-image")[0].files[0] === "")
return;
else if ($("#question").val() != "")
msg1 = {
name: "User",
message: question_id,
timestamp: new Date().toLocaleTimeString()
}
else {
var imgMsg = '<img id="' + i + '"/>'
msg1 = {
name: "User",
message: imgMsg,
timestamp: new Date().toLocaleTimeString()
}
}
this.messages.push(msg1);
$.ajax({
type: "POST",
url: "/chatbot",
data: formData,
cache: false,
processData: false,
contentType: false,
success: (result) => {
let msg2 = {
name: "Sam",
message: result.response,
timestamp: new Date().toLocaleTimeString()
};
this.messages.push(msg2);
var html = '';
this.messages.slice().reverse().forEach(function(item, index) {
if (item.name === "Sam") {
$("#question").val() + '</div>' + '<div class="chatbotResponse"><div class="timeBot">' + new Date().toLocaleTimeString() + '</div>' + result.response + '</div>'
html += '<div class="messages__item messages__item--visitor">' + '<div class="timeBot">' + item.timestamp + '</div>' + item.message
if (item.message.startsWith("Sorry, I")) {
html += '<button type="button" class="btn btn-outline-primary" id="feedbackBtn" data-toggle="modal" data-target="#exampleModal">Go to feedback form</button>'
}
html += '</div>'
} else {
html += '<div class="messages__item messages__item--operator">' + '<div class="timeUser">' + item.timestamp + '</div>' + item.message + '</div>'
}
});
const chatmessage = chatbox.querySelector('.chatbox__messages');
chatmessage.innerHTML = html;
if (formData.get('questionImageFile')) {
console.log(i)
var output = document.getElementById(i);
output.src = window ? .URL ? .createObjectURL(formData.get('questionImageFile'));
i = i + 1;
}
// $("#question").val()
$("#question").val("");
},
error: function(result) {
alert('error');
this.updateChatText(chatbox)
$("#question").val("");
}
});

Want to use YDN-db database instead of Ajax with Select2

I want to use YDN-db with select2, i tried few options but unable to sort.
So i want to use executeSql command as below
APP.db.executeSql("SELECT * FROM products WHERE name like '%test%'").then(function(results) {
//something
}
so i tried following in last (i already used other tweaks of it aswell)
$('#add_product_id').select2({
data:function (params) {
console.log(params);
APP.db.executeSql("SELECT * FROM products WHERE name = '"+params+"'").then(function(resultRows) {
if(resultRows.length > 0) {
$.each( resultRows, function( i, productRow ) {
console.log(productRow);
var title ='<span class="result-title">' + productRow.name + '</span>';
var price = '<span class="result-price">' + productRow.price + '</span>'
;
var sku = '<span class="result-sku">' + pos_i18n[60] + ' ' + productRow.sku + '</span>';
var stock = '<span class="result-stock">' + pos_i18n[61] + ' ' + productRow.stock_quantity + '</span>';
var firstRow = '<div class="result-row first">' + title + price + '</div>';
var secondRow = '<div class="result-row second">' + sku + stock + '</div>';
});
}
});
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 3,
cache: true,
multiple: true,
}).change(function () {
var val = $(this).select2('data');
$(this).html('');
if (!empty(val)) {
val = is_array(val) ? val[0] : val;
}
});
YDN query executed by requested parameter not coming log which user actually types on search2 field,
console.log(params);
Please can any one guide me how can i use YDN-db instead of Ajax with Select2?

display value (label name) of the clicked item

i have a page with clickable divs that has been populated dynamically with Json. The divs contains list of items, and when i click on a specific one, i get a new page that contains the name and details of the clicked item.
My issue is that i can't figure out how to display the label (name) of the item cliked, if you can give some help. Many thanks !
Here is my JSON array:
$data['dataHeader'] = array('id', 'Name', 'Value');
$data['dataJson'] = array(
array('id1', 'Jeans', 'blablablabla'),
array('id2', 'Leather Jacket', 'some random description'),
array('id3', 'Suede Boots', 'description of boots')
);
Here is what i tried to do :
(function( $ ) {
// Plugin to clickable element
$.fn.infoClickable = function() {
this.each(function() {
// get the object
var elm = $( this );
// Define click event
elm.on("click", function(){
//Get info relative to clicked element
var currentPage = elm.data("page");
loadPage_X_Content(elm);
});
});
}
// Load page 1
loadPage1Content();
// Application du plug-in
$('.clickableDiv').infoClickable();
}( jQuery ));
function loadPage_X_Content(elm){
var nextPage = currentPage + 1;
var nextPageName = '#LV' + nextPage +'Content';
arrayOfData = reponseData;
currentValue = arrayOfData;
var elm = $( this );
var elmID = elm.attr("id");
var PageContent = '';
PageContent += '<div>' + elmID + '</div>';
$.ajax({
url : "Pages/index.php",
type: 'GET',
dataType: 'json',
data: 'action=loadPage' + '&ID=' + elmID,
success: function(reponseData) {
For header :
LVContent += '<div class="HeaderLine">';
$.each(arrayOfData['dataHeader'], function(currentIdx, currentValue)
{
if (currentIdx > 0) PageContent += '<div class="' + arrayOfData[currentIdx] + '">'+ currentValue +'</div>';
});
For data :
$.each(arrayOfData['dataJson'], function(currentIdx, currentValue){
PageContent += '<div class="BlocLine clickableDiv" ';
PageContent += ' id="' + currentIdx + "_" + currentContext + '"';
PageContent += ' >';
// columns
$.each(currentValue, function(currentIdx, currentValueCol){
if (currentIdx > 0){
PageContent += '<div class=" '+ arrayOfData[currentIdx] +' "';
PageContent += ' >'+ currentValueCol +'</div>';
}
});
PageContent += '</div>';
});
$(nextPageName).append(PageContent);
$(nextPageName).find('.clickableDiv').infoClickable();
});

The code included does not specify what elm is.
So just to clarify, is your elm:
var elm = document.getElementById('theAttrDivId');
?
Also you're asking for the name but searching for the ID, so make sure it's:
var elmID = elm.attr("name");

No response from 2nd ajax request

I am getting no response from a 2nd ajax request. I am trying to display an google information window on google map that contains only a single tab when a certain criteria is matched otherwise I want to display two tabs. I thought I could easily implement this with another marker function with tailored behaviour, but I receive no response. Any help on this is always appreciated. Thanks in advance.
// click event handler
google.maps.event.addListener(marker, 'click', function () {
var ecoli_array = [];
var marker = this;
var str = "";
var beach_status; // beach_status flag
// load gif before ajax request completes
infoWindow.setContent('<img src="img/loading.gif" alt="loading data"/>');
infoWindow.open(map, marker);
// override beach data when a beach is closed
beach_status = this.getBeachStatus();
beach_status = beach_status.toLowerCase();
if (beach_status === 'closed') {
str = [
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<p>' + this.status_description + '</p>'
].join('');
infoWindow.setContent(str);
infoWindow.open(map, marker); // changed this to marker to resolve issue
} else {
// chained ajax invocations
if ( this.displayOnlyAlgaeResults === false ) {
// Standard Use case
$.when(this.getEcoliData(), this.getAlgaeData()).done(function (data1, data2) {
str += marker.getHeader() + marker.afterGetEcoliData(data1[0].rows);
str += marker.afterGetAlgaeData(data2[0].rows);
infoWindow.setContent(str);
infoWindow.open(map, marker); // changed this to marker to resolve issue
// render tabs UI
$(".tabs").tabs({ selected: 0 });
}); // end when call
}else{
// Algae Only Use Case
var d = this.getOnlyAlgaeData();
console.log(d);
$.when( this.getOnlyAlgaeData() ).done(function ( rsp ) {
//console.log(rsp);
str += marker.getAlgaeHeader() + marker.afterGetOnlyAlgaeData( rsp[0].rows );
//str += marker.afterGetOnlyAlgaeData(data2[0].rows);
infoWindow.setContent(str);
infoWindow.open(map, marker); // changed this to marker to resolve issue
// render tabs UI
$(".tabs").tabs({ selected: 0 });
}); // end when call
} // end inner if else
} // end outer if else
}); // End click event handler
getOnlyAlgaeData: function () { // begin getAlgaeData
var obj;
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=xxxxx&callback=?';
var whereClause = " WHERE 'Beach_ID' = " + this.beach_id;
var query = "SELECT * FROM xxxx "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
// ecoli request
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}, // end getAlgaeData method
// added afterGetOnlyAlgaeData
afterGetOnlyAlgaeData: function (data) {
var algae_rows_str = "";
algae_rows = data;
var algae_rows_str = [
'<div id="tab-1">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<table id="algae_table " class="data">',
'<tr>',
'<th>Sample Date</th>',
'<th class="centerText">Blue Green Algae Cells <br/>(cells/ mL) </th>',
'<th>Recreational Water Quality Objective <br/>(100,000 cells/mL)</th>',
'<th class="centerText">Algal Toxin Microcystin <br/> (&#956g/L)</th>',
'<th>Recreational Water Quality Objective <br/> (20 &#956g/L)</th>', // &mu instead of u
'</tr>'
].join('');
//console.log(algae_rows);
if (typeof algae_rows === 'undefined') {
algae_rows_str = [
'<div id="tab-1">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<p>This season, no algal blooms have been reported at this beach.</p>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
} else {
for (var i = 0; i < algae_rows.length; i++) {
//console.log(rows[i]);
//algae_rows_str += '<tr><td>' + formatDate(algae_rows[i][2]) + '</td><td class="centerText">' + checkAlgaeToxinCount(algae_rows[i][3]) + '</td><td>' + checkAlgaeToxinForAdvisory(algae_rows[i][4]) + '</td><td class="centerText">' + checkAlgaeCount(algae_rows[i][5]) + '</td><td>' + checkBlueGreenAlgaeCellsForAdvisory(algae_rows[i][6]) + '</td></tr>';
algae_rows_str += '<tr><td>' + formatDate(algae_rows[i][2]) + '</td><td class="centerText">' + checkAlgaeCount(algae_rows[i][5]) + '</td><td>' + checkBlueGreenAlgaeCellsForAdvisory(algae_rows[i][6]) + '</td><td class="centerText">' + checkAlgaeToxinCount(algae_rows[i][3]) + '</td><td>' + checkAlgaeToxinForAdvisory(algae_rows[i][4]) + '</td></tr>';
}
algae_rows_str += '</table>'
algae_rows_str += '</div></div></div>';
//return algae_rows_str;
} //end if
return algae_rows_str;
}, // end afterGetOnlyAlgaeData
}); // ====================end marker
I essentially copied two identical functions that work, gave them a slightly different name and customized each function to display 1 tab instead of two, but I get no response.
Thoughts?

thanks for the help, it ended up being something simple.
I was incorrectly referencing the response. Ie. I change the following line:
str += marker.getAlgaeHeader() + marker.afterGetOnlyAlgaeData( rsp[0].rows );
to
str += marker.getAlgaeHeader() + marker.afterGetOnlyAlgaeData( rsp.rows );
Geez!

How to call multiple different AJAX calls to the same div in HTML

so I am reading data from a JSON file. Then I am successfully able to use AJAX calls to update the div in the HTML code. For example:
$("#carSize").append(carInfo[0].carSize);
The div carSize will get the data from the JSON file. However there is going to be 10 different cars with many different properties such as carSize. Since the carInfo array is big and full of several different properties, is there a way to simpler way of my achieving this without having to create a different div to append to for each car's property.
HTML:
<html>
<link href="json.css" rel="stylesheet" type="text/css">
<body>
<div class = "whiteBar">
<div id = "box1">
<div id = "carPrice"></div>
<div id = "carRate"></div>
SELECT
<div id = "total"></div>
</div>
<div id = "box2">
<div id = "carSize"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="my_script.js"></script>
</body>
</html>
JS
$(document).ready(function()
{
$.getScript("vehicle_data.json", function()
{
$("#carPrice").append(carInfo[0].carPrice + ".00");
$("#carRate").append(carInfo[0].carRate);
$("#total").append("Total: " + carInfo[0].carPrice * 7 + ".00 USD");
$("#carSize").append(carInfo[0].carSize);
});
});
JSON (sample)
var carInfo = [
{
carId: 1,
carPrice : 35.00,
carRate : 'USD/DAY',
carSize : 'Extra Small Car',
type : 'Economy',
},
{
carId: 2,
carPrice : 37.00,
carRate : 'USD/DAY',
carSize : 'Small Car',
type : 'Compact',
}
];
Note how the JS code is just for 1 car and I need it done for 9 other cars. Any ideas?

Could you do something like:
$(document).ready(function(){
$.getScript("vehicle_data.json", function() {
for(i=0; i<carInfo.length; i++){
var $carContainer = $('<div class="carContainer-'+i+'"></div>');
$carContainer.append('<div id="carPrice-'+i+'">'+carInfo[i].carPrice + ".00"+'</div>')
.append('<div id="carRate-'+i+'">'+carInfo[i].carRate+'</div>')
.append('<div id="total-'+i+'">'+"Total: " + carInfo[i].carPrice * 7 + ".00 USD"+'</div>')
.append('<div id="carSize-'+i+'">'+carInfo[i].carSize+'</div>');
$('body').append($carContainer);
}
});
});

Create a new div rather then appending it to existing html
Now that you've stored it in a variable, you can append anything you want to it
$.each(carInfo,function(i,car){
//create a new div to store car info
var myNewDiv = $('<div class="car-info"></div>');
// append car properties to the info div
myNewDiv.append(car.carSive);
myNewDiv.append(car.carId); //etc
// append the new div to existing html
$('.whiteBar').append(myNewDiv);
});

I am not quite sure if this fits what you need but I have had good luck with jsRender http://www.jsviews.com/ for situations like that.

Here is a generic solution if you get all of your cars in one go:
var carInfo = [
{
carId: 1,
carPrice : 35.00,
carRate : 'USD/DAY',
carSize : 'Extra Small Car',
type : 'Economy',
},
{
carId: 2,
carPrice : 37.00,
carRate : 'USD/DAY',
carSize : 'Small Car',
type : 'Compact',
}
];
function getCarHTML (car){
var carHtml = '<div class = "box1" class="car-' + car.carId + '" data-id="' + car.carId + '">' +
'<div id = "carPrice">' + car.carPrice + '</div>' +
'<div id = "carRate">' + car.carRate + '</div>' +
'SELECT' +
'<div id = "total">' + car.carPrice + '</div>' +
'</div>' +
'<div class = "box2">' +
'<div class = "carSize">' + car.carSize + '</div>' +
'</div>';
return carHtml;
};
//this is your ajax on success function
var showCars = function (cars) {
var $carContainer = $('#car-info-container');
cars.forEach(function(car) {
var carHTML = getCarHTML(car);
var $carIfPreset = $carContainer.find('.car-' + car.carId);
if ($carIfPreset.length) {
$carIfPreset.replaceWith(carHTML);
} else {
$carContainer.append(carHTML);
}
});
};
//calling function here, you should make this call inside your ajax
//Assuming ajax to return an array of cars
showCars(carInfo);
Here is a working jsfiddle: https://jsfiddle.net/fjh3mjtm/
Expected json here is {cars: [{carId: 1, carPrice: 35.00, ...}, {carId: 2, carPrice: 37.00, ...}, ...]}