iFrame IE8 using jQuery ColorBox - c#

I am using the JQuery ColorBox with inline content that seems to work fine in most browsers, however when I use it in IE8 it loads fine the first-time then after that the iFrame part of the content doesn't show?
I have checked the source and the iframe is rendered in the html correctly. I am using asp.net 3.5 and c# for the server-side.
Server-Side code:
<script>
jQuery(document).ready(function () {
jQuery.fn.colorbox({ width: 376, inline: true, href: "#LightBox" });
});
</script>
<div style='display:none'>
<div id='LightBox' style='padding:10px; background:#fff;'>
<sc:Image runat="server" ID="imgBanner" Field="Banner" MaxWidth="346" />
<sc:Text runat="server" ID="txtContent" Field="Content" />
<iframe runat="server" id="iFrm" height="220px" scrolling="no" frameborder="0" />
<img src="/images/loading.gif" alt="loading" id="preload-img" />
</div>
</div>
Client-Side:
<div style='display:none'>
<div id='LightBox' style='padding:10px; background:#fff;'>
<img src="~/media/Images/Premier/newsletters/ignite/header_4.ashx?mw=346" alt="Ignite" width="346" height="132" />
<p><strong>Free e-newsletter from Premier</strong> </p>
<p>Hot topics impacting your life today...</p>
<p>You are invited to receive <strong>Ignite</strong>, the UK's leading Christian <br />e-publication,
dealing with the hottest issues of our day: from abortion, to going 'green', to the debate over homosexuality.</p>
<p>To receive your free weekly subscription to <strong>Ignite</strong> fill in your details below.</p>
<iframe id="content_10_iFrm" height="220px" scrolling="no" frameborder="0" src="http://email.premierchristianmedia.co.uk/premierradiolz//WebCapture.aspx?pID=334&t=0"></iframe>
<img src="/images/loading.gif" alt="loading" id="preload-img" />
</div>
</div>

Until a fix is found, you can make IE8 emulate IE7 by adding this meta tag to the head section of your page
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Related

form tag is not loading inside an iframe, its getting commented out inside iframe tag

For my application, i want to have a hidden iframe with a form inside, which has some input fields. The value to the fields will be added based on the response i get from backend and then submit the form. The problem is on the browser the content inside iframe is commented out like below
form tag in browser
My html code is like below
<html>
<head>
</head>
<body>
<div class="ddc-iframe-3ds">
<iframe height="1" width="1" style="display: none;" >
<form id="collectionForm" method="POST" action="https://secure-test.worldpay.com/shopper/3ds/ddc.html">
<input type="hidden" id="ddcBin" name="Bin" value="" />
<input type="hidden" id="ddcJWT" name="JWT" value="" />
</form>
</iframe>
</div>
</body>
</html>
in the below link, to integrate with payments, it is suggested to use hidden iframe with a form inside
3DS payment integration

ASp.net Webform multiline textbox adds line break on page load automatically

From last one/two weeks i am noticing that any multiline textbox that i am using in asp.net web-form based website adds line-break to textbox automatically.
This has never happened before i ma facing this issue with almost all asp.net webform websites
<textarea name="txtComment" rows="2" cols="20" id="txtComment" tabindex="4" class="comment-box">
</textarea>
I am not sure why this is happening. It gets bad when we update the page & if we dont manually remove line breaks it will keep on adding linebreak to multiline textbox. I am not sure if this issue is due to some windows update or browser. It happens in Firefox & later i noticed same in Chrome?
Not sure why this is happening
Example: Code
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Rows="3"> Line </asp:TextBox>
</div>
</form>
HTML Rendered Output
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./TESTMultiline.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQ0NTE4MDYwZGRecdSIl8wWZzLW33b1SXrfQmgMkA==" />
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<textarea name="TextBox2" rows="3" cols="20" id="TextBox2">
Line </textarea>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F8195D5B" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAN9qVvxr9edjD9ICF1fyY9rESCFkFW/RuhzY1oLb/NUVB2nXP6dhZn6mKtmTGNHd3PbNvMJfATDdpnltdJAG8xg/EABZA==" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"b33e31c27a494a9c8d0d82b3f5432ca7"}
</script>
<script type="text/javascript" src="http://localhost:61571/7d590f801da8489ebffe28d952f8f4af/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
OUTPUT
The problem is related to the way the TextBox Control is being rendered. Changing the value for controlRenderingCompatibilityVersion in web.config did the trick for me:
controlRenderingCompatibilityVersion=4.5
The information is from the question Extra characters added to multiline textbox, answer from JTapp/jmoreno.
just remove
from this row
<textarea name="TextBox2" rows="3" cols="20" id="TextBox2"> Line </textarea>
Two options:
Remove the space before the "_Line" in your source code: probably an unwonted character is 'hiding' there
Try remove text all together - and adding it in the code behind: TextBox2.Text = "Line";
Edited:
Open Chrome dev tool and check all css/classes/styling that effects this tag

How can I Insert an Umbraco Item in to a url in a cshtml file, razor?

I've made an If statement containing a youtube link.
In umbraco I have a Text String box that enables a user to insert the ID of a youtube video.
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
But when the page loads it displays the <umbraco:Item field="youtubeId" runat="server" /> instead of what the user put in.
What work around is their to display what a user inserts into the text string box.
All must be done in razor
I would create a "YoutubeVideo" macro along with it's razor script "YoutubeVideo.cshtml". And that cshtml code would look like this:
#using umbraco.MacroEngines
#inherits umbraco.MacroEngines.DynamicNodeContext
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/#Model.youtubeId?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Then in your .master you could include that mascroscript like this:
<umbraco:Macro ID="Macro1" Alias="YoutubeVideo" runat="server" />
This approach may differ if you are using Umbraco 6+ with MVC, but otherwise this should do the trick.
If you are doing this inside the umbraco template editor you should be able to swap the double quotes denoting the src attribute with single quotation marks, and the umbraco item needs no change.
<iframe width="100%" src='http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0' frameborder="0" allowfullscreen></iframe>

ASP.NET Form Fields Not POSTing from colorbox

I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:
<form id="myform" runat="server" clientidmode="Static" method="post">
<asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
<asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/eCommerce.js" />
</Scripts>
</asp:ScriptManager>
<div style="width: 940px; margin-left: auto; margin-right: auto;">
<div align="left">
TOP OF THE PAGE
<asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
BOTTOM OF THE PAGE
</div>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
</script>
</form>
Here is some of the code from my main default page that uses the master page:
<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">
<asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
<asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<div class="add_product">
<div class="add_product_menu text_12_bold">
<asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
<asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static"
onchange="addProduct()">
</asp:DropDownList>
</div>
</div>
</asp:Panel>
<div class="clear"></div>
<!--- HERE IS THE COLORBOX POPUP CONTENT --->
<div style="display: none; visibility: hidden;">
<div id="inline_login">
<p><strong>User Login Details Go Here</strong></p>
User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
<input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />
</div>
</div>
</asp:Panel>
<asp:Label ID="xmlContent" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.
Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.
Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:
jQuery('#inline_login').appendTo('form');
Hope it helps someone else!
I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.
Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.
$(document).bind('cbox_complete', function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content
$(document).ready(function () {
$('#login-trigger').click(function () {
$.colorbox({
inline: true,
href: "#login-form",
close: "×",
onOpen: function () { $('#login-content').css({ display: 'block' }); },
onClosed: function () { $('#login-content').css({ display: 'none' }); }
});
return false;
});

Bind control to JavaScript file

I had JavaScript slide show which had Image and text .But I want to mange js code to retrieve it's data(image, text) from database by code .please anyone help more it more difficult.
aspx page:
<form id="form1" runat="server">
<div class="hom_scrooler_con tm10 "><script type="text/javascript" src="js/scroller.js"></script>
<div class="hom_but_a "><img src="images/home-bu_pro.jpg" alt="#" name="Image9" width="134" height="34" border="0" id="Image9" /></div>
<div class="hom_but_a"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/home-bu_news.jpg',1)"><img src="images/home-bu_npro.jpg" alt="#" name="Image8" width="134" height="34" border="0" id="Image8" /></div>
<div class="hom_but_a"><img src="images/home-bu_news.jpg" width="134" height="34" border="0" /></div>
</div>
</form>
JS:
sts_bs("jwscroller2dbd",[20080623,"images/","","blank.gif",0,1,0,50,"50%","left",2,3,298,199,1,10,0,0,0,2000,1,12,2,
"stEffect(\"scroll(Rate=24,enabled=0,Duration=0.50)\")",-2,60],["none",1,"#454545","transparent","","no-repeat"]);
sts_sca(["center","middle","center","middle"],["aro-lft.png","aro-lftr.png","arrowl_gray.gif",56,55,"aro-rt.png","aro-rtr.png","arrowr_gray.gif",55,51]);
sts_tbd([1],["solid",1,"#454545",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif",
"repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"New Sharp Copiers Now 2\r\n\r\nHas been the industry\'s standard dummy text ever
when an unknown printer.Simply dummy text of","#","_self","media3_07.png",298,197,"left"],["transparent"
,"bold 10pt Verdana,Arial","#666666","none","bold 10pt Verdana,Arial","#666666","none"]);
sts_ai("i1",[,"New Sharp Copiers \r\n\r\nHas been the industry\'s standard dummy text ever when an unknown printer.Simply
dummy text of",,,"media3_08.png"],[,,,,"italic bold 10pt Verdana,Arial"],"i0","i0");
sts_es();
Don't use JavaScript to connecto to a database. If you want to get data from a database, use jQuery and AJAX to get data from a .Net Web Service. It's pretty simple, and reusable.
You can build your own AJAX controls without jQuery, but I wouldn't...

Categories