I am currently trying to play a list of .wav file using the VLC plugin and the html object tag in the following manner :
$.each(rdata['results'],function(key,data)
{
newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
}
EDIT : The entire function definition :
function fnFormatDetails ( apiUrl, baseUrl )
{
var newRow = "";
var audioUrl;
$.ajax({
type: "GET",
url: apiUrl,
async: false,
contentType : "text/json",
beforeSend:function()
{
image.src = "img/ajax-loader.gif";
},
success: function(data)
{
console.log("success from " + apiUrl);
var rdata = $.parseJSON(data);
$.each(rdata['results'],function(key,data){
audioUrl = baseUrl + data['recordingId'];
newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
});
},
error: function(xmlhttprequest,textstatus,message){
if(textstatus === "timeout")
alert("Read timeout. Try again after some time");
else if(xmlhttprequest.status == 500)
alert("Sorry! connection reset by third party server");
},
complete:function(){
image.src = saveSrc;
}
});
newRow = newRow.substring(0,newRow.length - 5);
return newRow;
//------------------------------------------------------------
};
I also have the error function defined as follows :
function error()
{
alert("Resource load error");
}
However, even when the audioUrl throws up an internal server error, onerror does not get fired. Could someone please tell me why this is happening ?
Thanks.
In your success callback here:
success: function(data)
{
console.log("success from " + apiUrl);
var rdata = $.parseJSON(data);
$.each(rdata['results'],function(key,data){
audioUrl = baseUrl + data['recordingId'];
newRow += '<div class="row-fluid"><div class="span3"><label>Name : ' + data['recordingId'] + '.wav</label></div>';
newRow += '<div class="span2"><label>duration : ' + data['duration']+ '</label></div><div class="span4" style="background: transparent url(img/ajax-loader.gif) no-repeat">';
newRow += '<object data=' + audioUrl +' type="application/x-google-vlc-plugin" width="300" height="30" onerror="error()"></object></div><div style="width:20%"><button type="button" class="btn showShareModal" data-toggle="modal">Share Feedback</button><button type="button" class="btn showRaiseModal" data-toggle="modal">Raise Issue</button></div></div><hr/>';
});
},
It looks like you are constructing the HTML string in newRow, but you are not actually inserting it into the DOM anywhere. You need to do something like $(document.body).append($(newRow)) (just an example if you wanted to add it to the end of the HTML body).
Related
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("");
}
});
I tried to view XML data in html. This project works fine on desktop browsers but does not work on some mobile browsers. I feel like the issue is obviously but I don't know what to do. Please help.
<div class="row" id="xmldata"></div>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: xmlParser2
});
});
function xmlParser2(xml) {
xml = $(xml).children();
let total = $(xml).children().length;
$(xml).children().each(function(idx, index, item) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total - 1) : prevIdx;
let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
let head = '<div>' + $(this).find("head").text() + '</div>';
let html = `<div class="col-sm-4 random reveal" id="random">
<div class="thumbnail randomdiv3">
<a href="#${tag + idx}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>
</div>`;
$("#xmldata").append(html);
});
}
With the code below I am trying to update PartialView's HTML.
open_Modal_AssignAmendRoles = function (url) {
$.ajax({
url: url,//PartialView URL
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
var modalhtml = data;
var result = datafetchfunction("action URL", )
if (result.compleate == true) {
result.data.employeeroles.forEach(function (roletype) {
var tagbox = $(modalhtml).find("#tagbox" + roletype.clientroletypeid);
var span = $(modalhtml).find("#rolecontainer" + roletype.clientroletypeid);
var roletypeid = roletype.clientroletypeid
roletype.roles.forEach(function (role) {
var roleid = role.FK_ClientRoleID
var roledescription = role.ClientRole_Description;
var rolecode = role.ClientRole_Code
var markup = ""
markup += " <li class='taglist' id='" + roleid + "'>"
markup += " <button onclick='$(this).parent().remove()' class='tagclose'>"
markup += " <span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"
markup += " </button>"
markup += " <a class='assignedrole' href='Javascript:void(0);' onclick='pop_click_fn(this)'"
markup += " role-id='" + roleid + "' role-type-id=" + roletypeid + ""
markup += " data-toggle='popover' data-trigger='hover' data-content='" + roledescription + "' data-placement='top' > " + rolecode + " </a>"
markup += " </li>";
$(span).append(markup)
})
})
openModal( modalhtml);
}
}
});
}
Step 1:
On button click the open_Modal_AssignAmendRoles() function is called. Then it goes to the success() function.
Step 2:
var result = datafetchfunction("action URL" )
this fetch data as JSON format
Step 3:
Then I start some loop, I already create some spans and find them with
var span = $(modalhtml).find("#rolecontainer" + roletype.clientroletypeid);
Step 4:
then I build a markup and assign this
$(span).append(markup)
and finally, call
openModal( modalhtml);
But modalhtml is not updated as expected, it means lis which I created with loop is not added.
Can someone tell me what is the problem and how to solve this?
I have a image upload form with an input type file and attribute multiple.
When i select all the images for upload it calls 'index.php?controller=produse_add&method=uploadmultiple' and uploads the images in one ajax call.
How can i upload all the selected files in one ajax call for every 2 files?
For example if i have 8 images selected to have 4 ajax calls.
$s("#multiple-photos").on('change', handleFileSelect);
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
var formData = new FormData();
var parallelFiles = 2;
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = '<li class="dz-image-preview"><div class="documents_drop_file_thumb"><div class="picture_menu menu-overlay"><div class="picture_thumb_image"><img src="'+ e.target.result +'" data-file="'+f.name+'"/></div></div><div class="picture_overlay"><ul class="picture-overlay-actions"><li class="picture_view"><a class="dz-extraaction tips" href="javascript:void(0);" title="Vizualizeaza"><i class="fa fa-eye"></i></a></li><li class="picture_remove"><a class="dz-remove image-'+nr+' tips" href="javascript:void(0);" title="Sterge" ><i class="fa fa-times"></i></a></li></ul></div></div></li>';
image_holder.append(html);
}
$s('.panel-imagini .no-images').hide();
reader.readAsDataURL(f);
formData.append('foto[]', f);
var codprodus = $s('#product-update').data('product-code');
formData.append('codprodus', codprodus);
});
if(method == 'modify'){
NProgress.start();
jQuery.ajax({
type: 'post',
url: 'index.php?controller=produse_add&method=uploadmultiple',
data: formData,
dataType: 'JSON',
cache: false,
contentType: false,
processData: false,
beforeSend: function(data){
$s('.myDropZone').html('<p>Loading...</p>');
},
success: function(data){
var html = '';
$s.each(data, function(k) {
html += '<li class="dz-processing dz-success dz-complete dz-image-preview">';
html += '<div class="documents_drop_file_thumb">';
html += '<div class="picture_menu menu-overlay">';
html += '<div class="picture_thumb_image"><img src="/media/images/'+data[k].image+'"/></div>';
html += '<div class="picture_overlay">';
html += '<ul class="picture-overlay-actions">';
html += '<li class="picture_view"><a class="dz-extraaction tips" href="javascript:void(0);" title="Vizualizeaza"><i class="fa fa-eye"></i></a></li><li class="picture_remove"><a class="dz-remove tips" href="javascript:void(0);" data-dz-remove="' + data[k].product_image_id + '" title="Sterge"><i class="fa fa-times"></i></a></li>';
html += '</ul>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</li>';
});
$s('.myDropZone').html(html);
},
complete: function(data){
setTimeout(function() {
NProgress.done();
$s('.fade').removeClass('out');
}, 1000);
}
});
}
}
I did a multilevel ajax call .i.e. make an ajax call and use the id value from the call to make another call... I tried calling a jquery .empty() isn't working for the data generated in the inner ajax call... But when i place the .empty() function on the outer generated element, it worked just fine... How can i fix this issue? This is my code../
$(document).on('click', '.stories', function(e) {
e.preventDefault();
var request = $.ajax({ //first ajax call///
url: 'includes/functions.php?job=front_title',
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request.done(function(output) {
if (output.result === 'success') {
$('.blog').empty();
var jsonArray = $(jQuery.parseJSON(JSON.stringify(output.data))).each(function() {
var id = this.titleID;
var storyTitle = this.story_view;
var frontTitle = '<div class="blog-item"><h3>' + storyTitle + '</h3>' + '<img class="img-responsive img-story" src="images/blog/blog1.jpg" width="100%" alt="" />' + '<div class="blog-content"><div class="entry-meta"><h4>Episodes</h4></div>' + '<div class="well" style="padding-right: 10px; padding-left: 5px; width: 105%;">' + '<ul class="tag-cloud stories">';
var request2 = $.ajax({ ////inner ajax call//////
url: 'includes/functions.php?job=story_episodes',
cache: false,
data: 'id=' + id,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get'
});
request2.done(function(output2) {
var i = 1;
if (output2.result === 'success') {
var jsonArray2 = $(jQuery.parseJSON(JSON.stringify(output2.data))).each(function() {
var id2 = this.id;
var title = this.title;
var count = this.episode_count;
if (count == 0) {
frontTitle += id2;
} else if (i % 20 == 0) {
frontTitle += '<li data-id="' + id2 + '" id="singleEpisode"><a class="btn btn-sm btn-primary" href="#story/' + storyTitle + '/' + title + '">' + i + '</a></li></ul><ul class="tag-cloud">';
} else {
frontTitle += '<li style="margin: 1px" data-id="' + id2 + '" id="singleEpisode"><a class="btn btn-sm btn-primary" href="#story/' + storyTitle + '/' + title + '">' + i + '</a></li>';
}
i += 1;
})
}
$('.blog').append(frontTitle);
frontTitle += '</ul></div></div>';
})
})
} else {
console.log('failed');
}
});
});
I really need help for this, i av been on this for two days now... I would really appreciate the help.. or is there a better way i could do this?