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
Related
I'm working with an html form that displays rows of data only for data elements that are found with a submitted value in the database. For example, the following table row will be toggled off ( style="display:none" ) if there is no value found in the database for 'Seizures_Type', and WILL be displayed if there is a value found in the database.
The javascript works to concatenate values from several similar fields on the form and store in a single field, id="medalert".
When the script runs, it fails if it tries to access a field that is in the display:none state.
What would be a good way to allow the script to run fully, even if it encounters these hidden elements?
Build
<tr style="display:none">
<td title="seizures type">Seizures Type</td>
<td></td>
<td id="par_med_seizures_type"></td>
<td><input type="checkbox" id="chk_med_seizures_type"></td>
</tr>
<tr style="display:none">
<td title="seizures type">Seizures Medication</td>
<td></td>
<td id="par_med_seizures_medication"></td>
<td><input type="checkbox" id="chk_med_seizures_medication"></td>
</tr>
function buildMedAlert(){
var retval = "";
if (document.getElementById('par_med_seizures_type').textContent.length>0) {
retval += "Type: " + document.getElementById('par_med_seizures_type').textContent;
}
if (document.getElementById('par_med_seizures_medication').textContent.length>0) {
retval += "Medication: " + document.getElementById('par_med_seizures_medication').textContent;
}
document.getElementById('medalert').value=retval;
}
You should make a condition to check if the row is visible, give it an ID (since I don't believe you want to work on every element in the code) and then, make sure to check if the element is visible, like this:
var element = document.getElementById('element');
if(element.style.display != 'none'){
}
The thing is that you cannot access the contents of a hidden element since it is hidden and so, the javascript doesn't recognize it. You have to make sure the element is not hidden.
If I add the missing field medalert, it does not fail in neither Chrome nor IE10
function buildMedAlert() {
var retval = "";
if (document.getElementById('par_med_seizures_type').textContent.length > 0) {
retval += "Type: " + document.getElementById('par_med_seizures_type').textContent;
}
if (document.getElementById('par_med_seizures_medication').textContent.length > 0) {
retval += "Medication: " + document.getElementById('par_med_seizures_medication').textContent;
}
document.getElementById('medalert').value = retval;
}
Build
<table>
<tr style="display:none">
<td title="seizures type">Seizures Type</td>
<td></td>
<td id="par_med_seizures_type">Some type</td>
<td>
<input type="checkbox" id="chk_med_seizures_type">
</td>
</tr>
<tr style="display:none">
<td title="seizures type">Seizures Medication</td>
<td></td>
<td id="par_med_seizures_medication">Some med</td>
<td>
<input type="checkbox" id="chk_med_seizures_medication">
</td>
</tr>
</table>
<input type="text" id="medalert">
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..
I have a table with multiple rows, with each row having a button within the tag. There is also a link within each td tag that when the user clicks, THAT corresponding button is supposed to show, but when I click on the link, ALL the buttons show.
Here is the html:
<tr>
<td width="10%" align="center"></td>
<td width="80%" align="left"><span style="font-weight:bold;">About Me:</span> <input type="button" class="userDetails" style="display:none;" value="Save"/></td>
<td width="10%" align="center"></td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="80%" class="originalText" align="left" valign="top">
'.$aboutMe.'
</td>
<td width="80%" class="aboutMe" align="center" valign="top">
<div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
<textarea class="textBox" cols="20" rows="auto" style="display:none;">
'.$aboutMe.'
</textarea>
</td>
<td width="10%" align="center"></td>
</tr>
and here is the jquery:
$(function(){
$(".editText").each(function(e){
$(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
e.preventDefault();
//get handle for textArea //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");
The button is shown using the following code, which is ok, it's just the handle to the corresponding button (code above) that is messed up:
buttonHandle.css({"visibility":"visible"}).show();
There are multiple rows, each with the same structure as the one above so if user clicks on one row, only that corresponding button should show.
Somebody please tell my what I am doing wrong. Whatever I do, I can't seem to get this working.
Thanks a bunch!
Change this line:
var buttonHandle = $(this).parents("td").find(".userDetails");
To this:
var buttonHandle = $(this).closest('td').find('.userDetails');
I have a table which i need to move elements up and down in. I have the code working, but as soon as I add a tag to it, it throws the error:
Error: this.visualElement is undefined
Source File: http://192.9.199.11:83/templates/admin/js/jquery/ui.checkbox.js
Line: 94
The HTML looks like this:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>Menu</th>
<td>Builds the main navigation menu panel</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="1" />
</td>
</tr>
<tr>
<th>Proudly Support</th>
<td>A widget which displays company's we proudly support</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="2" />
</td>
</tr>
</table>
And the jQuery is as follows:
$(".arrowButtons").live('click', function(e) {
e.preventDefault();
});
$(".upArrow").live('click', function(e) {
var element = $(this).parent().parent();
if(element.prev().html() != null)
{
var elementContents = element.html();
$("<tr>"+elementContents+"</tr>").insertBefore(element.prev());
element.remove();
}
});
Any idea on why that could be happening?
I just commented out the lines that were causing the problem in ui.checkbox.js and it is working. Will do proper testing, but so far everything seems to be working.
I have a problem that i want to access the normaltagCmt elements value:
<div id="random no">
<div id="normaltagdialog">
<table style="width:100%; height:100%" border="2px">
<tr style="width:100%; height:13%" align="left">
<td>
<label> {$LANG.TEXT}</label>
</td>
</tr>
<tr style="width:100%; height:59%; vertical-align:middle" align="center" >
<td>
<textarea id="normaltagCmt" style="width:90%; height:90%" ></textarea>
</td>
</tr>
<tr style="width:100%; height:13%">
<td>
<label> {$LANG.COLOR}</label>
</td>
</tr>
<tr style="width:100%; height:15%; ">
<td>
<table style="width:100%;height:100%" cellpadding="2" cellspacing="2">
<tr id="colorPad" align="center">
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
The script i have written above is a jquery dialog and this dialog opens many times.
i want to get the value of normaltagCmt for a particular div with a specific random id.
How can i get that in javascript?
Try $('#random_no #normaltagCmt').val().
i hope by "random no" you mean random number, you cant have a space in a ID and ill use ID14 instead of "random no".
$("#ID14 #normaltagdialog table tr td #normaltagCmt").val()
There can only be one of any ID in javascript, so you could just do $('#normaltagCmt') and it will always only return the one element.
However, if you want to check to make sure that it is a child of an element with a random id (a number that you do not know), then it will get a little trickier.
$("#normaltagCmt").filter(function() {
var valid_parent = false;
var numeric_re = /^\d+$/g;
for( var parent in $(this).parents("div") ) {
if( re.test(this.id) ) {
valid_parent = true;
break;
}
}
return valid_parent;
}
This bit of jQuery will test to make sure that the element with the specified id has a parent div with a numeric id. If it does not, then you will be left with an empty jQuery object.