How to pass a list of object to childwindow - javascript

I am working on a Struts 2 application .I have a JSP page in which i am iterating the object- list in a table with least information from the object, in each row i have a checkbox, by checking the checkbox and clicking on a print button i need to print all the information of that selected rows.
so i called a java script function with respect to the print button and collected all the unique ids associated with the rows and set it to a hidden field, then i opened a popup child window like: window.open("/../../printInfo.jsp","Browse",...).
in the child window i got the hidden field value using opener.document.getElementById(...)
but i am not getting the object list which i need to iterate in the child window with all its information(selected rows only). is there any way to get all the object list in the popup window without calling the action in the window.open() method.
or is there any other way to accomplish the task quickly.
any help/code/suggestion/comment will appreciated.
Thanks.

the java script code: not answer just code snipt-
function printAll(){
var checkBoxLength = document.getElementsByName('ids');
var checkedIds = "";
for(var i = 0;i<checkBoxLength.length;i++){
if(checkBoxLength[i].checked){
checkedIds += i+",";
}
}
//all the selected checkboxe ids
checkedIds = checkedIds.substring(0,checkedIds.length-1);
if(checkedIds.length <=0){
alert("Please select atleast one row to print.");
return false;
}
//value set to hidden field so that it can access to popup window
document.getElementById("checkedIdField").value = checkedIds;
//trying to assign a list to hidden field but getting error
document.getElementById("medicationList").value = <s:property value="medicalRecordClient.patientMedicationEntries"/>;
childWindow = window.open("/cascade/pages/jsp/medicalrecord/print_medication_detail.jsp","Browse","left=200,top=200,width=700,height=530,toolbar=0,resizable=0");
}

Related

Spring Boot Checkbox Array not working as expected

I have an array of checkboxes all with the same names which I submit to a Spring Boot Controller. I build a Bootstrap DataTable using Jquery/Ajax using data which receive from the database and test if I should select the checkbox when the page loads. I do this by using this code:
if (data['isChecked'] == "1") {
return "<input type='checkbox' name='fieldIdList' value='1_' checked>";
} else {
return "<input type='checkbox' name='fieldIdList' value='1_'>";
}
This code loops, so the next checkbox value will be 2_ and the next 3_, etc, etc.
When the page loads the table displays 10 rows and my first 2 checkboxes are shown as selected. This is correct.
Now when I submit this form without changing the state of any of the checkboxes to my Controller code below:
#RequestMapping(value = "/admin/dataTable", method = RequestMethod.POST)
public String postDataTable(#RequestParam("fieldIdList") List<String> fieldIdList){
return "";
}
I get 2 entries in my fieldIdList:
"1_"
"2_"
This is correct because only my first 2 checkboxes was checked. But when I uncheck any of the checkboxes and submit again, I get a funny result. In the example below, I unchecked the 2nd checkbox and then submitted the form again, my entries in my fieldIdList:
"1_"
"1_"
"1_"
"2_"
By unchecking the second checkbox and submitting, I suspected to get only 1 entry in my fieldIdList as "1_"
Also after I submit, the page is redirected the the previous page, so when I enter this page again, all the Lists are loaded as new, so there can be no previous values still stored in them.
Not sure if this is a Jquery/Ajax issue or Java issue or just a problem with the object between the chair and laptop :)
Because the DataTable is paging, I had to add this piece of code below in order to get all the rows of the DataTable. Not sure if this is causing the issue.
// Handle form submission event
$('#manageFormFields').on('submit', function (e) {
var dataTable = $('#formFieldsDataTable').DataTable();
var form = this;
// Iterate over all checkboxes in the table
var tableData = dataTable.$('input, select').serializeArray();
$(form).append(tableData);
$.each(tableData, function () {
// If element doesn't exist in DOM
if (!$.contains(document, form[this.name])) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
The generated HTML:
Thank you for your time.
I am truly sorry for wasting your time.
It turns out I was adding the list of rows twice to the Datatable. Thus there were 2 fields with the same name and value. When I uncheck the one, the other one is still present and that is why the controller still picked it up.
I could not see this in the HTML output because the source only shows what is visible on screen(the first 10 rows).
So when I paged through all the rows I noticed another checkbox was checked and then saw that I added the rows twice.
Removing the duplicates fixed my problem.
Thank you!!

Student search project jquery / javascript

I am doing a project that requires me to add a search bar to a page that has a list of students names and email addresses and once the form is submitted only show students who have the characters typed in the search bar either on email address or student name.
So far I have the search bar appended and have started a function that listens for the click event on the button and adds the value from the input to a variable.
I thought I could do an if statement that checks if the list item contains the input variable I created and just add a class that I can then do another if statement later to hide or show based on what class it contains.
$(document).ready(function() {
//set number of students to show on each page
var inputValue;
var showStudents = 10;
//append search bar to the page
$(".page-header").append('<div class="student-search"><input placeholder="Search for students..."><button>Search</button></div>');
//add pagination to the page
$(".page").append('<div class="pagination"><ul></ul></div>');
//make page display 10 students at a time
//make search input only show students that contain that letter.
//use contains to add an ID?/class? to the student list item that matches the value in the input field.
//display the students that have said ID/class and hide the others.
$("button").click(function() {
//store the value of the input search into a variable
inputValue = $("input").val();
console.log(inputValue);
//filter the list items by the input value and add CSS
if ('.student-details h3:contains(inputValue)') {
$('.student-details h3').addClass('showstudent')
}
});
});
Obviously my issue is that once I write this it adds the class to all .student-details h3 items, not just the ones that contain the inputValue, and I cannot use "this" because it just adds the class to the button. Is this the best way to code this? Should I just convert my students list to an array and have the value of the input search the array and return the results into a new array? I am sort of lost here! Thanks for any help.
You can try this approach:
$('.student-details h3').each(function() {
if ($(this).text() == inputValue) {
$(this).addClass('showstudent');
}
}

Show modal on click using AJAX and JavaScript

Having an issue showing a modal window after I have parsed the JSON and placed the values into a TABLE TR.
$('#serviceload').change(function() // on dropdown select change
{
var page = $('#serviceload').val(); // dropdown selection set to page
if(page == "")
{
$('#completeProfile').hide(); // if page is blank, hide content
}
else
{
$.post('api/vesselSearch.php', {page: page}, function(data)
{
var obj = JSON.parse(data); // parse the data
$('#vesselinfo').empty(); // clear previous vessel content
var htmlToInsert = obj.map(function (item)
{
return '<tr><td>Edit</td><td>'+item.VESSEL_NAME+'</td></tr>';
});
$('#vesselinfo').html(htmlToInsert); // insert new vessel content
});
$('#completeProfile').show(); // show all content on page
}
});
As you will see above, after the JSON is parsed, I display the values in a TABLE row, which may have more than 1 row. The first TD cell contains a hyperlink which should open my edit modal.
The code to transfer the data from the row and display it in the modal looks like this:
$('#editVesselLink').click(function(e)
{
e.preventDefault();
$('#editVesselForm input').val(''); // clear previous values
$vessel= $(this).attr('data-vessel');
$('#editvesselname').val($vessel);
$('#editVesselInfoModal').modal('show'); // show the modal
});
Here is where my problem begins.
I am not sure where to place the code directly above. I have placed it inside the $.post beneath $('#vesselinfo').html(htmlToInsert);, and that was the only place I could get the modal to even open, but only for the first record.
Basically, I can only get the modal to open for the first record when I place the second piece of code inside the $.post . The modal will not open at all in any other place that I put the code.
I tried to use a $(document).ready(function{}); to no avail.
What am I missing?
Ok, I think that the problem is on:
...
return '<tr><td>Edit</td><td>'+item.VESSEL_NAME+'</td></tr>';
...
You can not repeat id property on the code, so, where is id="editVesselLink" put class="editVesselLink" and on $('#editVesselLink') put $('.editVesselLink')
why did it happens?
By HTML convection's the id have to be unique on HTML, so jQuery expects to recover only one element with that id, by default jQuery recover the first with that id if it is duplicated

edit a textarea in jquery popup box

I have a div in which contents are displayed in ordered list with a checkbox for each. these are displayed by fetching from the database. now i need to display the content near to the selected check box. what i did so far is
1) only one check box can be selected at a time
2) get the id of the check box which is selected stored to variable ids
3) then paragraph content id = "p"+checkbox id
The code is:
$(document).ready(function(){
$(':checkbox').bind('change', function() {
var thisClass = $(this).attr('class');
if ($(this).attr('checked')) {
$(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
}
});
});
function edit_temp(prt){
var checkedAtLeastOne = false;
$('input[name="check_clinic"]').each(function() {
if ($(this).is(":checked")) {
checkedAtLeastOne = true;
ids = $(this).attr('id');
}
});
if(checkedAtLeastOne){
p_id ="p"+ids;
alert(p_id);
}
else{
alert('Please select any clinical Interpretation');
}
}
So far this is working perfectly. but now i need to display the content of the <p> tag with id p_id in a text area inside a popup window. and then edit the text and by clicking the update button of popup box that content must be updated in db.
can anyone help me to find a solution for this.
You need to create a php file that will receive the row id from database and prints it to textarea in a form. and when user clicks submit the form action will update the db. Here are the step by step guide what you need to do:
Add an "a" tag which opens popup.php?id=1 (where 1 is the id of the row)
Create the popup.php file, which fetch record from database
Add a form element with textarea and submit button in popup.php and populate your textarea with the value fetched in step 2
Either create a new file called update.php or check if the page has post request in popup php and update the value in db with the given id and textarea value.
Hope this will help you to finish.

How to get a Javascript Chained Menu Output Values of Selected Drop Downs after Submitting Form?

I am using this script Dynamic Drive Chained Menu and what I am trying to do is when someone clicks the "go" button the values of the selections made display in a text box with a message that says something like "You have selected:"
I've changed the main part, from the alert is up to you :)
function goListGroup(){
var options = [];
for (i=0;i<arguments.length; i++){
if (arguments[i].selectedIndex!=-1){
options.push(arguments[i].options[arguments[i].selectedIndex].value);
}
}
alert(options);
}
Don't forget to set the value attribute on the option element!

Categories