Replace/Toggle ng-click event once clicked - javascript

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.

Related

XRMService Toolkit not matching parent account guid with another guid stored in a single line text field

I've a hidden field on order form that store guid of parent account of selected contact. Now, in following code snippet I am trying to compare an account guid with that stored in hidden field. But it is returning zero length.
function getOrdersDetail(accountId)
{
var query =
"<a:ColumnSet>" +
"<a:AllColumns>false</a:AllColumns>" +
"<a:Columns xmlns:b='http://schemas.microsoft.com/2003/10/Serialization/Arrays'>" +
"<b:string>createdon</b:string>" +
"</a:Columns>" +
"</a:ColumnSet>" +
"<a:Criteria>" +
"<a:Conditions />" +
"<a:FilterOperator>And</a:FilterOperator>" +
"<a:Filters>" +
"<a:FilterExpression>" +
"<a:Conditions>" +
"<a:ConditionExpression>" +
"<a:AttributeName>new_accountid</a:AttributeName>" +
"<a:Operator>Equal</a:Operator>" +
"<a:Values xmlns:b='http://schemas.microsoft.com/2003/10/Serialization/Arrays'>" +
"<b:anyType i:type='c:string' xmlns:c='http://www.w3.org/2001/XMLSchema'>"+ accountId +"</b:anyType>" +
"</a:Values>" +
"</a:ConditionExpression>" +
"</a:Conditions>" +
"<a:FilterOperator>And</a:FilterOperator>" +
"<a:Filters />" +
"</a:FilterExpression>" +
"</a:Filters>" +
"</a:Criteria>" +
"<a:Distinct>false</a:Distinct>" +
"<a:EntityName>salesorder</a:EntityName>" +
"<a:LinkEntities />" +
"<a:Orders/>" +
"<a:PageInfo>" +
"<a:Count>0</a:Count>" +
"<a:PageNumber>0</a:PageNumber>" +
"<a:PagingCookie i:nil='true' />" +
"<a:ReturnTotalRecordCount>false</a:ReturnTotalRecordCount>" +
"</a:PageInfo>" +
"<a:NoLock>false</a:NoLock>";
var orders = XrmServiceToolkit.Soap.RetrieveMultiple(query);
alert(orders.length);
}

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

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/'

Javascript dynamically created div hidden unless document.write() is included

I've created a universal header dynamically that contains the date and time. Currently it acts and looks perfectly fine, but as soon as I remove the document.write('.') it disappears. It seems that I need any sort of write there in order for the dateDiv to appear, the '.' is just a random character used to fill the space.
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
//dateDiv disappears without a document.write() before being appended to the body. need to fix
document.write('.');
document.body.appendChild(dateDiv);
I haven't been able to find an answer to this yet, anyone see the problem?
As loganfsmyth is implying its likely that your code is executed, when the document is not fully loaded. Try:
window.onload = function(){
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
document.body.appendChild(dateDiv);
};
Edit:
See for example http://javascript.about.com/library/blonload.htm

Making multiple elements with jquery each() and jquery function

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?

Categories