We Keep Coding

Switching between pages on selecting the radio button without redirect or submit

i am a bee on PHP and i want a solution to switch between two pages on when selecting a radio button with out submit the page or redirecting the page ?
Which one is the more appropriate way
javascript or
php ?
Please help me with a suitable example.Thank you.

Trythis:
you can simple call a link , if you don't have a container in that page to load the new page when radio button is pressed .
You have no option that link the radio with page link ,
But , if you want to load the content of that page inside you php page without redirecting ot post then ur ultimate friend is JQuery and Ajax.

You can handle this with Jquery / Javascript in better way:
Try this:
$("#example").change(function(){
window.location="http://www.example.com/";
});
$("#wiki").change(function(){
window.location="http://www.wikipedia.org/";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="example"> Example Side <br/>
<input type="radio" id="wiki"> Wikipedia Side

How to open a URL link from JavaScript inside a Google Apps Script HTML Google Site Gadget

I have written an HTML (not UI) gadget in Google Apps Script to be embedded in a Google Site. The gadget presents a drop-down with options that contain URL/display name value/text pairs.
I want to put a button in the gadget that opens a new window corresponding to the selected URL. But, basically, I get an "Object does not contain an 'open' method" error when I execute
window.open(url);
Is there a way around this? I can (and have) created gadgets with anchor tags that successfully open other windows, but doing this same action from javascript appears to not be allowed.
Anything that accomplishes the functionality is fine. A jQuery-based solution would be great.
Thanks.

Due to Caja’s sanitization, all the javascript functions are not supported that's why can't open a new window in App Script.
The workaround to display a popup in App Script is to use an overlay window(which is not a popup technically but appears like a popup) like jQuery modal dialog which are supported in App Script.
http://jqueryui.com/dialog/#modal-form
However iframe tags are not supported in App Script, so an attempt to open a url in modal window with the help of iframe tags will not work.
You can read more about these restriction in App Script from the link below :
https://developers.google.com/apps-script/guides/html/restrictions**
Hope it helps!

You can open the link directly by running the window.open() JS in a dialog using the HTMLService.
Here's a demo sheet (take a copy to see the script).
openNewWindow() is assigned to the button.
Code.gs:
function openNewWindow() {
var htmlString =
'<div>' +
'<input type="button" value="Close" onclick="google.script.host.close()" />' +
'</div>' +
'<script>window.open("http://www.google.com")</script>';
var htmlOutput = HtmlService
.createHtmlOutput(htmlString)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(60);
SpreadsheetApp
.getUi()
.showModalDialog(htmlOutput, 'Opening New Window...');
}

It's not possible to do that because of caja sanitization. The options bellow will not work.
1) jquery - $("#some_link_id").click()
2) javascript - window.open, window.href, etc...
The only workaround but I guess that will not fit to your problem is creating links with target="_blank" to open new windows but as I said is not possible to click in these links though javascript/jquery.
My Link

I was able to achieve this using a form. On submit, set the action of the form to the desired URL, as determined by the selected item in the select box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('document').ready(function(){
$('#yourForm').attr('onsubmit',null); //set onsubmit to Null for NATIVE Caja sandboxmode
$('#yourForm').submit(function(){
var val = $('#yourSelect').val(); //get value of select box
$('#yourForm').attr('action',val); //set action of form
});
});
</script>
<div>
<select id="yourSelect">
<option value="https://www.google.com">Google</option>
<option value="https://www.bing.com">Bing</option>
</select>
<form id="yourForm" method="get" target="_blank" action="">
<input type="submit" value="Open Selected">
</form>
</div>

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?

I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.

Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}

$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui

You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

Cannot focus on form tags in stuts2 div after submit

I have a struts2 project which uses a tabbed panel. The tabs are jsp pages within divs. When you first select the tab the javascript at the end of the page sets the focus on the desired input field. Once you hit submit though the tab comes back with no focus in the input field.
I have debugged it extensively to see what is happening, and I've noticed that the javascript at the end of the page is running, but it just cannot focus in the field. It can see the field through getElementById and even get it's value (i've tested this with alerts) but it cannot do anything TO the field. It cannot put text in either through javascript. If I click on another tab and then click back the script the focus is restored.
The submit and textfield in the tab are below:
<s:form id="myForm" action="myTabAction.do" method="post" validate="true" >
.
.
.
<s:submit name="submitz" value="Save" id="billbo"
formId="myForm" executeScripts="true"
href="myTabAction.do?submit=Save"
targets="myTab" showLoadingText="false"
theme="ajax" cssClass="buttonSmallClass"
indicator="loadingImage_case" />
.
.
.
<s:textfield name="testVal" maxlength="80" id="textField" cssClass="textClass" />
The javascript at the end of the tab jsp is as follows:
.
.
.
</s:form>
</table>
<script type="text/javascript">
var field = document.getElementById("textField");
field.focus();
</script>
</body>
</html>
The relevant parts of the parent page are:
<s:tabbedPanel selectedTab="%{selectedTabId2}"
id="CasePartyTabbedPanel" theme="ajax" requiredposition="left"
cssClass="subTabedpanelClass" cssStyle="width: 710px; height: 200px;" doLayout="false"
templateCssPath="includes/TabContainer.css">
.
.
.
<s:div label="My Label" id="myTab"
href="MyAction.do?param1=%{paramVal1}&param2=%{paramVal2}"
theme="ajax" cssStyle="display:none" refreshOnShow="true"
executeScripts="true" >
<p>Loading...
</s:div>
</s:tabbedPanel></td>
I am using struts 2.0.9 with dojo.
I really need to find out how to set the focus to the input field after a submit.
Any help would be greatly appreciated. Sorry if it is a bit long winded, but I wanted to be clear.
Thanks
Bill

Can you change the javascript at the bottom of the page as shown below and try? -
<script type="text/javascript">
dojo.ready(function(){
var field = document.getElementById("textField");
field.focus();
});
</script>
When the page loads, the < script > tag at the bottom of the page might get executed before the dojo completes initialization. That could be preventing the field from getting focus. So you can add the code to set the focus in dojo.ready(), which gets executed after dojo is initialized.

Simply use the attribute focusElement
<s:form focusElement="textField" />