Making ajax call and showing contents in qtip - javascript

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.

Related

How to display ajax list response on html using jquery?

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

Ajax call not working for dynamically added content

I have successfully done ajax calls before for situations like this in a form:
User selects a 'category' from a list in a select box. Ajax is fired off when selection is made, which updates a second select box with all items related to the selected category.
I know how to successfully do that thanks to the answer found here.
What I am now doing is dynamically adding new nested form fields with the nested_form_fields gem. Here is a snapshot:
So every time the user selects "Add Service", the nested_form_fields gem generates a new nested form with two select boxes (a service category select box and a service provided select box as pictured above).
It works fine. The issue I am having is firing off an ajax request for this dynamic content when the user chooses a service category.
When a user selects a service category, I want to send an ajax call, which updates that second select box with all the services related to that service category.
The issue is that the ajax request is not firing off at all. The server is not getting any requests when the user selects a service category. I think the issue is that since these nested fields are generated dynamically, the javascript does not have the opportunity to bind the ajax request to the new nested fields' service category select box.
Here is my javascript:
$(document).ready(function(){
$("#service_category_selection").on('change', function(){
$.ajax({
url: "narrow_service_by_service_category_selection",
type: "GET",
data: {service_category_id: $(this).val()},
success: function(data){
/* ... */
}
})
});
});
I think if I was somehow able to make this javascript run every time the html in the page changed (ex: when new nested form fields are added), then the javascript will able to bind that ajax call to the new service category select box.
Well only one element can have the id, so you need to reference it with a class. event delegation will capture the new elements. Since you did not give HTML structure, I had to keep the answer for finding the second select generic.
$(document).on("change", ".service_category_selection", function () {
var select = $(this);
$.ajax({
url: "narrow_service_by_service_category_selection",
type: "GET",
data: {service_category_id: $(this).val()},
success: function (data) {
var secondSelect = select.closest("parentElementSelector").find(".classForNextSelect");
}
});
});
You should be able to use a delegated event handler instead of a direct one. Just change
$("#service_category_selection").on('change', function...
to
$('body').on('change', '#service_category_selection', function...
You can read more about this in the jQuery docs here:
https://api.jquery.com/on/#direct-and-delegated-events
HTH!

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

how to postback and show a div on hover and get information from the database

I use ASP.NET, and would like to list a set of results in a table. The table will have output a link of people's name which are generated from the database. What I would like is when you hover over the link, then it would display a small div which will populate a few results which is generated from the database. What methods and tecnhiques can I use to postback on hover, and retrieve info from a ASP.net function?
You can use jQuery ajax for this: It is a very good way to handle browser requests dynamically with server side code.
jQuery('#link_element_id').hover(function(){
$.ajax({
type: "POST or GET",
url: "url",
datatype:"json or xml", // check more option
success: function(data) {
// handle response data
jQuery('#div_id').show();
},
async: true
});
});
For more details check these links:
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/category/ajax/
You could look into using jquery's $.get() function and calling a webmethod that returns json data or even html that you could then use to load into your div and then display on hover.

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