Master Page and Jquery Problem?
I have a page called AddNews.aspx and in codebehind a web method called AddNews(Parameters)..
AddNews.aspx page is inherited from a master page.. So i used contentplaceholder.
I have a button..It's id is btnSave.
Her开发者_开发技巧e is jquery code:
$(function() {
$("[id$='_btnSave']").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: $.toJSON(veriler),
url: "AddNews.aspx/AddNews",
dataType: "json",
success: function(result) {
$("#result").html('News added');
},
error: function() {
alert('Problem');
}
});
});
});
</script>
Button click dont trigger.. What can i do? Thanks.
ASP.NET often changes the ID of a server control, so hard-coding the control ID in your Javascript is not ideal. In the cast of Master Pages, ASP.NET prepends the ID with the Master Page's ContentPlaceholder ID (i.e. MainContent_btnSave).
What you can do is use server code inline with the javascript: <%=btnSave.ClientId%> instead of btnSave.
If the Javascript is in the .ASPX file:
$("#<%=btnSave.ClientId%>").click(function() {
/* ... */
}
If the JS is in a separate file, just declare the button as a variable and call the variable in your JS code.
.ASPX:
var btnSave = $("#<%=btnSave.ClientId%>");
.JS:
$(btnSave).click(function() {
/* ... */
}
By the way, if you're using C#, you may need to use <%=btnSave.ClientId()%> instead of VB's <%=btnSave.ClientId%>.
.NET Framework 4 added the property "ClientIDMode" to controls. Setting ClientIDMode="Static" to enables you to use the exact ID you defined in the control tag.
function alertClicked(me) { alert("My ID is: " + me.id); }
<asp:Button ID="btnAlert" runat="server" Text="Alert" OnClientClick="alertClicked(this)"/>
--display bodycontaint_btnAlert
<asp:Button ID="btnAlert" runat="server" Text="Alert" ClientIDMode="Static" OnClientClick="alertClicked(this)" />
--display btnAlert
Don't let the master page confuse you. It's just:
$('#btnSave').click(function() {
//ajax call like you had
});
If you are using a ContentPlaceHolder in the head section, make sure it is below the line where you load jQuery.
Master Page:
<head runat="server">
<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.2.min.js") %>"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
You may also want to look at your generated markup and see what the ID is for your button. If it is in a nested master page or a control it may not end with btnSave.
<asp:Content ID="HeadContent" ContentPlaceHolderID="head" runat="server">
<script>
$(function(){
$('input[id*="btnSave"]').click(function(){
....
});
});
</script>
</asp:Content>
I think you've probably encountered a very common problem with using .NET master pages with jQuery -- .NET changes your element's id when it is part of a page generated with a master page so as to avoid name collisions. If you look at the generated source code of your page your button's id is probably something more like ct100_panel1_btnSave. If you want to use an id call you'll need to use that id. Otherwise, add a class to the button select the button by that class (.NET doesn't munge classes).
Is the button a WebForm controll? If it is then the scripts that post the form might kick in before your javascript is run.
In this case use an Html element that has no runat="server" attribute.
If you are unshure about the id of the button just look at the rendered HTML.
Try
$("input[id$='btnSave']")...
to make sure it is identifying your control.
In the jQuery documentation for the square-bracket selectors, they always scope it with something else. input[selector], div[selector], etc. I've always used them that way too, so it's possible that jQuery simply doesn't know what to do with an unscoped attribute selector.
$(document).ready(function() {
$("#btnSubmit").click(function(event) {
//
});
});
加载中,请稍侯......
精彩评论