I am developing a website in Laravel 5, It has a Jobs page where data loaded through ajax which have many filters. When I open a link and come back to the previous page (Jobs page) by clicking the browser back button, it showing me Json data on the browser window instead of loading the whole page.
Kindly let me know how to solve this issue.
If you're using the same url for the JSON request as you are for the html request then the browser will simply be returning the last response to that url which will be the JSON data.
There are a few different ways to overcome this but essentially you'll have to modify your url so that the browser treats them as different responses.
One way would be to append a query string value to the ajax call e.g. ?json.
A slightly more complex yet more flexible approach would be to create separate controllers for your views and JSON data and then prefix your JSON routes with something like /api e.g.
For the view
example.com/jobs -> Pages/JobsController#index
For the json data
example.com/api/jobs -> Api/JobsController#index
Related
I'm new to Django so apologies if this is a really stupid question but I'm trying to get a table to reload database values and when I open the page in a browser it loads ok initially but when it tries to reload nothing appears to happen. When I look in the network section of inspect element I can see repeated 404 page not found errors. I've been searching stack exchange etc. for a few days and I've tried various types of quotes etc. round the url tag but no joy. I'd really appreciate any help anyone can give me on this. I'm using python 3 and django2.
Project level urls.py
project level urls
App Level urls.py
App level urls
App views
App views
HTML
html
Directory Structure
directory structure
Terminal
enter image description here
Thanks in advance
The problem is a simple typo: you have a space between the { and the % in your url tag. This is causing Django to not recognise it as a tag, so the Ajax is using the literal string "{ % url ... }" as the URL which explains the mess you see in the terminal. Remove the space.
(Note, you still might not get the result you expect, since your Ajax function returns a complete HTML page but you are inserting that result inside a div in an existing page; you probably either want to replace the whole page or return a template fragment from your view.)
I am considering using ajax requests to pull content dynamically into a page and then binding that content up to the DOM using knockout.
Is there a way to load content dynamically into a page that makes the page look like it's content is being rendered by the server as normal get request?
If not, do most search engines read dynamic content today? For example, if one were to use an ajax call to fill in the title tag of a page - do most modern search engines support that crawl?
In my webapp I have a page which presents a number of tabs, each of which must be independently reloadable via AJAX. For user experience's sake, I want all the data to be presented immediately when the page loads instead of ajaxing it in. For maintainability' s sake(and because I'm lazy) i don't want to write separate code for the complete page.
Is there a way to include the html that would be generated by calls to other controllers in the page?
I use jsp for views if that is relevant.
The easier way of doing this would be to manually trigger an AJAX call for each tab at page load event. This will bring the HTML for each tab. The downside of doing this would be that it'll cost you X requests.
Another option would be to create a Front Controller for all others that send the info per tab. You send one request to the front controller and its job would be to put the results of the others together and give a single big response.
At the moment I am writing the routing code for my MVC framework which is capable of rendering HTML partials (views). These partials can be loaded server-side or client-side (using Mootools HTML request). The layout of every page is then build from multiple partials. As I want it to be ReST compliant, each HTML partial (view) maps to an URL in a defined URL space, as follows (indentation shows the intended document structure):
...
/
/navigation
/content
/profile
/profile/1
/profile/1/message/
/profile/1/message/1
/profile/1/message/2
...
Now the problem is that I want people to be able to visit "/profile" and then not being shown the HTML partial, but instead the full layout. I was thinking about the following:
1) Creating a separate namespace / prefix in the URL for partials, for example:
/profile for the full layout
/partial/profile for the partial
2) Sending a custom HTTP header to request for a partial or no custom HTTP header to request for the full layout.
The first option would be more ReST compliant (cache friendly), but I am still unsure (and that is the real problem) about other options that might still be unknown to me.
Before I start implementing one of the above solutions, I've got the following questions:
What alternatives do I have to distinguish between requesting partials and full layouts?
What are the best practices to keep the client-side state / context of each partial?
When you request client-side, the server will receive the extra header HTTP_X_REQUESTED_WITH with the value xmlhttprequest.
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
....
}
This is a reliable header to test for, rather than add a custom type.
Option 1 is definitely a better solution that option 2. In a RESTful system we create new resources all the time to make up for the lack of methods.
Creating a custom header is a really bad idea.
I am new to ajax and i wanted to know if we can load a complete new page and not just a part of it using ajax. Please give a small example script for understanding if this is possible. Here i am trying to display only one url to user while i change from one page to another when he clicks on any of the links in the page.
You can of course request for a new page and load it via body.innerHTML = ajax.responseText;
I would strongly recommend against this though for reasons outlined in this post: Why not just using ajax for Page Requests to load the page content?
The whole premise really is that with
AJAX you don't need to reload the
whole page to update a small
percentage of that webpage. This saves
bandwidth and is usually much quicker
than reloading the whole page.
But if you are using AJAX to load the
whole page this is in fact
counterproductive. You have to write
customised routines to deal with the
callback of the AJAX data. Its a whole
lot of extra work for little to no
increase in performance.
General rule for where to use AJAX: If
your updating >50% of your page, just
reload, else use AJAX.
You will not only need to request for the new page, but then also take care of ensuring the old styles on the current page are removed and don't interfere with the new page. Theres all sorts of problems associated with what your trying to do. It's possible, but I recommend not to do it.
edit: actually you might be able to just do document.write(ajax.responseText) which should take care of overwriting everything in the document, including css styles etc. Though still don't recommend it.
When you're finished with processing the AJAX request simply use this JS line:
window.location.replace('<URL of the new page>');
This has exactly the effect of loading the new page via
....
When you make an AJAX request, a request goes off and brings you the contents of the URL that you have requested. Now technically you can do whatever you like with the contents (which could be HTML), you can replace any element within the DOM with it. Be careful however of replacing EVERYTHING on the page, you are more likely just going to want to replace what is within the tags.
If what you want to do is show one URL for multiple pages, AJAX is overkill. Why not just use an IFRAME?
This could be useful if your page was unsure if it was expecting back errors to be inserted onto the page or a "new" submission confirmation page. This can be used when you want to put a validation servlet (or whatever) in front of the submission servlet (or whatever). If the page always hits the validation servlet, you hide the submission servlet which actually performs the data update. In the case where the validation passes, forward to the submission servlet. The user never knows what happened in the background.
When the page gets a response back you could just look at the first portion of the response text and determine if it had a keyword set by the server, which means this is a new page. Remove the keyword from the text, and do document.write(ajax.responseText); as described previously. Otherwise insert the response text into your errorBox div and let the user retry submission.