Problem: I don't know why my script is not loading a value into the selected input section of a form
Scenario: The page, call it the host page, permanently displays a dialog with a link as the content. If a user clicks on the link another dialog, call it the "form dialog" opens with a form. Some items are inserted into the form by the code - platform, browser and url of the host page.
It’s the URL that is not working.
The URL is acquired on the host page and stored as a .data item for recovery by the "form dialog" script. I tested this on a simpler set up and it worked perfectly however, it refuses to work on the current set up.
Symptoms: The URL is read and stored as expected but the script is not writing it into the form. The approach I've used is to add a callback function when the dialog is first loaded. The callback uses a .val() function to write the data to the form, or at least that's the intention. The value is written to the form during the dialog setup so that when the user clicks the information is already loaded into the form.
I'd appreciate any pointers or suggestions as to what might be the cause of the problem and/or how to correct it.
Thanks.
script:
enter <script type="text/javascript">
//Triggers a modal containing the feedback form.
$(document).ready(function() {
$('#target a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
modal: true,
open: function (event,ui) {
$("input[name='url']").val($('body').data('value2'));
}
});
$link.click(function() {
$dialog.dialog('open');
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
return false;
});
});
});
</script>
HOST PAGE
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<body>
<!--Script to get the url of the page and store it as a data item for use on the form -->
<script type="text/javascript">
<?php
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
var pageAddress="<?php echo $url?>";
$('body').data('value2', pageAddress );
</script>
<p>The following just confirms that the url is being stored on the page</p>
<div>
The URL value stored on the page is
<span id='urlcheck'></span>
<p>The location is
</p>
<script type="text/javascript">
$("span#urlcheck").html("<p>" +$("body").data("value2")+ "</p>");
</script>
</div>
<!--Check to see if the cookie is set -->
<?php include ('../_assets/include_files/checkreaderStatus.php');?>
<!-- The following file is for development only. It adds a navigation menu to pages in which its included. -->
<?php include('../_assets/include_files/navigation.html');?>
<!--------------------------------------------------------------------------->
<!-- Start The Page Display -->
<h1>Page 1 Of The Blog</h1>
<p>This page simulates the page on the blog where testers will land.</p>
<!--Dialog for the "Feedback Form Button -->
<script type="text/javascript">
//Reads the flag readerStatus, if set creates a dialog with a permanently displayed "Feedback Button". NOTE TO SELF: This has to be on the page in order for the php to be to be processed by the server!
var readerStatus="<?php echo $readerStatus; ?>";
if (readerStatus == "tester") {
$(function(){
$("#dialog").dialog();
})
}
</script>
<!-- Content for the Feedback Form Button -->
<div id="dialog" title="Feedback Button">
<div title="Feedback Form">
<p id='target'><a href="feedbackform.php" title='Feedback Form' >Feedback Form</a></p>
<p class="notes">This form is dragable and resizable</p>
</div>
</div>
<script type="text/javascript">
//Triggers a modal containing the feedback form.
$(document).ready(function() {
$('#target a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
modal: true,
open: function (event,ui) {
$("input[name='url']").val($('body').data('value2'));
}
});
$link.click(function() {
$dialog.dialog('open');
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
return false;
});
});
});
</script>
</body>
</html>
Feedback Form Feedback Form
<link rel="stylesheet" type="text/css" href="../_assets/scripts/black-tie/jquery-ui-1.8.4.custom.css" />
</head>
<body>
<?php
$browser = get_browser(null, true);
?>
<!-- ajax form next? -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
target : '#output1',
url: 'comments.php',
clearForm: 'true'
};
// bind 'myForm' and provide a simple callback function
$('#myform').ajaxForm(options);
return false;
});
</script>
<!-- Script to execute text prompts in the fields -->
<!-- optional name -->
<script type="text/javascript" id="demoscript">
$(document).ready(function(){
//Optionsal Name
$("#textTagDemo").fieldtag();
//Textarea
$("#area").fieldtag();
});
</script>
<div id="accordion">
<h3><a href="#">Instructions</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Broken Links</a></h3>
<div>
<form action="comments.php" method="post" name="broken_Links" id="myform" >
<fieldset>
<p>
<input name="name" type="text" size="50" id="textTagDemo" title="OPTIONAL: Add your name" />
</p>
<p>
<input name="nowhere" type="radio" value="linknowhere" />Link is
broken and doesn't go anywhere
</p>
<p>
<input name="wrong_url" type="radio" value="linktowrongurl" />Link
goes to an unexpected destination
</p>
<p>
<input name="other" type="radio" value="linkother" />Other -
Please explain in the description box below
</p>
<em>Description</em>
<p>Please add as much descripton as you can about the problem you
noticed</p>
<textarea name="description" id="area" cols="50" rows="10" title="Please add as much description as you can."></textarea>
<p>
Page Address: <br /> <input name="url" type="text" value=""
id="targetURL" size="100" title="Page Address" />
</p>
<p>
Browser<input name="browser" type="text"
value="<?php echo $browser['browser'] ?>" />
</p>
<p>
Operating System<input name="operating_system" type="text"
value="<?php echo $browser['platform'] ?>" />
</p>
<p>
<input type="submit" name="submit" id="button" value="Submit" />
</p>
</fieldset>
</form>
<!-- server response -->
<h2>Output Response</h2>
<p id="output1">
</p>
<!--End form 4 broken links-->
</div>
<h3><a href="#">Errors In The Text</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Confusing Layout</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
