I have an gif image in my project.When i click a button it should appear and after 5 sec it should dissapear from the screen. I tried using j query to do this.But i am not getting the output.Where i might gone wrong?
Below is my code i tried so far:
Jquery:
$(function () {
setTimeout(function () { $("#btnEmail").fadeOut(1500); }, 5000)
$('#btnMail').click(function () {
$('#btnEmail').show();
setTimeout(function () { $("#btnEmail").fadeOut(1500); }, 5000)
})
})
HTML
<asp:LinkButton ID="btnEmail" runat="server" onclick="btnMail_Click" Visible="false">
<asp:Image ID="Image8" imageurl="~/Images/email_animation.gif" runat="server" class="box" /> </asp:LinkButton>
<asp:LinkButton ID="btnMail" runat="server" Text="Send" onclick="btnMail_Click"/>
btnMail_Click(Code Behind):
btnMail.Visible = false;
btnEmail.Visible = true;
As You are using ASP.NET Controls generated ID of elements will be different.
You should use Control.ClientID Property.
Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$(function () {
setTimeout(function () {
$("#<%= btnEmail.ClientID %>").fadeOut(1500);
}, 5000)
$('#<%=btnMail.ClientID %>').click(function () {
$('#<%=btnEmail.ClientID %>').show();
setTimeout(function () {
$("#<%=btnEmail.ClientID %>").fadeOut(1500);
}, 5000)
})
})
there is a chance the clientId (the id the element get on browser) is different than the Id you mentioned. you should use ClientId property to set the id the control will receive on client.
<asp:LinkButton ClientID="btnEmail" runat="server" onclick="btnMail_Click" Visible="false">
ClientID on MSDN
You have to Give ClientID
$(document).ready(function(){
$("#<%= btnEmail.ClientID %>").click(function () {
$("#<%=Image8.ClientID %>").show();
setTimeout(function () { $("#<%=Image8.ClientID %>").hide()}, 5000)
})
});
Please ref: JSFiddle
Related
How can I show the image in asp:Image control after the image is selected in asp:FileUpload Control without any Button Click ?
Here is my Code :
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" ID="fileupload_edu" />
I've gone through many links but got no idea because i don't want any button click.
I've also seen :http://www.aspforums.net/Threads/933229/Upload-image-using-FileUpload-and-display-in-Image-control-in-ASPNet/ but same problem i.e. button click .
Can anyone please help me.
Thanks in advance.
You can add it using javascript.
<script>
function img() {
var url = inputToURL(document.getElementById("<%=fileupload_edu.ClientID %>"));
document.getElementById("<%=img_edu.ClientID %>").src = url;
}
function inputToURL(inputElement) {
var file = inputElement.files[0];
return window.URL.createObjectURL(file);
}
</script>
You Controls
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" ID="fileupload_edu" ClientIDMode="Static" onchange="img();" />
you have to call change event.
<script>
$(document).ready(function () {
$("#<%= fileupload_edu.ClientID%>").change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("#<%= img_edu.ClientID%>").fadeIn("slow", function () {
$(this).attr("src", e.target.result).fadeIn();
})
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
Try this, you need an onchange event to detect when the file is loaded
<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" onchange="LoadImg()" ID="fileupload_edu" />
Then use this function to show the selected file
function loadImg(element) {
var tgt = element.target || window.event.srcElement, files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("<%=img_edu.ClientID%>").src = fr.result;
}
fr.readAsDataURL(files[0]);
}
else {
}
}
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();
});
I am trying to create an alert as described in this site http://needim.github.com/noty/
and here is the code
<head runat="server">
<title>Test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
<div class="container">
<div id="customContainer">
</div>
</div>
<script type="text/javascript">
function generate(type, layout) {
var n = noty({
theme: 'defaultTheme',
text: 'Do you want to continue?',
buttons: [
{
addClass: 'btn btn-primary',
text: 'Ok',
onClick: function ($noty) {
// this = button element
// $noty = $noty element
$noty.close();
noty(
{
text: 'Record deleted !',
type: 'success',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(true); },
onClose: function () { },
afterClose: function () { }
}
});
}
},
{
addClass: 'btn btn-danger',
text: 'Cancel',
onClick: function ($noty) {
$noty.close();
noty(
{
text: 'Record not deleted !',
type: 'warning',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(false); },
onClose: function () { },
afterClose: function () { }
}
});
}
}
]
});
}
function TakeValue(result) {
if (result == true) {
document.getElementById("Hidden1").value = "true";
alert(document.getElementById("Hidden1").value);
} else {
document.getElementById("Hidden1").value = "false";
alert(document.getElementById("Hidden1").value);
}
}
function generateAll() {
generate('information', 'top');
}
</script>
<form id="form" runat="server">
<input id="Hidden1" type="hidden" value="false"/>
<asp:Button ID="Button2" runat="server" Text="Press" OnClientClick="return generateAll();" />
<input id="Button1" type="button" value="button" onclick="return generateAll();" />
</form>
</body>
I have placed two buttons ,one is HTML button while the other is of asp:Button,
The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS.
Kindly give feed back
thanks.
As jbabey said in the comments:
an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.
Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:
<script>
$(document).ready(function() {
$('#Button1').click(generateAll);
});
...
function generateAll(e) {
generate('information', 'top');
// This will prevent the default action of submitting the form.
e.preventDefault();
}
</script>
Could you please add UseSubmitBehavior="false" attribute to the asp:button.
<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />
I hope this will resolve your issue. Please let me know whether it helped you or not.
I am using a jQuery multiselect dropdown in ASP.NET I need to get all the selected values, but I am getting only the last selected value from the dropdownlist on the server side after postback.
Script:
<script type="text/javascript">
$(document).ready(function () {
$('.department).multiselect({
show: ["bounce", 5], hide: ["blind", 1],
close: function () {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function (index, item) {
values.push($(item).val());
});
$("input[id*=selectedValues]").val(values.join(","));
document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
}
})
.multiselectfilter();
});
</script>
<asp:HiddenField ID="hdnDepartment" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnEmployee" runat="server" />
<asp:DropDownList ID="ddlDepartment" runat="server" Width="150px" CssClass="department" onselectedindexchanged="ddlDepartment_SelectedIndexChanged" AutoPostBack="True">
</asp:DropDownList>
Try joining the values and then writing it to a hidden field..
$('[id*=hdnDepartment]").val(values.join()) ;
//OR
document.getElementById("<%=hdnDepartment.ClientID %>").value = values.join();
Also looks like you are losing the vent once the postback occurs. So you need to reattach it once the postback is done .. Try this.
<script type="text/javascript">
$(document).ready(function () {
PostBack();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
});
function PostBack(){
$('.department).multiselect({
show: ["bounce", 5], hide: ["blind", 1],
close: function () {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function (index, item) {
values.push($(item).val());
});
$("input[id*=selectedValues]").val(values.join(","));
document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
}
})
.multiselectfilter();
}
</script>
I am using a plugin called uploadify to show file upload progress to users. The uploadify script calls default.aspx (asynchronously). In the Page_Load method of the default.aspx I run validation checks on the other form data that was passed through it.
If a validation check fails I like to display an error message using a literal control and then exit. The problem is the literal control is not being updated with the validation error messages.
Updated
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpContext context = HttpContext.Current;
if (context.Request.Files["Filedata"] != null)
{
if (context.Request["Name"] == null)
{
litValidationErrors.InnerHtml = "Please enter a name";
return;
}
}
}
}
<script type="text/javascript">
$(document).ready(function ()
{
$('#file_upload').uploadify({
'uploader': '/Plugins/Uploadify/uploadify.swf',
'script': '/default.aspx',
'cancelImg': '/Plugins/Uploadify/images/cancel.png',
'folder': '/FileUploads',
'auto': false,
'onComplete': function (event, ID, fileObj, response, data)
{
var uploadifyResponse = $("#<%= litValidationErrors.ClientID %>", $(response));
if (uploadifyResponse.length > 0)
{
$("#<%= litValidationErrors.ClientID %>").css("display", "inline").text(uploadifyResponse.text());
}
}
});
$('#MainContent_superSubmit').click(function ()
{
var jsonFormData = {
'Name': $('#MainContent_txtName').val(),
'Password': $('#MainContent_txtPassword').val()
};
$('#file_upload').uploadifySettings('scriptData', jsonFormData);
$('#file_upload').uploadifyUpload();
});
});
</script>
<html>
.....
<asp:Button ID="superSubmit" runat="server" Text="Button" />
<span id="litValidationErrors" runat="server" style="display: none; color: #ff0000;"></span>
</html>
Change the litValidationErrors control from Literal to the span with runat="server", remove Visible="false" and hide it by setting style="display: none;". Also, add the onComplete event handler to the uploadify:
$(function () {
$('#file_upload').uploadify({
'uploader': '/Plugins/Uploadify/uploadify.swf',
'script': '/WebForm1.aspx',
'expressInstall': '/Plugins/UploadifyexpressInstall.swf',
'cancelImg': '/Plugins/Uploadify/images/cancel.png',
'folder': '/App_Data/FileUploads',
'auto': false,
'onComplete': function (event, ID, fileObj, response, data) {
var uploadifyResponse = $("#<%= litValidationErrors.ClientID %>", $(response));
if (uploadifyResponse.length > 0) {
$("#<%= litValidationErrors.ClientID %>").css("display", "inline").text(uploadifyResponse.text());
}
}
});
});
Add callback function to your script that will update the text of literal control