I am working on a project that is being built around SignalR then JavaScript appending the data to elements.
$("#" + div).html(html);
The problem I am having is that I am calling the server every 2 seconds
$.connection.hub.start().done(function () {
chat.server.send("0", 1);
setInterval(function () {
chat.server.send("0", 1);
}, 2000);
});
This means it's then updating every div, every time the server returns the data, I have been looking for a way to get JavaScript to handle only updating elements if the data returned has changed, there were two ways I was going to go about doing this.
Get the HTML content from the div and do a comparison, however that was flawed because different browsers return different HTML, so that's a no
The second way was to store the content in a global variable and when it runs again, compare the global against the current, if it's different update
However I am looking at possibly something built into JavaScript which could handle this for me, currently I am using .html but when looking into this more, I found out that it first does .empty() and re-appended the data and I'm looking for something that'll only update if it's different.
-- EDIT --
How the project is currently setup is that I have a class containing different properties of what needs to be displayed, e.g.
public class MyClass {
public List<DivOneContent> Content1;
public List<DivTwoContent> Content2;
}
On the server side I have it fetch the content and populate the class
public void Send(string tab, string subTab = null)
{
MyClass data = PrepareModel(tab, subTab);
Clients.Client(Context.ConnectionId).broadcastObject(data);
}
When this is this is turned back to the client side, I have JavaScript functions which take one of the properties and appends that as needed
// First param is the content and the second one is the div ID
devious.htmlStringBuilder.buildContentOne(data.Content1, "Content1");
In the function I just loop and build a string and append such string to the div using .html
Related
I am building a website with several HTML pages, and going to fill up info on different pages through an API. I have added onclick listeners to HTML elements like this:
// ASSIGNING ELEMENTS AS VARIABLES
const EPL = document.getElementById('epl');
const bundesliga = document.getElementById('bundesliga');
const laliga = document.getElementById('laliga');
// ONCLICKS
EPL.onclick = function() {
getStandings('2021');
location.replace('standings.html');
}
bundesliga.onclick = function() {
getStandings('2088');
location.replace('standings.html');
}
laliga.onclick = function() {
getStandings('2224');
location.replace('standings.html');
}
When one of these is clicked, I call a function (getStandings) with its unique argument to fetch some data from the API. I also want to move to another HTML page, for which I used location.replace.
I'm caught in a dilemma: if I use the same JS file for every HTML page, when I get to the new HTML page, I get errors as the new HTML page does not have every element:
main.js:41 Uncaught TypeError: Cannot set property 'onclick' of null
But if I use different JS files, maybe one JS file for each HTML file, I cannot carry forward the bits of information I need. How can I get to the new HTML page, with its own JS file, without stopping and losing everything in the function I'm in currently, under the JS file of the old page? For example, the argument '2021' or '2088' are to be passed into the getStandings() function which will populate the new HTML page with data from an API. If I jump to a new HTML page with a new JS file, this is lost.
Is there a better way to organise my files? 😐😐😐😐😐
You can set your event listeners on the condition that the elements are not null e.g.
const EPL = document.getElementById('epl');
const bundesliga = document.getElementById('bundesliga');
const laliga = document.getElementById('laliga');
if(EPL){
EPL.onclick = function() {
getStandings('2021');
location.replace('standings.html');
}
}
etc...
Solved! As amn said, I can add URL parameters to the end of the URL of the new HTML page, then get the variables from its own URL once I'm on the new HTML page.
I think I would rather use classes instead of IDs to define the listener, and maybe IDs for dedicated action.
I have an Angular 4 application in which I need to add the following functionality:
There is a component with a list of objects. When the user double clicks on one of them, the app retrieves from a DB a list of objects and it should scroll to where the object appears.
I'd like to know how I could move to the desired position in the data once that it has been displayed in the browser. Right now, I have the following code:
let objElement = document.querySelector("#object_"+searchItem._objectID);
if (objElement){
objElement.scrollIntoView();
console.log("****** SCROLLING TO OBJECT");
}
The problem is that, the first time that I load the data from the DB, it seems that 'document.querySelector' returns null, as if the HTML wasn't 100% constructed yet, so it doesn't scroll to the position. If I try to locate the element again, it scrolls perfectly (as it doesn't reload the data from the DB).
Is there a "more Angular" way of doing this? I'm trying to find an example like this in the Angular Router documentation but I can't find anything...
EDIT:
To make things clearer, this is the pseudo-code that I run when the user selects an object:
if(selectedObject IS IN currentLoadedObjects) {
scrollTo(selectedObject); // This function runs the code above
}
else { // The object is in a different list, so retrieve it from the DB
ObjectService.getObjectListFromDB(selectedObject)
.subscribe((returnedList) => {
displayObjectList(returnedList); // Basically, this function parses the returned data, which is displayed in the template using an *ngFor loop
scrollTo(selectedObject);
});
}
As you can see, I try to scroll to the object inside the 'subscribe' method, once that I have the data from the database and after I've parsed it. The object list is pretty big, so it takes 1-2 seconds to be displayed in the browser.
Thanks!
I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.
~sitecollection/site/folder/folder/file.js
And
~site/folder/folder/file.js
The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?
Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields = {
// Add field and point it to your rendering function
"Title": { "View": overrideTemplate },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).
~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js
You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!
I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.
Hope this helps.
I'm trying to learn how to use KnockOut... never have before and I've been thrown into the fire on a site already using it. Everything here works fine:
function MasterViewModel() {
var self = this;
self.Supervisors = ko.mapping.fromJS(#Html.Raw(JsonConvert.SerializeObject(Model.Supervisors)));
self.AddSupervisor = function(request) {
var request = new Supervisor({
FullName: $('#SupervisorId option:selected').text(),
SupervisorId: $('#SupervisorId option:selected').val()
});
self.Supervisors.push(request);
// do server side call here
}
self.RemoveSupervisor = function(request) {
if (request.SupervisorID() > 0)
{
self.Supervisors.remove(request);
// do server side call here
}
}
}
Well. Everything almost works fine:
The initial data from the server loads and displays perfectly
I can remove existing items (that came from the server on the original page load)
I can add new items
But, when I try to remove an item that I just added, I get this:
Uncaught TypeError: request.SupervisorID is not a function
SupervisorId is a dropdown. The AddSupervisor call is made from a button. I can show the HTML if needed. Also, although I may not need this if:
if (request.SupervisorID() > 0)
Even without it, I am going to need the ID of the supervisor that was added.
I'm guessing the server side isn't case-sensitive, and is loading data with SupervisorID. When you add a new one, you're creating it with SupervisorId (lowercase d). The server must be accepting of that. JavaScript isn't.
You need to either change the newly created users to use SupervisorID, or have the RemoveSupervisor function use SupervisorId - whichever change makes more sense in your overall structure.
I am using jQuery and jQuery UI, and I am almost new to JavaScript. I would like to set a global variable in the window object so to keep custom data related to multiple jQuery objects. That is, at this time I am using the following (poor) code:
// Given
window.myDataObject = {};
// Then, in the same file, I run multiple times (one time for each 'tag_id_1',
// 'tag_id_2', ..., 'tag_id_N') the following code
var tag = $('#tag_id_N')
myDataObject = { pagination: { page : 1, per_page: 10 } } // This aims to keep pagination data for tags.
Since I am trying to keep data for multiple tags, running the above code multiple times makes the window.myDataObject to be continuously "re-initialized" (making the keeping process inefficient). Because that, I thought to add "namespaced" properties (maybe, namespaced with "something" related to each tag object) to window.myDataObject so that each tag has its own pagination data.
How can I make that? Is that approach a "good" / "proper" way to proceed?
I think you're just looking for the .data() method:
The .data() method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
from memory leaks.
We can set several distinct values for a single element and retrieve
them later:
First of all you should be using the window object not windows.
Secondly if you want to use multiple tags you could try to do the following:
// Given
windows.taggedObjects = {};
// Then, in the same file, I run multiple times (one time for each 'tag_id_1',
// 'tag_id_2', ..., 'tag_id_N') the following code
var tagId = 'tag_id_N';
// This aims to keep pagination data for tags.
window.taggedObjects[tagId] = { tag: $('#' + tagId), pagination: { page : 1, per_page: 10 } };
To retrieve your data just use the tag id again like so:
alert(window.taggedObjects[tagId]);