Laravel AJAX call not working after reloading view? - javascript

I have a standard CRUD web app in Laravel that allows users to view and edit records. It also has a sorting mechanism that asynchronously (using AJAX) sorts the main records view.
This works fine until the user clicks on a record in the records view to edit it. Then they are redirected through the web router to a new Controller function that loads the update view for that record. When they click to save the SAME update function used to load the update view is fired a second time, and it updates the record and returns the ORIGINAL records view.
The problem is, the AJAX sort function for the records view only works BEFORE the update function is called. I've compared the HTML and JavaScript before and after a record is updated and it is IDENTICAL. So why does the AJAX function stop working?
My only guess is it has something to do with the web router. Predictably, the original read view is called with a GET method, and the update function uses POST, but I tried changing the "type" property in AJAX to POST with no luck.

Try adding _method=POST to your post data
Also do not forget to send csrf-token (axios does it automatically)

Related

How to refresh a page once it's opened from a previous link?

I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.

updating view when data in database changes

I have a problem with project iam working on. In one route(program/messages) of my application, user can create and edit messages(using ckeditor textarea). These messages are saved in database. On another route(program/display) the application generates html site with messages(retrieved from database) created by user. The problem is that i need to update the display view(without site refresh ofc), when user change something in messages data(edit, or create new / delete). Any solution? Iam using codeigniter for backend.
Your view page must contain an ajax script. Which will check for database changes upon certain interval. That's all. I think ajax is new for you. Please grab a bit more AJAX concept. It's pretty handy ..
You can see W3school --
http://www.w3schools.com/ajax/default.asp
If you are in a hurry .. then ..
https://thenewboston.com/videos.php?cat=61
You can use
Jquery ajax() function
Javascript setInterval() function
Set the interval to certain time which will execute the ajax function to see if there is certain change in the database. if there is a change then update the view in success of ajax call.
There is another solution by using triggers in the database. But I am not quite sure about this.

form component data from the web-api on every page

I have various page in my project and each page contain lots of drop down.
For getting options of drop-down from web-api and then i store this variable in angular service variable for further use in another view.
But i didn't get the way where should i call web-api to get drop-down data so that it doesn't matter which page should i open first or by default???
And i get options of drop-down every where.Currently i calling web-api in the controller which is correspond to my first view of application.
My approaches regarding this:
Method 1: I create a root controller in which i call angular service which call web-api to get data. The view is already render on view-port before get the the from web-api.
Method 2: i call angular service which call web-api in controller(not root controller which to specific to a view) and populate data in drop-down after successful callback from service so this working fine but it's not generic
Services/Factory are singleton, so I believe you should call the web api in your service rather than in controller and then passing the data to service.
EDIT -
If you are concern about the display of view before the data then you can use resolve as resolve can wait for data to become available before showing a view.

accessing client side jquery variable in server side groovy page

I have a variable in my JavaScript which contains the id of the clicked row in the master grid. I want to pass it to the groovy service page that handles my child grid so that it can filter the rows based on that id. How do I do that?
The problem is that your javascript-based grid runs on the client, while the page is rendered server-side. Therefore, some communication must take place in order to instruct your application to filter rows based on what the user selects.
Grails uses the MVC architecture, this means that there is a controller that takes care of answering the requests generated from the client. To answer these requests, the Controller can make use of the Views (.gsp files). So when you call to the URL controller/index you may make use of an index.gsp view to render your page.
What you need to do is to make an ajax call to a controller method (e.g. controller/getFilteredRows) that gets as input the selected row (could be its id) and based on some logic fetches all the required information and sends them back to the client encoded for example using JSON.
Now the client knows the rows it has to display, hence you can update your grid.

backbone multiple views with the same model

I am doing an only front end project with backbone.
And at one point I want to do the following :
A basic form with some input
the user submit the form
Show some cool graph with d3 or google graph based on the inputs of the user.
The problem is that I don't have any backend so I never save the inputs of the user, How can I change the view and still have the data of the form?
I was thinking about storing it temporary into localstorage but it's not really a good solution for perfs...
Thanks
Router creates a model instance
Router passes that model instance to the form view constructor options
Router binds event listener view.on('formComplete', this.storeModel)
Router renders & attaches form view
User fills out form view
Form view sets the data from the form into the model
Form view triggers route or event (like this.emit('formComplete', this.model);)
Router's storeModel handler function takes the same model instance, stores it as this.model temporarily on the router, and then navigates to the graph view.
In the graph view route handler method, router passes this.model it to the graph view contsructor options, render, attach
This is sort of using your router as an in-memory data cache, but since you have no back end, you need to store data somewhere.
Im also doing an one view web app with backbone.
I think the point of your problem is you really has only one page but load different views into this page. Not change to another page.
I suppose your app url is http://xxx.xxx.xxx/#first_view. and use backbone Router to change views
If you just want keep the data until user refresh browser. Just save them into a Global js variable. Once you use something like
window.location = Global.getBaseURL() + "#second_view" to change your view. And you actually load the "second_view" by ajax and put html into current page. You never lose your js variable.
If you want keep data even user refresh or go to another page. You have to use sessionStorage. Save data into JSON format and convert them back to js variable once you finish loading the new page.

Categories