Develop Reference

Call JavaScript function after Telerik RadPageView finishes loading?

I'm using Telerik UI for asp.net. Specifically I'm using RadTabStrip with partial page postbacks to allow the user to tab through different sets of data. When the user clicks a tab, some code executes and loads data just for that tab.
I've figured out how to execute codebehind: I set the OnTabClick property of the RadTabStrip, and then in codebehind I check what tab was clicked.
E.g.
protected void tab_Click(object sender, RadTabStripEventArgs e)
{
if (e.Tab.Text == "Info")
{
populateInfoTab();
}
}
private void populateInfotab()
{
// Do some stuff
}
However, I can't figure out how to execute client side javascript after a specific tab is clicked. What I tried:
Set OnClientTabSelected property, and then add some javascript:
function tab_ClientClick(sender, args)
{
var tab = args.get_tab();
if(tab.get_text() == "Info")
{
alert("Tab Clicked");
}
}
The problem is that I need to set the InnerHtml of some div in the clicked pageview after it is clicked. The div does not exist on page load (that specific RadPageView is hidden) so I cannot set it then. Once the user clicks into the tab, and after the page view loads, I need to be able to update the div's InnerHtml through JavaScript.
How would I go about doing this?

First option - if you do not set the RenderSelectedPageOnly property to true, all page views will be rendered on the initial load and you will be able to use JS to find/modify elements in them.
Second option - just set the content from the server as soon as you load the UC, this will usually make things simpler.
Third option - use client-side events (offered by the native PageRequestManager class or the RadAjaxManager, depending on how you setup your AJAX interactions) to execute when the response is received. The difficulty here is to determine which is the postback you need. Looking for the desired element and only executing logic if it exists is the simplest flag you can opt for.
Fourth option - register a script from the server code that will call your function, something like:
populateInfoTab();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someKey", "myDesiredFunction()", true);
where you may want to use the Sys.Application.Load to ensure it is executed later than IScriptControl initialization.

Get values from modal popup in parent window's button click event

I need to display a modal popup from a aspx.cs page. I need to invoke the popup from server side because before the popup opens, I need to pass an ID into the popup via query string.
this is my code to display the popup.
protected void btnNote_Click(object sender, EventArgs e)
{
string queryStringParam = "some text"; // some server code here to get the string ready;
ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "openNotePopup('"+ queryStringParam +"');", true);
}
And this is the javascript to get the parameter and launch the modal popup.
function openNotePopup(var param)
{
var noteResult = window.showModalDialog("AddEditNote.aspx?Note=" + param, "Add/Edit Notes", 'center:yes; dialogWidth:600px; dialogHeight:500px;');
document.getElementById("hidden_NoteText").value = noteResult;
}
When the popup is closed, I pass a string value as window.returnValue which is captured in the noteResult variable in client side.
Now I need to capture the popup close event in my server side. I can capture the event in client side but I need the event in server side so that I can pick up the value from the hidden field and process it.
How can I achieve this?

I found a thread that seems to tackle this very issue. Hopefully this is something similar to what you were looking for:
Javascript confirm message problem

I suggest you to write you own function on ShowDialog like this:
showNotePopup('NotePopup', title, closeNotePopup);
NotePopup - id of your popup;
showNotePopup should describe what you wanna see in your popup, how it will close;
closeNotePopup function you bind to popup closing and inside it you can make for example post-request and this way you'll catch on server when your popup is closing.

jquery send input field values to popup pages

I have a form with a table that displays data from a mysql table,it has one field that requires user input. each row also contains a div. The form then has two functions.
the first function is to display information from an external PHP page which processes the values on the input fields in each row and sends the result to the row div in the form of an result
The first function works perfectly and here is the script:
<script type="text/javascript">
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('getpeopleinjobs.php',{ //data posted to external page
postvarposition: form["position"+row].value, //variable equal to input box, sent to external page
postvarjob: form["job"+row].value, //variable equal to input box, sent to external page
postvarperson: form["person"+row].value, //variable equal to drop down list, sent to external page
postrow: row}, //variable equal row being processed, sent to external page
function(output){
$('#training'+row).html(output).show(); //display external results in row div
});
}
</script>
The second function I require help with. I need to almost repeat the same javascript function again. however instead of sending the row variables to an external page, I want to send them to a popup page. This function should be triggered when I click the in the div.
I have the below javascript for the popup.
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open( url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
What I want to do is send the variables to the popup page, the same variables that were sent to the external page.
so what I am aiming for is something like this:
<script type="text/javascript">
// Popup window code
function newPopup(url) {
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('trainingneeded.php',{ //my popup page
postvarposition: form["position"+row].value, //these variables must be posted to the popup page
postvarjob: form["job"+row].value, //these variables must be posted to the popup page
postvarperson: form["person"+row].value, //these variables must be posted to the popup page
postrow: row}, //these variables must be posted to the popup page
);
}
popupWindow = window.open( //open popup with the above variables posted to it
url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
How can I get the above to work? is using an href the best idea or can the div have an onclick event.
Thanks for the assistance in advance.

No, it's not possible to post to a popup window. You can include those variables in the url and to it as a get.
Or you can add target="_blank' to the form, and let it open a new window that way.
It won't be a popup window, but these days browsers mostly block those, or open them in tabs anyway, so it may not matter.
One other option is to open the popup with blank, and then use javascript to simply write() the page contents to it.
See also: asp.net/jQuery: post data with jQuery to a popup [IE]

how to stop reloading parent window while child window gets open

I have a form submit, where it get the values from the form and goes
to next page... here I have a hyperlink to open a child window, while
I click, it opens the child window and simultaneously it reloads the
parent window. I have a action configured to the parent window which
has a Database insert statement too.
The problem is that while I click the link it call my action
again(because of page reload), in this action I wrote if condition to
check null/empty string from the previous page form submit. since this
is the second time the action loads it looks of the fields(but
actually those fields are in my previous page form). so it take null
while checking my if condition.
Another problem is that when I solve the above problem here comes the
SQL insert statement, which is about to execute 2nd time. I dont want
this to happen or I dont want my action to execute while I open the
popup window and I want to populate the selected value from the popup
to the parent window.
code used for opening the popup
function select_reactant()
{
window.open ("SeriesTab.action?component=reactant",
"mywindow","scrollbars=1,resizable=1,width=1000,height=1000");
};
This is the place where I open the popup and want to populate the value selected from the popup to the textfiled here
<tr>
<td>reactant</td>
<td><s:textfield name="reactant" id="reactantId" readonly="true" theme="simple"/></td>
</tr>
jquery to get back the value form popup to parent window
$(window.opener.document).find('#reactantId').val(rxn);
the code inside action below is what the action that I mention at the beginning
if(Rxn!=null||!Rxn.equals("")) //Rxn is the field variable for previous page
{
//my insert statement
}
while I run I get nullpointer error since the value for Rxn is reset to null by the page reload due to popup opening done by
window.open

You can do something like this
HTML
reactant
jQuery
$(function(){
$("#anchSelectReactant").click(function(){
select_reactant();
return false;
});
});

How can my button close the window and refresh the parent after updating formview?

I have a "Save" button on a FormView with the CommandName="Update" set. This button updates an EntityDataSource that is bound to the FormView.
After the EDS is updated, I want to close this (child, popup) window and refresh my parent window (so it will reflect the changes just made to the data).
For reference, I have a similar "Cancel" button on this page that simply calls a Javascript function "OnClientClick":
function done() {
if (window.opener.closed) {
self.close();
} else {
window.opener.focus();
window.opener.location.href = opener.location;
self.close();
}
}
Now, how can I let the FormView and EDS do its thing (process the Update command) and then call this javascript function (or code to accomplish the equivalent)???
After doing some more digging, I solved it. The problem had to do with the FormView being inside an Update Panel. I had to use the following:
ScriptManager.RegisterClientScriptBlock(this.UpdatePanel1, typeof(string), "done", "done();", true);

As soon as your update is finished, it should return a page that you can just register your function with. In your Update command handler (assuming this is happening server side), just add the following:
Page.RegisterStartupScript("AfterUpdate", "done();");
It will cause the done() javascript function to run as soon as the windows refreshes from the postback caused by the update command. If you done function isn't already in the page, make sure you add it's definition before you call it to the RegisterStartupScript call.