发表新帖
发表新帖

How to use JQuery with Master Pages?

后端 未结
关注
13 1122
甜味超标
甜味超标 2020-12-04 18:13

I can get simple examples to work fine as long as there\'s no master page involved. All I want to do is click a button and have it say \"hello world\" with the javascript in

相关标签:
13条回答
  • 粉色の甜心
    2020-12-04 18:49

    Check out this post:

    http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

    also explains how to get intellisense for jQuery in Visual studio.

    0 讨论(0)
  • 逝去的感伤
    2020-12-04 18:51

    Adam Lassek linked to using jQuery selectors, though I think its worth explicitly calling out selecting elements by their class, as opposed to their id.

    e.g. Instead of $("#myButton").click(function() { alert('button clicked'); });

    instead use $(".myButtonCssClass").click(function() { alert('button clicked'); });

    and add the class to the button:

    <asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />

    This has the benefit of not having to worry about whether two control ids 'end' the same way in addition to being able to apply the same jQuery code to multiple controls at a time (with the same css class).

    0 讨论(0)
  • 清歌不尽
    2020-12-04 18:52

    When pages are rendered along with master pages, control id gets changed on page rendering so we can't refer them in jQuery like this #controlid. Instead we should try using input[id$=controlid]. If control is rendered as input control or if as anchor tag use a[id$=controlid] in jQuery.

    0 讨论(0)
  • 别跟我提以往
    2020-12-04 18:53

    Make sure that jQuery is being added in the master page. Given that you have this control:

    <asp:Button ID="myButton" runat="server" Text="Submit" />

    You can wireup the javascript with this:

    $(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});

    $(document).ready() fires when the DOM is fully loaded, and all the elements should be there. You can simplify this further with

    $(function() {});

    The selector syntax $('[id$=myButton]') searches elements based on their id attribute, but matches only the end of the string. Conversely, '[id^=myButton]' would match the beginning, but for the purposes of filtering out the UniqueID that wouldn't be very useful. There are many many more useful selectors you can use with jQuery. Learn them all, and a lot of your work will be done for you.

    The problem is that ASP.Net creates a unique id and name attribute for each element, which makes finding them difficult. It used to be that you'd need to pass the UniqueID property to the javascript from the server, but jQuery makes that unneccessary.

    With the power of jQuery's selectors, you can decouple the javascript from the server-side altogether, and wireup events directly in your javascript code. You shouldn't have to add javascript into the markup anymore, which helps readability and makes refactoring much easier.

    0 讨论(0)
  • 借酒劲吻你
    2020-12-04 19:01

    I also started with the simplest of examples and had no luck. I finally had to add the jquery .js file outside of the <head> section of the master page. It was the only way I could get anything to work in Firefox (haven't tried other browsers just yet).

    I also had to reference the .js file with an absolute address. Not entirely sure what's up with that one.

    0 讨论(0)
  • 醉酒成梦
    2020-12-04 19:03

    EDIT

    As @Adam points out in the comments, there is a native jQuery mechanism that basically does the same thing as the hack in my original answer. Using jQuery you can do

     $('[id$=myButton]').click(function(){ alert('button clicked'); });

    My hack was originally developed as a Prototype work around for ASP.NET and I adapted it for the original answer. Note that jQuery basically does the same thing under the hood. I recommend using the jQuery way, though, over implementing my hack.

    Original answer left for comment context

    When you use a master page, ASP.NET mangles the names of the controls on the dependent pages. You'll need to figure out a way to find the right control to add the handler to (assuming you're adding the handler with javascript).

    I use this function to do that:

    function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

    Then you can do something like:

    jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

    where you have the following on your child page

    <asp:Button ID="myButton" runat="server" Text="Click Me" />
    0 讨论(0)
 看不清?
提交回复
热议问题