Best Practice For Storing/Reusing Ajax Responses - javascript

I'm developing a spring boot application where on certain pages I have onclick triggers which use AJAX to make requests to obtain data from my database. For example, when a user clicks on a group in the main menu, AJAX will make a request to pull this group and dynamically display it on the JSP page as follows.
$(document).ready(function () {
$(document).on("click", ".group", function () {
var groupName = $(this).text();
$(".groups").hide();
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: "GET",
url: "/viewGroup",
data: {"groupName": groupName},
success: function(result){
var members = result["groupMembers"];
$(".focusContainer").append('<div class="groupView">' +
'<p>'+result["groupName"]+'</p>' +
'</div>');
$.each(members, function(index, value){
$(".groupView").append('<p>Group Members</p>'+
'<p>'+members[index]["username"]+'</p>');
});
$(".groupView").append('<button class="button addButton" id="addFocus" type="button" onclick="addFocus()">Add A Focus</button>'+
'<div class="break"></div>'+
'<button class="button cancelGroup" id="deleteGroup" type="button" onclick="cancelGroup()">Delete Group</button>');
}
})
});
});
Additional buttons are generated (addFocus) which can for example add members or target goals to said group, however these must be retrieved from the database as only members or goals related to these groups should be able to be added to them.
What is the best practice for retrieving this data after the group is initially selected (After the first AJAX request retrieving the Group data)? Should the members/goals of the group be appended into some hidden div and shown when the relevant buttons are clicked? Should I make another AJAX request when the add focus/member button is clicked? Or should the response of the initial request be stored in a global variable and used by the other .onclick triggers? I'm unsure of what issues could be encountered if storing the response globally in my .js file.
Currently I'm doing a new request for each click but I imagine in production this would become very taxing on the server and cause slow speeds. I've also seen a lot of mention about making asynch:false however there appears to be a lot of debate about whether this is a good design choice or not. Any guidance would be appreciated.

Related

AJAX Function Not Respecting Local or Global Variable

I'm new to jQuery and am struggling to figure out an issue that's plaguing me.
In my code, I am appending a new form after a DIV, and have set up a custom button for submission. I set up an on-click jQuery event, but am having trouble accessing one of the local variables successfully.
....
callbacks {
open function() {
this.wrap.on('click.pinhandler' .socialLink', function(e) {
var fileName = $(this).attr('fileName');
var eventName = $(this).attr('eventName');
var destination = "test#test.com";
$(".test-area").after('<input type="email" id="emailShare" placeholder="enter your email">
<div id="btnSubmit"><div id="btnLabel">GO</div>
<script>
$("#btnSubmitA").on("click",
function(event) {
destination=$("#emailShare").val();
console.log("About to send mail: " + destination);
$.ajax({
type: "GET",
url: "https://myURL/api.php?fileName=' +fileName+ '&eventName=' +eventName+ '&destination=' +destination+ '",
headers: { "Access-Control-Allow-Origin": "https://babelandphoto.com/babeconnect/getShortcode.php" },
cache: false,
success: function(data) {
console.log("Response:" + data["status"] + this.destination)
}
});
});
</script>');
});
}
}
...
This is all embedded in a callback from a Magnific Popup button, in which a user clicks a button within the popup and the above is triggered. In my code, I am setting the global destination variable with the code;
destination=$("#emailShare").val();
Just before my AJAX call, I am logging the state of destination, with successfully reports the proper user input of the #emailShare text field. I am logging like so;
console.log("About to send mail to " + destination)
Both before the call, and in the response, I am successfully logging the proper variable. But the actual variable being sent to the API is still the global variable, having never been updated.
I recognize this is complex, but I"m unsure if there's a better way...
For anyone that stumbles across this, #taplar's comment in the above question got me on the right path. Specifically, this Stackoverflow post, discussed how to bind to dynamically created elements.
By refactoring my code, I ended up using the following;
$(document).on('click', '.doSocial', function(){
//stuff happens here
});
In my case, .doSocial is a class applied to dynamically created buttons. Once the user clicks a .doSocial button, I use the //do stuff here section to add my additional dynamic HTML elements, including the form field which is now recognized by my AJAX function. If #taplar would like to answer, I'll happily mark it as correct.

jquery mobile - how to pass a parameter when moving from one data-role page to another?

I'm writing a small and simple jquery-mobile app.
The first page is a list view of categories, which is populated by json retrieved from an ajax request.
The second page should be called when the user clicks on one of the categories.
It should open with a list of items that will also be retrieved by an ajax request. The request should get a category_id as a parameter.
I'm planning on using the multi page pattern (multiple pages in the same html).
This is my js code:
$(function() {
initListByUrl($("#categories_ul"), 'http://localhost:3000/categories');
});
function initListByUrl(id, requestUrl) {
$.ajax({
url: requestUrl,
type:'GET',
dataType:'json',
success: function(data) {
var items = []
$.each(data, function(i, elem) {
items.push('<li id="cat_li_'+i+'">' + elem.name + '</li>');
});
id.html(items).listview('refresh');
}
});
}
and the id of the category is another field in elem, lets assume - elem.id.
How can i pass this id as a parameter to the code that will build the second page?
Should I use session storage?
You can use javascript stack to push and pop the data required for every page, like for instance you can push the elem.id in the calee and then pop and use the elem.id in the page called or viewed.
var stack = [];
stack.push(3);
var data = stack.pop();
alert(data);
I've created a plug-in under the MIT license which is compatible with jQuery Mobile 1.4+. The plug-in allows you to use URL parameters to communicate between pages. In addition, since the data is in the URL, it handles page refreshes as well as the user going directly to a specific jQuery Mobile page in your app. You can find it here on GitHub.

Generic Way of Capturing Page Title, Control labels

One of our customers has a new requirement to dynamically capture the page/screen title and the labels of all the controls(textboxes, checkboxes, radio buttons, normal buttons,link,images,menu/menu items) on the page the users interacts with and then push them to an excel file.
If customer navigates/opens a page A and sets a value in the textbox Name = John , enables the checkboxChBox/radio button Rbutton and then finally clicks save/submit button, then the following output is being expected. User Action and Results being the first 2 columns of the Excel file.
**User Action** **Result**
Open Page/Screen A Page/Screen A is displayed
Set textbox Name = John Field Name is set successfully
Set ChBox = true ChBox is enabled successfully
Set Rbutton = true Rbutton is enabled successfully
Click Submit button Page B is displayed
Just wondering if it is possible to accomplish this and generic way of capturing the user interactions of any page.
Just an idea : you could listen all events (with jquery, for example), and then post an ajax request for each 'interesting' event (you have to filter...), store it in a database, and then add an 'export' function in csv or excel format.
Maybe some performance issues, it depends on the amount of pages, events and users...
The idea to use class name to filter is good, thanks to Hasan Iqbal Anik.
Javascript doesn't have access to writing files in hard drive. However you can capture the data, make a model and then store it in the server using ajax calls.
Some ideas:
Use a layout or master page that is rendered throughout the application views.
Give same class name for all the page labels, buttons, checkboxes and anything you need to store information about.
Use some jquery magic in the master/layout page to get the values of those elements and make an array.
Send that array through ajax call to the server.
Now you can get tons of examples of how to get element values using jquery. I'm saving you from giving all that. Hope that helps... :D
//edit: i'm trying to extend my answer as per steve requested.
<form action="someAction" id="myForm">
Name: <input type="text" class="Name">
Checkbox: <input type="checkbox" class="ChBox"/>Click this box
RButton: <input class="Rbutton" type="radio" />
Submit: <input type="submit" class="submit"/>
</form>
Now some jquery:
$(function() {
$(".submit").click(function(){
var dataToSend = new Object();
dataToSend.pageUrl = window.location.pathname + " is displayed";
if ($(".Name").val().length > 0) {
dataToSend.Name = "Field Name is set successfully";
}
else {
dataToSend.Name = "Field Name is empty";
}
if($(".ChBox").is(':checked')){dataToSend.ChBox = "ChBox is enabled successfully";}
else{dataToSend.ChBox = "ChBox is not enabled";}
if($(".Rbutton").is(':checked')){dataToSend.Rbutton = "Rbutton is enabled successfully";}
else{dataToSend.Rbutton = "Rbutton is not checked";}
dataToSend.Submit = $("#myForm").attr['action'] + " is displayed";
});
//now send it to the server via ajax
$.ajax({
type: "POST",
url: "your server action url that would make excel file with these data",
data: dataToSend,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//do as you wish
}
});
});

How can I make an AJAX refresh like Gmail's inbox?

I'm making a messaging system and I am currently reloading the content of the div holding the messages every 10 seconds using jQuery's .load(), but I have a problem: When trying to make a "Select all" button, "Delete selected" button, etc. when that 10 seconds comes up it reloads the buttons and it reloads the messages, so the messages get deselected because of the reload.
What I would like to know is how to make it actually load in new messages, but not actually reload the whole div. I know that Gmail does not reload the whole div because it works properly.
This is my JavaScript function that reloads the div and changes the page title (that has inbox count) so it stays updated:
function title() {
setTimeout("document.title = $('#heading').text();", 500);
}
function ajaxStuff() {
setTimeout("$('#heading').load('/employee/message/inbox.php #h1_head'); $('#messages').load('/employee/message/inbox.php #messages_inner');title();ajaxStuff();", 10000);
}
ajaxStuff();
Here is how I have the inbox set up:
Basically what I want to do is load in new messages with AJAX but somehow not refresh the div. I tried looking at Gmail's source but there's too much to go through and they make it confusing with a bunch of random classes and IDs.
Note: I have searched this on Google for a while now and did not find anything.
In response to comments:
I don't think a tutorial is warranted here. Change your server code to return the "new" messages with a class="new" attribute, then use:
$.ajax({
url: "/employee/message/inbox.php",
success: function(result) {
$(result).find(".new").prependTo("#heading");
}
});
Of course, that code may need some modifications to fit your environment/return data.
When checking for new messages send an ID of the newest message in your request. Then your php will return only everything newer that you add to your existing data.
jQuery.ajax({
type: 'get',
dataType: 'text',
url: "/employee/message/inbox.php",
data: {
from_user : from_user,
to_user: to_user,
message_id: message_id,
something_else_you_need_to_send: its_value
t: Math.random()
},
success: function(data, textStatus){
// whatever you need to do with the result returned from php (server)
}
Then in your sql query you do
select * from table
where user_id=user_id_from_ajax
and message_id > message_id_from_ajax`
update
in your php you use
$from_user = $_REQUEST['from_user'];
$to_user = $_REQUEST['to_user'];
$message_id = $_REQUEST['message_id'];

How to Make a Feed From User Submitted Posts

I'm trying to figure out how to use AJAX to create a Twitter-like feed that displays user's posts on the same page immediately after they push the submit button. It would be an infinite-feed site that would have a "more" button at the bottom.
All I'm trying to make is a simple page containing a textarea box with a submit button and to have user submissions appear below the box as they are submitted.
If possible, a walk through or discussion of the script needed to do this would be great.
Thanks so much
All you need is a server-side script with an SQL query that would return newer posts.
have your javascript store a variable of the date or of the last post id (used PHP for clarification):
result = mysql_query("SELECT ID,POST FROM POSTS WHERE DATE>" . $_GET['date']); //or use WHERE ID> $_GET['id']
while(rows[] = mysq_fetch_array(query));
print json_encode(rows);
now you have a server-side script that will return new posts, so all you have to do is write javascript function for the more button:
updatePosts = function () {
$.ajax({
url: 'serversiderUrl?lastId=' + last_id, //last_id is global variable for the id of the last post on the page
success: function(data){
data = JSON.parse(data);
for(i in data){
$('#posts_container').append(data[i].post); //do your appending functions here
last_id = data[i].id;
}
}
}
now for posting new entries create a server-side script of your favorite language that handles new posts:
result = mysql_query("INSERT INTO POSTS VALUES(''," . urldecode($_POST['POST']) . ")");
now for the client side:
submit_post = function(){
$.ajax({
type: 'POST',
url:'yourposturl',
data: "post=" + encodeURIComponent($('#textArea').text()),
success: function(){
updatePosts(); // call the function that update the posts so the new entry is now added to the page
}
});
}
Now bind the functions to the appropriate buttons when the document is fully loaded:
$(document).ready(function (){
$('#moreButtonId').click(updatePosts);
$('#submitButtonId').click(submitPost);
});
There are many ways such as the submit button kept sending it to the database while we'd append text to a container underneath. Or we can update the container underneath to create a container (page) that are similar, after the ajax response is successful then we append the data to the container beneath
$.post(url,function(data){
//Here you can append the data responsed by the ajax request to the container underneath
});
But you have to have a exactly same view with a conatiner (feed container) existing in the currently page

Categories