jQuery Mobile - undefined - javascript

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

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 + '\">' +

Replace/Toggle ng-click event once clicked

I am building a web app that allows users to mark which episode of a show they have watched. On load it has a ng-click event called markEpisode(). Once that is clicked, I want the ng-click event to change to unmarkEpisode().
Currently I have it removing the ng-click attribute and then re-adding a new one. But doesn't seem to work.
// Unmark Episode As Watched
$scope.unmarkEpisode = function(episode_number, season_number, id) {
$http.post('/api/show/' + id + '/season/' + season_number + '/episode/' + episode_number + '/unwatch')
.then(response => {
$('.episode-artwork[data-episode-season="' + episode_number + season_number + '"]').removeAttr('ng-click').attr('ng-click', 'markEpisode(' + episode_number + "," + season_number + "," + id + ')');
});
};
This is how I add the episodes in
$('#episodes .row').append($compile('<div class="col-sm-3">' +
'<div data-episode-season="' + response.data.episodes[i].episode_number + response.data.episodes[i].season_number + '" class="episode-artwork" ng-click="markEpisode(' + response.data.episodes[i].episode_number + "," + season_number + "," + id + ')" style="background-image: url(' + imageURL + ')">' +
'</div>' +
'<p class="episode-name">' + response.data.episodes[i].episode_number + '. ' + response.data.episodes[i].name + '</p>' +
'<p class="episode-text">' + response.data.episodes[i].overview + '</p></div>')($scope));
It would be good to have two links or buttons: one for mark, one for unmark.
Each button should have an *ngIf="item.isMarked" or *ngIf="!item.isMarked".
I think that it's not a good idea to mix angular and jquery. If you are working with angular, there is no need to manipulate the dom via jQuery.

loading image into view after ajax call

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

How to display a single image using JS/JQ from a query?

Using Parse.com and JavaScript SDK.
The below code runs a query, which has multiple results. It then iterates through these and displays.
profileURL: Badgeresults[i].get('SentTo').get('pic'),
returns a profile picture, which I only want to show once, currently because I have it under the
`_.each(Badges, function (item) {`
section it repeats for each object returned.
Where and how can I add a line to display the profile picture only once, I know it needs to be outside of _.each(Badges, function (item) { but I want it to appear at the top of these results. I presume I need to use something like `$('#profile_pic').attr('src',imageURLs[0]);
to display it?`
-
query.find({
success: function(Badgeresults) {
// If the query is successful, store each image URL in an array of image URL's
var Badges = [];
for (var i = 0; i < Badgeresults.length; i++) {
Badges.push({
imageURL: Badgeresults[i].get('Global_Badges_img'),
categorySelected: Badgeresults[i].get('category'),
badgeNameSelected: Badgeresults[i].get('BadgeName'),
AwardedBy: Badgeresults[i].get('uploadedBy').get('username'),
AwardedTo: Badgeresults[i].get('SentTo').get('username'),
profileURL: Badgeresults[i].get('SentTo').get('pic'),
comment: Badgeresults[i].get('Comment'),
});
}
_.each(Badges, function (item) {
var wrapper = $('<div></div>');
//$('#profile_pic').append('<img class="images BadgeImgOutline responsive-image" src="' + item.profileURL + '" />');
//wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.profileURL + '" />'+ '<br>');
wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />'+ '<br>');
wrapper.append('<div class="tag categorySelectedlabel">' + item.categorySelected + '</div>' + '<br>');
wrapper.append('<div class="tag badgeNameSelected">' + item.badgeNameSelected + '</div>' + '<br>');
wrapper.append('<div class="tag awardedbylabel">' + item.AwardedBy + '</div>' + '<br>');
wrapper.append('<div class="tag senttolabel">' + item.AwardedTo + '</div>' + '<br>');
wrapper.append('<div class="item fui-chat">' + ' Reason: ' + item.comment + '</div>' + '<br>');
$('#containerFriendsBadges').append(wrapper);
"display the profile picture only once" - does that mean that Badgeresults (or your Badges) can contain same picture (url) many times?
If so - I would just write a check for duplicate strings before putting them into Badges and place it (the check) before Badges.push({..

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