In my aspx, I have the following snippet of code, which correctly renders the Editor Control from the AjaxToolkit
<div>
<ajaxToolkit:Editor ID="Editor" runat = "server" />
</div>
In C#, to access the content of the Editor is simply:
Editor.Content = "some text here"
However in JavaScript, I am unsure how to access this. So far, I have tried:
var st =$find('<%=Editor.ClientID%>').get_content();
However the $find statement is returning a null value.
It should work. I tried the following code and editor component was found successfully.
<asp:ScriptManager runat="server" ID="ScriptManager" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Path="Scripts/jquery-1.4.1.js" />
</Scripts>
</asp:ScriptManager>
<div>
<ajax:Editor runat="server" ID="Editor"></ajax:Editor>
</div>
<script type="text/javascript">
Sys.Application.add_load(function() {
Sys.Debug.traceDump($find('<%= Editor.ClientID %>'), "editor");
});
</script>
So, try to access you editor in Sys.Application.add_load event handler. If this will help you then the cause of the problem is that you tries to find component before page completes component initialization.
After playing around with this feature, I noticed that the HTML looks like this:
<iframe id = "Some iFrameId">
#document
<html>
<head>...</head>
<body>The text of the editor</body>
</html>
</iframe>
In the ASPX, I did the following to make my life a litle bit easier:
<div id ="myDiv" ClientIDMode="Static">
<ajaxToolkit:Editor ID="Editor" runat = "server" />
</div>
By doing this, I have simplified my problem to become find the iFrame enclosed in myDiv, which contains the HTML of the editor.
To do that in the JS
//get the iFrame
var myIframe = $("#myDiv, iframe") //this returns an array and myIframe[1] is the iFrame, which contains the text.
//get the HTML from the iFrame
var content = myIFrame[1].contentWindow.document.body.innerHTML;
Now content contains, what I was looking for. This is kind of long, and there might be an easier way, but after searching for a solution, I found most of them to be:
do a .get_content or some function call, which didn't work for my case.
Related
I'm really stuck and I've tried all the other examples but nothing works. I'm fairly new to ASP.NET but learning fast!
I want to use the jQuery datepicker and I am inserting this script
<script>
$(document).ready(function () {
$(function () {
$("#" + '<%=txtDOB.ClientID%>').datepicker();
});
});
</script>
and my control on the aspx page is
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
As soon as I close the the server tag %> the red line appears under the txtDOB control and says:
txtDOB is not declared. It may be inaccessible due to its protection level.
I've made the class public in the code behind but doesn't make any difference. I've also moved the script to the bottom of the page. If I change the asp textbox to a HTML input it works fine.
It will work fine with an ASP.NET TextBox as you have used. Therefore it must be to do with where your control is located. For example, if it's inside a Repeater or Grid, you will not be able to use its ID directly like that, since the framework will generate unique ids for each row at runtime.
Create a simple webform with no other controls on the page, and you will find it works just as you have it.
Try using static ID mode instead:
<script>
$(document).ready(function () {
$("#txtDOB").datepicker();
});
</script>
It makes the client script easier (especially when you move it to an external .js file to take advantage of caching), and is an easy change to the ASP control:
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server" ClientIDMode="Static"/>
You could use a different type of jQuery selector to select for that ID as follows:
<script>
$(document).ready(function () {
$("input[id$=_txtDOB]").datepicker();
});
</script>
That selector will account for the text that is being appended to the beginning of your ID due to the use of your CreateUserWizard control. It is cleaner than the way you are currently doing it, and you can use your original HTML.
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
I have a script block in my ASP.Net file, where I should access javascript of an external control. This doesn't seem to work at all, I tried all the solutions I found on the web, but probably I'm not searching for the right stuff. As far as I've seen the src attribute in the script tag would do the work, but I can't have own code and this src attribute it seems.
Interesting enough, it works proper when I just call the javascript function from the event. Something like this:
Works:
<stgwc:ImageLinkButton runat="server" ID="ImageLinkButton1" ImageUrl="~/Images/base/Icons/16x16/brush1.png" OnClientClick="GridRowEnterEditMode(this, 'EditRole'); return false;" />
And my approach was:
<stgwc:ImageLinkButton runat="server" ID="btnEditRole" ImageUrl="~/Images/base/Icons/16x16/brush1.png" OnClientClick="EnterRolesEditMode(this.id); return false;" />
function EnterRolesEditMode(btnClientId) {
var grd = document.getElementById('dgrRoles');
var btn = document.getElementById(btnClientId);
grd.GridRowEnterEditMode(btn, 'EditRole');
}
I simply want to call a JavaScript function from asp.net hyperlink
im using http://orangoo.com/labs/GreyBox/ my requirement is to show thumbnail on hyperlink and on click show full image. Should I use another control?
my code is below:
<asp:HyperLink ID="Hyperlink" runat="server" CssClass="Screenshot" ImageUrl="App_Themes/White/Images/thmb_screenshot_1.png"
NavigateUrl="App_Themes/White/Images/screenshot_1.png" ToolTip="screenshot 1" />
<script language="javascript" type="text/javascript">
//Greybox Image popup window
function OpenImage(url) {
var caption = "Home";
return GB_showImage(caption, url)
}
</script>
how can I use
onclick="OpenImage(this.src);
or
OnClientClick="OpenImage(this.src);
I know this is old but to anyone interested, just add onclick and it will work fine. The extra attribute (even though it doesn't show up on intellisense) will pass through to the rendered markup.
<asp:HyperLink ID="HyperLink4" runat="server" onclick="logDownload();" NavigateUrl="~/download/Sample-Icons.zip">Download Icons</asp:HyperLink>
If you use a LinkButton instead, you can use the OnClientClick property to execute a JavaScript function. Using the HyperLink control, you can use the NavigateUrl property like this:
<asp:HyperLink ID="Link1" runat="server"
Text="Click Me!"
NavigateUrl="javascript:OpenImage('App_Themes/White/Images/thmb_screenshot_1.png');">
</asp:HyperLink>
Here's an article that discusses it:
http://gchandra.wordpress.com/2007/09/27/call-javascript-function-inside/
I know this is old, but for anyone looking to do this on the server side and not through the markup, you can do.
var hyperLink = new HyperLink { Text = "Display text", ID = "hyperlinkId"};
hyperLink.Attributes.Add("onclick", "javascriptMethod()");
It looks like you are basically there, what's wrong with this?
<asp:HyperLink ID="Hyperlink" runat="server" OnClientClick="OpenImage(this.src)" />
I saw this question, "Show Open Dialog on a Button click":
'I have to show a Open Dialog box on a button click. Basically I have to upload a file, for this I am using FileUpload control, but I don’t want to show it to user instead I want to show a Button'
And the answer was :
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#FileUpload1").click();
return false;
});
});
</script>
<style type="text/css">
.Class { visibility:hidden;}
</style> </head> <body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btn" runat="server" Text="Send File"/>
<asp:FileUpload ID="FileUpload1" CssClass="Class" runat="server" />
But i tried it and all it does is refreshing the page, anyone know what the problem is?
Because "FileUpload1" is not the ClientID. Just look at the generated HTML source of your page and you will see that.
You should use something like :
<script type="text/javascript">
$(document).ready(function() {
$("#<%= btn.ClientID %>").click(function() {
$("#<%= FileUpload1.ClientID %>").click();
return false;
});
});
</script>
That sounds like a security risk, and I wouldn't be surprised if security prevented that from working.
Take a look at this jQuery Ajax Upload plugin.
I would suggest you to not go that route. If you want to avoid showing FileUpload control to user.. use this.
make the client mode static to be able to access you controls like this
<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" CssClass="Class" runat="server" />
<asp:Button ID="btn" ClientIDMode="Static" runat="server" Text="Send File"/>
All server-side controls (those with runat="server" attributes) have their IDs re-written by ASP.NET. Your IDs will actually look something like ctl00_MainContent_btn.
You can get around this by using <%= btn.ClientID %> server tags or by assigning a CSS class to your controls and referencing that class in JavaScript/jQuery.
Edit: You probably also need to make sure that your ASP button is not a submit button, which would cause the generated page to submit the form.
Your page refreshes because the target of your form is implicitly the current page. You need to set the target of your form to be (for example) a hidden iframe:
<form id="my-form" action="url" target="form-target" method="post">
<!-- your form here -->
</form>
<iframe id="form-target" name="form-target" style="display:none;"></iframe>
<script>
// Assuming you are using jquery
var form = $('#my-form'),
iframe = $('#form-target');
// create a function to be called each time the iframe loads
iframe.load(function () {
var responseText, iframeBody;
// Get the response from the server. It will be in the body tag of your iframe
iframeBody = $(this).contents().find('body');
responseText = iframeBody.text().trim();
// Don't continue until we actually have a response
if (!responseText) return;
// Clear the iframe's html so this function won't be called again for the same content
iframeBody.html('');
// do whatever you want with the response, for example JSON decode it
response = JSON.parse(responseText);
});
</script>
I have a tag element in .aspx page:
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
and trying to get loginLink.ClientID , but it spits back ct100_main_loginLink. How do I get original 'loginLink' id in the same aspx page?
Tried var ctrl = document.getElementById('<%# loginLink.ClientID %>');
and it didnt work..
example:
<asp:Content runat="server" ContentPlaceHolderID="Main">
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
<script type="text/javascript"> alert('diplay here original loginLink ID instead of ct100_Main_LoginLink'); </script>
</asp:Content>
if you know the name, and that's what you want to have available in js, you can just type it in js. alternatively, if you want the control to provide its own id, you could do
<script type="text/javascript">
alert('<% =loginLink.ID %>');
</script>
although I don't see the point in that. if you need to grab the element during a javascript routine, you'll need the ClientID value as there won't be any element on the page with the short-form id in the example I've given.
You need to write '<%# loginLink.ClientID %>', and you can only write it in the original ASPX page. (Not an external JS file)
If you wnat to get the original ID (which never shows up on the client), use loginLink.ID.
if you use a tool like FireBug you will see that the actual ID output to the client is the long one with ct100.... in ASP.NET pages.
You will not normally get loginlink back to the client unless you are using Dot.NET 4.0 and controlling the client-mode.
in your example the var ctrl should hold a reference to the DOM element