Modal does not close from the phone - javascript

I ran into a problem that I do not close model windows associated with this script from the phone, fa-close button is not pressed. At the same time from the computer everything works fine
function NpcObject(type){
$.ajax({
url: "/do/Npc/",
type: "post",
data: {
type: type
},
success: function (response) {
response = JSON.parse(response);
if(!response['error']){
var tpl = '<div class="model"><div class="header">'+response['title']+'<span onclick=$(".model").remove();><i class="fa fa-close"></i></span></div>';
tpl += '<div class="content-model">';
if(response['type'] == 'pokemarket'){
tpl+= response['html'];
}else if(response['type'] == 'reproduction'){
tpl+= response['html'];
}else if(response['type'] == 'lombard'){
tpl+= response['html'];
}else{
tpl+= '<div class="pit"><input id="pitInput" placeholder="'+Lang.search_pokemon+'" onkeypress=if(event.keyCode==13)nursery("search"); type="text">';
tpl+= '<div class="pok-1">'+response['html'];
tpl+= '';
tpl+= '</div></div></div>';
}
tpl += '</div>';
$("body").append(tpl);
$('.model').draggabilly({
handle: '.header',
containment: true
});
}else{
alert(Lang.error_no_way);
}
}
});
}

Related

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

How do I change my class data when ajax is successful?

I am currently working on a project with spring.
My problem is to check Flug and change the value of the class. Data changes properly when refreshed, but does not change when it is brought to the screen via history.back().
How can I change my data?
function get_push_list(pushdata) {
var listdata = pushdata.map(function(obj){
var html = '<li onClick="linkDetail('+obj.push_seq +','+obj.seq_no +')">'
+ '<div class="timeline-wrapper">'
if (obj.flug != "N" ) {
html += '<label class="timeline-label">'+ obj.type +'</label>';
} else {
html += '<label class="timeline-label not-read" id="timeline'+ obj.seq_no +'" >'+ typedata +'</label>'
}
html += '<div class="timeline-title">'+ obj.title +'</div>'
+ '<div class="timeline-content">'+ obj.body +'</div>'
+ '<div class="timeline-time">'+ obj.reg_date +'</div>';
return html;
});
$('#pushlist').append(listdata);
}
...
function linkDetail(push_seq_no,seq_no) {
var timelineid = document.getElementById("timeline" +seq_no);
var data = {};
data.seq_no = seq_no;
data.flug = "Y";
$.ajax({
url : "/update_status",
type : "POST",
dataType : "json",
data: data,
success : function(result) {
if(result.resultCode == "S000"){
timelineid.class = "timeline-label"
location.href= '/NoticeDetail?' + push_seq_no
} else {
alert(result.resultCode,result.resultMsg);
}
}
});
}
In Ajax Success method Remove
timelineid.class = "timeline-label"
And Add (This is for add a new class to your tag)
timelineid.classList.add('timeline-label');
This is for remove old class from your tag.
timelineid.classList.remove('Class name you want to remove');

jQuery parallel uploads

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

.empty() function won't work after loading contents with ajax

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?

IE7/8 duplicated AJAX requests

On a code I wrote...
function change_regione(handle) {
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if(jQuery("#regione").val() == '') {
jQuery("select#provincia").parent().hide();
return
}
jQuery.ajax( {
url : WEBSITE_PATH + 'loadProvince.php',
type : 'GET',
dataType: 'json',
data : {
search_value : jQuery("#regione option:selected").attr("rel")
},
success : function(result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result,function(i,el){
provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' + el.value.replace("~","") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
},
error : function(request, status, error) {
}
});
}
IE7/8 launches the AJAX request twice on the onchange() event for a select.
<select id="regione" name="regione" class="srhbox" onchange="change_regione(this)">
...
</select>
Firefox, Safari, Chrome, behave correctly.
What's going on? Have you ever seen this behaviour?
Well I am not sure why you are using inline js with jQuery.
Just use jQuery's .change() event:
$('#regione').change(function () {
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if (this.value == '') {
jQuery("select#provincia").parent().hide();
return;
}
jQuery.ajax({
url: WEBSITE_PATH + 'loadProvince.php',
type: 'GET',
dataType: 'json',
data: {
search_value: jQuery("option:selected", this).attr("rel")
},
success: function (result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result, function (i, el) {
provinceOptions += '<option value="' + el.url + '" rel="' + el.id + '">' + el.value.replace("~", "") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
},
error: function (request, status, error) {}
});
});
I don't know why it behaves like this but I have a work around for you. Try this.
var requestInProgress = false; // Variable to check if the request is in progress
function change_regione(handle) {
if(requestInProgress){
return;
}
requestInProgress = true;
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if(jQuery("#regione").val() == '') {
jQuery("select#provincia").parent().hide();
return
}
jQuery.ajax( {
url : WEBSITE_PATH + 'loadProvince.php',
type : 'GET',
dataType: 'json',
data : {
search_value : jQuery("#regione option:selected").attr("rel")
},
success : function(result) {
var provinceOptions = "<option value=\"\">Tutte le province</option>";
jQuery.each(result,function(i,el){
provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' + el.value.replace("~","") + '</option>';
});
jQuery("select#provincia").parent().show();
jQuery("select#provincia").html(provinceOptions).show();
requestInProgress = false;
},
error : function(request, status, error) {
}
});
}

Categories