I'm fairly new to jQuery and I was trying to achieve some of this functionality in client-side rather than my usual server side code. I just figured that I would add some click events, to get some practice, etc...but I'm seeing this issue and not sure where to start troubleshooting as it is working on my stand alone html page.
This is a web app page which inherits from a Masterpage (Site.Master). I was modifying the .js file a bit as I have been running around a bit by placing the Alert() just to see something...but that wasn't firing.
Why are my events not firing?
HTML:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
CodeBehind="ProductMaintenance.aspx.vb" Inherits="CStock.ProductMaintenance" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="" cssClass="pnl1">
</asp:Panel>
<div class="mainGroup">
<div class="headerGroup">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<select name="type" id="type">
<option value="Categories">Categories </option>
<option value="Products">Products </option>
</select>
</div>
</div>
<div>
<asp:Button ID="submitform" runat="server" Text="Button" />
<asp:Button ID="HideButton" runat="server" Text="HideButton" />
<hr />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="sqlData">
...
...
...
</div>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/site.js"></script>
Javascript (site.js)
$('#submitform').on('click', function (event) {
Alert("TESTING");
$( ".HideButton" ).hide();
$( "#HideButton" ).hide();
})
$('input[name=submitform]')
.click(
function ()
{
$(this).hide();
$( ".HideButton" ).hide();
$("#HideButton").hide();
Alert("TESTING");
}
);
Updated Javascript:
$('#submitform').on('click', function (event) {
Alert("TESTING");
// $( ".HideButton" ).hide();
// $( "#HideButton" ).hide();
})
$('input[id*=submitform]')
.click(
function ()
{
Alert("TESTING2");
}
);
$('input[name=submitform]')
.click(
function () {
Alert("TESTING2");
}
);
Separately, which method to add the events is best practice?
Your events aren't firing because .NET translates your IDs when they're server controls (has the runat="server" attribute). For instance, you gave the button the ID "submitform", but when it's generated on the page it's probably something like "ctl00_container_submitform". Take a look at the generated page source and you'll see what I mean. You can still accomplish what you want with jquery. Just change your selector to $("[id*=submitform]") which will look for any control with the attribute "id" that ends with "submitform".
EDIT:
Since your button is in an update panel, you'll want to update to the following:
$(document).on('click', '[id*=submitform]', function () {});
Check out the documentation for "on" here http://api.jquery.com/on/
When the content in the update panel is replaced, the binding for that button is being lost. if you bind to the document (which is static), the binding will always be in effect. The optional selector parameter indicates that the function should be fired if the document is clicked, and if the element in the document matches the selector.
add the attribute ClientIDMode="static to the buttons
<asp:Button ID="submitform" runat="server" Text="Button" ClientIDMode="Static"/>
<asp:Button ID="HideButton" runat="server" Text="HideButton" ClientIDMode="Static" />
then you can reference them by just $("#submitForm") and $("#HideButton")
in order to guarantee unique IDs webforms adds things to the id field when it is added. Changing ClientIDMode to static tells it that you will make sure that it will always be unique and it will give you the proper ID
Related
I have a text box and two link buttons on my web page. When I put some value on the text box, based on that value and also as soon as I leave the textbox. I want to hide or make the link button invisible.
<asp:textBox id="textBox1" runat="server">
<asp:linkButton id="link1" runat="server">
<asp:linkButton id="link2" runar="server">
when the user enter value "X" in the textbox, I want to hide Link1 and Link2 otherwise I want Link1 and Link2 to be visible.
here is my code and it is not working:
function HidePick(selectObj) {
if (selectObj.value.toUpperCase() == "D9") {
document.getElementById("LINK1").style.display = 'none';
}
}
<td><asp:TextBox ID="TXTTest1" runat="server" CssClass="cssTest" Width="30" onmouseout="javascript:HidePick(this);"
With error message:
"JavaScript runtime error: Unable to get property 'style' of undefined
or null reference
For that kind of DOM manipulation, it is easy with jQuery.
JS Fiddle - https://jsfiddle.net/p8pm6r5r
<asp:TextBox ID="textBox1" runat="server" />
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#<%= textBox1.ClientID %>").blur(function () {
if ($(this).val() === "X") {
$("#<%= link1.ClientID %>").hide();
$("#<%= link2.ClientID %>").hide();
}
});
})
</script>
In asp.net the final render id may change on page, so on javascript you need to use the .ClientID of control... you code must be as:
document.getElementById("<%=link1.ClientID%>").style.display = 'none';
Related: Accessing control client name and not ID in ASP.NET
<asp:textBox id="textBox1" runat="server">
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />
Assuming you don't want to use jQuery or any library;
At the end of your htmls in .aspx page add a script tag to bind the button to mouseleave or mouseout events. Just to make sure your textbox1's id is static (the way it is in your source), once your page is rendered on the browser check for your textbox1 and see if it has still the same id if not then copy that id and replace in the below event binder line of javascript code from textbox1 to (whatever_textbox1). Same step for your link ids too.
document.getElementById("textBox1").addEventListener("mouseout",HidePick,false);
function HidePick(e){
if (e.target.value.toUpperCase() == "D9")
document.getElementById("LINK1").style.display = 'none';
}
I'm using Page with tabs, In 3rd tab i have search functionality But whenever i click search button page will reload and it will move to first tab.
I need tab should stay constant after button click, How can i do that?
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">UserTickets</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>
</div>
<div>
</div>
<div>
<form runat="server">
<asp:Button ID="button" runat="server" OnClientClick="javascript:search()" Text="search" />
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</form>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
Thank you
Ajax is probably the best bet in the situation you are in. The best way to describe it is that it will just refresh content on the page that you have wrapped the AJAX around. The problem your having it that on button click it is causing the page to reload therefore going back to the 'Starter' tab.
Here is a small snippet of code I have put together for you and I will explain what to do.
You need to add Nugent Package to your project and add the 'Ajax Control Toolkit'.
At the top of your code you need to add this line. (Think of it as saying 'I want to use the toolkit on this page and i will call it using AjaxControlToolkit')
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
Then you need to add the line below to your page.
<AjaxControlToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></AjaxControlToolkit:ToolkitScriptManager>
Then wrap the lines of code for that tab with these lines of code.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
Make sure that you wrap all the information that tab inside the .
This is a very basic way of using AJAX and it can be used more advanced but this will work.
You can set Tab on Page Load conditionally. Look at this code might it will help you.
var TabNum=(Your Tab Number)
function selecttabs() {
$('[id$="dvInvoiceTab"]').tabs("select", TabNum);
}
You can use update panel. In the third add update panel, below is the sample:
<div id="third-tab">
<form>
<asp:ScriptManager runat="server" ID="ScriptMng"></asp:ScriptManager>
<asp:Button ID="button" runat="server" Text="search" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlId="button" />
</Triggers>
</asp:UpdatePanel>
</form>
</div>
In the code behind try test below code
protected void button_Click(object sender, EventArgs e){
label.Text = "Searching without full reload";
}
Hope it's help
im stuck with Javascript in Asp.net...
I made a TextBox named tbValidFrom and another named tbValidTo.
I also made two ModalPopups.
Then i try to open the ModalPopupExtenders when the TextBoxes get focus:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#tbValidFrom').focus(function () {
$find('ModalPopupExtenderNV2').show();
})
</script>
but it doesnt finds tbValidTo or ModalPopUpExtender ?
Runtime-Error in Microsoft JScript: Object expected
Here is one of the two ModalPopupExtenders and TextBoxes:
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:ModalPopupExtender ID="ModalPopupExtenderNV2" runat="server" TargetControlID="HiddenField6"
PopupControlID="PanelNewVersion" BackgroundCssClass="modalBackground" BehaviorID="ModalPopupExtenderNV2"
Enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate
</asp:UpdatePanel>
The same as above is with the other ModalPopupExtender and TextBox...
Help would be really nice.
Thanks
Edit: Yes i use a masterpage!
Fails where it is marked yellow.
your jQuery syntax is wrong.
change your script to:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV1.ClientID%>').show();
});
$('#tbValidFrom').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV2.ClientID%>').show();
})
</script>
elements that has runat="server" will eventually end with a different ID than you entered in the aspx file.
i used the <%= %> to get the 'final' id.
hope that helps
Seeing that markup there is two chances for the issues.
With the ModalPopupExtender.
Where you have given the panel "PanelNewVersion" . Seems like its missing in the markup.
In the Javascript code. If you want to hide that Popup, give the name of the panel. NOt the name of the ModalPopupextender.
Also you have given an update panel there in page, so you can easily handle the modalpopup in any srever side event of your textbox.
Otherwise, if you want to use the Modal popup ijn client side, use jQuery Modalpopup. That will the better option.
ASP.NET Can modify the ID's of elements, if you use a Masterpage the element id's will be modified to something like the following : ctl001_ContentPlaceHolder1_tbValidFrom
To get around this ASP.NET modification of your elements you can use ASP.NET Inline Expressions to get the rendered ID from the object.
See the answer to the following question for more information on ASP.NET Inline Expressions
You can look at changing the Client ID Mode (The way ASP.NET Modifies IDs when the page is rendered) here :
ASP.NET Client ID Modes
EDIT :
The AjaxControlToolkit's ModalPopupExtender is not rendered on the page as a html element, therefore you cannot find this item using the ClientID of the ModalPopupExtender.
You must use the BehaviourID to call the show function on.
The below code should work correctly :
$('#<%= tbValidTo.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
This will find the textbox object using the ASP.NET Inline expressions to find the client ID and will then find the behaviour ID and execute the Show method.
Example Markup :
<script type="text/javascript">
$(document).ready(function() {
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
});
</script>
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:modalpopupextender id="ModalPopupExtenderNV2" runat="server" targetcontrolid="HiddenField6"
popupcontrolid="PanelNewVersion" backgroundcssclass="modalBackground" behaviorid="ModalPopupExtenderNV2"
enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="PanelNewVersion" runat="server">
testing panel
</asp:Panel>
I've been working on this for quite a while and haven't found anything to solve my problem. When I select a node I want the value of that node to populate a textbox. I can get this to work using vb codebehind but it causes a postback and I don't want it to. I want to try to use javascript to do this instead but I'm not sure where call the function or how to set it up.
Here's the code for my treeview and the textbox I want to send it to:
<asp:TextBox ID="tbSelectedOrg" runat="server" Enabled="false" asp:TextBox>
<asp:TreeView
ID="tvOrganizationTree"
ExpandDepth="0"
runat="server"
PopulateNodesFromClient = "true"
ShowLines="true"
ShowExpandCollapse="true"
OnSelectedNodeChanged="tvOrganizationTree_SelectedNodeChanged"> // currently calls vb code causing postback
</asp:TreeView>
I created this example really quick. Give it a try.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#<%= TreeView1.ClientID %> div a").click(function () {
$("#txt").val(this.innerHTML);
return false;
});
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
<input type="text" id="txt" />
</asp:Content>
Good luck!
I would use JQuery to solve such a problem.
This code is not perfect but should give you an idea of where to look:
$("#tvOrganizationTree .what-ever-class-aspnet-gives-the-nodes")
.click(function()
{
$("#id-of-textbox").html(this.html());
});
I am wondering how to add a Javascript event handler using asp.net ajax.
I need to add event handlers after ajax update because jQuery plugin to sort tables doesn't work and the onload method to display a screen keyboard does not trigger as well.
Is there a way to do that?
Maybe I need to switch to some other ajax library or/and try Asp.Net MVC to accomplish?
Your question is a little unclear. Anyway, if you are after to add an event handler to an element after partial update, check the following sample.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
if (prm.get_isInAsyncPostBack) {
$addHandler($get("Button1"), "click", function() {
alert("This is a test...");
});
}
});
</script>