.NET form not loading inside thickbox window? - javascript

I'm working with a website built in .net,
I have a very simple popup box (thickbox) which works fine up until my developer puts the .net contact form within the popup.
The problem is that the form no longer shows up inside the thickbox, has anybody experience this before?
Its not like its even calling data from elsewhere, all the content is on the page in a hidden div that when requested the javascript shows the popup.
My popup window looks like the following...
<div id="hidForm">
<asp:Panel ID="PL_Im_Popup" runat="server" >
.net stuff here doesnt load!
</asp:Panel>
The stuff outside of the .net panel works fine
</div>
My entire code is...
<div id="hidForm">
<asp:Panel ID="PL_Im_Popup" runat="server" >
<h3>Our Discreet Service</h3>
<p>To request a phone call from a Correlate Search Consultant simply fill out the form below. Discretion is of upmost importance to our Consultants.</p>
<ul id="hidFormLab">
<li><span class="formLabel">Your Name <span class="asterisk">*</span></span><asp:TextBox ID="TB_Name" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Job Title <span class="asterisk">*</span></span><asp:TextBox ID="TB_JobTitle" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Email <span class="asterisk">*</span></span><asp:TextBox ID="TB_Email" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Telephone Number <span class="asterisk">*</span></span><asp:TextBox ID="TB_PhoneNo" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Upload your CV</span><asp:FileUpload ID="FileUpload1" runat="server" CssClass="upcv" /></li>
<li><span class="formLabel">What day would you prefer to be contacted on</span><asp:DropDownList ID="DDL_ContactDay" runat="server" CssClass="ddown">
<asp:ListItem>Monday</asp:ListItem>
<asp:ListItem>Tuesday</asp:ListItem>
<asp:ListItem>Wednesday</asp:ListItem>
<asp:ListItem>Thursday</asp:ListItem>
<asp:ListItem>Friday</asp:ListItem>
</asp:DropDownList></li>
<li><span class="formLabel">If you would prefer to be contacted at a specific time,please let us know</span><asp:DropDownList
ID="DDL_Time" runat="server" CssClass="ddown">
<asp:ListItem>Morning</asp:ListItem>
<asp:ListItem>Afternoon</asp:ListItem>
<asp:ListItem>Evening</asp:ListItem>
</asp:DropDownList></li>
<li><asp:ImageButton ID="IB_Submit" runat="server" CssClass="submitformbtn"
ImageUrl="~/_includes/images/buttons/submit.jpg" onclick="IB_Submit_Click" /></li>
</ul>
</asp:Panel>
</div>

I needed <form runat="server"> for this to work, Thanks #David

Related

How to add span element inside a button in asp?

I have a sidebar panel with an image and a button.
<div class="glyphRow" id="gly_Job" runat="server">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
<asp:Button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click" />
</div>
I want to make the button size to 100% so that I can click anywhere on the panel item but in order to do that I have to move the image inside button. How can I do that?
something like that ?
<div class="glyphRow" id="gly_Job" runat="server">
<button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
</button>
</div>
asp:button is not standard HTML, it is an ASP.net Webforms control, that renders HTML.
If you really want to keep using asp:button use the following javascript to add a click event to the div
document.getElementById("gly_job").addEventListener(function(){
//Find the button and click it
this.querySelector(".btn.btn-primary").click();
});
For added user friendliness add the following CSS to indicate the whole div is clickable
#gly_job {cursor: pointer;}
Note: code untested and may need syntax error fixes

Image not showing when UpdatePanel triggers

I am currently developing a website using ASP.NET and C#. In this website I display 2 sets of Image Banners, the first one is filled with my C# code and stays still (does not change).
<div class="divArticleCar">
<div id="OwlDemo" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation ">
<a class="btn prev "><span class="glyphicon glyphicon-menu-left"></span><br/></a>
<a class="btn next "><span class="glyphicon glyphicon-menu-right"></span><br/></a>
</div>
</div>
The second uses a connection to an external API from an image Database. I have a text input and a button so when user searches for a key word, the second banner updates with new images. I'm using AJAX <asp:UpdatePanel> tag to update the image result.
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="btnSearchImage" EventName="ServerClick" />
</Triggers>
<ContentTemplate>
<div class="divArticleCar">
<div id="OwlDemo2" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation CN2">
<a class="btn prev2 ">
<span class="glyphicon glyphicon-menu-left"></span> <br>
</a>
<a class="btn next2 ">
<span class="glyphicon glyphicon-menu-right"></span> <br>
</a>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The problem is when the Images in the ContentTemplate are updated. They are just not shown, the banner disappears. I have checked my background code, C# is getting the API results and it is adding the new images, they are just not visible. The Banners are managed with 2 Javascript files.
First: carrusel.js
Second: owlCarousel.js
Does someone know why the images are disappearing??
Every javascript function that is called when the page is done loading needs to be triggered again when you use an UpdatePanel.
So lets say you have something like this somewhere to build the carousel:
$(document).ready(function () {
buildCarousel();
});
You need to add some code to make sure buildCarousel() is triggered again after partial postback.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildCarousel();
});

searching for some example for make a page dynamic or adjustable on front end

i was having a problem in searching for some example for make a page dynamic or adjustable on front end can any one help me in this please
for eg on front end a client wants to adjust the links from one place to another or can chage backgrounds looks like fonts + background color + placement of divs etc can any one help me in doing so or can anyone help me with example on internet which solves my problem i will be thankfull to you.......
little code
<body style="background-color:whitesmoke;">
<form id="form1" runat="server">
<div id="div1">
<div id="div1.1">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="div1.2">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
<div id="1.3">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</div>
<div id="1.4">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
</div>
</form>
here i am handling a major div div1 and child divs div1.1,div1.2,div1.3,div1.4 and i want to change place of these child divs

how to replace css assigned for a tab with jQuery css?

I applied jQuery tabs to my webpage, but its functionality depends on one existing css class which is used in an JavaScript file. If I remove that class then tab won't work if I keep that css then jQuery css gets overridden. I am confused a lot please help. The class name is "Tabs" you can find in mark up. I have attached both css class and JavaScript that is using that class.
The JavaScript file is as below. Stackoverflow is not allowing me to add JavaScript file and css any body send me your mail id I will send the code please.
<div id="Tabs1" class="Tabs">
<ul>
<li>
<a id="Course" href="#COURSE" onclick="handleTab('1')">Course (<asp:Label ID="lblcourse" runat="server" Visible="true"></asp:Label>)</a>
</li>
<li>
<a id="General" href="#GENERAL" onclick="handleTab('2')">General (<asp:Label ID="lblgeneral" runat="server" Visible="true"></asp:Label>)</a>
</li>
<li>
<a id="Group" href="#GROUP" onclick="handleTab('3')">Group (<asp:Label ID="lblGroup" runat="server" Visible="true"></asp:Label>)</a>
</li>
</ul>
</div>

Youtube video inside iframe not hiding in Safari 5.1

I have 3 tabs on my site. Inside 2nd (hidden) div contains a YouTube video in an iframe. When I click on second tab(containing video) video starts playing. On click of either 1st or 3rd tab (containing images) content area still show video.Whereas it should show images for respective tabs. Video is not hiding in Safari 5.1
How can I achieve this?
CODE::
3 tabs content (html)
<div class="view-content clearthis">
<div id="photos">
<div class="nav">
<a class="hide-divs" id="prev" href="#">Prev</a><a id="next" href="#">Next</a></div>
<div id="gallery">
<asp:PlaceHolder ID="phRoomPhotoGallary" runat="server"></asp:PlaceHolder>
</div>
</div>
<div id="video">
<div id="pnlVideo" runat="server">
<iframe id="objVideo" width="667" height="344" src="<%=RoomVideoURL %>" frameborder="0" title="<%=RoomName %>" allowfullscreen></iframe>
</div>
</div>
<div id="floor">
<asp:Image ID="imgFloorPlan" runat="server" Height="344" Width="667" />
</div>
</div>
3 tabs
enter code here
<ul class="clearthis">
<li id="tabPhoto" runat="server"><a id="linkPhotoTab" class="photostab" href="#photos" title="<%=RoomName %>">PHOTOS</a></li>
<li id="tabVideo" runat="server"><a id="linkVideoTab" href="#video" title="<%=RoomName %>">VIDEO</a></li>
<li id="tabFloor" runat="server" style="margin-right: 0px;"><a id="linkFloorTab" href="#floor" title="<%=RoomName %>">FLOOR PLAN</a></li>
</ul>
I've seen some pretty ridiculous answers about attempting to fix this problem in Safari. Instead, try adding:
"wmode=opaque"
as the first GET variable in the url for the youtube video.
(eg: src="http://www.youtube.com/embed/pPBLF2Ffbaw?wmode=opaque&rel=0")
Worked for me in a similar situation.

Categories

Resources