Reload data on change - javascript

so I will try to be as clear as possible on my question!
On my site I have a table with the latest reservations, it's a fetch request that retrieves the data in PHP in JSON format and Javascript that puts them in shape, it works very well. But now I would like to go one step further, and make an automatic system, which would only have the Javascript function to retrieve and format the data. But I would need to do this without having to do a setInterval() or wait for the user's click, somehow only when a row is added (which is not done by the admin but the system the detect), the array is reloaded. I don't know at all if it's possible or not, and that's why I'm asking here?
(I only work in Javascript with Jquery and with PHP, I don't know if I need another lib?)
Thanks in advance and have a nice day!

I think if you use websocket, you can get better system.
but, if you can't, I recommend you use setInterval() to check if the row added.
You can install websocket server with nodejs easily.
and you have to add send event from php to nodejs ( http ) when new row added in your PHP server.
and add javascript websocket client.

Related

How to connect dynamic HTML to MySQL

First, I'd like to say this is part of a university undergrad project, so my knowledge will be limited.
I have a MySQL database set up with data and I want to click a button in HTML that queries the database and updates HTML table elements with returned data. I have done A LOT of reading and it always returns to nodejs which I have absolute beginner experience with. I have code set up to query my database with nodeJS which works fine, however, I see absolutely no solution to update the HTML dynamically and I refuse to believe it is not in some way possible. I have read about expressJS templating but this dynamic updating of data is expected to occur hourly from the database (the database is a dummy stand-in for a real-life one) and the expressJS templates are not a good fit at all.
How can I return nodeJS data to a HTML page without serving a new page each time? perhaps return server-side JS data to client-side JS? how does nodeJS allow the HTML to then load client-side JS files? I am unable to get a PHP install working so it's unfortunately not an option. I am open to any alternatives that allows HTML to MySQL connections.
Thanks
I'm not 100% sure what you have set up or what your level of knowledge is, but I hope I can help.
Sounds like you have your server running and querying your DB just fine, so that's good. Now you need to route that to your frontend. This is where expressJS usually comes in. It's a backend framework for creating API's in node. Think of it as a middleman. You send a request to your API, and your API makes a request to the DB and gives you what you want.
To make the request from the frontend, you can use the fetch() API. It's an asynchronous function used to make https requests and receive data. You then need to use that data to dynamically populate your html. Since it's done with javascript, it won't force a reload of the page either.
Feel free to ask questions and hopefully we can get you pointed in the right direction at the very least.

Saving and retrieving data on server with Javascript & PHP

I have a form on my website that I want to ensure each client only submits once per year.
To do this, I would like to save the client's id # and the current year to a .txt file on my server when they submit the form.
When the form is submitted, I also need to check the current contents of that file to ensure their id has not already been recorded, and display a message if they have already submitted the form that year.
I believe I need to use PHP to do this, but I'm brand new to PHP and I'm also not very experienced with jQuery. Any assistance would be much appreciated!
Using a simple database would be much better, because it will be easier to retrieve the stored data later on. There are more than enough tutorials if youre not familiar with databases (use mysql database if you have few experience with databases).
If you use a database you can also store the submitted data from the form very easy.
As Dan already said, first learn PHP and database connects and querys and then jQuery (which you dont need for putting data from a form into a database, but with ajax its cooler (you dont even need jQuery for ajax, vanilla javascript can also do that for you) ;) ).
Just google everything, there are more than enough tutorials online.
If you don't want to use a database, probably the simplest option will be to rename the received file with clientId-currentYear when you put it on the server.
For example, when a user submits a file for client 12345, you will have to check if a file 12345-2018 already exist. If it doesn't exist, you can create it, if not, you send your message to the user.
This is going to be easier to manage than a text file or a database if your programming level is low.

Creating a real-time chat with php and javascript

My goal is to create a real-time chat similar to the Facebook chat, from scratch. I want to store all the messages on a database table (MySQL) and every time a new message is sent by a user, if the receiver is connected then a request will be sent to the receiver's browser and the message will appear on the chat window.
I don't want to have the client to check if a new message for the user was sent, but I want the server to send the request to the client's browser.
I know that this can be achieved using the Comet technique (I saw this stackoverflow question) but I am not able to find a good guide on how to implement this for this certain problem.
I want to use php and javascript and as less extra software or frameworks as possible.
I use WAMPServer and I have Windows.
If you know a good guide or tutorial or can provide any guidelines on how I could achieve what I want, it would be very helpful.
Try use for this CppComet open source comet server. There have api for php and other languages.
And viwe this chat example or this
You can also use Node.JS with PHP. Creating a Real-Time Chat App with PHP and Node.js
I have already developed an application which is not completely Real-time messaging system, but it works like realtime. Built using without any external new frameworks/API, just used known and familiar skills to develop this using: Ajax jquery, PHP, Mysql, Javascript.
Logic used is:
All messages will be stored in database,
When you load page all messages will be loaded from database.
When you get new messages after reloading, the new messages has to be
loaded/displayed without reloading whole page again right? This is done
using javaScript and ajax jquery. I have set time out for EVERY 0.5 seconds
to reload only new messages and display them.
In my code, At first when the page loads all messages will be loaded in div
tags each, Later whenever new message gets into db it will displayed into new
div tags. its Simple and works without any external API.
To refresh new messages and throw them in to div tags .load() from ajax jquery is used,
to refresh every 0.5secs Javascript is used to set timeout.
I don't know what your exact question is but Websockets is the answer!
https://github.com/crossbario/autobahn-js
https://github.com/voryx/Thruway
(FYI, when you see WAMP in the context of websockets they're talking about something that's not windows/apache/mysql/php)
Unfortunately you can't make a real time application with PHP it self you can use a framework like Laravel in PHP and use packages like laravel-websockets and create a realtime application. laravel-websockets is really useful for creating a realtime application. laravel and the laravel websokcets with any front end you can do this
http://beyondco.de/docs/laravel-websockets
https://laravel.com/docs/
You can easy create anything with it just try to understand the fundamental concept of websokcets .

How can I pass data from one page to another in PHP and Javascript without from?

How can I pass data from one page to another page in PHP using Javascript without from?
In my blog have a post comment with email Id
and this is routing using foreach loop
problem occur when get email id and comment
how can i do this? plz help
you can make use of client side cookie for this. one page you create cookie and on second page read that cookie.
I guess that what you dislike with forms is the page reloading on the client side.
If that is the case then you can use ajax requests (maybe with the help of a framework like jQuery, or pure javascript with the xmlHTTPRequest()).
Alternatively you can use cookies, but it's not what they really are for.
If you don't mind the page reloading, you can also use HTTP GET requests with javascript :
location.assign("http://www.my_site.com/index.php?param1=value1&param2=value2");
You can also store data in Web storage if the data doesn't necessarily need to be processed in PHP.
You will need to have a backup system in cookies though for the older browsers that do not support his.

Twitter like new tweet count notification in ASP.Net

I have very limited knowledge in jQuery. I need to develop a page which should show the count of new message posted. In twitter and stackoverflow websites, I have seen a div which shows the count of new tweet/questions posted and while clicking on it, the newer ones are shown on the top. Below added are the sample images:
Please suggest whether it can be attained using jQuery or Ajax.
Thanks
Those examples look like push rather than pull behaviors. By this I mean that the server is saying to the page 'hey there is a new tweet in this tag' rather than the page asking 'is there any new tweet? No not yet? OK, I'll ask again in 5sec'.
Since you are on ASP.NET, you can easily push notifications from server to client by using the good SignalR library.
You still have to detect on the server that there are new 'things' and send a message (with signalR) to the matching clients. And also handle the message on the client and show a piece of UI.
As you are using ASP.NET, you can use an UpdatePanel to help handle making the call and updating your content. Note that the UpdatePanel uses AJAX, and can be set to automatically update on a specified time interval.
What I would do, if I were you, is use the UpdatePanel to call a method that makes a request to the Twitter API and grabs all of the new tweets that you have not already grabbed. Then count the number of tweets returned and, if that number is greater than zero, I would display the "X tweets with new activity", or whatever counter message you are looking to show.
If you are not strong with jQuery, this may be the best solution for you, as you could get away with using the UpdatePanel and a Repeater to render out your tweets, and update the ones displayed when clicking a button/link/etc, with or without postback (whichever is your preference for this implementation).
Important Side-Note
Note that Twitter API v1.1 requires you to use oAuth Tokens, which should not be included in AJAX calls. You should only be using server-side code to make requests to the Twitter API, and, thus, this solution is likely to be the best for you, as you can write your request code in the code-behind (thus keeping your Twitter keys and tokens safe), and call it using the UpdatePanel.
Update
I am not usually one to promote my own libraries on Stack, but if you need help with making the request to Twitter's API using oAuth, take a look at my C# library for Twitter requests. The documentation includes instructions for setting up oAuth access on Twitter and is very verbose in helping you make calls with the library. It also includes MSDN-style documentation for the library, itself, an example request, and full IntelliSense for all classes, methods, and properties. If nothing else, it should help you set up your requests. If you have any trouble with it, let me know and I can help you out.
You need to retrieve the new messages using a $.ajax call which you repeat every few minutes or so using setTimeout. But for that ajax call to work you have to have some sort of API endpoint you can retrieve the data from.
This is not just something you can build by dropping in a jQuery plugin somewhere and be done with it. You need to have knowledge about Javascript, jQuery and your specific API before you can do anything. Try checking out the jQuery basic tutoorial.
You can create a WCF service to get latest messages which you can call using setTimeout to update your message div in real time using Ajax or you can use SignalR to add real time functionality.

Categories