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.
Related
It's another late night and another seemingly simple issue that's causing a headache!
So, here's the situation. I have a simple HTML form that's in a Bootstrap modal. When this form is submitted, there's an AJAX POST to a receiving page, SESSIONS are set and the request is then forwarded to a simple DB query. This all works.
What I want to do is show the sessions on the original page without a page refresh.
I thought this would be easy so I tried using this on the original page;
$('#filteroptions').on('hidden.bs.modal', function () {
$("#breadcrumbs").load('includes/files/private/breadcrumb.php');
});
breadcrumb.php holds the output format and the file is populated immediately after the POST from the modal (called filteroptions)
I also tried to attach it to the POST success with a simple success process to load the file but each time, the breadcrumb.php fils to be loaded.
Curiously, if I ctrl+F5 the page after the first POST, there is no value shown BUT if I search again the DIV is updated each time I search after that.
Why would the request not fire the first time that the search is performed? Why do I need to refresh the page for everything to start working?
There is no caching to it's not a case of a dependantr file being cached after the refresh.
Thanks
The solution was to populate the div with nothing and then update it.
Previously, the div was only being drawn when it was populated thanks to the code in the breadcrumb file looking for a specific POST or SESSION variable.
It now allows for a blank value.
The situation is like this:
when I first load the page, it displays the data which is powered by a yii widget using e.g
$this->widget(blahblabhablha)
Now, inside that widget, there's clickable dropdown menu, whereby when I click any of the options, I fire an ajax call. Then the backend php script will query the data using the module/controller/action url that I used in the url parameter of $.ajax(). Then I echo json_encode() the data that I fetch from db so that the ajax will get a response.
How to update the widget I just mentioned, using the data response of ajax?, because It's a widget that displays rows and also has pagination, how am I suppose to update that widget to display the data from the ajax response?
When refreshing grid view for example, Yii actually renders the whole page behind the scenes and then extracts part with gridview div and replaces it. If you are using CgridView, it would be enough for you to set 'ajaxUrl' option when configuring the widget. If not you will have to create html from your ajax response and then place it in the appropriate container via js. Another way, and probably better way is for you to create partial view with only your widget content and then to use renderPartial() in your action to refresh it.
I am loading data from an API through JS send the data to the Laravel Controller and save them into the Database. After loading all the Ajax I want to display the data in a subview/section of the master.blade - Is it possible to render a View dynamically after the page finish loading, - also for later I want to update database rows and display the new data in the view dynamically.
//afater Ajax loading - update / display the data in the view
public function loadcomments() {
$comments = Comment::all();
$childcomment = Childcomment::all();
return View::make('partial')
->with(compact('comments'))
->with(compact('childcomments'));
}
in user.blade.php (main site) I am defining
#section('comments')
#include('partial')
#stop
and in the master.blade.php I am defining the yields:
#yield('content')
#yield('comments')
any idea how to render the site with the updated content?
Once the page has finished loading, with out making further AJAX calls to the Laravel app its self it will have no further part in the request.
You could just update the front end markup with JS or you can make a call back to your Laravel application using AJAX/jQuery to pull the data back out after it has added it to the database.
Use a resource controller or similar implementation to allow insertion and reading of the comments (CRUD) so you can pull data when you need using AJAX.
Edit
There are different ways to make a page dynamic on the front end all of these will usually include Javascript or another front end scripting language.
In the past I have used jQuery to handle updates of the page content using either JSON or XML/HTML but lately I have started to use AngularJS.
Another library is EmberJS which I am currently learning to use but I feel front end languages are out of scope for the question.
There are many tutorials on updating the HTML after a page has loaded by making a call back to a controller or other resourceful route.
Say the posts have been saved to the database, if this is done AFTER the view has been returned to the browser you WILL have to use javascript to pull out the data and most likely have a piece of js code to tick over that "polls" your resource controller for new comments.
If a new comment has been detected a second request is made to pull the comments out OR the comments are returned from the polling requests using AJAX.
On the laravel side, a partial view could be returned or JSON, for simplicity we'll replace the view. You would make a jQuery selector for the current existing partial on the browser and then replace it with the one pulled from Laravel with AJAX.
$('#some-page .my-view-to-update').html(somedata);
My jQuery is VERY rusty so read up on the relevant documentation to update the HTML correctly.
You can also use Pusher
take a look at this
https://pusher-community.github.io/real-time-laravel/
I am tweaking a website to make it easier for employees to edit products. Right now, someone has to login to the DB and change prices, and then someone has to change the physical html of the website itself.
So I am writing code that pulls all the products off the DB, and displays them on a page which can be edited. I think doing everything with Ajax would be best.
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
The problem is, I only know how to process Ajax requests using a URL (using POST, GET, etc). I need help writing the code to pull the info off the DB, and display it.
The table name is PRODUCTS. Within PRODUCTS are the columns ID, STOCK, SHORTNAME, DESCRIPTION, PRICE and SHIPPING.
In the HTML, I have a div setup:
<div class="product">
<div class="productName">
SHORTNAME, PRICE, SHIPPING
</div>
<div class="productDesc">
ID, DESCRIPTION, STOCK
</div>
</div>
I want to set it up so if I click a button, ajax pulls all the information off PRODUCT, and creates .productName div. If the user clicks .productName, it will then further expand to reveal .productDesc.
Question: How to I query the DB using AJAX on a button click, and put the information into elements?
Ajax cannot access your database. Ajax simply loads content from a URL. Your application must do this, and provide the result to an ajax call.
Here's how it will work.
Browser open a url on your server
PHP renders a page for display on the browser
User clicks something
Javascript sends an Ajax request to your server
PHP recieves this request and queries the database
PHP renders a response for the request
The Ajax handler on your page receives this response as plain text and does something interesting with it (such an inserting HTML, evaluating JSON, or executing javascript)
Ajax is just a way to load the response from a URL without actually navigating your browser to that page. It does not (and should not) have any sort of direct database access. In fact it has no idea there is a database at all.
Imagine the security issues if any javascript could read or write any field in your database. it would be a hackers dream.
You have to write a PHP script that queries the database and returns the results either as JSON or HTML.
This script is called via jQuery. E.g.
$('#main').load('http://your-url.com/yourscript.php');
This loads the output generated by yourscript.php (given that it is HTML) into an element with ID main.
You can find an Ajax tutorial with jQuery here. And a lot more tutorials on the jQuery tutorials site.
PHP - actually, it seems to be no job for jquery - once somebody edits it in DB, app gets latest information every hit.
Unless I misinterpreted your question, I see nothing this has to do with jQuery/AJAX.
I would like to create a pagination system for comments in my website.So far, I have been able to create pagination using php/mysql and html but the page has to refresh every time we click on the next button(for the next set of comments) or previous or a particular page....
As far as my knowledge of jquery is concerned I am thinking that, when the user clicks on the next button we post data for the page number to comments.php then echo all the comments in comments.php, then the jquery data variable recieves all the data echo'd in the file and appends it to the #comments box...
Is my solution a valid one??? or anyone has a better solution.....thanks
Your question doesn't make much sense and is very jumbled.
You can either load the entire list when the page first loads, and use jquery to paginate it by hiding the extra entries, which will work fine for lists with a few pages worth of content.
The other option is to use AJAX to fetch the next or previous page when the appropriate link is clicked.
There are plenty of pagination add ons for jquery. Maybe check them out.
Don't use a POST request to get the next page as it looks like you might be, unless you are just using the wrong terminology.
Yes, when you click 'next', you send ajax request to comments.php and replace current comments with new ones.
You can do it with a get()/getJSON() call in jQuery.
Something like
$('#next').click(function(){
$.getJSON('url?withnextpage=number',
function(data){
//update variables or the DOM
});
});
Returning it in JSON may be quicker. I hope that helps