I have a search page done using Laravel. On that page there is a button which makes an AJAX call to another url. That page is paginated, so the user can be on the first, second or last page.
My problem is, How can I bring the user back to the same page and point that he was.
Or, Is there a way to just call a method to perform some actions on the database?
Thats my Ajax Call:
$.ajax({
url: $(this).attr('data-href'),
dataType: 'html',
success:function(data) {
$('#ajaxResponse').html(data);
$.growl.notice({ title: 'Voto', message: 'Computado com sucesso' });
$(this).find('.fa').toggleClass('fa-heart-o fa-heart');
}
});
I know if i take the $('#ajaxResponse').html(data); bit it is going to perform the change but not update the numbers that i need. Any ideas?
Here is the documentation for pagination in Laravel with JSON. As you can see, when you paginate your data, the resulting JSON object will contain information about the next and previous pages. Update the links your users click with the provided information and they should see the correct data.
You can try to store the actual page in a session key and use a controller to check this key and display the page that you want. In this case you can keep your ajax call as it is and change only your laravel controller ad view.
Related
I read the manual about location hash, but seems I didn't understand it.
I do like this:
$.ajax({
url: "/tst.htm",
success: function(data){
$("#center").html(data.content);
location.hash="#ACHTUNG";
}
});
and when I press 'back' in the browser, I return to the blank browser page, not to the page I created to test how location hash works.
I need a simple answer how to workaround this most common and simple ajax-based task, not please again a reference to the manual.
I need help with the form submission and saving to db in my ruby camping web app.
The app itself is a quality assurance app. Users fill in forms for any errors detected during the quality check. The problem is that the check can take for a couple of hours or in extreme cases even more. During that time, in order to save the data, users have to submit the form several times. Currently I've set it up so that the users submit the form and are immediately redirected back to the form.
How would I go about to enable some sort of autosaving, let's say every 10 minutes or upon each change to the form so users don't have to do it manually.
This is quite difficult for me because I'm not a programmer per say, butI learn as go alogn to optimize my processes.
I've been reading about ajax and jquery but I'd really appreciate if someone could point me in the right direction since I don't know where to start and camping examples are rather scarce.
EDIT
Some additional infos:
I've successfully implemented jQuery to my camping app and I can manipulate html elements, but AJAX doesn't work. Firebug console doesn't return any errors.
Here are my assumptions:
If the form can be successfully submitted manually I don't have to change anything in my controller or view in order for AJAX to work, right?
The url passed to AJAX doesn't have to include the object id for which I want to submitt the form, right? I'm passing the '/edit' url and the full url to the relevant object is for example '/edit/5'.
Here is the code from the html head:
script :type => 'text/javascript' do "
$(document).ready(function() {
$('#np').change(function() {
$('#add_form').submit(function() {
$.ajax({
type: 'POST',
url: '/edit',
data: $('#add_form').serialize(),
});
});
});
$('#search_indiv_form').click(function(){
$('#search_indiv_form_toggle').toggle(700);
});
});"
end
Are there any errors in my ajax code to prevent the form being submitted?
thank you.
regards,
seba
I have a modal form (using bootstrap) that I use to add a user. This form is wired to a 'addUser' method via RequestMapping in my Controller. Adding a user works fine.
Is there a simple way I can populate the same modal form to edit existing user details after clicking an edit button? Do I have to make an AJAX call to a REST endpoint to populate the form, or is there a better way of doing this?
I'm using Spring Boot.
Thanks,
Jerry
An AJAX request would be your best bet, otherwise you'd have to load all the editable user properties ahead of time when you load the page of existing users and store them in memory or on the page somehow. It's not the most efficient solution though because you're loading all those properties for all users, every time you reload the page. If you only have a handful of users, that might be ok for you, but if you're dealing with a large set of users, then that will make for longer request times.
Yes you can make a ajax request and get the modal details in form of Json or Xml.
Below example retrieve the user details and set it into modal form variables like userName
$.ajax({
type: "post",
url: "Url to get the response",
cache: false,
data:'userId=' + $("#userId").val(),
success: function(response){
var obj = JSON.parse(response);
$('#userName').val(obj.userName);
},
error: function(){
alert('Error while request..');
}
});
I'm confused as to how to accomplish this. I have a page which, has a popup filter, which has some input elements and an "Apply" button (not a submit). When the button is clicked, two jquery .get() calls are made, which load a graph, a DataTables grid, photos, and miscellaneous info into four separate tabs. Inside the graph, if one clicks on a particular element, the user is taken to another page where the data is drilled down to a finer level. All this works well.
The problem is if the user decides to go back to the original page, but with the ajax generated graph/grid/photos etc. Originally I thought that I would store a session variable with the filter variables used to form the original query, and on returning to the page, if the session var was found, the original ajax call would be made again, re-populating the tabs.
The problem that I find with this method is that Coldfusion doesn't recognize that the session variable has been set when returning to the page using the browser's back button. If I dump out the session var at both the original and the second page, I can see the newly set var at the second page, and I can see it if I go to the original page through the navigation menu, but NOT if I use the back button.
SO.... from reading posts on here about ajax browser history plugins, it seems that there are various jquery plugins which help with this, including BBQ. The problem that I see with this approach is that it requires the use of anchor elements to trigger it, and then modifies the query string using the anchors' href attributes. I suppose that I could modify the page to include a hidden anchor.
My question, at long last is: is an ajax history plugin like BBQ the best way to accomplish this, or is there a way to make Coldfusion see the newly created session var when returning to the page via the back button? Or, should I consider re-architecting the page so that the ajax calls are replaced by a form submission back to the page instead?
Thanks in advance, as always.
EDIT: some code to help clarify things:
Here's the button that makes the original ajax calls:
<button id="applyFilter">APPLY</button>
and part of the js called on #applyFilter, wrapped in $(document).ready():
$('#applyFilter').click(function(){
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id,
randParam: Math.random()
},
function(response){
$('#tabs-photos').html(response);
}
);
});
Finally, when the user calls the drill-down on the ajax generated graph, it uses the MaintAction form which has been populated with the needed variables:
function DrillDown() {
//get the necessary variables and populate the form inputs
document.MaintAction.action = "index.cfm?file=somepage.cfm&Config=someConfig";
document.MaintAction.submit();
}
and that takes us to the new page, from which we'd like to return to the first page but with the ajax-loaded photos.
The best bet is to use the BBQ method. For this, you don't have to actually include the anchor tags in your page; in fact, doing so would cause problems. This page: http://ajaxpatterns.org/Unique_URLs explains how the underlying process works. I'm sure a jQuery plugin would make the actual implementation much easier.
Regarding your other question, about how this could be done with session variables - I've actually done something similar to that, prior to learning about the BBQ method. This was specifically to save the state of a jqGrid component, but it could be easily changed to support any particular Ajax state. Basically, what I did was keep a session variable around for each instance of each component that stored the last parameters passed to the server via AJAX requests. Then, on the client side, the first thing I did was run a synchronous XHR request back to the server to fetch the state from that session variable. Using the callback method for that synchronous request, I then set up the components on my page using those saved parameters. This worked for me, but if I had to do it again I would definitely go with the BBQ method because it is much simpler to deal with and also allows more than one level of history.
Some example code based on your update:
$('#applyFilter').click(function(){
var id = $("#filterid").val(); // assumes the below id value is stored in some input on the page with the id "filterid"
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id // I'm assuming this is what you need to remember when the page is returned to via a back-button...
//randParam: Math.random() - I assume this is to prevent caching? See below
},
function(response){
$('#tabs-photos').html(response);
}
);
});
/* fixes stupid caching behavior, primarily in IE */
$.ajaxSetup({ cache: false });
$.ajax({
async: false,
url: 'tracking/listPhotosSessionKeeper.cfm',
success: function (data, textStatus, XMLHttpRequest)
{
if (data.length)
{
$("#filterid").val(data);
$('#applyFilter').trigger('click');
}
}
});
This is what you need on the client-side to fetch the state of the photo list. On the server side, you'll need to add this modification to tracking/listPhotos.cfm:
<cfset session.lastUsedPhotoFilterID = URL.id>
And add this new one-line file, tracking/listPhotosSessionKeeper.cfm:
<cfif IsDefined("session.lastUsedPhotoFilterID")><cfoutput>#session.lastUsedPhotoFilterID#</cfoutput></cfif>
Together these changes will keep track of the last ID used by the user, and will load it up each time the page is rendered (whether via a back button, or simply by the user revisiting the page).
From my view I am sending via $.ajax a JSON object to my controller to save it in the database.
If all succeeded i want to redirect to another action which will show a diferent view.
If i use this code:
return RedirectToAction("CreatePage", "Survey", new {id = question.PageId});
The execution goes to the Survey controller which returns a view but it is not shown.
I have read some post which said that it is not posible to redirect via ajax.
The solution I use so far is to redirect via javascript like this:
success: function (ret) {
window.location.href = "/Survey/CreatePage/" + $("#PageId").val();
}
Although this always works, sometimes i need to refresh the CreatePage view to show the last changes made.
Any idea of how to solve this problem better?
Thanks in advance
As mccow002 suggested, I wasn't really needing to make the call via AJAX for that part. After studying the solutions suggested, i realized that i could simple submit it in a form. My confusion came because I have a save and continue editing and a save. For the save and continue I use the AJAX call, but for the save option with the form being submitted is ok.
Thanks very much for your help.
Instead of redirecting to a new page, you can send a rendered html from .net code back to client and load that html in page, like this $("#main").load(renderedHtml).
But for refreshing the page you can write a simple script that run at specified intervals and refresh the page contens.
You could use [OutputCache] on the CreatePage action so that it doesn't cache the page or only caches for so long.
output caching