I have a modalpopup extender attached to a panel, inside which resides two asp.net buttons. Each of these had the normal "Onclick" attribute assigned to them. However, when they were clicked, no postback was occuring.
From some reading around, it appears that this is by design, and that the buttons are there for this to be closed.
So how do you get round this?
You can attach a javscript client side event that mimmicks the behaviour of what happens with asp anyway, by forcing the postback to take place.
Firstly, in the head of your page, define a function that ensures that the page is valid first, and then causes the postback to take place (the validation part is crucial for this to work.
function doPostback(sender,e)
{
if(Page_IsValid)
{
__doPostback(sender,e);
}
else
{
return false;
}
}
Now in your code behind, tell your buttons to call this:
btnSaveUserDetails.OnClientClick = "javascript:return doPostback('" + btnSaveUserDetails.UniqueID + "');";
It is important here that the uniqueID is used, as this ensures that any controls that are nested pass the right details to the postback function.
And ta da, they now work!
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Tuesday, 27 April 2010
Thursday, 14 May 2009
TinyMCE UpdatePanel Javascript errors
I have spent days on this one, and it took myself and a colleague both working on it to find a solution that actually worked!
Here's the scenario.... you want to use TinyMCE, and have it working in an UpdatePanel. It sounds simple enough.
What I did was add the TinyMCE editor script, setup my tinyMCE.init() method, and hey presto, I got my editors. I set my code behind for my save button, and it fired fine when pressed, however, the editor disappeared! So, I moved my init function into the code behind, and registered it with the scriptmanager.registerclientscript method. This was fine, and when svaing my content, the editor did not disappear anymore - however, when I clicked the save button for a second time, I got a javascript error on the editor trying to access it's content.
The specific part of the javascript from tiny_mce.js was erroring on "return this.bodyElementthis.getDoc().body"
Anyway, I searched through many examples of how to solve this, including remove the editors before performing the postback, and eventually found a downloadable example that worked:
http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file
However, when I tried to use this in my application, with TinyMCE version 3.2.3, it didn't work. I copied over the version from this download, and then it seemed to fix the problem - but I lost some of the TinyMCE functionality!
Eventually, my colleague stumbled upon this absoluetly brilliant .NET extender, that handles everything for you, and allows you customise each editor independantly:
http://weblogs.asp.net/cjdevos/archive/2008/06/19/ajax-extender-for-tinymce-continued.aspx
So, if your having problems with TinyMCE and updatepanels - download it and use it!
Here's the scenario.... you want to use TinyMCE, and have it working in an UpdatePanel. It sounds simple enough.
What I did was add the TinyMCE editor script, setup my tinyMCE.init() method, and hey presto, I got my editors. I set my code behind for my save button, and it fired fine when pressed, however, the editor disappeared! So, I moved my init function into the code behind, and registered it with the scriptmanager.registerclientscript method. This was fine, and when svaing my content, the editor did not disappear anymore - however, when I clicked the save button for a second time, I got a javascript error on the editor trying to access it's content.
The specific part of the javascript from tiny_mce.js was erroring on "return this.bodyElementthis.getDoc().body"
Anyway, I searched through many examples of how to solve this, including remove the editors before performing the postback, and eventually found a downloadable example that worked:
http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file
However, when I tried to use this in my application, with TinyMCE version 3.2.3, it didn't work. I copied over the version from this download, and then it seemed to fix the problem - but I lost some of the TinyMCE functionality!
Eventually, my colleague stumbled upon this absoluetly brilliant .NET extender, that handles everything for you, and allows you customise each editor independantly:
http://weblogs.asp.net/cjdevos/archive/2008/06/19/ajax-extender-for-tinymce-continued.aspx
So, if your having problems with TinyMCE and updatepanels - download it and use it!
Thursday, 12 February 2009
SWFObject and LightBox2 - IE Errors
Today a colleague of mine had a problem whereby he was trying to use LightBox 2 in a webpage, but on that page, we received the "Internet explorer cannot open the internet site XXX Operation Aborted" message, and the page doesn't load.
After a lot of debugging, nothing was apparent, and it didn't happen in Firefox.
After reading around a bit, it seems that IE has a few issues with DOM commands, and as such, the SWFObject and Lightbox2 scripts both try to access the DOM at the same time.
So, all I did was move the SWFObject script to the foot of the page, and keep the div that it is written into in its normal place.
Sorted.
After a lot of debugging, nothing was apparent, and it didn't happen in Firefox.
After reading around a bit, it seems that IE has a few issues with DOM commands, and as such, the SWFObject and Lightbox2 scripts both try to access the DOM at the same time.
So, all I did was move the SWFObject script to the foot of the page, and keep the div that it is written into in its normal place.
Sorted.
Wednesday, 17 December 2008
Javascript parseInt, parseFloat, decide on data type
I was facing an issue today whereby I need to accept a value from an input control, but not knowing what it contained - i.e. a number, a floating point number (decimal) or a string, but I needed to perform maths on it.
With some help of some friends over at forums.asp.net, I came up with the following. You pass it your value, and it will send back the right data type to use on mathematical operations like "+" which normally concatenates strings instead of adding numbers as strings.
function parseValues(aValue)
{
if(isNaN(aValue))
{
return aValue;
}
else
{
if(aValue.indexOf(".")>0)
{
return parseFloat(aValue);
}
else
{
return parseInt(aValue);
}
}
}
With some help of some friends over at forums.asp.net, I came up with the following. You pass it your value, and it will send back the right data type to use on mathematical operations like "+" which normally concatenates strings instead of adding numbers as strings.
function parseValues(aValue)
{
if(isNaN(aValue))
{
return aValue;
}
else
{
if(aValue.indexOf(".")>0)
{
return parseFloat(aValue);
}
else
{
return parseInt(aValue);
}
}
}
Thursday, 24 April 2008
Automatically resizing an IFRAME based on it's content size
I had a case today when I must have spent 3 or 4 hours trying various elaborate exaples to try and get an IFrame to resize based upon the size of the target page of that IFrame. Many examples were suggesting have a method in the parent frame, that was to be called by the child frame, and in all instances it would just not work for me.
I found the following to work, and fortunately, it required no ammendments to the target page, just changes to the page that contained the IFRAME.
Firstly, a little snippet of JavaScript was need within the HEAD tags, as shown below:
function resizeMe(obj)
{
var docHeight = dynFrame.document.body.scrollHeight;
obj.style.height = docHeight + 'px';
}
Note that in < IE5.5, you should use offsetHeight rather than scrollHeight.
Then in an IFrame, add the attribute to trigger the resize when the iframe has loaded, as such:
onload="resizeMe(this);"
You should now have a resizing IFrame based on its content.
I found the following to work, and fortunately, it required no ammendments to the target page, just changes to the page that contained the IFRAME.
Firstly, a little snippet of JavaScript was need within the HEAD tags, as shown below:
function resizeMe(obj)
{
var docHeight = dynFrame.document.body.scrollHeight;
obj.style.height = docHeight + 'px';
}
Note that in < IE5.5, you should use offsetHeight rather than scrollHeight.
Then in an IFrame, add the attribute to trigger the resize when the iframe has loaded, as such:
onload="resizeMe(this);"
You should now have a resizing IFrame based on its content.
Subscribe to:
Posts (Atom)