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.
Related
There is a list of Accounts on the page and there is an edit button after every Account. When that button is clicked data gets populated in the form below the list. This multi-select box is present in that form.
When the list of account gets loaded and the user selects an account from the list the multi-select box gets populated with the selected elements from the database for that particular account. If the edit button is clicked again without reloading the DOM, the multi-select box does not get populated.
The point is I am selecting the elements using below jQuery code:
var itemValues = $('select[name^="item"]').find('option');
$.each(itemValues, function(key, teamVal) {
$.each(selectedRow.item, function(key, values) {
var arrval = teamVal.value.split("_");
if (arrval[0] == values.teamId) {
$('select[name^="item"] option[value="' + teamVal.value + '"]').attr("selected", "selected");
}
});
});
The statement $('select[name^="item"] option[value="' + teamVal.value + '"]').attr("selected", "selected"); only selects the elements for the first time in the multiselect box when the DOM is loaded.
It is not selecting the elements the second time, ie. when the user clicks on the edit button for the same account again. You have to refresh the page. This means the above select statement is not working for the second time.
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
I am pretty new to coding php and javascript but have manged to scrape my way through so far. However, I have hit a wall. I'm not 100% sure that what I'm trying to do can be done, or that I'm even attempting it in an effective way.
I have a dynamically filled table, made of rows from a SQL statement using php. On each row is a radio button, each one given a unique value based on the row number (a unique value in one of the database columns). I am attempting to program a button that enables the user to pass a selected radio button value to a separate php enabled page that will allow the user to edit the row information using the unique row value. Also, i used the confirm option, because I would also like to add an if else statement that allows the user to cancel, if the wrong row was selected (I haven't attempted that yet because I haven't been able to get the value to pass).
Page button
<input type="button" id="edit_order_button" value="Edit Order"></input>
JQuery page
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
var r = confirm("Confirm Order Number to edit: " + selected);
$.post("php/editOrder.php", {
selected1: selected
}, function(data,status) {
//alert("Data: " + data + "\nStatus: " + status);
window.open("php/editOrder.php","Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
});
});
});
PHP end destination
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
require('config.php');
$selected2= isset($_POST['selected1']) ? $_POST['selected1'] : ''; // Fetching Values from URL
echo "Selected Row number is ".$selected2.".";
mysqli_close($connection); // Connection Closed.
?>
I have tried a few things but have so far been unsuccessful in getting the new window to load with the value of the radio button passed. Currently, the window loads, but the new window only displays the echo text, no variable. When I run with the alert popup, the data shows me the value of the selected row but it does not seem to be posting to the new page prior to the window.open command. Any tips would be appreciated, or if i'm approaching the problem from a wrong angle, any insights would also be great. I have also tried debugging, thinking I was missing a parentheses or semicolon but I wasn't able to find anything. Thanks
Looks to me like you can get rid of the post statement altogether and just pass the selection to the newly opened window.
$(document).ready(function(){
$("#edit_order_button").click(function(){
var selected = $("input[name ='order_edit_select']:checked").val();
// only open window if order okayed
if ( confirm("Confirm Order Number to edit: " + selected) ) {
window.open("php/editOrder.php?selected1=" + selected,"Edit Order","menubar=1,resizable=1,width=750,height=600, left=250, top=50");
}
});
});
php/editOrder.php:
$selected2 = $_GET['selected1'];
echo "Selected Row number is $selected2.";
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");
}
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!