Jump to content

Image Link to Panel Help

paulmo

By paulmo
in JavaScript

Recommended Posts

paulmo Member

paulmo

Posted
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
paulmo Member

paulmo

Posted
  • Author
Posted

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
paulmo Member

paulmo

Posted
  • Author
Posted

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
paulmo Member

paulmo

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
paulmo Member

paulmo

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
paulmo Member

paulmo

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...