loading image into view after ajax call - javascript

Here is the problem I ran into just now. I have a chat function part of my laravel application that loads respective users images as they type in the conversation. What I cannot figure out is when I append the url for the profile picture into the view, it will not actually display the picture, it just shows a "placeholder" of where the picture should be.
I know the code works for a fact because I can see in the console log the correct path for the picture inside the assets folder.
So my question is how would I display a picture after retrieving info from an ajax call.
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img scr=" + data.profilePicture + " class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
Thank you for the help in advance!

$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img src='" + data.profilePicture + "' class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
src isn't spelt correctly, then notice the quotes after the src and the end of src also, try this out.

This is usually caused when you're in a route that does not represent the base URL properly.
You can use the asset() helper function to build the URL to your asset folder relative to the public directory on your server.
https://laravel.com/docs/5.3/helpers#method-asset

Related

how to pass variable inside html href in the view in mvc

i want to pass dynamic imei number , instead of static imei. i want to pass
obj[i].DeviceImei
inside the href tag at the place of 1009 for the google map marker info window view more option.
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<div id="bodyContent">' +
"<p><b>Location: " + obj[i].location + "<br>"
+ "\n" +"IMEI: " + obj[i].DeviceImei +"<br>"
+ "\n" + "PRV Trip: " + obj[i].PRV_T + "<br>"
+'<a href="http://hostname/1009">' +
"View More" +
"</p>" +
"</div>" +
"</div>";
You can scape quotes with \", so in your case it would be:
+'<a href=\"http://hostname/' + obj[i].PRV_T + '\">' +

Search for text inside all child of a div and hide the ones that doesn't contain it

I would like to hide all the divs that doesn't contain the text i'm writing inside a .
i've tried with something like this:
var $searchBox = $('#search-weeazer');
$searchBox.on('input', function() {
var scope = this;
var $userDivs = $('.information ');
if (!scope.value || scope.value === '') {
$userDivs.show();
return;
}
$userDivs.each(function(i, div) {
$('div:contains(scope.value)').hide();
})
});
but doesn't work (i know i will hide the div that contains the text, was for testing purpose ^^)
The divs are created dynamically after an Ajax Call, and the structure of the div is this:
"<div class=\"row information text-white shadow-lg p-2 mb-2\">" +
"<div class=\"col-3 profilePicture\">" +
"<img src=\"../../img/bg-masthead.jpg\" alt=\"Immagine profilo\" class=\"profileImage rounded-circle\">" +
"<div class=\"results\">" +
"<div class=\"results-content\">" +
"<span class=\"stars\">3</span>" +
"</div>" +
"</div>" +
"</div>" +
"<div class=\"col-9 infos\">" +
"<div class=\"row\">" +
"<div class=\"col-4 nome\"><b>Nome: </b>" + nome + "</div>" +
"<div class=\"col-4 regione\"><b>Regione: </b>" + regione + "</div>" +
"<div class=\"col-4 citta\"><b>Città: </b>" + citta + "</div>" +
"</div>" +
"<div class=\"row\">" +
"<div class=\"col-4 dataNascita\"><b>Data di nascita: </b>" + eta + "</div>" +
"<div class=\"col-4 coaching\"><b>Coaching online: </b>" + (coaching === "T" ? "Sì" : "No") + "</div>" +
"<div class=\"col-4 sesso\"><b>Sesso: </b>" + (sesso === "F" ? "Femmina" : "Maschio") + "</div>" +
"</div>" +
"<div class=\"row border-bottom\">" +
"<div class=\"col-6 blurry-text cellulare\"><b>Cellulare: </b>" + cellulare + "</div>" +
"<div class=\"col-6 blurry-text email\"><b>Email: </b>" + email + "</div>" +
"</div>" +
"<div class=\"row descriptionText \">" +
"<div class='col-10 descrizione'>" + descrizione + "</div>" +
"<div class='col-2 align-items-center'><button type='button' class='btn btn-primary btn-large profileButton' data-id='" + id + "'>Profilo</button></div>" +
"</div>" +
"</div>" +
"</div>"
But the script just does nothing for now. Any suggestion?
Currently, you're searching for elements that contain the literal string (scope.value). Use concatenation like so:
$("div:contains('" + scope.value + "')");
Or use a template literal:
$(`div:contains('${scope.value}')`);
$('div:contains(scope.value)')
Should be...
$('div:contains("'+ scope.value +'")')
So the value is appended to the string. Keep in mind if the value can contain double quotes you would have to escape them.

jQuery Mobile - undefined

So I am working on this app, where you could see a list of animals, then click on one item from the list and app would bring you into another screen, where you would be able to see for example a photo and a brief description about the animal (all data is from JSON file.)
However I am getting this issue with the description section, I keep getting "undefined" whenever I want to display animalDescription under the animalPicUrl
Here are my javascript functions
function generateAnimalLink(animal){
return '<li><a href="javascript:void(0)'
+ '" onclick="goToAnimalDetailPage(\''
+ animal.name
+ '\',\''
+ animal.picUrl +'\')">'
+ animal.name + '<br> <p>'
+ animal.description + '</br> </p>'
+ '</a></li>';
}
function goToAnimalDetailPage(animalName, animalPicUrl, animalDescription){
var animalPage = $("<div data-role='page' data-url=fakeUrl><div data-role='header'><h1>"
+ animalName + "</h1></div><div data-role='content'><img border='0' src='"
+ animalPicUrl + "' width=20% height=20%></img></div><div data-role='content'><h4>"
+ animalDescription "</h4></div><div data-role='footer'><h4>"
+ "</h4></div><a data-role='button' data-rel='back'>Back</a></div>");

Generate and Download PDF on ie8

I am generating pdf from html using JavaScript,pdf generate working fine but can't download,download working fine Google chrome but not working on ie8,i also tried jspdf its working fine on chrome but its giving error on ie8.
i Google but couldn't fine solution,the main points is to download on ie8.
can you please suggest how i can resolve this issue ?
Thanks
This is my html
CompleteHTML =
"<html xmlns='http://www.w3.org/1999/xhtml'><head><title></title></head><body>" +
divcustmrDtls + "<div style='page-break-after: always;'></div> "
+ divfacilityDtls + "<div style='page-break-after: always;'></div> "
+ divcolltrlDtls + "<div style='page-break-after: always;'></div> "
+ divgroupDetails + "<div style='page-break-after: always;'></div> "
+ divgroupColDetails + "<div style='page-break-after: always;'></div> "
+ divAccntPlan + "<div style='page-break-after: always;'></div> "
+ divMemo + "<div style='page-break-after: always;'></div> "
+ divBIR ;

Javascript innerHTML not allowing onClick on javascript function

I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'

Categories