如何从Jquery模式框中的文本框中获取值

时间:2012-03-21 07:56:54

标签: jquery asp.net

我在我的页面上使用了用户控件,我在jquery模式弹出窗口中打开了这个用户控件。 我想使用jquery在按钮点击上执行一些操作但是当我尝试检查我的文本框的值时,我得到空白值

以下是我正在使用的代码

 <asp:TextBox runat="server" ID="txtName" ></asp:TextBox>

我正在尝试提醒值

alert($('#ContentPlaceHolder1_User_txtName').val());

<input id="ContentPlaceHolder1_User_txtName" type="text" name="ctl00$ContentPlaceHolder1$User$txtName">

Jquery使用了1.5

我尝试过使用

    $("#<%=txtName.ClientID%>")
    $('#ContentPlaceHolder1_User_txtName').val(); 
    $("#txtName").text();
    $("#ContentPlaceHolder1_User_txtName").text(); 

每次我获得“”价值 请告诉我我犯错的地方

  

(function($){       $ .modal = function(config){

    var defaults, options, modal, header, content, footer, close, overlay, width, centerOffset;

    defaults = {            
        title: ''
        , byline: ''

        , ajax: ''
        , div: ''   

        , slide: false  
        , slideEl: '.slide' 

        , btnClass: 'btn small secondary'

        , overlay: true
        , overlayClose: true

        , beforeOpen: function () {}
        , afterOpen: function () {}

        , debug: false
    };

    options = $.extend(defaults, config);       

    $.modal.forceClose ();

    modal = $('<div>', { 'id' : 'modal' });     
    header = $('<div>', { 'id' : 'modal_header' });     
    content = $('<div>', { 'id' : 'modal_content' });           
    overlay = $('<div>', { 'id' : 'modal_overlay'   });     
    close = $('<div>', { 'id' : 'modal_close' , 'html': 'x' });

    header.appendTo (modal);
    content.appendTo (modal);
    close.appendTo (modal);

    options.beforeOpen (modal);

    modal.appendTo ('body').hide ().fadeIn (500);

    if (options.overlay) {
        overlay.appendTo ('body');
    }

    if (options.overlayClose) {
        overlay.bind ('click', function (e) { $.modal.close (); });
    }

    close.bind ('click', function (e) { $.modal.close (); });       

    (options.title !== '') ? header.append ('<h3>' + options.title + '</h3>') : '';             
    (options.byline !== '') ? header.append ('<div class="byline">' + options.byline + '</div>') : '';  

    if (options.ajax !== '') {
        content.html ('<div id="modal_loader"><img src="../images/mba/ajax-loader.gif" /></div>');
        $.modal.reposition ();
        $.get (options.ajax, function (response) {
            content.html (response);
            handleContent ();
        });
    }                       

    if (options.div !== '') {
        content.html ($(options.div).html());
        handleContent ();
    }   

    function handleContent () {
        $.modal.reposition ();      
        if (options.slide) { handleSlides (); }     

        setTimeout (function () {   
            options.afterOpen (modal);
        }, 1000);
    }   

    function handleSlides () {
        var slides = modal.find (options.slideEl);              
        slides.hide ().eq (0).show ().addClass ('current_slide');           
        var footer = $('<div>', { id: 'modal_footer' }).appendTo (modal);           
        var prev = $('<button>', { id: 'prev', html: '<u>P</u>revious' }).addClass (options.btnClass).appendTo (footer);
        var display = $('<span>', { id: 'display' }).appendTo (footer);
        var next = $('<button>', { id: 'next', html: '<u>N</u>ext' }).addClass (options.btnClass).appendTo (footer);            
        display.html ('<span class="current_page">1</span> of ' + slides.length);
        prev.attr ('disabled', 'disabled'); 

        $(document).bind ('keyup.modal', function (e) {
            if (e.keyCode == 78 || e.keyCode == 39) { navigateSlides ('forward', slides); }
            if (e.keyCode == 80 || e.keyCode == 37) { navigateSlides ('backward', slides); }
        });

        footer.find ('button').bind ('click', function (e) {
            var direction = ($(this).is ('#next')) ? 'forward' : 'backward';
            navigateSlides (direction, slides);
        });

    }

    function navigateSlides (direction, slides) {
        var currentSlide, nextSlide, next, prev;
        next = $('#next');
        prev = $('#prev');
        currentSlide = content.find ('.current_slide');                 
        nextSlide = (direction == 'forward') ? currentSlide.next (options.slideEl) : currentSlide.prev (options.slideEl);           

        if (nextSlide.length > 0) {
            nextSlide.addClass ('current_slide').show ().siblings (options.slideEl).hide ().removeClass ('current_slide');
            $('#display .current_page').text (nextSlide.index () + 1);

            (nextSlide.index () === 0) ? prev.attr ('disabled', 'disabled') : prev.removeAttr ('disabled');
            (nextSlide.index () === slides.length - 1) ? next.attr ('disabled', 'disabled') : next.removeAttr ('disabled');     

            var contentWidth = nextSlide.outerWidth ();                 
            content.width (contentWidth + 30);
            //$.modal.reposition ();    
        }                           
    }

    $(document).bind ('keyup.modal', function (e) { 
        if (e.keyCode == 27) { $.modal.close (); }          
    });     

};

$.modal.reposition = function () {
    var width = $('#modal').outerWidth ();      
    var centerOffset = width / 2;   
    var pageScroll = getPageScroll ();  
    $('#modal').css ({ 'left': '50%', 'top': pageScroll[1] + 100, 'margin-left': '-' + centerOffset + 'px' });
};

$.modal.close = function () {
    $('#modal').fadeOut ('medium', function () { $(this).remove (); });
    $('#modal_overlay').fadeOut ('medium', function () { $(this).remove (); });
    $(document).unbind ('keyup.modal');
};

$.modal.forceClose = function () {
    $('#modal').remove ();
    $('#modal_overlay').remove ();
    $(document).unbind ('keyup.modal');
};

$.modal.setTitle = function (title) {
    var h3 = $('#modal_header').find ('h3');        
    if (h3.length > 0) {
        h3.html (title);
    } else {
        $('<h3>', { html: title }).prependTo ('#modal_header'); 
    }
};

$.modal.setByline = function (text) {
    var el = $('#modal_header').find ('.byline');       
    if (el.length > 0) {
        el.html (text);
    } else {
        $('<div>', { 'class': 'byline', html: text }).appendTo ('#modal_header');   
    }
};

// getPageScroll() by quirksmode.com
    function getPageScroll() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
          yScroll = self.pageYOffset;
          xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
          yScroll = document.documentElement.scrollTop;
          xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
          yScroll = document.body.scrollTop;
          xScroll = document.body.scrollLeft;
        }
        return new Array(xScroll,yScroll);
      }

})(jQuery的);

2 个答案:

答案 0 :(得分:0)

试试这个

$(document).ready(function() {
    alert($("#<%= txtName.ClientID %>").val()); 
});

答案 1 :(得分:0)

你看起来对我有这样的想法:

$(function() {
  alert($("#<%= txtName.ClientID %>").val());
}

你把它放在document.ready块吗?因为它可能在页面加载之前触发。

如上(速记)或

$(document).ready(function() {
 // Do stuff once the DOM is ready
 });

附加模态:

    $(function () {
        alert($('#<%= txtName.ClientID %>').val());
        $.modal({ title: $('#<%= txtName.ClientID %>').val() });
    });

警报和模态都适用于我(使用新标题作为文本框值)。 我在TextBox中填充了“text”属性,因此它将在onload上运行。

如果我将代码放在$(document).ready(function() {块之外,那么它将无效。但是,在里面我得到了所有预期的结果。首先是一个警报,然后是修改后的标题模式消失。

当你加载页面并检查你的源代码时,javascript是否写有正确的文本框ID?