How to select for "any and all possible values" - javascript

It's a list of chatrooms. Currently, if you join a room by clicking enter, it'll open the chatroom by appending a div of the chatroom. So if you click multiple rooms, it'll open multiple rooms.
I would like to make sure that only one room can be open at any given time. So, if a room is open and the user clicks to open another room, any other open room should close.
This is code that shows the addition of a chatroom to a div with an ID of chats:
if (data.join) {
console.log("Joining room " + data.join);
var roomdiv = $(
"<div class='room' id='room-" + data.join + "'>" +
"<h2>" + data.title + "</h2>" +
"<div class='messages'></div>" +
"<input><button>Send</button>" +
"</div>"
);
$("#chats").append(roomdiv);
I'd like to add a bit of code to make sure that all open rooms close before opening another one. Here is the same code with the addition that I plan on making:
if (data.join) {
console.log("Joining room " + data.join);
var roomdiv = $(
"<div class='room' id='room-" + data.join + "'>" +
"<h2>" + data.title + "</h2>" +
"<div class='messages'></div>" +
"<input><button>Send</button>" +
"</div>"
);
$("#room-" + * ).remove(roomdiv);
$("#chats").append(roomdiv);
This line $("#room-" + *).remove(roomdiv); doesn't work. I'd like to implement something here that says any attributes with ID room-(*/anything) should be removed.
What's the proper way to go about this?

All existing rooms have the class room. You can remove all of them at once using $('.room').remove() before creating and appending your new room.

You can use the ^ JQuery selector, it will select everything starting with ... :
$("[id^='room-']").remove(roomdiv);

Related

How to add a button inside message body in Javascript?

I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`
I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`
You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';

How to add Call a phone number link in innerHTML

I am trying to add a call specific phone number using <a href> tag inside innerHTML. I've tried with double and single quotes.
1st Case is not firing at all.
2nd Case it does appear but when clicking on the phone number rather than dialing it closes.
var popDiv = document.createElement('span');
popDiv.setAttribute('class', 'popDiv');
popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "<a href='tel:01234567890'>01234 567 890</a>";
Please find link to the JSFiddle
Does anyone know what a possible solution would be?
You need to check the mouseup event's target and if it's h1, then only remove the popDiv. This should work :
$("#"+parentContainerId).on('mouseup', function(e){
if(event.target.tagName.toLowerCase() === 'h1') {
$('span.selectedText').contents().unwrap();
$(this).find('span.popDiv').remove();
}
});
Updated jsFiddle
Just try with that :
var popDiv = document.createElement('span');
popDiv.setAttribute('class', 'popDiv');
popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "01234 567 890";
and be sure you have not any meta like that :
<meta name = "format-detection" content = "telephone=no">

Javascript creating a li element and assigning text to data-attribute is being truncated

In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?
You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.

Forget about the previous click when I click on a new object?

I have a system where you can create a house and some people. When you have created the house, and you then click on it, some information will appear. You'll also get the opportunity to delete the house.
However, the system will now forget the previous click if you click on a new house. Therefor both of the houses that I've clicked on, will be removed.
You can test it in the JSFIDDLE
It all happend inside my click function:
var objHouse = $('#' + oHouse.id)
objHouse.click(function(){
$('#WindowDisplayCarInfo').hide();
$('#WindowDisplayPersonInfo').hide();
$("#WindowDisplayHouseInfo").show();
$('#ShowId').text("ID: " + this.id);
$('#ShowStreetName').text("Street Name: " + oHouse.StreetName);
$('#ShowNumber').text("Number: " + oHouse.Number);
$('#ShowInhabitants').empty();
$('#ShowMaxInhabitants').text("Max inhabitants: " + oHouse.MaxPeople);
for(var i = 0; i < oHouse.aPeople.length; i++)
{
$('#ShowInhabitants').append("<br />"
+"<br />" + "ID: " + oHouse.aPeople[i].id
+"<br />" + "Name: " + oHouse.aPeople[i].Name
+"<br />" + "Last Name: " + oHouse.aPeople[i].Lastname
+"<br />" + "Age: " + oHouse.aPeople[i].Age
+"<br />" + "Gender: " + oHouse.aPeople[i].sGender
);
}
$('.DeleteHouse').click(function()
{
$(objHouse).children().each(function(){
$(this).appendTo($('#container')).css({"top":"" , "left":"", "display":"block"});
});
$(objHouse).remove();
$("#WindowDisplayHouseInfo").hide();
});
});
}
(It start at line 130 in the JSFIDDLE.)
Hope that you can teach me a trick or two. :-)
This probably isnt good practice but after like 30 min its all I could come up with. It just pulls the ID from the box in the upper right and deletes only the selected box. The "bad practice" is probably the substr part. To make it slightly better you may want to utilize indexOf() to find the start of the ID not just the integer 4 incase the structure of that ID box ever changes.
$('.DeleteHouse').click(function()
{
$(objHouse).children().each(function(){
$(this).appendTo($('#container')).css({"top":"" , "left":"", "display":"block"});
});
var currentID = $("#ShowId").html().substr(4);
console.log(currentID);
$("#"+currentID).remove();
$("#WindowDisplayHouseInfo").hide();
});
http://jsfiddle.net/t8TKc/3/

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!
You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";

Categories