Jump to content

Image Link to Panel Help


paulmo
 Share

Recommended Posts

I'm using YUI Panel. I've got all the dependencies and the Panel works fine using their button. But I need to link my own image to a Panel, specifically the Acrobat image on my site: http://www.releasecenter.org (the functioning Panel on my site is "Management").Here is the code I'm trying out in development that's not working. This code is not live on my site. http://gist.github.com/365387Thanks in advance for any help. The YUI Forum does not respond to this problem. They must be busy at Y!

Link to comment
Share on other sites

On the management link the Javascript is targetting the ID, but the PDF link has a name instead. That probably needs to be an ID also. Both buttons are also using the same Javascript variable for the window, they are both called panel2. That's going to make both buttons open the same window, the windows need to be named differently. Also, it's probably not going to do anything to just write <src="xxx.pdf">, there's no src element. There's not a reliable way to show a PDF, you can't guarantee that the user has a PDF browser plugin. If you want everyone to be able to see that it will need to be regular HTML content.

Link to comment
Share on other sites

Thanks JSG. I'll check into those issues. Where would I be without you? I wouldn't have gotten this far with scripting that's for sure.

On the management link the Javascript is targetting the ID, but the PDF link has a name instead. That probably needs to be an ID also. Both buttons are also using the same Javascript variable for the window, they are both called panel2. That's going to make both buttons open the same window, the windows need to be named differently. Also, it's probably not going to do anything to just write <src="xxx.pdf">, there's no src element. There's not a reliable way to show a PDF, you can't guarantee that the user has a PDF browser plugin. If you want everyone to be able to see that it will need to be regular HTML content.
Link to comment
Share on other sites

Got it! Thanks a bunch. If I may ask in the same thread, how to get my PHP form "mood responses", which are now just posted to the page, action="index.php", into a Panel? I want to keep the form on the page, but post the responses so they appear in here: YAHOO.example.container.panel4.setBody("responses...");

Link to comment
Share on other sites

OK, I've got YUI Connection Manager Post Transaction (AJAX) dependency in <head>. Here's what I've got on my page. How to get form response in Panel? Do I need a proxy page as well? Data for those mood responses is all on index.php, not in MySQL (you might recall as you wrote a lot of that script:)

/** Remember to encode the key-value string if and when* the string contains special characters.*/<script>var postData = "username=anonymous&userid=0";</script><script>var handleSuccess = function(o){	if(o.responseText !== undefined){		div.innerHTML = "Transaction id: " + o.tId;		div.innerHTML += "HTTP status: " + o.status;		div.innerHTML += "Status code message: " + o.statusText;		div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";		div.innerHTML += "PHP response: " + o.responseText;		div.innerHTML += "Argument object: " + o.argument;	}}var callback ={  success:handleSuccess,  failure: handleFailure,  argument: ['foo','bar']};</script><script>var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);</script>

Edited by paulmo
Link to comment
Share on other sites

The callback function sets the innerHTML of an element, so you would just set that element to the one you want to update. If YUI has a way to update the contents of a panel then you would probably use that instead of innerHTML. So you would send your data to the PHP page that handles that, and have it output whatever responses you would want to check for or show on the page. It doesn't matter if it's in a database or not.

Link to comment
Share on other sites

I'm stumped. I've got a YUI Container Panel, "panel4" that's opening on button click (which is good); am I referencing "panel4" somewhere in the innerHTML script? The example seems to show a "userid" situation, which is not like mine. My responses are from the switch/case/echo statements that you helped me with a couple years ago. These responses need to go in Panel:

switch($_POST['mood']){case 'grey': echo "<p>A gloomy {$phrase1} {$time} blankets your spirit, {$post_name}, {$phrase2} But, grey can also provide peace, calm, and reflection. Ride through grey for the time being, and organize your direction. </p><p></br>{$phrase6}</p>";	   break;	case 'dark':

Thanks in advance.

Link to comment
Share on other sites

I'm not sure how YUI works, but there's probably a way for you to access the YUI panel object, and then it probably has a method to update the contents of it. I don't see anything in the API documentation for the panel widget though, so maybe you do just use innerHTML to update it. Maybe someone more familiar with YUI would be able to help with that.

Link to comment
Share on other sites

The handleSuccess function in the Javascript would probably use document.getElementById to access the element, or maybe YUI has a different way to get a reference to the panel. Once you had that though you would just update the innerHTML property of the element. In that function, o.responseText will contain the response from the PHP page.

Link to comment
Share on other sites

This is the form script and script that submits the form. 'Mood' 'input' and 'origin' all look like HTML elements. Does any of this go into innerHTML, and if so where to put them? You mentioned this line: div.innerHTML += "PHP response: " + o.responseText;As you can see I'm just reaching.

<form name="origin" id="origin" action="index.php" onclick="return validate_form(this)" method="POST"><!--<input type="hidden" name="check_submit" value="<?php echo $post_name;?>"/>-->	<p><br>First Name: <input type="text" name="name" value="<?php echo($_POST['name']); ?>" ></p><div id="buttongroup1" class="yui-buttongroup"></br>You are feeling:<input id="radio1" type="radio" name="mood" value="grey" <?php echo((($_POST['mood'] == 'grey') ? ' checked': ''));?>> <input id="radio2" type="radio" name="mood" value="dark" <?php echo((($_POST['mood'] == 'dark') ? ' checked' : '')); ?>><input id="radio3" type="radio" name="mood" value="light" <?php echo((($_POST['mood'] == 'light') ? ' checked' : '')); ?>></div></br></form> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/button/button-min.js"></script> <script> YAHOO.util.Event.onDOMReady(function() {	var oButtonGroup1 = new YAHOO.widget.ButtonGroup("buttongroup1"),		parForm = document.getElementById('origin'),		newEl = document.createElement('input'); 	newEl.name = 'mood';	newEl.type = 'hidden'; 	parForm.appendChild(newEl); 	oButtonGroup1.on('click', function() {		newEl.value = this.get('value');		parForm.submit();	}); });</script>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...