I have a 2 pages.
Master Page
Default page (inherited from master page)
I have a menu in the master page & I need to click some menu item & when it's clicked I need some element (span) to be visible in default page.
There's no error in below code, but the expected result did not happen.
MasterPage:
<li id="lgbtn" style="float:right">Login</li>
<script>
$('#lgbtn').live('click', function (e) {
$('span4').show();//<-- this span is in Default page
});
</script>
Default.aspx:
<div class="span4" style="visibility:hidden">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
In JQuery if you want to get element based on class then you have to write syntax like below
$('.ClassName')
and to get element based id then
$('#ControlId')
Jquery's .show is the same as saying display: block;
In order to solve this you could change it using
$('.span4').css("visibility" , "visible");
Or you could change the html to be as follows:
<div class="span4" style="display: none;">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
1)you missed dot for class
2)you visiblity style so show didn't work in that case so please use css style visibility visible
$('.span4').css("visibility" , "visible");
try this
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').css("visibility" , "hidden");
}
else{
$('.span4').css("visibility" , "visible");
}
});
another way
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').show();
}
else{
$('.span4').hide();
}
});
simplest way to do you also change in html
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
$('.span4').toggle();
});
first you know about what is the difference between visibilty and display in css
visibility: hidden hides the element, but it still takes up space in
the layout.
display: none removes the element completely from the document. It
does not take up any space, even though the HTML for it is still in
the source code.
You can see the effect of these style properties on this page. I
created three identical swatches of code, and then set the display and
visibility properties on two so you can see how they look.
Try to use that code:
$('#lgbtn').live('click', function (e) {
$('.span4').show();//<-- this span is in Default page
});
use
like
<script>
$('#lgbtn').live('click', function (e) {
$('.span4').css("visibility" , "visible");
});
</script>
DEMO
UPDATED DEMO WITH toggle()
For toggle() use
toggle
html
<li id="lgbtn" style="">Login</li>
<div class="span4" style="display:none">asds</div>
JS
$( document ).ready(function() {
$( "#lgbtn" ).click(function() {
alert("clicked");
$('.span4').toggle();
});
});
Related
I'm using summernote editor, and I want to retrieve its content in code behind.
I tried to use the following ways , but it returns empty(null)
1-
default.aspx
<div class="summernote" id="txtTest" runat="server"></div>
Code behind:
string content= txtTest.InnerText;
2-
default.aspx
<div class="summernote" id="txtTest" ></div>
Code behind:
string name = Request.Form["txtTest"];
Any suggestions?
Here is My code Working Perfectly
<div class="form-group">
<asp:Label ID="lblSummernote" runat="server" Text="Image" AssociatedControlID="txtSummernote" CssClass="control-label col-md-3"></asp:Label>
<div class="col-md-8">
<asp:TextBox ID="txtSummernote" runat="server" TextMode="MultiLine" Rows="2"></asp:TextBox>
<asp:Label ID="lblSum" runat="server" Text="Summernote"></asp:Label>
</div>
</div>
JavaScript
<script src="/Content/SummerNote/summernote.js"></script>
<script>
$(function () {
// Set up your summernote instance
$("#<%= txtSummernote.ClientID %>").summernote();
focus: true
// When the summernote instance loses focus, update the content of your <textarea>
$("#<%= txtSummernote.ClientID %>").on('summernote.blur', function () {
$('#<%= txtSummernote.ClientID %>').html($('#<%= txtSummernote.ClientID %>').summernote('code'));
});
});
</script>
<script type="text/javascript">
function funcMyHtml() {
debugger;
document.getElementById("#<%= txtSummernote.ClientID %>").value = $('#<%= txtSummernote.ClientID %>').summernote('code');
}
</script>
C# Code behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSum.Text = txtSummernote.Text;
}
Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));
Here is how I got it working.
ref it as a class
class="summernote"
$(document).ready(function () {
$('.summernote').summernote();
});
Does anyone know how to use an sap ui5 control with the asp:repeater control. Everytime I try to put a button, it only shows up in the first iteration of the repeater. And not in the rest of the iterations
<asp:Repeater ID="NewsFeedID" runat="server" >
<ItemTemplate>
<script type="text/javascript">
var buttonlink = CommentsPage + "?news=" + '<%# Eval("NewsFeedID") %>';
var AddComment = new sap.ui.commons.Button({
text: "Add Comment",
icon: AddCommentIcon,
lite: true,
press: function () { window.location = buttonlink; }
}).placeAt("Comments");
</script>
<div id="Comments"></div>
</td>
</tr>
When I use this code it only shows up for the first iteration of the asp:repeater but I want it to show up for all iterations. Does it have something to do with the div id=Comments? Need help please
Your Repeater creates multiple <div> elements with the same id, which causes conflicts.
One way to fix the problem is to add a runat="server" attribute to the <div>, making it a server-side control so that ASP.NET generates a unique ID for each instance:
<div runat="server" id="Comments"></div>
Then pass the dynamically generated ID to the placeAt function:
}).placeAt("<%# Container.FindControl("Comments").ClientID %>");
You can rename every instance with the index of repeater item:
<script type="text/javascript">
var buttonlink = CommentsPage + "?news=" + '<%# Eval("NewsFeedID") %>';
var AddComment = new sap.ui.commons.Button({
text: "Add Comment",
icon: AddCommentIcon,
lite: true,
press: function () { window.location = buttonlink; }
}).placeAt("<%# "Comments"+ Container.ItemIndex+1 %>");
</script>
<div id="<%# "Comments"+ Container.ItemIndex+1 %>"></div>
I have a < div> with < asp:ListView>- with results of searching. I want to hide this div, and show it when ListView will be full (or better - when this part of code will be completed)
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
How can I do this? Meanwhile when this < div> with listview will be not visible, I want to show another div with information "Loading". When ListView will be ready, < div> with results will show up, and < div> with "loading" will be hidden.
If you are using an Update panel you can acheive with code similar to below. This will show a modal panel over the page while it is updating.
You could modify the start and end request methods to also hide / show the div containing the list view
note this uses jQuery.
<div id="workingDialog" style="display: none" title="Please wait">
<p>
Loading Data
</p>
</div>
<div id="listViewDiv" style="display:none">
//List View
</div>
<script>
var _workingDialog;
//Page Load event
function pageLoad(sender, args) {
//Register events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
_workingDialog = $('#workingDialog');
}
function beginRequest(sender, args) {
$(_workingDialog).dialog({ modal: true });
$('#listViewdiv').hide();
}
function endRequest(sender, args) {
$(_workingDialog).dialog('close');
$('#listViewdiv').show();
}
</script>
http://wraithnath.blogspot.co.uk/2011/12/showing-modal-dialog-while-page-is.html
Declare your divs like:
<div id="searchResultDiv" runat="server" visible="false">...</div>
<div id="loadingDiv" runat="server">...</div>
The runat="server" makes them accessible in your asp.net code behind.
Then in your code you can change their properties, in this instance change the Visibility:
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
searchResultDiv.Visible = true;
loadingDiv.Visible = false;
depending on your list you can make a method that ads 2 css classes, one for when the list is full and one for the other case. so in one css you will have display: none; and in the other display: inline-block;
From my understanding you could use css? and set display:none and when your condition is met change display to block/show?
Hope this helps: http://webdesign.about.com/od/dhtml/a/aa101507.htm
add runat="server" to the div, then you can set visible = false/true
Use runat="server" attribute in your div
Then depending on any condition you can show or hide div
<div runat="server" id="myDiv">
var result = getSearchResult();
if(result!= null){
myDiv.Visible = true;
lvSearchResult.DataSource = result;
lvSearchResult.DataBind();
}
Use AJAX with UpdatePanel , no? that will work..
I need to insert some JavaScript code inside a UserControl that I load from an Ajax call via jQuery Ui Tabs. Let me explain...
This is my View (with jQuery loaded)
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs({
cache: false,
});
getContentTab (1);
});
function getContentTab(index) {
var url='<%= Url.Content("~/Home/getUserControl") %>/' + index;
var targetDiv = "#tabs-" + index;
$.get(url,null, function(result) {
$(targetDiv).html(result);
});
}
</script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
With these lines of code I call the Ajax function to load the content into a DIV.
This is the Action from the controller:
public ActionResult getUserControl(int num)
{
return PartialView("TestUC", num);
}
And this is the UserControl...
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
Number... <span id="testSpan"><%=Model.ToString() %></span>!!
<input type="button" value="Click me!!" onclick="message();" />
<script type="text/javascript">
function message(item) {
alert($("#testSpan").html());
}
</script>
The problem is that the message() function returns always 1 (instead of returning the correct number).
My question is... How should I add the script to my UserControl in order to have my code running correctly?
I'm just guessing here.
I guess your problem is that when a tab is loaded, it stays in the DOM even if you open another one (i.e. If the #1 is the default, it will remain loaded even if you click on the second one).
If this is happening, when you call the message function, there will be multiple elements with the id "testSpan", and the jQuery selector $("#testSpan") will return the first of them.
I suppose this is just some test code, but for this particular case I would go with adding the <%= Model.ToString() %> as an argument to the javascript function.
Again, I'm just guessing about the behavior of the jquery-ui tabs() function.
Regards
Try Adding script like this
<script type="text/javascript" defer="defer">
function message(item) {
alert($("#testSpan").html());
}
</script>
I am using asp.net ajax control toolkit 1.0 on vs 2005. I am using the collapseablePanel and AlwaysVisibleControlExtender control. When I use these, I notice that it my panel flashes for a few seconds before it is hidden.
To avoid this, I have decided to place it in a div to make it hidden.
I want it shown when I use the control.
Here is what I have:
<div id="menuContent" style="display:none">
<asp:Panel ID="pnlAddNewContent" runat="server" Width="300px">
....//the panel stuff here
</asp>
</div>
and the javascript for this in the header is:
function showdiv() {
if (document.getElementbyId) {
document.getElementbyId('menuContent').style.visibility = 'visible';
}
}
(its for IE 6 for I don't care about compatability)
and body onload=onLoad="showdiv();"
It correctly hides upon load, but I cannot get it to show again. Does anyone have solutions?
You are trying to show it by setting the visibility but you hid it using display.
You actually want something like this:
document.getElementbyId('menuContent').style.display = 'block';
Maybe this is what you're looking for
Javascript function:
function showHide(descriptor)
{
var layer = document.getElementById(descriptor);
if (layer != null) {
if (layer.style.display != 'none') {
layer.style.display = 'none'; //hide layer
} else {
layer.style.display = 'block';//show layer
}
}
}
HTML:
<img id="imgInfo" src="info.gif" border="0" />
<div style="display: none;" id="divInfo">some info</div>
Basically had to use Visibility hidden and visible attributes as these work best on a collapsePanel