I have a stat bar on my blade, which for example says 'Calls Today : 0' etc,
I need for the the stats to update each time theres an update in the sql database for calls today. so for example if calls Today goes up to 5 in the database, the blade views Calls Today must also go up to 5. I'm not quite sure if this would be best done with an ajax call that just refreshes the page or specific div every few minutes or if theres something I can do in php to track the table?
my blade view code is currently using #foreach's to pass the data in from the controller. I like this method and im hoping the solution would likely be ajax or in the controller?
#foreach $data as $stat
<div class="StatBar">
Calls Today: {{$stat->CallsToday}}
</div>
<div class="StatBar">
Calls Today: {{$stat->HoursWorked}}
</div>
#endforeach
There's a few ways you could do it. The "easy" and simple way would be to just refresh the page periodically, but that may not be desirable if there are interactive elements on the page (eg. you don't want to interrupt a user filling in a form).
The harder but "better" way would be to use websockets to notify the browser when this changes, but that requires more complexity on the front-end and a web socket server. The "Broadcasting events" section in the Laravel documentation explains how to go about this: https://laravel.com/docs/8.x/broadcasting#introduction
Related
I have a page that only gives users real-time browsing information. I hope that the data in it can be updated automatically without refreshing the page, because users will not operate events such as button presses, form sending, etc. on this page. , the data only enters the database from other places.
I can think of several situations where automatic updates can be made:
The livewire of php can be bound to the HTML element to update the data synchronously, but because this page will not have active events, I would like to ask whether the livewire function can work in my condition?
I know that JS's setInterval(function(){} can automatically repeat operations. Is this the simplest and crudest method?
I heard the query to use websocket to detect whether the database table is updated, but I need to know the specific method of monitoring the database and interacting with js
Does anyone know a workaround or what keywords should I use to look up the relevant aprroach?
#for ($i = 0; $i < count($DataSet); $i++)
<div class="container" id="container">
<div> {{$DataSet[$i]->real-time info}} </div>
<div> {{$DataSet[$i]->real-time number}} </div>
</div>
#endfor
Livewire offers a directive called wire:poll that, when added to an element, will refresh the component every 2s.
https://laravel-livewire.com/docs/2.x/polling
I'm building a web app using Yii2 (php, mysql). Users can click on others' game results to see what item the user used for this result. There can be from 100 to 1000 results displayed on a single page. I don't know which option is the best in terms of speed for the page and the server :
1- On page load, a modal is loaded for every result and displayed when users click on a result. This way, there can be from 100 to 1000 modal loaded on the page. Is this too heavy considering that only a few of them will be used? Or even none of them sometimes.
2 - Load only one modal that is brought up when users click on any results and dynamically adjust his content using an ajax request to the server depending on which results was clicked. This way, less code loaded on the page but more requests to the server.
First option is easier to code but I think the second one might be better for page load. I'm far from expert in terms of page size and server requests handling, so I'd like to get some opinions.
I think you've answered the question yourself.
The second option is right. Only one modal (per type of action -- edit, view, etc) should exist. Then use ajax to load data only when requested.
Your users will thank you. The page size and load times will be significantly better.
I'm currently only using PHP to take user submissions, put them in a database, and echo them out on a page using SQL to select from a table, such as comments. I need a system that will automatically update comments without refreshing the page like on YouTube. The less the user has to manually update, the better.
I want it to work pretty much exactly how YouTube and Twitter function, where it'll say "x NEW COMMENT(s)" and clicking that updates everything.
My teacher recommended a JQuery function, but I don't have any background in that language so I don't know where to begin looking.
I'm at a complete impasse. I will update this if you guys need additional information to aid in my search.
You are looking for AJAX
You will need a HTML page with jQuery/AJAX that calls another PHP page. In that PHP page you do the DB request and then ideally return the data as JSON so that your frontend part can display it to the user.
As every one says, AJAX is the way. You can find a simple blog I did on it here.
I want to update my PHP GUI view when my data source is updated(data source can be a database). I'm having a hard time understanding how I can do this without reloading the whole view for the user.
What I try to achieve is:
Users view are shown, from an handheld device call a script on the site and the script updates a data source, when data source is updated, update the users view with this updated data without reloading.
Is this possible with PHP/JS and how would I achieve this? I do not need any code but more step by step explanation and perhaps what technology to use.
Appreciate any suggestion that leads me forward with this problem.
Best regards,
Gabriel Paulsson
Use ajax for refreshing data when any event happens. The page will not reload by using ajax. It is very simple to use ajax. Googel, gmail and many other use such ajax. Learn in ten minutes form w3school http://www.w3schools.com/ajax/default.asp
It should be possible to do it just with php, telling the page to update itself at a certain interval.
The way I would do it, is to use javascript with ajax and a timed event. The event fires of an ajax call to the server, the server returns any new information.
If you are new to ajax, you probably want to use a library to make things a bit easier to handle. My personal favourite is prototype.js, although at the moment that seems to be a bit "on the way out" and eg jquery may be a better alternative.
Context
I'm working on a project that I'd like to make more dynamic with PHP + AJAX.
I'm using jQuery for the AJAX part because I totally suck in Javascript, and anyway it seems to be worth something.
I reached a point where my application needs to use a form to send a post, and I want to use an ajax call to perform this action. In the page I'd like to send the post, there is also a list of the most recent 15 posts submitted.
First question: Should I just forget about it and use just PHP?
The action
The user writes something in the <textarea></textarea> and clicks on a <a id="myPostSubmit">Submit</a> that is the handler that I'll manage on the jQuery script with something like $("#myPostSubmit").live('click', function() { /* here i make the ajax call */ });. If the post is successfully submitted we are going to do something (I'll talk about it in the next section), either we will alert the user using my showAlert(text) function, that shows a black box for 4 seconds with the text in it.
Second question: Should I manage the click event in any other ways? Should I create a function, such as sendpost(post) and attach it into the HTML onclick="" event?
If the post is successfully sent
I'd open a discussion about 2 options:
We refresh the page [not actually
loading the entire page but making
another ajax call that retrieves the
posts lists and makes disappear the
old one, load the PHP file to
retrieve the new posts (including
the one we just sent), and then make
the post list appear]. Pro: 1) We are sure that what the user is reading after the post list is loaded is the real post sent. So it actually double checks the action. 2) We load also some possible posts sent in the mean while. Cons: 1) We have to create a PHP file that gets the post list template, slicing the template of that page in 2 files. 2) It doesn't really seems that smooth to me.
We just use Javascript to get the post template, add it to the list. Pro: 1) We make it really smooth, without reloading the entire page. 2) We don't need of any PHP file to reload the page. We just use Javascript (jQuery). Cons: 1) How do we get the post html template to add it to the list? 2) How do we get the user (logged) informations without PHP?
Third question: Is it better the 1st or the 2nd solution? Would you provide a even better 3rd solution?
The PHP page
The PHP page that will receive this AJAX call is : ?p=action&a=sendpost. The page require $_POST['myMessage'] to be set and not empty and nothing else. The page itself will get all the user infos from the cookies and will manage to perform the needed query.
The application
It is divided in 3 parts: App, Template, Library. Basically each page of the application has its own .app.php and .tpl.php file.
The .app.php file manages the building
of the basis of the page, using classes
and other stuff from the library. In
our case it retrieves datas from the
database and put them into
variable.
The Template is called at the end of the .app.php file. The .app.php file send to the template the retrieved data and the .tpl.php file outputs them.
The library is used to contain the classes and functions we need in the application file.
Fourth question: Is this a good way of manage my web application?
Edit: What about returning the alert message to the user?
I read about an option, inside $.ajax() that will manage the response on success or in error. The documentation about it is very simple and I didn't get it.
Fifth question: How should I return (from the PHP file) the error
or the success?
First question: Should i just forget about it and use just PHP?
Well, you application will relay on JavaScript if you use ajax, this days i think it just fine ;)
Second question: Should i manage the click event in any other ways? Should i create a function, such as sendpost(post) and attach it into the HTML onclick="" event?
Create a function and bind onclick. Code will be more readable ;)
Third question: Is it better the 1st or the 2nd solution? Would you provide a even better 3rd solution?
My solution: ajax submit the form and on callback insert new comment in to the list or display error message if user can't comment.
Check jQuery serilize() for submitting forms data with ajax.
Fourth question: Is this a good way of manage my web application?
It's just fine ;) When you application get's bigger you will have to redesign it, but don't do it know, do it when current solution becomes to hard to work with.
Read some good book on building MVC framework. And on programming patterns in general.
You seem to be on the right track with everything. There are lot of opinions called "best practices" about how to exactly attach event handlers, how to reload the data on the page and how to organize your application, etc, but I personally would rather build more software instead of worrying about details like that. The details will come to you eventually.
I personally find that updating whole chunks of server-side-rendered HTML on the page is more robust solution, but I have seen people getting excellent results with templates.