Currently I have a pop up form they shows a list of data, and I wished to refresh the parent page after the user closes the pop up form. I have look at a few stackoverflow examples and mostly is asking me to use
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
But I tried using those codes in my files and it didn't work. Anyone got any other method or anyone can guide me which part should I enter my code into.
HTML
<div id="login_form">
<table border=1>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
<th>Pay</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>
<tr>
<td id="milestone_2">
</td>
<td id="percentage_2">
</td>
</tr>
<tr>
<td id="milestone_3">
</td>
<td id="percentage_3">
</td>
</tr>
</table>
<div class="err" id="add_success"></div>
<input type="button" id="cancel_hide" value="Close" />
</div>
JS
$(document).ready(function(){
$(".login_a").click(function(){
$("#shadow").fadeIn("normal");
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
var m1 = (data.mileStone1);
var m2 = (data.mileStone2);
var m3 = (data.mileStone3);
if(m1 != ''){
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
}
if(m2 != ''){
$("#milestone_2").html(data.mileStone2);
$("#percentage_2").html(data.percentage2);
}
if(m3 != ''){
$("#milestone_3").html(data.mileStone3);
$("#percentage_3").html(data.percentage3);
}
});
$("#login_form").fadeIn("normal");
$("#user_name").focus();
});
$("#cancel_hide").click(function(){
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
});
});
If you simply want to reload your page when user clicks the close button then you can do something like this:
$("#cancel_hide").click(function(){
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
location.reload(true); //true, so it will not reload the page from browser cache
});
Note: I assume #cancel_hide is the button that is used close the pop-up..
Related
When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});
I want to get a data from listing and retrieve to popup.. when I use getElementById, it will only get a single id from another input. not from listing that i want.. so, I've come an idea to use array.. but I don't know how.. I'm using Java Play Framework
here is my code..
display.html
<script>
function openModifySchedule(staffId) {
if (!checkRequiredField()) {
alert("There Is Error(s) In The Form. Please Fix It Before Proceed.");
return;
}
var staffId = document.getElementById("staffId").value;
if (staffId == "") {
alert("Please Select Doctor Before Proceed");
return;
}
var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId;
mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes");
mywindow.moveTo(420,100);
}
</script>
<input type="hidden" id="staffId" name="staffDetails.staffId" value="${staffDetails?.staffId}">
<tbody>
#{list items:staffScheduleList , as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td id="scheduleDate">${stffSchedule.scheduleDate}</td>
<td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td>
<td id="staffName">${stffSchedule.staffName}</td>
<td id="deptName">${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
</tbody>
here is the function in controller..
display.java
public static void modifySchedulePopup(String staffId){
StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first();
StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first();
renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules);
}
hope someone can explain.
In the DOM, no two elements may have the same id attribute. Since all of the "td" elements in your table have id="staffId", getElementById() is free to return any one of them.
Since Play! comes with JQuery, you might was well use that instead of straight JavaScript (it's much easier). Briefly, you attach the same "click" event handler to all of the links and the click event handler knows which element was being clicked.
Here's simple snippet that demonstrates this:
<script>
$(function() {
$(".staff-id").click(function() { // attach the click event handler
var staffId = $(this).text();
alert(staffId); // open your new window here
});
});
</script>
#{list items:staffScheduleList, as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td>${stffSchedule.scheduleDate}</td>
<td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td>
<td>${stffSchedule.staffName}</td>
<td>${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
could anyone help me on my code?
I try to make a sample code on the following action:
1. when the user click on the button, the "hello" will take cell 1 and cell 2 while the other cell 3 to 10 will remain.
2. When the user click on the button again, nothing happen.
I try to set a flag to false after the user click on it to let nothing happen if user click again; however, it doesn't work at all. The user can click until the first row's cells deleted just left "hello".
Any solution in javascript or JQuery? I try to search for static variable in javascript but seem impossible.
Thank you in advance.
var flag = false;
function clickhere(){
if(flag = true){
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
flag=false;
}
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();"/>
You have a couple of opportunities to address. Firstly, your if is doing an assignment rather than a a comparison. Since your flag is a boolean we can use it directly. Secondly, your initial assignment and the one at the end of the function should probably be opposite.
Here is one way you might correct things.
var flag = false;
function clickhere(){
if(flag){ return; }
flag = true;
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();" />
I'm having problem trying to set the value for an input using jquery, basically you click on a link, and it takes you to a different page with a form, and I'm trying to set the value of one of the inputs of that form. I don't know why is not working. Here's my code:
page 1 (where you click the link that performs the function to set the value of the input)
<table class="tablaObjeto">
<tbody>
<tr>
<td>
<img src="img/ps4Mall.jpg">
</td>
</tr>
<tr>
<td class="precio">
<p>$<span id="precioPS4">400</span> - PS4</p>
</td>
</tr>
<tr>
<td class="botonCompra">
<a id="botonCompraPS4" href="paginaSolicitudes.html"><img src="img/BotonCompra.png"></a>
</td>
</tr>
</tbody>
</table>
page 2 (form with the input that needs to show the value)
<tr>
<td class="info">Precio: </td>
<td class="inputs"><input id="precioI" name="precio" type="text" value=""></td>
</tr>
Here's the javascript (javascript/metodos.js)
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
$("#precioI").val(retornaPrecio());
});
});
function obtienePrecioPS4() {
sessionStorage.setItem("precio", $("#precioPS4").text());
}
function retornaPrecio() {
var r = sessionStorage.getItem("precio");
return r;
}
try loading the value on document ready, see below
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
});
// Load value on document ready
$("#precioI").val(retornaPrecio());
});
Your page1 and page2 should have the same javascript code above
I am using a a href "Click Here" link in the page and if we click it will open a pop up contact form using javascript, here i need to get the value say like "id" into that popup from the a href so that i can manipulate the contact form,
Click Here
javascript function:
function showDiv(DisplayDiv) {
if (document.getElementById) { // DOM3 = IE5, NS6
if(document.getElementById("simpleMap"))
{
document.getElementById("simpleMap").style.visibility = 'hidden';
}
document.getElementById(DisplayDiv).style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.DisplayDiv.visibility = 'visible';
}
else { // IE 4
document.all.DisplayDiv.style.visibility = 'visible';
}
}
}
Popup Screen:
<div id="Showcase_10" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<form action='result.php' onSubmit="return valid()" method="post">
<input type="hidden" name="siteid" value="<? echo $_REQUEST['siteid']; ?>"> <table width="90%" bgcolor="#eff8ff" border="0" style="border:solid; border-width:1px; border-color:#ccc" align="center" cellpadding="2" cellspacing="3" class="small-content">
<tr><td width="6%"> </td>
<td colspan="2" align="left" class="subhead">Email Property Details</td>
</tr><tr><td width="6%"> </td><td class="cont">Request more information, make an appointment or ask a question. </td>
</tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Name</strong><br/>
<input name="name" type="text" class="field1" value=""/> <font color="#FF0000"><strong>*</strong></font></td></tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Your Email</strong><br />
<input name="email" type="text" class="field1" id="textfield2" value=''/> <font color="#FF0000"><strong>*</strong></font><br />
<font color="#FF0000" style="font-family: Verdana, sans-serif;font-size : 9pt;" class="form-list">
</font></td>
</tr>
<td colspan="2" align="center"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
In Javascript:
window.open ("path/to/my/new/html/page.html?id=3","mywindow");
Just like any other page, the get can be used to pass the data you need, you just may need to UrlEncode it first.
EDIT: Oh. You're referring to a modal dialog, not a popup window. Well in that case, since the data will need to be on the page fully once the page loads that way the ID can be present in the link, you have 2 basic options: 1) preload all data for all click links and store it locally in javascript, 2) break this method into an ajax call and update the modal dialog controls with the ajax data.
1) For storing it in javascript, you could easy prototype your own pseudo-class to hold all of the data for each row, allowing you to store them in an associative array by id.
function myDataItem(id, field1) {
this.id = id;
this.field1 = field1;
this.field2 = ""; // initialize a property called field2
this.getInfo = getDataItemIno;
}
function getDataItemIno() {
return this.field1 + ' ' + this.field2;
}
var items;
items[3] = new myDataItem(3, "datastring");
2) The ajax solution would be a little more complex, and I would recommend using jQuery to build/handle all of those methods in order to keep it streamlined and simple.
The easiest way is to pass the id in the url of the popup window