Dynamic Divs in jsp - javascript

I'm trying to create a page that will be rendered in steps. A user selects a certain option and the next div is dynamically rendered on the jsp page depending on the values selected. for example
MyPage.jsp
<input type="button" onclick="somejsfunction();" value="Select Choice" />
somejsfunction() issues a POST to the server and sets some values in the session. I then need to render a div in MyPage.jsp. I'm thinking i could always just spit out the HTML code from the post call and then append it to the document body in somejsfunction() but i was wondering if there is a cleaner way to do this? Thanks

It is much cleaner with jQuery
function callMe(){
$.ajax({
type: "POST",
url: "/someServlet",
data: { methodToInvoke: "sayHello" , data: "Abc" }
}).done(function( msg ) {
//msg is the HTML received from server
$("#someDivId").html(msg);
});
}

Related

how to display different div when i returned from servlet?

i have a jsp file with different div. First i display a div with login page after logged in it goes to servlet page and return back to same jsp page. My question how to display the different div after returning from the servlet?
Code snippets would have helped.
From what i get, you are trying to display the same JSP to the user, before & after logging him in, but providing a different view/div.
You can leverage the fact that once a user is logged-in, a flag/user object is usually added to the session/response(or you can add the same). You can then use this to block/display your div respectively.
First make the div display none
Then send data using ajax to ur sevlet
$('#button id').click(function() {
$.ajax({
type: 'POST',
url: '..yourservlet',
data:your data,
success: function(data)
{
$('#div id you want to display').style.visibility = visible:// this will display ur div
}
});
});

Form doesn't serialize after Ajax insertion

Tearing my hair out over this. I have a 40 rows of simple forms that are being generated dynamically from a mysql database. Each form has a unique ID based on the database ID. After clicking submit the results get updated in the database and inserted into the div (#result).
Works the first time perfectly. However after the first time the script won't serialize the updated form data. The ID is fine (checked via alert) but the formData is empty (also checked via alert).
Thinking I need to re-target the form somehow? Any help would be greatly appreciated. Thanks.
$('#result').on('click', '.submitform', function () {
var id = $(this).attr('id');
var formData = $('#'+id+'-form').serialize();
$.ajax({
type: "POST",
url: "ajax-process-form.php",
data: formData,
cache: false,
success: function(server_response){
$("#result").html(server_response).show();
}
});
return false;
});
Just reasoning... I might be wrong...
This code
$('#result').on('click', '.submitform'
binds to the click event on result and filters .submitform, then executes with this being the .submitform
when the success comes from the server, you are rewriting #result
$("#result").html(server_response)
if server_response does not contain a .submitform then next calls to the first onclick event will not execute because .submitform does not exist anymore inside #result
If this is the error, then to solve, use another div to show the result instead of #result or bind click to another separated, not contained within div
Arrgh - it was the structure after all. Although it worked the first time the table structure prevented it from working a second time. I have no idea why ... but there you go. Thanks for the help!

Send Input box value in ajax call

I want to send my input box value in my ajax call.
I am trying but not work.
My Input box
<form>
<input type="text" onkeydown="filter()" id="searchTxt" placeholder="Filter" value="" >
</form>
My Javascript code
function filter()
{
filterText = $('#searchTxt').val();
$( ".pagination" ).html(totalOutput);
$.ajax({
type: "POST",
url: ""+baseUrl+"userList4",
data: { searchText: filterText},
success: function(msg) {
$(".paginateData").html(msg);
}
});
}
Here filterText = $('#searchTxt').val(); always get null
The code to get the value is correct. So, I would say there is another issue here outside of the code you have shared. It could be jquery can't find that field. Try outputting the length to make sure jquery has actually found that text box.
var textBox = $('#searchTxt');
console.log(textBox.length);
You could also just pass 'this' to the method and not have to use jquery at all, which I would suggest.
Another issue could be that the onekeydown is getting called before the text has even reached the textbox. So at the time the value would be null. But I would assume you tested with more than one keystroke?

Specific pop up with ajax and query from database

I use in a form a simple radio button with "YES" or "No", I wish that when I click yes a pop-up window will be automatically shown with this specific message:
Are you sure you want to sell a new membership to [User’s Full Real Name from database] with the number [ number of product from database ] ?
That means at the same time an ajax query will be established to return the name of user and the number of product from database.
I'm not very good in JS/Ajax, can anyone help me with this?
Edit :
I know to do what you wrote in the message bellow,what I'm not sure is how to run the pop-up window automatically when I choose "yes" radio button?
To use ajax, you first need to create a server-side function that does what you need. For instance, a php script that takes a userID and returns the user's full name. Let's suppose you create that script and call it "username.php".
On your page, you'll use a javascript function, such as the jquery .ajax function to send an asynchronous request to username.php. The function call will look something like this:
function lookupUsername(){
$.ajax({
type: "POST",
url: "username.php",
data: { ID: $("#userID").val() }
}).done(function( msg ) {
alert( "Username: " + msg );
});
}
In the above example, I've assumed that the user ID is embedded somewhere on your page in an element with ID="userID". The term $("#userID").val() is a jQuery function that looks up the value of the HTML element called "userID".
Next, you need to call the lookup function when the yes radio button is clicked. So something like:
<input type="radio" name="foo" id="foo" value="yes" onclick="lookupUsername()" />
Note that to use the JQuery framework (The .ajax() function and the $() selector function, you need to include the JQuery framework on your page:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
It's totally possible to do an ajax call without jQuery, but the code is a little messier.

Executing Javascript to populate a drop down before HTML page loads

I have 2 Drop Downs in a HTML form. The first dropdown needs to be populated with a list of usernames present in the DATABASE.
Secondly, Depending upon the selection made in the first drop down, I then need to run another JS script to make another call to the DB to retrieve the list of associated addresses to that username.
Can you please let me know whats the best way to achieve this objective?
1) How can I run a JSscript before the HTML form loads to return that list?
2) Should I get both the usernames and associated addresses in one Db call or just get the usernames first and then use onChange event on the first dropdown to execute the second call?
Any code would be most appreciated.
Thanks
well if you have all the info in same table then why dont you get all data in one go by querying as to the DB and then sort and put up data in the elements the way you want.
the other way will need to query DB 2 times.
here you can create your HTML to server call OR you can make HTML locally.
i have created options for selectbox at server and innerhtml to locally.
<select id="selectbox1" onchange="getData(this)"></select>
<select id="selectbox1"></select>
$(document).ready(function() {
$.ajax({
url: 'http://localhost/getUsername.php',
success: function(data) {
$('#selectbox1').html(data);
alert('Load was performed.');
}
});
});
function getData(selData) {
$.ajax({
url: 'http://localhost/getSecoundCall.php?id='+selData,
success: function(data) {
$('#selectbox2').html(data);
alert('Load was performed.');
}
});
}

Categories

Resources