How to display ajax list response on html using jquery? - javascript

So I currently have a search box that the user can search for managers. When the manager is searched and selected, they can choose to show direct report employees via a button that triggers a Javascript function that sends an Ajax post to the backend to query the database. Upon receiving a success response, I would like to display a table with general info of the employee (such as First, Last name, Position, etc.) We have previously used Jquery to pull the data upon load, but I was wondering if there was a way to pull and display this data from the Ajax response and display it on page without refreshing? Another roadblock seems to be that the response is in a List fashion, in such that it returns none to many employees; a variable response. If it is more effective, we are also using a Thymeleaf template, but I doesn't appear if I can make the Thymeleaf selectors open to a live update such as this

In order to set the Ajax Response in your HTML page, Do something like this :-
1.) Use your HTML element's id and then append the response fro your ajax Success function.
Suppose there's a text box in which you want to set the response.
<input type="text" id="inputText" >
2.) Now, in your ajax success Response , get the id of this element and then append the response like this :- -
$.ajax({
url: //your url,
success(data){
$('#inputText').val(""); //clear the text box on each call so that it won't append the data on every request
$('#inputText').val(data); //get the text-box id and append the response
},
error(data){
console.log(JSON.stringify(data));
}
});

See my comment first. The post response if possible should be a JSON list of objects I'm assuming employees. Then after success use jquery to manipulate(add or remove) the table rows and if that sounds complex. House the whole table in a div with id, when ajax returns recreate the table by replacing all said divs HTML with the new table. No need to refresh. However, since a request can take long or fail you need some animation (perhaps blockUI) to show activity and even handle failures

Related

Javascript or jQuery Gridview Filter

I have an ASP.NET GridView and multiple ListBoxes as Departments, Categories, Faculties etc. ListBoxes and GridView are filled from a database (MSSQL) in codebehind.
I need a JS or jQuery function that takes selected item's value and filters gridview rows by this value. For example, when a department selected from department listbox, it will show only the entries in that department (hide others).
I know, it is not a proper question without sample codes but i really need some hints in this case.
Thanks for help.
This might get you started.
jQuery
$("#ListBoxID").change(function() {
$("#" + GridViewID).find('td').not(':contains("' + $(this).val() + '")').parents('tr').hide();
});
Not that if your ListBox.SelectionMode is set to Multiple, $(this).val() will contain an array of selected items and you have to handle that as well.
You have a couple of options:
You could utilize jQuery Datatables (which takes your existing <table> markup that your gridview generates and powers it up with various useful options). Then you could make use of their API to add in your filtering logic. Here is an example:
http://www.datatables.net/release-datatables/examples/plug-ins/range_filtering.html
Another option is to code your own jQuery ajax call, that will fire when clicking on a list box item. It would then call a static Web Method (that returns string) in your code behind (and send the selected list box option as a parameter). Your static web method would re-query the database using the parameter value to filter the result. Then you would build a gridview in your code behind, data bind it with the query results, turn the gridview into a html string and return it as a response to your initial jQuery Ajax call. In the success: callback of your AJAX call you would grab the response html string and place it into the container html element that holds your Gridview on the page. More about this approach:
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ (explains calling the page method with jQuery)
http://encosia.com/boost-aspnet-performance-with-deferred-content-loading/ (slightly different example, it uses ASP.NET AJAX instead of jQuery AJAX to populate html on the page - but pay attention to the static Web Method - it demonstrates how to create a html string.)
If this all seems complex, you can use regular postback (not AJAX), by creating a selected index changed event on your listbox, that will re-query the database with the filtered option and rebind the existing gridview.
Hope that this helps

Load same results back button

I have a page tha displays results. The results are loaded into a content div via an ajax request on (document).ready. The results can be filtered using a form. On $(#filter_form).submit() the ajax request is made and the content div is populated with the filtered results.Up to here all is well.
Clicking a result will load the results details in a new page, non ajax load. On clicking the back button we go back to the results page,the form checkboxes are still checked, but the filters are no longer applied to the results. Obviously on document.ready the first, non filtered, ajax request is made and the non filtered results are loaded.
My initial idea was on page ready to check if any of the form elements are checked, and if they were, to submit the form. Problem is I have no idea how to make this work.
My script to load the filtered results is this:
$('#filter_form').submit(function(e){
e.preventDefault();
$.ajax({
url: '<?=base_url().'catalog/show_listings/?';?>'+queryString,
type:'GET',
data: $('form#filter_form').serialize(),
dataType: 'json',
success: function(listings){
$('#result_container').html(listings);
} // End of success function of ajax form
}); // End of ajax call
});
I managed to figure out how to check if any form elements are active :
var validate= false;
$('#requestfilter_from').each(function(){
if($(this).val() != '' || $(this).attr('checked'))
validate = true;
});
I just have no idea how to combine the two. I tried running the ajax request in the second script (dont have that script to post anymore) but it didnt provide any results.
Any suggestions or pointers would be greatly appreciated.
I think the problems boils down to saving the "state" of the filters (keeping track of which ones are checked even if the user leaves the page).
You can easily do this by appending query parameters to the url. For instance, if someone selects a filter checkbox1, you can append &checkbox1=true to the url. This way, even
when user leaves the page and hits back button, you will have &checkbox1=true in the url.
Now, you need to modify the initial loading of data to take query parameters into account.
So don't load all the data at the start. Instead, parse query parameter, prepare the url based on filters found in the query params and then fire the ajax query which loads initial data.
Here are the steps -
On selection of a filter, append query parameter to url.
On $(document).ready, parse query parameter, and
Make sure you update the input boxes, so they reflect the state of the filters.
For e.g, if &checkbox1=true was found in the url, make sure input[name=checkbox1] is checked.
Fire the initial ajax query with filter parameters
This comes with a bonus. Now, your users can also pass around the url with selected filters.
PS: Look into jQuery.param.querystring

Get elements of a query-set with a jquery get function. Django

In my django app I would like to display a text when a user clicks on a button, without refreshing the page. When the user clicks again, I would like an other text to be displayed, still without refreshing the page.
The informations (texts) I wan't to display are in a query set, named "information".
So I would like to know how to accomplish that.
Here is the way I try to do it:
I create a view where I store my query set:
def get_information (request):
information= Information.objects.filter(object1__id= X)
Then I create a jquery get function (in the template of the page where the user clicks) in order to get informations on this list:
function get_info(){
$.get('/mysite/get_information', {'information':information}, function(data) {
$('.information').html(data);
});
};
And then I render it in my template with a submit button and a onclick="get_info".
But I don't know how to make the request get a different information at each request, in order that the user does not get the same information twice.
Thank you a lot for your help.
Take a look in to Django Pagination. You could create the Paginator object in your view and then you can display message from the queryset based on the request from the client side. Let me know in case of any issues.

Making ajax call and showing contents in qtip

I am writing code for a dropdown list. The dropdown list is being populated from the data from the database. So I am making 2 ajax calls one is on event onmouseover to populate the contents of dropdown list and the other on selection of specific option making ajax call to bring related contents on the screen.
Now I want to make another ajax call to get the contents which can be populated on hovering over the specific option. The contents got from ajax call can be displayed in the small dialog box. For achieving this I have installed the qtip libraries.
Problem
I am not getting how the ajax call be made. Which even will be appropriate for achieving this? I know the qtip is loaded onload of the page. But since I want to make ajax call to get the contents of the message to be shown on hovering over the option. Any suggestions?
I have also read somewhere that you can't make more than 2 ajax calls at a time.
** The contents for the 3 ajax calls are different. And I have separate JSP files for each of them.
You could do this
$('.link').mouseover(function(){
$.ajax(
/* Retrieve de options for the select and fill each
title attribute with the information*/);
url: "retrieveinfo.jsp",
type: "GET",
data: ({id : 'itemsId'}), //pass the data in JSON form
dataType: "html",
success: function(msg){ //msg contains the html output or you could request XML (or JSON)
$('#info').html(msg);
NFinit();
tooltip.init();
}
});
That would make one AJAX call, populate the select and init niceforms and qtip.
When you make your AJAX call to get the dropdown list content, you can also return the descriptions you want to display for each list item and affect them to the corresponding qtip.
The qtip will show onmouseover, and with the description you have set when populating your dropdown list.

dropdown menu populated from a database in a client side page

I want to populate the data from a database using client side programming either HTML or javascript. I looked online and got lot of sites giving examples on server side i.e. JSP,ASP or PHP for creating the dropdown menu. I know the simple syntax for creating the HTML dropdown menu and in other languages. But I don't know how to populate that HTML dropdown menu values from the database. Any technique which either gets the data from the JSP page which fetches the data from the database and on selecting a single item triggers a query to JSP page which again fetches data from the database can work for me.
Problem: I want to access the database fields from a html page. The dropdown list of html page should be populate from the database and on selecting a specific value it should get data specific to that option.
Any ideas or links to the sources I should look at.
Just so you can get a general idea of the mechanism: How about an Ajax-call triggered by an event listener like this (could also use click event or whatever):
After the html-document is loaded, add an event listener to the watched element (here onchange) and call a function when the event is triggered:
$(document).ready(function() {
$('#watchedElement').change(callAjaxFunction());
});
Function for Ajax-call:
In the data variable you can send information to the server to decide there which options to send back. Easiest way (though quick and dirty) would be to return (like "echo" in php) the option values in plain text/html and replace the old option-elements with this. I prefer the JSON-ways described in the link from your question's comment, since you have a lot more control on the data but for a first impression you could try if the mechanism works for you in general:
function callAjaxFunction() {
$.ajax({
type: "POST",
url: url,
data: { "selectedValue": $('#watchedElement').val() }
success: function(data) {
$("#idOfSelectElement").html(data);
}
dataType: "HTML"
});
}
Just for testing purposes without any evaluation of the value sent to the server you could send back two dummy options like this (example is php file for simplicity and you even could use an html-file that only contains the text itself):
<?php
echo "<option value='test1'>Test1</option>" .
"<option value="test2">Test2</option>";
?>
Still it's probably better to go the JSON way and add element by element, which makes dbugging and stuff way easier later on.

Categories

Resources