2011-09-11 3 views
4

私はのImageButtonをクリックすると、ポストバックを実行し、細かいOnClickイベントを実行し、チェックボックスの一覧と私のページでOnClickイベントでのImageButtonを持ってjavascriptを使用してdivを移動し、ポストバック機能を保持できますか?

トラブルは、私がするのdivを移動したいということです正常に動作します私は... prototype.jsのコードを使用して

document.observe("dom:loaded", function() { 

    if ($$('.CheckboxListContainer').length>0) {  

     var modalShadow = document.createElement('div'); 
     modalShadow.setAttribute("class", 'MyFormModalShadow'); 

     modalShadow.style.width = document.viewport.getWidth() + 'px'; 
     modalShadow.style.height = document.viewport.getHeight() + 'px'; 

     var modalDiv = document.createElement('div'); 
     modalDiv.setAttribute("class", 'MyFormModal'); 

     var checkboxesDiv = $$('.CheckboxListContainer')[0]; 
     checkboxesDiv.remove(); 

     modalDiv.appendChild(checkboxesDiv); 

     $$('form')[0].insert({top: modalShadow}); 
     $$('form')[0].insert({top: modalDiv}); 

     Event.observe(window, "resize", function() { 
      if ($$('.MyFormModalShadow').length>0) { 
       var modalShadow = $$('.MyFormModalShadow')[0] 
       modalShadow.style.width = document.viewport.getWidth() + 'px'; 
       modalShadow.style.height = document.viewport.getHeight() + 'px'; 
      } 
     }); 

    } 

}); 

これをやった...しかし、のImageButtonはノーです - 最初<form>の子、私はそれがモーダルウィンドウに表示させることができるようにポストバック時に私のOnClickイベントがより長くトリガされます。

私のdivをDOM内で移動してポストバックの能力を保持する方法はありますか?

+1

'checkboxesDiv.remove();'行を削除するとどうなりますか?また、画像ボタンをクリックするとどうなりますか?ページはリロードされていますか? –

+0

チェックボックスを削除する.Div.remove();コードの結果を変更しない(そしてポストバックはまだトリガされない)、私は要素が完全に削除されてから別の場所に追加されていることを確認したかっただけです。はい、イメージボタンをクリックするとページがリロードされます – Steve

+0

クイックテストでは、ボタンを動かすとPostBackイベントが「破損」しないことがわかりました。「ImageButtonはもはや自分のOnClickイベントをトリガーしていません」ブレークポイントを入れてデバッグしましたか? –

答えて

2

まず最初に、要素をモーダルにするためにフォームの最初の子に移動する必要がある理由はわかりません。フォーム内の位置がどこにあってもdivをモーダルにすることができます。最も重要なのは、絶対位置を適切に制御することです。

各ポストバックは、__DoPostBack()javascript関数によってトリガされるため、コントロールのIDを変更しない限り、コントロールの移動に関する問題は発生しません。

あなたの問題の1つの解決策は、document.readyのクライアントコードから__DoPostBack()関数を呼び出すことです。これにより、フォームの送信を完全に制御できます。

4

クイック回答、はい。長い答えは以下のとおりです。

ASP.NET WebFormsについて話している場合、フォームにrunat="server"という属性とIDがありますか?標準HTMLを使用している場合は、methodaction属性がフォームに設定されていますか?

ブラウザでHTMLソースを見ると、フォームが<form action="/your_post_back_page.html" method="post">のように見える場合、それはすべて良いことです。モーダルダイアログが追加された後、FireBug でフォームを検査します。、フォームタグの内側にあるかどうかを確認してください。もしそうなら、それは良いことです。

チェックボックス<input type="checkbox" />にはname属性が設定されていますか?あなたの画像ボタンは<input type='submit' />ですか、それとも<button>ですか?

これらの条件が満たされている場合、ボタンに配線されたJavaScriptイベント(関数)が、falseを返すか、ポストバックを飲み込んでいる可能性があります。 JavaScript onclickイベントは通常、フォームを送信するためにはtrueを返す必要があります。ブラウザのエラーコンソールに出力がありますか?

個人的には、純粋なHTML(ASP.NET MVCによる)が古い学校のASP.NET WebFormsのズボンを打ち負かすことが増えています.jQueryは、私の経験上、プロトタイプよりもはるかに良い感じです。 jQueryテンプレートを使用してモーダルダイアログを作成するのは簡単です。あなたは図書館を交換できますか?

関連する問題