Updating table with jQuery, but browser not refreshing page - javascript

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.

Related

SharePoint ToC script - changing link style to headers

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

How to build an anchor link to open page in new window using Kendo Grid Columns?

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

ERROR - unexpected token when getting bigger JSON file

I have a textbox that takes user input, sends it to WS, where it searches for anything matching said data and returns all that it finds as JSON. Then I take said json and fill a table. If the user input is quite specific I get the data and table is created with no problems, if the user input is not specific I get quite a lot of data in my JSON, BUT I also get ERROR - unexpected token, and the table stays empty.
My js
$('#btnFilter').click(function () {
var filter = $('#txtFilter').val();
var sqlCall = ""
callJsonWs("EXECUTE procedure", "loadPageFilter");
});
function loadPageFilter(dataJSON) {
var data
try {
data = JSON.parse(dataJSON)
}
catch (err) {
alert("ERROR - " + err.message)
}
document.getElementById("tableFilterPopup").innerHTML = ''
$.each(data.filter, function (index, value) {
document.getElementById("tableFilterPopup").innerHTML += '<tr onclick="newLocation(\'' + value.pageView + '\')">'
+ '<td>' + value.jobCode + '</td>'
+ '<td>' + value.jobCustomerName + '</td>'
+ '<td>' + value.jobPhoneNumber + '</td>'
+ '<td>' + value.jobModel + '</td>'
+ '</tr>';
})
}
As Gregg Duncan has mentioned, the problem was with invalid JSON format that broke off hence I was getting an incomplete JSON string.

Create something like facebook wall

I want to create something like Facebook wall. Currently I am getting the data in a json format and displaying using jQuery $each and then appending it to the main div. I am looking for an alternative way of doing this.
The problem in the current code is that i cannot use the div class to call any method like on.click . The on.click method need to be inside the $each to be get called and it gets called the number of object present in data.
And if i want to update the wall then i need to update the data and has to refresh the whole structure. Is there any other way by which i can add the new post to the wall without rebuilding the structure.
$.each(data, function () {
var status_id = this['Id'];
var like_id = "like" + status_id;
var commennt_id = "commnet-tem" + status_id;
var likes = 0;
$("<div class=\"post-indi\" id=\"post-item" + status_id + "\">" +
"<div class=\"post-content\">" +
" <div class=\"status-profile\" >" +
"<img src="">" +
"</div>" +
"<div class=\"content\">" + this['status'] + "</div>" +
"</div>" +
"<div class=\"commentbox-info\">" +
"<a id=\""+like_id+"\" href=\"#\" class=\"postddlike\">Like</a><img </div></div>").appendTo("div.post");

javascript - print a pdf file

I have pdf files stored on my server.
I would like the user to be able to click a link/button and have a print dialog popup so they can print the pdf. I tried convincing them that its not a big deal to click download, then print it from the browser tab in which it opens, but they are fickle. :)
I have tried a few javascript solutions, mostly what I end up with is:
contentWindow is not defined
My js snippet is as follows
a = $("a:contains('Download PDF')")
url = a.attr('href')
uid = unique_id()
uid = "abc_" + uid
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' onload='this.contentWindow.print()'></iframe>")
$('body').append(ifrm)
I have also tried
...
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' ></iframe>")
$('body').append(ifrm)
pdf = document.findElementById(uid)
pdf.contentWindow.print();
And a few other variations with the same result. Or I get a print of "About:Blank" presumably because print is called before the document is loaded in the iframe.
The pdf opens and renders in the iframe.
Any ideas

Categories

Resources