JavaScript: Using OmniGrid with loadData - javascript

I'm trying to work with the nice OmniGrid control.
Everything is great when I'm setting a URL for an ASP.NET handler that returns an answer.
My problem starts when I'm trying to use the data provider.
I was breaking my fingers trying to find a piece of information of how to use the data provider (can't find the appropriate format of the table content result).
Anyone familiar with such tutorial/example?

My I know how you are trying to integrate it in your pages? and what kind of backed u have to bind?

Related

How do I add a chart to firebase?

im currently creating an app where the user is suppose to click a couple of buttons and get a chart back. So far so good. But I want them to be able to save the chart in their profile so they can look at it whenever they want. I have no idea how to do it. I have played around with Auth but I just dont get it. I have googled to no avail. I have checked firebase website but im not sure what im looking for.
I tried repeating some of the steps for when it saves the account user and password.. but I dont know if im missing a specific set of syntax for this or I just dont know the proper command.
Does anyone know how to solve this or point in the right direction? Can it even be done?
I have been at it the whole day....
A chart is simply a presentation of data. You add the data to firebase and then you can later retrieve that data to present in anyway you wish (as a chart in your case).
Take a look at this example that uses canvasjs to present data as a chart: https://canvasjs.com/react-charts/chart-index-data-label/
If you're following some steps but are running into an issue you have to be specific because without more detailed information it's anyone's guess what the issue is as to why it isn't working.
but I dont know if im missing a specific set of syntax for this or I
just dont know the proper command.
How do you know something is not working? What's the result and what's the expected result?
Your first step would be to get authentication working. You can follow this documentation to help you get setup using the web: https://firebase.google.com/docs/auth/web/password-auth
After that you want to use create a database that has a collection, say 'charts' where each document could have the 'uid' of the users.
Take a look at this step-by-step tutorial.: https://www.youtube.com/watch?v=4d-gIPGzmK4&list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB
It guides you through authentication as well as storing data. Once you get that setup, viewing your data as a chart would be a front-end presentational thing and depend on what you're using to display the data. If you're using reactjs, https://react-charts.js.org looks like a good option.

Get data from another HTML page

I am making an on-line shop for selling magazines, and I need to show the image of the magazine. For that, I would like to show the same image that is shown in the website of the company that distributes the magazines.
For that, it would be easy with an absolute path, like this:
<img src="http://www.remotewebsite.com/image.jpg" />
But, it is not possible in my case, because the name of the image changes everytime there is a new magazine.
In Javascript, it is possible to get the path of an image with this code:
var strImage = document.getElementById('Image').src;
But, is it possible to use something similar to get the path of an image if it is in another HTML page?
Assuming that you know how to find the correct image in the magazine website's DOM (otherwise, forget it):
the magazine website must explicitly allow clients showing your website to fetch their content by enabling CORS
you fetch their HTML -> gets you a stream of text
parse it with DOMParser -> gets you a Document
using your knowledge or their layout (or good heuristics, if you're feeling lucky), use regular DOM navigation to find the image and get its src attribute
I'm not going to detail any of those steps (there are already lots of SO answers around), especially since you haven't described a specific issue you may have with the technical part.
You can, but it is inefficient. You would have to do a request to load all the HTML of that other page and then in that HTML find the image you are looking for.
It can be achieved (using XMLHttpRequest or fetch), but I would maybe try to find a more efficient way.
What you are asking for is technically possible, and other answers have already gone into the details about how you could accomplish this.
What I'd like to go over in this answer is how you probably should architect this given the requirements that you described. Keep in mind that what I am describing is one way to do this, there are certainly other correct methods as well.
Create a database on the server where your app will live. A simple MySQL DB will work, but you could use anything. Create a table called magazine, with a column url. Your code would pull the url from this DB. Whenever the magazine URL changes, just update the DB and the code itself won't need to be changed.
Your front-end code needs some sort of way to access the DB. One possible solution is a REST API. This code would query the DB for the latest values (in your case magazine URLs), and make them accessible to your web page. This could be done in a myriad of different languages/frameworks, here's a good tutorial on doing something like this in Node.js and express (which is what I'd personally use).
Finally, your front-end code needs to call your REST API to get the updated URLs. This needs to be done with some kind of JavaScript based language. jQuery would make this really easy, something like this:
$(document).ready(function() {
$.Get("http://uri_to_your_rest_api", function(data) {
$("#myImage").attr("scr", data.url);
}
});
Assuming you had HTML like this:
<img id="myImage" src="">
And there you go - You have a webpage that pulls the image sources dynamically from your database.
Now if you're just dipping your toes into web development, this may seem a bit overwhelming. But I promise you, in the long run it'll be easier then trying to parse code from an HTML page :)

node.js html querying and parsing

How do i make a dynamic search bar?
Do i need to use html methods? How can i make the bar dynamic?
Hi, i just started learning node.js... while i never developed web applications.
I don't want you to write the code, i just want you to point me to the right direction.
<form>
<input type="text" name="search" placeholder="Search..">
</form>
Now, how do i get the information someone types in the search bar? And what should i use to have the search bar display information without reloading the page?
Assuming you will not use any JS framework, the easiest way is to use a input with auto-complete feature. One example:
http://jqueryui.com/autocomplete/
A similar question:
jQuery autocomplete with callback ajax json
you could use socket.io to create a bidirectional connection with your server, and update your list each time something new pop's up
and if you're new to the server, take a look at my blog:
https://mathieuauclairweb.wordpress.com/2017/05/02/how-to-make-a-nodejs-server-with-to-database-part-1/
I might add a tutorial on how to use socket.io this afternoon
You have to use both JavaScript(jQuery) client-side code to make AJAX calls on 'keyup' handler and server-side PHP (or whatever language you use) routine to handle that AJAX call and answer it with JSON array.
If your search will return only plain text results, then you can check aria-autocomplete on the Internet. There are plenty examples. In this method your server answer should contain a JSON array. In a very similar way you can also populate <option> tags in a <select>.
If you dig much more without using aria-autocomplete you can make your own custom-styled display of answers. You can take a look at my site http://www.zahranvane.com/ (only in Bulgarian language, sorry). There is a search field in the header. Type some number (like 511) and you will see matching results in a poping div. To achieve this approach the server-side script returns formatted HTML which replaces the content of the poping div.
As #user3429660 advice you use jquery autocomplete.
Create a function who call a webservice that you have defined in your nodejs with express for example. the web service return data in JSON to the function and the view is updated with jquery
1) What you are looking for is getting the value out of the input:
Get the value in an input text box
2) Not reloading page -> look into AJAX (many tutorials online...)

How to load large JSON file into javascript

Firstly, thanks for taking time to view my post. I am working on a project with a few people, and we basically have a webpage, and once you log in, it displays all the data from a mysql database which has 6 tables, 3 of which have data in them. We figured out that in order for us to go about this, we need to transfer data by exporting the data into JSON file(s), then from there load the JSON files into java script so it can communicate with the web server. We were wondering what would be the best way to go about this. One way we found out is to reference the JSON ddata as variables and just list everything out, but several of our files have loads and loads of data. Would there be an easier approach?
This would be the first time we are doing something like this, so we are learning and appreciate your feedback!!
If you're using some kind of AJAX library, you can easily request the .json file from the browser.
For example with jQuery:
$.post("ourJSONFile.json", function( data ) {
..logic to display data..
});
NOTE - The comment about no PHP was not posted while I was writing this. Until I know why there can be no PHP, I'm just going to leave this answer here.
I think you're going at this in the wrong way. There is no need for JSON here, just query your database for the information.
The overview of what you need to do is (in PHP or the language you use to talk with your server) you need to
connect to the database
query database for information (query in your case, more or less means get the information)
do something with the returned information (such as echoing it in PHP so it will go to the user)
Now, it doesn't look like there is much effort place for getting this done, only planning. So, I'll just show you a few links to read up. (Which is also why people has devoted your question, Stackoverflow doesn't like asking question with no effort to research answers)
I'd use php.net for looking up methods, such as the mysqli_query method. This is very useful for learning small but important things about the method, like what it returns when an error occurs.
http://php.net/manual/en/mysqli.query.php
Taking a quick look through this guide, I think it should suffice. Besides syntax and such, some other important points are use MySQLI (when using PHP 5 or higher) and use prepared statements.
http://www.pontikis.net/blog/how-to-use-php-improved-mysqli-extension-and-why-you-should
The use of prepared statements is to protect your queries from injections. w3schools gives a good explanation about this # http://www.w3schools.com/sql/sql_injection.asp
MySQLI is MySQL Improved, it is more secured and supported. MySQL has been deprecated since PHP 5, and php.net pages on a MySql method will actually say this at the very top.
Finally, Andrew mentioned AJAX. AJAX is (for example) a way of doing things that would normally require reloading the page, without reloading the page. There is more to that, and I would recommand looking into it once you get use to the languages you are using.
Note, AJAX does not require libraries to use, it can be done with pure javascript. Libraries simply (as seen around) simplify AJAX a lot.

Extracting a specific set of values out of an HTML table

I'm in the process of teaching myself Javascript and I'm having a little trouble understanding something.
I'm trying to extract every one of the "Title" and "Instructor" values from this class registration page to make an enhanced scheduling tool for myself. However, in the examples I'm looking at, they all use the "getElementsByClassName(class)" and "getElementsById(id)" to extract specific information from an HTML table. When I look at the page source in chrome, I am not able to find either a unique class name or id to specify in these calls.
Would someone mind pointing me in the right direction? Am I using the page source code correctly or is there a better way of doing things?
EDIT: Here's the html of the page in question
view-source:https://admin.wwu.edu/pls/wwis/wwsktime.ListClass
You can use querySelectorAll to use CSS selectors.
document.querySelectorAll("tr>td:nth-child(3)") and document.querySelectorAll("tr>td:nth-child(8)") will give you all Title and Instructor elements
Here's a jsfiddle of it https://jsfiddle.net/n1fuo87p/
No you're not really doing anything wrong, but unfortunately the creators of the web page haven't made use of classes and ids in a way that will make them useful to you.
I'd recommend creating a Google Sheet to import the table. (See the importHTML function in Google sheets.) Then I'd retrieve the data as JSON and work with it that way. IMO you'll learn more valuable skills working with JSON than you will parsing HTML too. This article will take you through getting JSON out of your Google sheet: http://ctrlq.org/code/20004-google-spreadsheets-json

Categories

Resources