I'm using the colorbox modal plugin (http://colorpowered.com/colorbox/)
I've got a simple form sitting in a master page, for some reason I cannot get the submit button to post back, it doesn't do anything at all.
Seems to be a problem a few people are having, but I cant find a fix.
Here' some code I'm playing with, any clues?
Code in Masterpage
<link href="http://www.communitysectorservices.org.au/css/colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.communitysectorservices.org.au/js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "700px", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
$(".example8").colorbox({ width: "600px", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
});
</script>
Code in the content page
<div style='display: none'>
<div id='inline_example1' style='padding: 10px; background: #fff;'>
<h2 style="color: #da5f33;">
<asp:Label ID="lblEventTitle" runat="server" Text="Label"></asp:Label></h2>
<p>
Please fill out the following form to sign up for the <b>
<asp:Label ID="lblEventTitle2" runat="server" Text="Label"></asp:Label></b></p>
<blockquote>
<p>
<b>
<asp:Label ID="lblName" runat="server" Text="Your Name" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtName" runat="server" Width="350px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorName" ControlToValidate="txtName"
ValidationExpression="^[a-zA-Z ]+$" runat="server" ErrorMessage="*" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;"></asp:RegularExpressionValidator><asp:RequiredFieldValidator
ID="RequiredFieldValidatorName" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;" ControlToValidate="txtName" Text="*" runat="server" /></p>
<p>
<b>
<asp:Label ID="lblOrganisation" runat="server" Text="Your Organisation" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtOrganisation" runat="server" Width="350px"></asp:TextBox>
</p>
<p>
<b>
<asp:Label ID="lblEmail" runat="server" Text="Your Email" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtEmail" runat="server" Width="350px"></asp:TextBox><asp:RegularExpressionValidator
ID="RegularExpressionValidatorEmail" ControlToValidate="txtEmail" ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"
runat="server" ErrorMessage="*" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;" ControlToValidate="txtEmail"
Text="*" runat="server" /></p>
</blockquote>
<p>
<b>Secury Question</b></p>
<p>
You must answer this question correctly so we can make sure you are human.</p>
<blockquote>
<p>
<b>
<asp:Label ID="lblQuestion" runat="server" Text="5 + 5 =" Width="50px"></asp:Label></b>
<asp:TextBox ID="txtAnswer" runat="server" Width="50px"></asp:TextBox><asp:Label
ID="lblValidate" runat="server" Width="10px"></asp:Label></p>
</blockquote>
<p style="text-align: right; padding-right: 10px;">
<asp:Button ID="Button1" runat="server" Text="Register for Event" /></p>
Thanks to Dynde's lead I was able to fix it:
function appendHTML() {
if (!$box && document.forms[0]) {
init = false;
$window = $(window);
$box = $tag(div).attr({ id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : '' }).hide();
$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
$wrap = $tag(div, "Wrapper");
$content = $tag(div, "Content").append(
$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
$title = $tag(div, "Title"),
$current = $tag(div, "Current"),
$next = $tag(div, "Next"),
$prev = $tag(div, "Previous"),
$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
$close = $tag(div, "Close")
);
$wrap.append( // The 3x3 Grid that makes up ColorBox
$tag(div).append(
$tag(div, "TopLeft"),
$topBorder = $tag(div, "TopCenter"),
$tag(div, "TopRight")
),
$tag(div, false, 'clear:left').append(
$leftBorder = $tag(div, "MiddleLeft"),
$content,
$rightBorder = $tag(div, "MiddleRight")
),
$tag(div, false, 'clear:left').append(
$tag(div, "BottomLeft"),
$bottomBorder = $tag(div, "BottomCenter"),
$tag(div, "BottomRight")
)
).find('div div').css({ 'float': 'left' });
$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
$groupControls = $next.add($prev).add($current).add($slideshow);
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
}
}
The only 2 lines I changed were the at the beginning and the end of the function:
if (!$box && document.forms[0]) {
and
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
I'm pretty sure this:
http://onefishmedia.com/onefishmedia/post/2010/04/29/Getting-ASPNET-Server-Controls-to-work-within-Fancybox-or-Colorbox-plugins.aspx
is what you're looking for.
It happens because the colorbox div is being created outside of the form tag. There's a quick fix in the link - however, in one of the comments it also says it would be easy to implement a parameter for specifying where in the code, you want colorbox to be created - which is what I'd like to do - but it doesn't appear to me, to be so easy :/
I has the same problem and solved it on the call of colorbox, moving the colorbox element to the asp.net form:
$("a.colorbox").colorbox({
width: 600,
onOpen: function () {
$('#aspnetForm').append($('#colorbox'));
}
});
Related
I have an asp.net repeater that displays a title and and image.
The title is very long , so I want to display the title again on mouse over.
I tried to implement a mouse over but I have the following problem.
My display looks like this :
Repeater Element 1 Repeater Element 2
Title 1 Title 2
Image 1 Image 2
Now on doing a mouse over on Element1 , my mouse over displays Title1.
On doing a mouseover on Element2 , my mouse over displays Title1 again ,and I would like it to
display Title2 ? Can anyone point me on how i can achieve this.
My code is below :
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
<%#Eval("Name")%>
</div>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
The javascript functions are as follows :
function hidesamplepopup() {
document.getElementById('popup').style.display = 'none';
return false;
}
function showsamplepopup(e) {
e = (e) ? e : window.event;
var element = (e.target) ? e.target : e.srcElement;
var left = element.offsetLeft;
var top = element.offsetTop;
while (element = element.offsetParent) {
left += element.offsetLeft;
top += element.offsetTop;
}
document.getElementById('popup').style.display = 'block';
document.getElementById('popup').style.left = left;
document.getElementById('popup').style.top = top;
return false;
}
I do not know what is your requirement. It could have been a lot easier if you use jQuery tooltip.
This is just an alternative approach.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage"
runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Notice that getElementById will return the first element with that ID. And you're using the same ID for your Div's.
You should either use a different ID for each item of the repeater (generating different ID's for each of them), or change your logic to fetch them by some other property. I highly recommend using jQuery as well.
I would change the way which you are binding the events to elements, as your sample code doesn't use jQuery I'll assume you don't want it :)
First things first, you'll want to add a class to the asp:panel so that there will be some way of identifying and selecting all the instances. Also you'll want to use classes for your popups not IDs as IDs should be unique on a page.
then you can do something like:
var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;
for(;i<l;i++)
{
elements[i].addEventListener('mouseover', function(e) {
var popup = this.querySelector('.popup');
//do some stuff to popup
});
}
It's also important to note that querySelector is not supported in legacy browsers (see https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector for more info and support table) and older IEs (pre 9) use attachEvent instead of addEventListener which you may need to write additional code to support
This question already has answers here:
jQuery UI Dialog with ASP.NET button postback
(17 answers)
Closed 9 years ago.
that's my code :
<div id="AddFriendDiv" style="display: none">
<asp:TextBox ID="FriendParamtxt" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchFriend_btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="SearchFriend_btn" runat="server" OnClick="SearchFriend_btn_Click" Value="Search" />
<asp:Repeater ID="FriendRequestRepeater" runat="server">
<ItemTemplate>
<table border="1">
<tr>
<td>
<img src='<%#Eval("PROFILE_PIC") %>' width="35px" height="35px" alt='<%#Eval("NAME") %>' />
</td>
<td>
<asp:Label ID="Name_lbl" runat="server" Text='<%#Eval("NAME") %>'></asp:Label>
</td>
<td>
<input type="hidden" id="requestFriendID_hf" /><input type="button" id="addFreind"
value="Send Request" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
client side :
function SendFriendRequest() {
var dialogOption = { title: "<u>Add Friend</u>", width: 280, height: 140, modal: false, resizable: false, draggable: true,
maxHeight: 340, autoOpen: true, closeOnEscape: true
};
var DialogExtendOptions = { "close": true, "maximize": false, "minimize": true, "dblclick": 'minimize', "titlebar": 'transparent' };
$("#AddFriendDiv").dialog(dialogOption).dialogExtend(DialogExtendOptions);
$("#AddFriendDiv").show();
}
server side :
protected void SearchFriend_btn_Click(object sender, EventArgs e)
{
DataTable frdrequest= new DataTable();
int clientID =int.Parse( UserID.Value.ToString());
if (FriendParamtxt.Text != "")
{
frdrequest = SQLHelper.GetAllClientByParam(FriendParamtxt.Text, clientID);
if (frdrequest.Rows.Count > 0)
{
FriendRequestRepeater.DataSource = frdrequest;
FriendRequestRepeater.DataBind();
}
}
}
SendFriendRequest is beeing called form an a tag outside but the problem is that the button click event isn't firing when the main div is a dialog but when i changed it to normal div it work fine anyone know a solution for this ?
The problem is that jQuery UI appends the dialog to the body, rather than the form. ASP.Net controls need to be inside the form in order to function, but thankfully this is easy to fix. Modify your jQuery like so:
$("#AddFriendDiv").dialog(dialogOption)
.dialogExtend(DialogExtendOptions)
.parent().appendTo($("form:first"));
$("#AddFriendDiv").show();
This will help you
var dialog = $("#divModal").dialog({
autoOpen: false,
height: 515,
width: 900,
modal: true,
draggable: false,
resizable: false
});
dialog.parent().appendTo(jQuery("form:first"));
Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});
<link type="text/css" rel="stylesheet" href="scripts/jquery-ui-1.8.5.custom.css" />
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function getalert1(Leave_RegisterID)
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
$(function () {
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode",
display: ''
});
$('.LeaveReason1').click(function ()
{
$('#reason').html();
$('#reason').dialog('open');
return false;
});
});
}
</script>
The Button that i click :
<button id="LeaveReason1" class="LeaveReason1" onclick="getalert1('<%# Eval("Leave_RegisterID") %>');" title="Decline">Decline</button>
However when i debug in firebug it does not got inside this code which it should :
$('#reason').html();
$('#reason').dialog('open');
return false;
HTML
<div id="reason" style="height: 300px; min-height: 109px; width: auto; display:none;" class="ui-dialog-content ui-widget-content" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" class="body_txt" style="padding-right:2px">
<asp:Label ID="lblReason" runat="server" Text="Reason:" ></asp:Label>
</td>
<td width="75%">
<asp:TextBox ID="txtReason" Height="40%" Width="100%" MaxLength="200" TextMode="MultiLine" runat="server" CssClass="txt_bx" ></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button Width="30%" runat="server" Text="Submit" id="btnSubmit" Height="25px" CssClass="clButton" ></asp:Button>
</td>
</tr>
</table>
</div>
it does not go inside the above given code.. since you have that code inside another click event..so basically for that to work you have to click the same button again.... which will not work..
try this
function getalert1(Leave_RegisterID) // you are calling this function whn click
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
//$(function () { and no need of ready function here
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode",
display: ''
});
// $('.LeaveReason1').click(function () { again you have a click event here which is not necessary at all.. since the click is already fired by getalert1()
$('#reason').html();
$('#reason').dialog('open');
return false;
});
}
$(document).ready(function(){
//separate your dialog init
$(function() {
$('#reason').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
});
//only have one click event
$('.LeaveReason1').click(function ()
{
document.getElementById('<%= hdnLeave_RegID.ClientID %>').value = Leave_RegisterID;
$.fx.speeds._default = 1000;
$('#reason').html();
$('#reason').dialog('open');
return false;
});
Here i have a div in which i am showing it during the mouse hover in the master page and after mouse hover three href links will appear in that div .After clicking that href link it is traversing to another page,postback happens and that div is getting hidden in the master page.I need to show that div after that click also.I have used updatepanel and tried it but still it is not working.here is my code
//Div part
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<div runat="server" class="divSUBMenu" id="describe" style="width: 700px; height: 20px;
font: Arial, Helvetica, sans-serif;" onclick="show(0)">
</div>
</ContentTemplate>
</asp:UpdatePanel>
//Onhover part
<a href="#" onmouseover="showit(0)">
<img src="Images/Analyze_over.jpg" name="image1" width="84" height="22" border="0"
id="image1" alt="" /></a>
//Javascript for mousehover(working fine)
var submenu = new Array();
submenu[0] = ' <font style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a> <a style="color: #FFFFFF; text-decoration: none;" href="AEventPerformance.aspx">Event Performance</a> <a style="color: #FFFFFF; text-decoration: none;" href="ACannibalization.aspx">Cannibalization</a> <a style="color: #FFFFFF; text-decoration: none;" href="AHaloEffect.aspx">Halo Effect</a> <a style="color: #FFFFFF; text-decoration: none;" href="AVolumeDecomposition.aspx">Volume Decomposition</a></font></span>';
var delay_hide = 500;
var menuobj = document.getElementById ? document.getElementById("describe") : document.all ? document.all.describe : document.layers ? document.dep1.document.dep2 : "";
function showit(which) {
clear_delayhide();
document.getElementById("describe").style.visibility = 'visible';
thecontent = (which == -1) ? "" : submenu[which];
if (document.getElementById || document.all) {
menuobj.innerHTML = thecontent;
}
else if (document.layers) {
menuobj.document.write(thecontent);
menuobj.document.close();
}
}
and finally the part below is not working during the onclick but this alert is working
function show(which) {
alert("test");
document.getElementById("describe").style.visibility = 'visible';
}
Any suggestion??
EDIT:
This is the href am clicking
<a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>
You have to use ClientScriptManager
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
Example:
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += " spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
Since the div is set to runat=server, you could control this on the server side - setting describe.IsVisible = false initially, and changing it to describe.IsVisible = true post-click.
If for whatever reason this must be done on the client, due to reliance on other scripts or something, then make sure you're looking for the control by using the correct identifier - it could be, depending on the version of ASP.NET you're using, that the control is prefixed with ctl00_x. In fact, even in newer versions of ASP.NET (above .NET 3.5), I think the UpdatePanel might explicitly alter the identifiers of its elements using a prefix so as to keep track of what it contains, don't quote me on that though. Check the rendered markup output on the page to check this.
I'm trying to achieve setting my image inside my div id =test this has became extremely problematic:
cn.Open();
using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
{
using (OdbcDataReader reader = cmd.ExecuteReader())
{
var divHtml = new System.Text.StringBuilder();
while (reader.Read())
{
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
divHtml.Append("<div id=test>");
divHtml.Append(img + String.Format("{0}", reader.GetString(0)));
// how can I append an img inside my div id=test?
// the image must stay at the start of the div id=test + the contents(text) from my database (in that order)
divHtml.Append("</div>");
}
test1.InnerHtml = divHtml.ToString();
}
}
}
}
css:
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
div#test1 {
}
div#test
{
width:90%;
z-index:1;
padding:27.5px;
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}
Asp html:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"
Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px"
onclick="Button1_Click" />
</p>
<p>
</p>
<div id="test1" runat="server" />
// contents from my code go inside this div as div id=test
</asp:Content>
Firebug output:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1"><div id="test">System.Web.UI.WebControls.Imageweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div><div id="test">System.Web.UI.WebControls.Imagehello</div><div id="test">System.Web.UI.WebControls.Imagestill trying</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imagelets try this again</div><div id="test">System.Web.UI.WebControls.Imagehair marry went up the hill</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagekjgfkjh</div><div id="test">System.Web.UI.WebControls.Imageanother comment</div><div id="test">System.Web.UI.WebControls.Imagebla bla hope this works</div></div>
I know the reason why my code outputs the actual text of the web ui controls, I have had in another post code that actually gets the image up but it adds the image onto the "END" of the test div so rather than it look like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"><img src=blabla></img> the text goes after the image </div>
It looks like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"> text comes before image </div>
<img src=blabla></img>
<div id="test">hello</div>
<img src=blabla></img>
Which isn't what I want, the code I've added although I know the reasons why it outputs the web controls text is just a demonstration of "how" I'm trying to get it to work.
divTest.Append on img THEN text;
Of course I cant append I would have to use controls.add but I still couldn't get it to work.
Previous post is here so you can see some images and some ideas:
My code below gives me a problem, the image comes after the text
Image is a web control. You can't stick it in a StringBuilder.