I am trying to create a custom button in an Ajax HtmlEditorExtender control by locating the button container using its css class and appending a new button. However I am stuck at the first stage in that I cannot locate the container:
either in JQuery:
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
window.alert($btnContainer.length);
Alert produces 0 even though there are buttons in the container
or in vanilla jscript:
var x = document.getElementsByClassName("ajax__html_editor_extender_buttoncontainer");
window.alert(x.length);
alert again produces 0
Other elements on the page with css class names can be located in this way but the elements within the Ajax control cannot be found (even though they show up in Firebug with the above css class name).
Can anyone help please?
Added 04/06/15
Many thanks for the suggestions. Finding the control is indeed a timing and postback issue and not to do with getting the element within another control. If I strip out all except the vital bits, this is the code below.
Wherever I put the call to the JQ function, it cannot find the item wanted. None of the (commented out) ways of calling it work. Only if launched from a button on the page will it work. Have also tried calling the JQ from codebehind at page.LoadComplete but that is also too soon it seems.
Any help appreciated.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="EventsEdit.aspx.vb" Inherits="admin_EventsEdit"
ValidateRequest="false" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../Scripts/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function showcontainerJQ() {
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
alert($btnContainer.length);
$btnContainer.append("<input id=\"HtmlEditorExtender_H1\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 21px; height: 21px;\" unselectable=\"on\"></input>");
}
//window.onload = showcontainerJQ();
//document.onload = showcontainerJQ();
//body.onload = showcontainerJQ();
</script>
<style type="text/css">
.ajax__html_editor_extender_HtmlEditorExtender_H1
{
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: hand;
display: block;
float: right; /* default is left */
border: medium none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<input type="button" onclick="showcontainerJQ()";value="H1"; > add button</input>
<br /><br />
<asp:TextBox ID="TextBox1" runat="server" Height="400px" Text='<%# Bind("eventText") %>'
Width="265px"></asp:TextBox>
<asp:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" DisplaySourceTab="true"
EnableSanitization="false" runat="server" Enabled="True" TargetControlID="TextBox1">
<Toolbar>
</Toolbar>
</asp:HtmlEditorExtender>
</div>
</form>
</body>
</html>
Related
I'm trying to use several instances of an ascx control on a single page. Only the last control on the page works. I understand from this post [Asp.Net User Control does not work correctly when multiple are added to one form that the problem is related to the IDs; somehow I'm trying to reuse the IDs and the specific control being edited is not referenced correctly. However, the code on that page is complex and I don't understand the answers. I created a small example of my problem to demonstrate.
Here is my user control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
<script type="text/javascript">
function getValue() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
}
function getIndex() {
return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
}
</script>
<span>
<asp:DropDownList ID="droppit" runat="server" OnChange="getValue();" >
<asp:ListItem Value="Select a Value"></asp:ListItem>
<asp:ListItem Value="one"></asp:ListItem>
<asp:ListItem Value="two"></asp:ListItem>
<asp:ListItem Value="three"></asp:ListItem>
</asp:DropDownList>
</span> Index Value =
<span>
<asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>
</span>
Here is the page that uses the controls:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%# Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:testControl ID="testControl1" runat="server" />
<br /><br />
<uc1:testControl ID="testControl2" runat="server" />
</div>
</form>
</body>
</html>
Can you show me how to make this work?
Thanks for your help.
ASP.NET generates different IDs which include the UserControl ID so IDs aren't the issue here.
However the problem is with the JS code that you are including in the User Control. This gets repeated and bad things happen because of that obviously.
You should get those scripts outside the User Control and change them to use parameters.
Something like:
<script type="text/javascript">
function getValue(ctrlID) {
document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
}
function getIndex(ctrlID) {
return document.getElementById(ctrlID).selectedIndex;
}
</script>
And you can call these functions from the User Control like this: OnChange="getValue(this.id);"
I am displaying details of customers in a table format, there is an edit button if i click on that button the details of the customers must slide up and get hidden and a new div must slide up in place of the previous one so as to give the user a textbox to edit the details. How that can be achieved through jquery.. thanks
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SlideUpDownApplication.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnpress").click(function () {
$("#replaceDiv").slideDown("fast"); //Slide Down Effect
$("#myDiv").slideUp("fast"); //Slide Up Effect
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="button">
<asp:Button ID="btnpress" runat="server" Text="Button" />
</div>
<div id="myDiv">
<p>
Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom.
</p>
</div>
<div id="replaceDiv">
<asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
This is easily done in Javascript using jQuery.
In the button click even handler function you write code which:
1. Use jQuery slide up animation to slide the div containing customer details.
2. Use jQuery slide down animation to slide a div containing a textbox to edit the detail.
I have a Web user control named UserControl.ascx and a JavaScript function 'GetValues()' to return some value is embedded in that ascx page. I've compiled the ascx page into a dll and used that in another web application.But now the problem is when I tried to call the user control JavaScript function from web application, JS Debugger showing 'GetValues' is undefined
error. Is there any way solve this issue ?
in ASCX File:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ICEImage.ascx.cs" Inherits="ICEImage" %>
<div>
<asp:TextBox ID="txtValue" runat="server" BackColor="#FFFFC0" ReadOnly="True" Width="150px"
</div>
<script type="text/javascript">
function GetValue()
{
return parseInt(document.getElementById('<%=txtValue.ClientID%>').value);
}
</script>
ASPX File:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register TagPrefix="ASP" Assembly="App_Web_iceimage.ascx.cdcab7d2" Namespace="ASP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sample Page</title>
</head>
<body style="background-color: #383838">
<form id="form1" runat="server">
<ASP:iceimage_ascx ID="ICEImage1" runat="server"></ASP:iceimage_ascx>
<button id="btnSave" style="width: 85px; height: 29px" type="button" onclick="GetValue()">Save</button>
</form>
</body>
</html>
You can define your function from server code like this and add this on Page_PreRender for example
if (!Page.ClientScript.IsClientScriptBlockRegistered("FunctionGetValue"))
{
string script = #"function GetValue() {
return parseInt(document.getElementById('"+txtValue.ClientID+"').value);
}";
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "FunctionGetValue", script, true);
}
In my application i just want to alert the value in the text box using javascript .
aspx page code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" Text="asdsad">
</asp:TextBox>
</div>
</form>
</body>
</html>
I only get alert 'hi' ..after that i get an error " object required" . whats the reason?
Your code is running before the element has been displayed on the screen. Try -
window.onload = function() {
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
}
Or move your script to the bottom of the page as suggested by Tejs in the comments below.
The page is not loaded yet. You have to put the code in a function and then trigger with
onload=yourfunction;
Please change the script location, put the script code on bottom of the page.Just After the complete with form tag.
The ID you are trying to get is a server side id and not the html id of the element, if you checked using firebug you will notice that the id has loads of extra letters and numbers inserted by asp.net, i'd recommend using jquery instead to walk into the dom to select the specific element.
You could also add a name and getByName.
I have made the same Google map web page with more than two destination to get direction between them. Now whenever I click on add more destination using anchor tag in web page, using JavaScript my table row should be visible in which one textbox for destination and label will be there. So can anybody tell whats the process of handling such situation using JavaScript?
You can check more about my problem by clicking on Google map get directions and adding more destinations. The same I want to do. Can anyone tell me about how to?
If I understood correctly this is what you need:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TableRowShow.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('addDestination').setAttribute('onclick', 'addDest();');
}
var i = 1; // position of next tr to be shown
function addDest()
{
var trs = document.getElementById('travelTable').getElementsByTagName('tr');
if (trs[i] != null)
trs[i++].style.display = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="travelTable">
<tr>
<td>
<asp:TextBox runat="server" />
</td>
</tr>
<tr style="display: none">
<td>
<asp:TextBox runat="server" />
</td>
</tr>
<tr style="display: none">
<td>
<asp:TextBox runat="server" />
</td>
</tr>
</table>
<asp:HyperLink runat="server" ID="addDestination"
ClientIDMode="Static" NavigateUrl="javascript:;" >
Add Destination
</asp:HyperLink>
</form>
</body>
</html>
Code should be pretty much self explanatory but ask if you have any question. :)