I'm working on online SharePoint site, where I want to have Table of Contents on my pages. It went successful, but I'm not satisfied with links to headers, which are in this style: PageName#heading_[number], where I would like to have PageName#{headingName}.
Is it possible? Here is link to my script: https://pastebin.com/MVsJf0hr . I suppose that it must be written somewhere here:
$(this).attr("id", "heading_" + i);
$("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");
Related
I've got a node.js and sockets app that I'm using to build a SPA. A user fills out a form to create a new lobby. When they submit it, a socket event it sent to the server, the server adds the lobby, then the server emits an event to everyone with the updated list of lobbies. When this occurs, my client side JS receives the lobby list and updates a table. While viewing the browser console, this seems to work fine. I see that the the lobby info is logged in my update_lobbies function. I see that it loops through the lobbies, and I even see the html update with the new information. However, the browser doesn't seem to update the view. If I refresh the page, which requests the same lobby information, the page will update. Also, at that point, after the refresh, future lobby updates will be visually updated for that user.
socket.on('lobby list', function(data){
if(data.lobbies.length > 0){
update_lobbies(data.lobbies);
}
}
Which then calls update_lobbies():
const update_lobbies = (lobbies) => {
var lobbies_table = document.getElementById('lobbies_table');
lobbies_table.innerHTML = "";
console.dir(lobbies);
$("#lobbies_table").append("<tr>" +
"<th>" + "Name" + "</th>" +
"<th>" + "Participants" + "</th>" +
"<th>" + "Current State " + "</th>" +
"<th>" + "Actions" + "</th>" +
"</tr>");
for (var i = 0; i < lobbies.length; i++){
console.log("looping");
$("#lobbies_table").append("<tr>" +
"<td>" + lobbies[i].name + "</td>" +
"<td>" + lobbies[i].participants.length + "/" + lobbies[i].capacity + "</td>" +
"<td>" + lobbies[i].state + "</td>" +
"<td>" + "<button id=\"join_lobby\" value=\"" + lobbies[i].name + "\">Join</button>" + " | " + "<button id=\"spectate_lobby\" value=\"" + lobbies[i].name + "\">Spectate</button>" + "</td>" +
"</tr>");
}
}
One thing that may be related is that I have a e.preventDefault(); in the form to prevent the page from reloading when I submit the form. Removing this obviously 'fixes' the problem because I'm doing a reload, but I don't want to have to reload the page to get the browser to update the view. I'm not exactly storing state information yet, so reloading isn't yet an option anyway.
I was making a stupid mistake. If the page loaded and there were no lobbies, I was hiding the table. I was just forgetting to show it when lobbies were added.
I have a Kendo Grid with a column definition as follows:
columns.Bound(c => c.Id).Title("ID #").Width("150px").ClientTemplate("#=showDetails(data.Id)#");
I'm calling a method showdetails that returns a link to open the details in a new page.
I need some help figuring out how to build the link.
This is my showDetails method:
function showDetails(data) {
var returnText = "<a href='/Detail/Index/" + data + "'>" + data + "</a>";
return returnText;
}
How do I modify it, so, the details page is opened in a new window?
add:
target="_blank" to return statement
var returnText = "gt a href='/Detail/Index/" + data + "'>" + data + "</a>";
to:
var returnText = "gt a target='_blank' href='/Detail/Index/" + data + "'>" + data + "</a>";
Reference link: https://www.w3schools.com/tags/att_a_target.asp
I am using jQuery with REST in my application and I want to get the ouput mentioned below using the jQuery within my webpage .
I used the code below to search by get a company by id (each company has id, name other info supplier and buyers) but the result does not show up for me with my code, any suggestion on what have I missed?
REST is a concept for HTTP request exchange, so you're making RESTful request calls (e.g. 'get') against the REST-API you implemented on server side.
<input name="find" type="text" maxlength="300" id="find"/>
<button onclick="findId()"> Find By ID </button>
<div id="info"></div>
<script>
function findId()
{
var id = document.getElementById("find").value;
$("#info").html("");
$.getJSON("http://localhost:8080/company/" + id, function(data)
{
for (var i in data) {
$('#info').append("<p>ID: " + data[i].id + "</p>")
$('#info').append("<p>Name: " + data[i].name + "</p>")
$('#info').append("<p>Other Info: " + data[i].otherInfo + "</p><br>")
$('#info').append("<p>Supplier: " + data[i].suppliers + "</p><br>")
$('#info').append("<p>Buyers: " + data[i].buyers + "</p><br>")
}
});
}
When I type http://localhost:8080/company/ into my browser I get the following output:
[{"id":1,"name":"Test 1","otherInfo":"Test 1","suppliers":[{"id":1,"name":"Test 1","address":"Test 1","buyers":[{"id":1,"name":"Test 1","address":"Test 1"}]},{"id":2,"name":"Test 2","address":"Test 2","buyers":[{"id":3,"name":"Test 3","address":"Test 3"},{"id":2,"name":"Test 2","address":"Test 2"}]}]},{"id":2,"name":"Test 2","address":"Test 2","suppliers":[{"id":3,"name":"Test 3","address":"Test 3","buyers":[{"id":4,"name":"Test 4","address":"Test 4"}]}]}]
If i type http://localhost:8080/company/1 into my browser i get
{"id":1,"name":"Test 1","otherInfo":"Test 1","suppliers":[{"id":1,"name":"Test 1","address":"Test 1","buyers":[{"id":1,"name":"Test 1","address":"Test 1"}]},{"id":2,"name":"Test 2","address":"Test 2","buyers":[{"id":3,"name":"Test 3","address":"Test 3"},{"id":2,"name":"Test 2","address":"Test 2"}]}]}
Is it a cross domain request? If so you can get around it by using jsonp instead of json.
function findId()
{
var id = document.getElementById("find").value;
$("#info").html("");
$.getJSON("http://localhost:8080/company/?callback=?" + id, function(data)
{
for (var i in data) {
$('#info').append("<p>ID: " + data[i].id + "</p>")
$('#info').append("<p>Name: " + data[i].name + "</p>")
$('#info').append("<p>Other Info: " + data[i].otherInfo + "</p><br>")
$('#info').append("<p>Supplier: " + data[i].suppliers + "</p><br>")
$('#info').append("<p>Buyers: " + data[i].buyers + "</p><br>")
}
});
}
I want to add a clickable YouTube video's image to my blog. I used the following code:
if (vidid == ""){
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<img class="no-thumbnail" src="img.youtube.com/vi/undefined/default.jpg"; />'
+ "</a>";
}else{
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<span class="play-button"></span><img class="'+ vidid
+ '" src="img.youtube.com/vi/'+vidid
+ '/default.jpg"; width="196px" height="147px"/>' + "</a>";
};
div.innerHTML = imgvid + '<div class="truncated-title"><h2>'
+ post_URL+'</h2></div>';
}
But it's not working. How can I resolve this?
Did you try using the YouTube integration API? You can get some more info in the documentation here and here. Using it that way, Youtube will automatically generate and show the preview image, player controls etc.
Additionally, there might already be an extension for showing Youtube Videos on your blog - do you use Wordpress or a different standard Blogging platform?
Edit
Now that I know you are using Blogger - you should be able to add the youtube video to any post by default, please refer to this manual for details.
I am trying to create email templates just using an html file. This file will display a list of mailto links that, when clicked, will open a template with message. I got it working for the most part but some of these templates use prompts to add information to the message before creating it. The problem is that it doesn't seem to work right. Here is my code.
function sendReport(emailName, addresseList){
document.writeln('<a onClick="setPrompt(this,\'' + addresseList + '\')" href="mailto:' + addresseList + '?subject=' + 'Report' + '&body=' + 'Here is the report.' + '">' + emailName + '</a><br />');
}
function setPrompt(obj, addresseList){
var reportName = prompt("Report name","");
obj.attr('href', ='mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report."); //<-- this is the line that is giving me trouble.
}
You have a typo in the last line and there is no .attr() built in function in Javascript. This should fix it:
obj.setAttribute('href', 'mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report.");