Browser exhibits strange behavior when using grid on Asp.net application - javascript

I have developed an ASP.Net application which users use to enter their time sheets. The application is using a grid to display the days as columns and the entries as rows. Whenever the user enters values to the cells, signifying the hours spent for a particular project on a particular day, I have a JavaScript function which updates the column totals for the day. When the user focuses another row, the row total is also updated.
A strange behavior is exhibited when the number of rows of the grid exceeds 50 or so rows: when a new row is added, after the user populates the first cell, it takes up to 40 seconds for the total of the column to be updated, during which time the browser is waiting for the operation to finish. After control is returned to the browser, populating subsequent cells in the same row update the totals instantaneously. When a new row is added, the same behavior is exhibited.
Could someone please point me to where I should start troubleshooting this issue? Is this browser related (we are using IE 8), or should I look into the JavaScript code? I tried running this application using. Running the application using FF somewhow does not work, so I cannot test it that way.
Any ideas?

The problem (for anyone who's interested) was with the getRow() method of Ig2010.3. I re-wired the logic of the page and it's now reading the content of the cell otherwise. It's ok now.

Related

Material-UI Grid updates with latest data only if I click on it

A working model that replicates the problem, described in the title, is here:
https://codesandbox.io/s/workingreactgrid-zvz12
In the program, the first thing to do is to enter any arbitrary date in the Date of Sale datepicker (under 'Exit Price' on the left). This creates a table that will appear below the inputs. Now the problem I am running into is that when I enter any number for "Rents - Monthly" or for any of the other expenses, e.g. Repairs & Maintenance, Insurance, etc., the numbers will only appear in the table after I manually click on the table.
My research suggests that I am probably doing something wrong with my useEffect in the App component. My hypothesis is that the table is simply 're-rendering' when I click on it, thereby updating it to the latest state. I could be wrong, but I think that's probably somewhere on the right track. But after a week of trying to explore different approaches and failing to get the table to automatically show the latest input data, I'm ready to ask for help.
In the Sandbox link above, nearly all the relevant code is contained in the App and Inputs component. I cleaned it up heavily so that it's easier to troubleshoot, so hopefully it helps.

How do I display database rows on multiple pages with Ajax?

I have a database with a table having a big number of rows. I am fetching the data in this table and displaying it in an HTML table on a web page.
My requirement is to display 20 records initially and then when the user clicks a button labelled Next, I show the next 20 records and so on...
So I have initially fetched first 20 rows from the table in my PHP (server-side), and then assigned a JS function to the onclick attribute of the button labelled Next. Inside this JS function, I use an AJAX call which brings me the next 20 rows. Then within this JS function, I replace the HTML rows with these new rows.
I need something like this:
The question is that are there any plugins available which can implement that functionality for me? If a plugin is available, implementing it manually wouldn't make sense because being a rookie, I can't develop it better than the developers of that plugin.
Yes
This is called pagination - a quick search for "ajax pagination mysql php" or similar brings up a wide range of options. I can't recommend any particular one as your question is too broad; I can only reasonably go as far as a definition.
Internally they use the MySQL LIMIT keyword which may help give further things to search for or experiment with depending on your actual use case.

asp.net MVC 2 view with slow UI responsiveness

My web application MVC View displays a grid of records, some of which the user can select and post their data back to the server. As long as the record count is in the order of multiples of dozens, the page is responsive. Problems occur when the records are in the order of a thousand and a half.
I've experienced two kinds of problems, one in chrome, one in IE 11. First of all the query to retrieve the records from the DB is kind of slow, but acceptable, let's say that after 5=10 seconds the controller will call a "return view()" passing a model which is a collection of about 1500 records.
Then this happens in Chrome: the browser renders the page quick enough considered the number of record, but after that the page becomes unresponsive in all its elements: as an example, consider the to activate a checkbox, it takes about 10 seconds before you see the check mark after you clicked.
In IE11 this happens instead: the page hangs for about three minutes between the jquery method "document.ready" and its anonymous handler function. After that the page renders all its elements and its responsiveness is acceptable.
My Application is developed in MVC2, and besides jquery, it uses datatables to display the grid, together with bootstrap for styling. Every record has about 20 fields so the page will have 20 form controls (input type=hidden) to post back for each selected record.
Considering that nothing of the above happens when I'm retrieving a few records, can you help me understand what's going on and how I can give performance to my web page?
Thanks in advance......

Kibana - dashboard to find something and display nearby records from logs

I've configured ELK stack for our system (.NET application). It works good but in current configuration it's not convenient to search for some text and display results with nearby application logs in the table (for example, I want to trace how particular object was moving through functions in code).
I've made a dashboard that consists of a textbox, set of filters, a graph of events and two tables - one for search results and the second for all events.
The task I want to complete:
1) Enter the query in the search box
2) Display results in both the graph and the first table.
3) By clicking a point in the graph or a row in the table (or maybe a link in ID field) second table should display item with the same id as clicked AND all next records (up to the page limit of the table).
For now with the existing dashboard I can proceed with first two steps, but the third one is done manually by reducing the time period in the graph so that the table of events contains found record and several surrounding.
Can this be done in Kibana? Probably, I can write some javascript code to complete the task.
How could I filter the table with javascript to select a row by ID and also select PageLimit - 1 next reords?
Or another way could be to filter the table by time so that its range becomes from the time of selected event to (for example) next five minutes.
Is there any documentation with javascript API for Kibana?
Thanks in advance!
This is not built into kibana 3 nor the current version of kibana 4. My suggestion would be to edit the table display to add a new link to each row. The link could be populated with the object_id and date range (+/- 15 min, etc) and open a kibana page in a new window.
This would be based around the Templates and Scripts functionality.

With javascript how do you time when a DIV is visible and then record that time length to a local DataBase

I am trying to record how long a person remains on a page in a web app, when viewed on an iOS device, and then record that number, if over 2 seconds, to a local database. Of course the app is written in HTML5/CSS3/JavaScript so the page is actually just a DIV that slides, fades etc. in/out of view on the iDevice.
The app will be used offline and the data will be recorded locally until the user goes to the server to update the app with weekly content. At that time the content from the local database will be transferred to the server.
I have a database created (CBNapp) and the necessary table (CBNapp_Usage) with a column for each page (NewKnife, Trivia, True, Musings, Jokes, Movies, Stories). My idea is to record each time to the appropriate column. In this way I can count the entries under each column to get page visits and use the actual seconds to determine average length of a page's visit etc. I would then record the time of the download to the server and subtract it from their previous download date to get a time frame for the recorded usage.
I have researched this for a while and have come across a question here on stackoverflow at
jQuery: How to bind an event for the div when it becomes visible?
that has an answer (the last one seems best to me) that I think will work but I can not seem to transfer it to my specific needs. This is my first web app. I am ok at HTML and CSS but a newcomer to JavaScript and jQuery so I will need specific examples to understand. Please be gentle :-)
The DIVs I need to record the visits on, all have a class of "root" and have ids as follows:
ContentNewKnife
ContentTrivia
ContentTrue
ContentMusings
ContentJokes
ContentMovies
ContentStories
I tried to identify the DIVs using the following
var ContentPages = $("div#[id*=Content]") and $(div.root);
which throws an error.
Could anyone show me how to do what I am trying to accomplish either using the code referenced above or with a completely new approach.
Any ideas are welcome.
Thanks,
Ted
OK the first thing you need to do is to capture the time.
I start an interval that updates every second (1000 ms). This rounds up the seconds you will notice. If you want more precise, you can have the timer go 500ms or even 100ms and then divide to get seconds).
Then you trigger the start and stop on the existing pre and post page transition events.
http://jsfiddle.net/TheFiddler/akEEx/6/
Rather than build this from the ground up, you might consider using an out-of-the-box mobile analytics program:
I'd recommend http://www.localytics.com/
but these might work too:
https://mixpanel.com
http://urbanairship.com/
http://www.flurry.com/
The benefit is that you can capture a lot more than just time on page or content. And it can integrate with any online stuff you might want to do.

Categories

Resources