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
Related
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
I have a button that when clicked loads data from my database via an ajax request.
<button id="btn_test">Load All Records</button>
<div id="all_rec"> </div>
The content is loaded into the div element dynamically. With many rows it would make sense to use pagination here not only for a faster response time but a more user friendly feel. Thus I would like to know if there is a way to use laravel's pagination in this case.
N.B When I used laravel's pagination, I got the first set of records(first page) to load properly but when I clicked page 2 nothing showed up on the screen.
I have an application in which I display a form so a user can search for client records based on last name. After entering search parameters, the record or records (there could be multiple clients with the same last name) are displayed. I then want the user to be able to select a client record, possibly with a radio button, and hit one of two buttons: Display details, or Create Reservation. The Display Details button should cause a new display with details of the selected record. The Create Reservation button should cause a new form, with its own handling, to be displayed.
Now, I know I can set things up according to this login
<?php
if (display button was pressed)
{
php code to retrieve more data and display details
}
else if (create reservation button was pressed)
{
php code to generate and display the reservation form, with appropriate handling
}
?>
display the original form with the search results
The problem is, I end up with really ugly, hard to read code because the php code to generate and display the reservation form is lengthy, and needs its own validation, database interaction, and form handling. The code, to my Java-oriented eye, looks ugly and non-modular. Plus, the code for handling the reservation form is icky, with lots of flag setting to determine if we are in form entry mode or form handling mode. I would like a much cleaner way to do this. So my question is, what is the best practice for handling the situation where there are multiple buttons and the action associated with each button is complex?
I could call a function, obviously, but I still end up with the ugly flags determining which state the script is in (are we displaying the reservation form or handling it?). I could create another php file and include it, but the ugliness persists. Or, I could use header, and pass the client record id in a session variable to the new php script. But that would mean a second, unnecessary retrieve from the database to get the client information again.
All the code examples I see on the web show very simple processing after a form button is pressed. What is the best way to do complex processing and displaying a second form based on a button press?
Have you considered using a framework like Laravel for your site. It would seem to me that you must be doing this "manually". With the complexities you described, having a system with routes and "build-in" functionality (like Eloquent ORM) might serve to simplify things for you.
I would go for using ajax and a rich jQuery plugin (or some other framework) to do what you want.
Basically you will handle lists and the functionality that you mentioned with the php reading data and jQuery scripts to dysplay it. And the information that you have to show would be through ajax. Or when you want to edit.
Here is a cleaner example of what you need:
http://jqueryui.com/dialog/#modal-form
I have some server side code that outputs a <ul> of items that the user can edit and post changes back to the server. I am now working on an "Add New" feature that adds a new item to the <ul> and will be posted back to the server when the 'save changes' button is clicked.
When the user clicks the "Add New" button, I execute client side code that appends <li> markup (same markup generated by my server side code).
What is bugging me is the redundancy. Meaning that if I should change the <li> markup, I would have to open both php and js files to do the change.
In the interest of eliminating redundancy, should I only output the <ul> data from the server and let the client code generate the markup? What are the performance hits from a concept like this?
You could do a hybrid using the JQuery .clone() method.
Your back-end code could produce the structure of the <li> elements when it is creating the initial code and then, if the user wanted to add a new <li>, you could grab on of the existing ones to use as a template, .clone() it, update the values of the clone with the new data from the user, then append it to the <ul>.
The only issue would be if there was a possibility that there might not be any <li> elements on page load, so the .clone() call would have nothing to reference. There are ways around that if it's an issue though (e.g., a JS string template of the <li> format that you want to use, that could be used like this: var newLI = $(liTemplateString);. Again, this template could be created by the same code on the back-end that would create the actual <li> elements on page load . . . it would just be creating a JS variable as well.
Amongst other things, this would allow you to update the <li> to the page immediately and then send the update to the back-end using Ajax, to update the "master" version, without making the user wait on that process.
In the end, my personal preference is to let the back-end do as much of the processing as possible and only you client-side code to handle the things that the back-end can't do, so I would shy away from dumping data and letting the front-end handle building the list, if the back-end can do it as it's creating the page.
Theoretically, you can just append the new <li> with no problems. However, for most uses, you will want the server to hold the master copy, thus re-serving the entire <ul> for each update.
If you're using .ajax(), this will be a nearly immeasurable difference in load time.
Let me suggest the Third Way: duplicate an existing element and change its properties and/or content as needed.
jQuery has .clone(), but it can be done with plain DOM or any other library as well.
This way you don't add unneeded latency and you keep your client-side code relatively independent of any markup changes you might have to do. Meaning that if you add or change any markup that's unrelated to what the JS needs to do (for example adding a class="" or an inner <span>) and your JS is sufficiently generic (for example getting the element to clone and the one whose text to edit from attributes) then you don't need to update it.
How do I store the position of box in a sortable row fluid? For example, every time a user drag a box from category 1 to category 2 then when he refreshes the page, it will remember the position?
Here's the HTML code for the interface you might wanna look at:
<div class="row-fluid sortable">
<div class="box span3">
<div class="box-header well">
<h2>Category1</h2>
</div>
</div>
<div class="box span3">
<div class="box-header well">
<h2>Category2</h2>
</div>
</div>
</div>
As you can see, it uses a class in CSS file for the style. Or Is there any better way to do this by using jQuery?
There are at least two ways to store the data
Use a client-side cookie to store the data. You can use a plugin like jquery-cookie to read and write cookies on the client side.
Store the data on the server side. This will require an AJAX call to a backend script to store the data. You can then query the database for the stored positions on each new page load, or create a new AJAX call to retrieve the data as needed.
You will need some kind of persistent storage as George points out, you could do this with cookies or a database.
Below is a link to an example that uses jquery to serialize the order once dragging has finished and then passes the result on to a server side script via ajax. The server side script then updates the database and gives you a means to persist the order.
I stress that this example is one of my own from several years back. It's a site I no longer maintain, but this post has a good number of comments that highlight some issues that may arise.
The example uses a list rather than divs. It also uses a database for persistent storage, but you could alter the server side script to save cookies.
http://www.wiseguysonly.com/2008/12/07/drag-and-drop-reordering-of-database-fields-sortables-with-jquery/
It should be simple enough to adapt to your exact needs.