| |
| Author |
Post |
|
|
#1 Tue Sep 04, 2012 2:22 pm
|
|
Member
Registered: Sep 2012
Posts: 5
|
I set up a a set of test pages to check out setting up a dynamic filter (eventually to be used in a query) using the Exchange data demo code, but it's not working as I would expect (and this may be a misconception on my part). I have my main page with a variable that is updated by the float box that is open. when I use option "No Load" enter a value click ok and then Submit button on the main page the correct post value is passed/seen by the $_REQUEST If I use the option "Load" enter a value and click ok (this one does a "loadPageOnClose:self" I see the new value in the input field but then on screen refreash from the loadPage the value is set back to the defalt the post variable is not being passed. basically just trying to eliminate the user having to hit submit after they enter/select value in the floatbox. code for both pages is below, what am I miss-understanding or doing incorrectly? thanks in advance for any help. Main Page
<?php
if ( isset($_REQUEST["comm_text"]) ) {
$comm_text = $_REQUEST["comm_text"];
echo 'yep';
} else {
$comm_text = "none";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Comm Test</title>
<link rel="stylesheet" type="text/css" href="scripts/floatbox/floatbox.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="scripts/floatbox/floatbox.js"></script>
</head>
<body style="margin:25px; background:#eee;">
<form name="JunkForm" action="iframe_test.php" method="post">
<input id="comm_text" name="comm_text" size="10" type="text" value="<?php echo $comm_text;?>">
<input value="No Load" onclick="fb.start('iframe_comm.php', 'modal:true outsideClickCloses:false width:320 scrolling:no innerBorder:3');" type="button">
<input value="Load" onclick="fb.start('iframe_comm.php', 'modal:true outsideClickCloses:false width:320 scrolling:no innerBorder:3 loadPageOnClose:self');" type="button">
<!-- <a href="iframe_comm.php" title="some title" rel="floatbox" rev="width:98% height:96% boxTop:25 caption:`some title` captionPos:tc outsideClickCloses:false enableDragMove:false enableKeyboardNav:false showClose:false showOuterClose:false disableScroll:true showPrint:false loadPageOnClose:self">my test</a> -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
FloatBox
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Comm Test</title>
<link rel="stylesheet" type="text/css" href="scripts/floatbox/floatbox.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="scripts/floatbox/floatbox.js"></script>
</head>
<body style="margin:25px; background:#eee;">
<p>Demonstration of exchanging info between the host page and a floatboxed iframe.</p>
<p>The text you entered on the host page should be in the input field below.
Change the text here to update the host page.</p>
<p>
<input type="text" id="iframe_comm_text" size="10" />
<button type="button" onclick="updateParent()" >Update</button>
<button type="button" onclick="updateParent(); fb.end();" >OK</button>
</p>
<script type="text/javascript">
// on start, copy the text from the parent doc
fb.$('iframe_comm_text').value = parent.fb.$('comm_text').value;
function updateParent() {
// on request, copy the text to the parent doc
parent.fb.$('comm_text').value = fb.$('iframe_comm_text').value;
};
</script>
</body>
</html>
|
|
|
#2 Tue Sep 04, 2012 2:36 pm
|
|
Administrator
Registered: Aug 2008
Posts: 3382
|
Hi.
Sorry, I can't do anything with server-side code listings. Can you show me these test pages online and tell me what to do and what to look for there?
Thanks...
|
|
|
#3 Tue Sep 04, 2012 2:37 pm
|
|
Member
Registered: Sep 2012
Posts: 5
|
sure give me a couple of min to get them on server.
thanks for quick reply
|
|
|
#4 Tue Sep 04, 2012 2:58 pm
|
|
Member
Registered: Sep 2012
Posts: 5
|
URL: http://www.huskyzone.net/iframe_test.phpSelect "No Load" button Enter a value in text box Click ok Click Submit button on the main page ---- Behavior - The correct post value is passed/seen by the $_REQUEST (echo's out 'yep', I know this does cause the float box error at this point due to echo, but just for testing) so this is working fine and as expected Will need to reload page because of previous floatbox error. ***this is what I'm having problems with*** Select "Load" button (this one does a "loadPageOnClose:self") Enter a value in text box Click ok ---- Behavior - I briefly see the new value in the input field, but then on screen refresh/submit from the loadPage the value is set back to the defalt the post variable is not being passed. Basically just trying to eliminate the user having to hit submit after they enter/select value in the floatbox. I expected it to do the same as above. Thanks again Jim |
|
|
#5 Tue Sep 04, 2012 3:30 pm
|
|
Administrator
Registered: Aug 2008
Posts: 3382
|
After the submit, the page is returned with an invalid DocType. Floatbox does not load but instead pops up a big message saying "Floatbox does not support quirks mode. Page needs a valid doctype." Not sure how it's possible to miss that.  The doctype on the page is " yep<!DOCTYPE html>". Let's get rid of that 'yep' and see where things stand after that. It's bed-time in my timezone, so I'll pick this up after a decent slumber. |
|
|
#6 Tue Sep 04, 2012 4:16 pm
|
|
Member
Registered: Sep 2012
Posts: 5
|
Thanks Byron, Page has been updated. Since when do coders need sleep? Mnt Dew Code Red and Fresh popcorn is all we need to live on........................  as mom says don't let the bed bugs bite. Cheers. |
|
|
#7 Wed Sep 05, 2012 3:45 am
|
|
Administrator
Registered: Aug 2008
Posts: 3382
|
Ah, so you want the form-field to be filled out by the user, submitted to and captured by the back-end, and then the main page reloaded with content that reflects the submitted form values. But then you seem to say you want this to happen without the bother of a submit occurring. In place of the submit, what? Magic? One clean way to do the task at hand is to use the fb.ajax function to submit the form and to carry on from the callback to that ajax POST. One reason why I like fb.ajax form submissions is that you just have to reference the form and the fb.ajax function will sort out the POSTing details for you. See the API Reference for details. You have form-fields in that floatbox content, but no form. Let's put a form on the page and give it a name and id of something like "theForm". Now we can assign an onsubmit action to that form that invokes the ajax submit and cancels the default submit action. Something like. <form name="theForm" id="theForm" onsubmit="doIt(); return false;">
....
</form>
<script>
function doIt() {
fb.ajax( {
source: "/the/page/we/are/submitting/to.php",
postData: "theForm",
success: function() {
fb.end('self');
}
} );
}
</script>
The 'source' page can then return something mindless and simple like just "ok". The success function will fire after the ajax POST is complete and the response received, and now when the base page refreshes it can reflect the values that the back-end server has captured. Another simple way to get the value to the back-end would be to load a URL with a querystring on it. Instead of calling fb.end('self'), you could make the call with something like fb.end('iframe_test.php?theValue=xyz')« Last edit by admin on Wed Sep 05, 2012 4:31 am. » |
|
|
#8 Wed Sep 05, 2012 3:59 pm
|
|
Member
Registered: Sep 2012
Posts: 5
|
Hey thanks Byron for all the help, fb.ajax very cool function. Even more impressed with floatbox and before this I had it rated as a 12 on a 1-10 scale.
Cheers
Jim
|