I have a toast.js file which contains the following code:
$(document).ready(function() {
$(".tstInfo").on("click",function(){
$.toast({
heading: 'Welcome to my Elite admin',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
loaderBg:'#ff6849',
icon: 'info',
hideAfter: 3000,
stack: 6
});
});});
on my aspx page i have button
<asp:Button ID="btnShow" runat="server" Text="Show" Font-Bold="true" CssClass="tstInfo btn-primary" OnClick="btnShow_Click" />
now i want to call js function when i click on the button. can somebody please tell me how to do it.
Thanks in advance
<asp:Button ID="btnShow" runat="server" Text="Show" Font-Bold="true" CssClass="tstInfo btn-primary" OnClick="btnShow_Click" />
in your code replace btnShow with tstInfo it will work and remove OnClick
You can use OnClientClick like this :
OnClientClick="javascript:alert('Hello')"
Related
I have used bPopup as jquery plugin.link is :http://www.jqueryscript.net/lightbox/Lightweight-jQuery-Modal-Popup-Plugin-bPopup.html
this is the gridview with a button field.
<asp:GridView ID="gvwData" runat="server"
AllowPaging="True" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField HeaderText="preview">
<ItemTemplate>
**<asp:Button id="mybutton" runat="server" Text="click"/>**
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle Width="220px" />
</asp:GridView>
This is the JavaScript Function :
<script type="text/javascript">
$(document).on("click", "[id*=mybutton]", function(e) {
e.preventDefault();
**$('#elementtopopup').bPopup();**
}); (jQuery);
</script>
$('#elementtopopup').bPopup() not showing. Below is a screenshot of the error I'm getting.
Screenshot of the console error
I think your selector is wrong for the button, should be:
$(document).on("click", "[id$='mybutton']", function(e) {
// code
});
Web forms suffixes the id with your specified id rather than prefixes it which your selector is looking for.
Add the plugin to the bottom of your page
<script src="jquery.bpopup-0.8.0.min.js"></script>//change it to the path of the js file
I have one popup dialog box,in that dialog box ,i have added one text field.now onclicking the add button,i want to get the text box value and i want to post that value into another asp page.iam not getting how do it..
Here is my code.
Button code:-
<asp:Button ID="button2" ClientIDMode="Static" runat="server" Text="Add" />
<div>
<div id="popup" style="display:none">
Name:
<asp:TextBox ID="coname" runat="server" />
</div>
</div>
This is my javascript code .
<script type="text/javascript">
$(function(){
$("#button2").click(function () {
$("#popup").dialog({
title: "Name",
width: 430,
height: 250,
modal: true,
buttons: {
Add: function () {
$(this).dialog('close');
}
}
});
});
})
</script>
Well, you should just do something more than just "close dialog" in your Add part...
Try first, something like :
//... JS Add : function() part
console.log($('#coname').val());
$(this).dialog('close');
This displays the user's entry...
If you have to do something with it, then just handle it there before closing the dialog^^
I've got the following jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#Panel1").animate
({ width: "1000px", fontSize: "65px" }, 3000);
});
});
</script>
When i click on the Button some code is going to execute and its going to retrieve a value inside the panel
"so far every thing works fine"
now it's the time for my jQuery code to execute, but when the panel starts to expand the page is refreshing and the jQuery code stop working.
here is my HTML code
<div class="myclass">
<h1><img id="pic" src="PIC/Capture.PNG" width="100px" hight="100px" /> Company Name</h1>
<p>This awards are for the hard working staff bla bla bla bla bla bla bla bla bla bla, still <asp:Label ID="Label4" runat="server" Text="20"></asp:Label> trophy</p>
<br />
<asp:Button ID="Button1" runat="server" Text="wineer" OnClick="Button1_Click" class="btn btn-primary btn-large" Width="127px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Congratulations"></asp:Label>
<div class="aa"><asp:Panel ID="Panel1" runat="server"><asp:Label ID="Label2" runat="server" Text=""></asp:Label></asp:Panel></div>
<asp:Label ID="Label3" runat="server" Text="You've won the trophy"></asp:Label>
<br />
</div>
How can I make the jQuery code work?
Please advise
As you want to execute some javascript after button click event, i would suggest, use RegisterStartupScript in button_click event . Reason, this button will always going to postback / form submit, and there is some server side code that will be executed for this button click. So it makes sense to call JS in button_click via RegisterStartupScript.
Wrap the button click ( JS side code) into a function. Like this.
function AfterButtonClick(){
$("#Panel1").animate
({ width: "1000px", fontSize: "65px" }, 3000);
}
In server side, button click, use following.
Page.ClientScript.RegisterStartupScript(typeof(Page), "script", "AfterButtonClick();", true);
With the limited info.
I would say you need to make sure autopostback is not set to "True" on button1. Also if your using updatepanel, Javescript does not play well with updatepanel.
I am new to Javascript. My req is to not show the pop up if i get list from server side as empty list. Before this requirement i was doing something like below code where as soon as user hits the URL, the popup comes as i have used window.onload . Now the requirement got changed and i need to show pop up only when there is some data from backend. Please help me on this.
<script>
window.onload = function () {
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
}
</script>
<div id="homePopup"><span class="buttonCloseModal b-close"><span>X</span></span>
<h1>Notifications</h1>
<div class="ListContainerScroll">
<div>
<asp:Repeater ID="rptrNotification" runat="server" OnItemDataBound="rptrNotification_ItemDataBound">
<ItemTemplate>
<div>
<asp:Literal ID="litNotificationTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Literal>
</div>
<div>
<asp:Literal ID="litNotificationDesc" runat="server" Text='<%# ((SPListItem)Container.DataItem)["NotificationDescription"] %>'></asp:Literal>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="noDataAvailable" runat="server" id="divNoDataAvailable" visible="false"></div>
</div>
</div>
</div>
I am doing this code in .ascx
A piece of code you have put inside function of the onload event of the window you are going to put inside ajax success callback (i guess you are requesting data with jQuery ajax)
$.ajax({
url: 'http://myawesomeurl.net',
success: function (ajaxResponse) {
//your code start
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
);
//your code end
}
});
jQuery dialog with tabs disappear when a page of the GridView is changed. When the page is rendered i have a button that on click pops a jQuery dialog with tabs, but on this page I also have a GridView and if i change the page of the grid view and then click again on the button that should display the jQuery dialog with the tabs - the tabs are not displayed. Instead the dialog pops up but the tabs are just displayed as list items. Here is my aspx code and the javascript function:
<div id="returning_dialog_form" title="Returning">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ul>
<li>Item</li>
<li>Accessory</li>
</ul>
<div id="return_item_tab" title="Return Item">
<p>Enter the id of the item that you want to return: </p>
<asp:TextBox ID="TextBox1" runat="server" />
<br />
<asp:Button ID="return_item_button" runat="server" Text="Return item" OnClick="return_item_Click" />
</div>
<div id="return_accessory_tab" title="Return accessory">
<p>Enter the id of the accessory that you want to return: </p>
<asp:TextBox ID="TextBox2" runat="server" />
<br />
<asp:Button ID="return_accessory_button" runat="server" Text="Return accessory" OnClick="return_accessory_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script>
$(function () {
$("#returning_dialog_form").tabs();
});
</script>
And here is the code that pops the jQuery dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 320,
maxHeight: 320,
width: 320,
height: 320,
autoOpen: false
};
$('#returning_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#returning_dialog_form").dialog({
});
$("#return_item_button_dialog").click(function () {
$("#returning_dialog_form").dialog("open");
return false;
});
});
</script>
The GridView is placed inside a UpdatePanel if it matters.
Why is it that the tabs in the jQuery dialog are not shown when the button is clicked after a page of the GridView is been changed?