2010-12-13 14 views
0

私はテキストエリアとしてアドレスと呼ばれるdivを持っています。ハイパーリンクをクリックするとdivが上下に切り替わります。 asp.netボタンをクリックするとdivが崩壊しますが、URLがwww.abc.com/edit.aspx?Id=2からwww.abc.com/edit.aspx?Id2=2#に変わったことがわかりましたトグルは機能しません。ここでサーバー側のasp.net呼び出しを行った後、JQueryのトグルが機能しなくなりますか?

はスクリプトです:。

$(ドキュメント).ready(関数(){

$('#myAddress').click(function() { 
     ShowHideAddressBox(); 
    }); 
    $('#arrowIndicator').click(function() { 
     ShowHideAddressBox(); 
    }); 
}); 
function ShowHideAddressBox() { 
    var str = $("#myAddress").text(); 
    if (str == "Hide") { 
     $("#myAddress").html("Click here"); 
     $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_expanded.png"); 
    } 
    else { 
     $("#myAddress").html("Hide"); 
     $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_collapsed.png"); 
    } 

    $('#checkAddress').toggle('normal'); 
} 

サーバー側のボタンをクリックするだけでカップルのテキストボックス内のいくつかの値を設定します

私のマスターページには、次のような行もあります:

<asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
      Name="MicrosoftAjax.js" Path="http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" /> 

答えて

4

何を見ていることである、と彼らはもはやハンドラを持っていない、あなたはこれを交換する必要があります。

$(document).ready(function() { 
    $('#myAddress').click(function() { 
     ShowHideAddressBox(); 
    }); 
    $('#arrowIndicator').click(function() { 
     ShowHideAddressBox(); 
    }); 
}); 

をこのような.live()ハンドラで:

$(function() { //shortcut for $(document).ready(function() { 
    $('#myAddress, #arrowIndicator').live('click', ShowHideAddressBox); 
}); 
+0

私はこれを実装してくれますが、正しく理解していれば、ページ読み込み時に、関数ShowHideAddressBoxがリンクに添付されていますが、トグル後ShowHideAddressは接続されなくなったと言っていますか?それは正しいのでしょうか?それはdivを表示したり隠したりしているからです。私は、私が要素を置き換えているとは思わないので、要素の部分を置き換えることについてちょっと混乱しています。私は既に隠れていて、すでに存在している要素を示しています。私はおそらくもっと自分自身を混乱させました。私は今あなたの解決策を試し、あなたに知らせるつもりです。 – Xaisoft

+0

@Xaisoft - オリジナルに添付された 'クリック 'ハンドラなしで*新しい*要素をもたらすサーバーへのポストバックです(あなたが記述するaspボタンクリック)。 –

+0

それは素晴らしい仕事。私は理解していますが、私はまだ少し混乱しています。 asp.netボタンをクリックすると、ShowHideAddressBox関数はリンクと画像に付加されなくなり、ライブで再表示されます。紛らわしい部分は、あなたが言うときに新しい要素をもたらすことです。すべての要素は既にページ上にありますが、サーバーがクリックするだけでいくつかのテキストボックスに値が設定されますが、テキストボックスは既に存在します。私が苦しんでいる場合は申し訳ありません。 – Xaisoft

1

dアンカーのefaultアクション(hrefに従う)アンカーhrefが '#'に設定されていて、これを使わないと、アドレスバーのURLに#が追加されます。要素が置き換えられているので、

$('#arrowIndicator').click(function (ev) { 
     ev.preventDefault(); 
     ShowHideAddressBox(); 
}); 
+0

部分的なページポストバック(要素を置き換えるAJAXリクエスト)のために読み込みが慎重に動作しなくなった場合、これは実際には問題を解決しません:) –

+0

ニックは正しいです、私はev.preventDefault()まったくトグルしません。 – Xaisoft

+0

@Nick Craver - ああ、恐ろしい更新パネル、私は感謝して使用して以来、長い時間 – redsquare

0

実際には、次のようなものを使用できます。

$(document).ready(function() { 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

    function EndRequestHandler(sender, args) { 
     //Code that runs after a post back with an update panel has occurred. 
    } 
     //Code on page load. 
}); 

関数EndRequestHandlerの外側のコードは、内部のコードと同じになります。

私はasp.netとプログラミング全般を初めて知りました。私はすぐにjQuery ajaxを使うことを学びました。これは、更新パネルよりも良い解決策です。私はそれをチェックすることをお勧めします。

関連する問題