One my designer send some webpage where he used Html(div,Li) CSS for making Drop down list
<div class="frmcmpstn fl">
<a class="btn fl cll" href="#">Are you an Hwp/Family Office or an Institutional <img src="images/dd_arow_ico.png" /></a>
<ul class="signupdd_dd" style="display:none;">
<li>New Delhi</li>
<li>California</li>
<li>Gurgaon</li>
<li>North East America</li>
<li>North America</li>
<li>South Africa</li>
</ul>
</div>
now my problem is I have worked in Asp.net I dont know javascript or JQuery and
I know that is possible in java script or JQuery
Can any one tell me how can get selected item (in javascript or JQuery )....?
I think you mean:
<script type="text/javascript">
$('.signupdd_dd li').on('click',function(){
var $selectedLi = $(this);
//then do some stuff e.g
$selectedLi.addClass('selected');
});
</script>
</body> //-> don't add this line but search in your html code this tag and put <script> just before
Or target the tags:
$('.signupdd_dd li a').on('click',function(){...});
Attach an event handler to the click event for each of the anchors a. The event handler will have the element assigned to this which you can use to get the different element properties.
$(".signupdd_dd li a").click(function(e){
e.preventDefault();
$(".chosen").removeClass("chosen");
$(this).addClass("chosen");
alert($(this).text());
});
You may want to add a class to the a that is clicked for later processing. The event handler should also prevent the default action of the anchors click handler so that navigation does not occur.
Working Example: http://jsfiddle.net/vZkDp/
Related
I have a basic url redirect on a DIV's onclick.
<div onclick="location.href = 'page.aspx';">
I have a need to do some work server side, rather than just a redirect, when this Div is clicked.
How do I call one of my code behind functions from the DIV onclick? The DIV is the parent control inside a usercontrol. I suppose I can "fix" it by using a literal control and writing a query string into the onclick, but I would use that as a last resort as I don't want to use a query string.
Are there any other ways of catching a DIV click in code behind that I may have missed?
You can have a button whose display can be 'none'.
Handle click of Div on client side and then from there fire the Click of that button and handle the thinks Server Side on the Click Event of the button.
<asp:Button runat="server" id="btnHidden" style="display:none" onclick="btnHidden_OnClick" />
<div onclick="javascript:DivClicked(); return true;"></div>
<script>
function DivClicked()
{
var btnHidden = $('#<%= btnHidden.ClientID %>');
if(btnHidden != null)
{
btnHidden.click();
}
}
</script>
I'm creating an online application form.
In front page, There are First Name, Last Name, Email etc... form inputs. What I want is that
if user fills the form and click on the submit, I want to show him the print preview page with values which user filled... Is it possible? I'm using ASP.Net C#
If you can use jquery this code is good
$(document).ready(function () {
window.print();
});
and you can see these
http://www.designplace.org/tutorials.php?page=1&c_id=27
http://www.alistapart.com/articles/goingtoprint/
https://web.archive.org/web/20211029043752/https://www.4guysfromrolla.com/webtech/061103-1.shtml
If you can use javascript, then try this
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<html><head><title>Popup</title>')
WinPrint.document.write('</head><body>');
WinPrint.document.write('</body></html>');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
Take a print button on the page
<input id="btnPrint" type="button" value="Print" runat="server"
onclick="javascript:CallPrint('divPrint')"/>
and Place your Controls which are to be printed within a div
<div id="divPrint">
//Your controls
</div>
So.. The issue I have came across is I am migrating a client's web app to MVC2, and the original method for displaying html content is not capable of working with MVC so I am needing to update it. The functionality I need is like so: There is a side nav that will contain the actions, and say the user clicks on "FooBar" it will populate the "mainContent" placeholder with the "FooBar.html" file from a document directory. I would like to do this with no postbacks as well if it is possible. Any ideas?
You may use jQuery ajax to load the pages when user clicks on the link. load() function will be ideal here.
It is just HTML and javascript. Nothing specific to ASP.NET MVC
//Include jQuery library
<div>
<a href="Home/about" class="aLink" >About</a>
<a href="Home/FAQ" class="aLink" >FAQ</a>
<a href="Home/Contact" class="aLink" >Contact</a>
</div>
<div id="mainContent">
</div>
<script type="text/javascript">
$(function(){
$("a.aLink").click(function(e){
e.preventDefault(); // prevent the default navigation behaviour
$("#mainContent").load($(this).attr("href"));
});
});
</script>
I'm trying to access some page HTML to use for an email in a Button_Click event.
I cannot set this content easily anywhere else at runtime (Such as in a TAG).
So I'm wondering if I can use JQuery to set a variable to .innerHtml(), and pass that in the button click. How would I go about doing this?
Something like this...
<div id="myDiv">
some content...
</div>
<asp:HiddenField ID="hdnHtml" ClientIDMode="Static" runat="server" />
<script type="text/javascript">
$(function () {
$('#hdnHtml').val($('#myDiv').html());
});
</script>
To add a hidden field to a form: fill its value using javascript/jQuery and submit the form via a Button_Click event.
This is question is in relation to my last question in case you want some more background information.
My question is: Is it possible to make a cell in an asp.net Table clickable?
Or Is it at least possible to make a clickable WebControl (which should be possible to place in a ControlCollection), that is not a Button or a LinkButton, in ASP.NET?
And if not, is it possible to multiple lines of information into the button text?
I've tried adding other components to the button's ControlCollection (which I've seen working in the Windows Forms version of the Button), to see if I could render child components to a button, but without success:
private void ModifyTableCell(TableCell cell)
{
//Create new button
Button btnCell = new Button();
btnCell.Click += (sender, args) =>
{
//Event for the button
};
//Create new Label
Label lblCell = new Label();
lblCell.Font.Bold = true;
lblCell.Text = "This text won't appear";
btnCell.Controls.Add(lblCell); //Attempt to add label to Button
cell.Controls.Add(btnCell);
}
EDIT: I ended up just creating a multi-lined LinkButton for the entire cell.
You should be able to make pretty much any control clickable by assigning an onclick attribute and leveraging the __doPostBack function.
ctrl.Attributes["onclick"] = string.Format("__doPostBack('{0}', '{1}');", ctrl.ClientID, "SomeArgument");
You could also use the GetPostBackEventReference method too. This option is actually safer, because it will register the __doPostBack function it doesn't already exist:
ctrl.Attributes["onclick"] = Page.ClientScript.GetPostBackEventReference(ctrl, string.Empty);
Then, in the code-behind you can simply override the RaisePostBackEvent method:
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument == "SomeArgument") //using the argument
{
//do whatever
}
}
You can add multiple lines to a asp.net button by using the string builder, something like:
System.Text.StringBuilder buttonText = new System.Text.StringBuilder();
buttonText.AppendLine("first line");
buttonText.AppendLine("second line");
btnMultiline.Text = buttonText.ToString;
I am not sure how you imagine such a composite control would be rendered. Remember that each ASP.NET control in the end outputs HTML. You Button essentially outputs a
<input type="button">The button text</input>
If you want to place anything else inside the <input> tag, it must be HTML-compatible. I'm not sure the input tag allows other HTML inside.
If it is a LinkButton on the other hand, the generated HTML markup is an <a href=""> tag. You can put anything there, even an image if you wish, which will become clickable.
I am not sure what is your full scenario, but what you're trying to do smells bad. I suggest that you either use a LinkButton or rethink your approach, just have in mind what the final output in HTML would be.
In reading both of your posts, it looks like you want to be able to click on anything in the cell and have it post back as if the whole cell were a button?
If so, one of the fairly simple ways to do it is to build your cell content as you would if you were not trying to post back. Then add a button with a style of display:none;. You can then use client side scripting to capture the click event of the cell, and raise the click event of the button to cause a post back.
This allows you to create the cell content in any way you like, and the postback code and handlers are automatically generated for you.
Using JQuery you end up with something along the lines of this:
<head runat="server">
<style>
input.ClickableCellButton
{
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("td.ClickableCell").click(function (event) { $(event.target).children("input.ClickableCellButton").click() });
});
</script>
<div>
<table>
<tbody>
<tr>
<td class="ClickableCell">
Cell Contents<br />
on multiple lines
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="ClickableCellButton"
OnClick="Button1_Click" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
And if not, is it possible to multiple lines of information into the
button text?
For this particular case, you can accomplish this via CSS only; no need to extend Button:
<asp:button id="myMultilineButton" runat="server" style="width:60px; white-space: normal;" Text="Several lines of text" />
It will render as: