0

私はメッセージングシステムに取り組んでいます。受信トレイとメッセージ表示の部分が完成しました。これらはユーザー アカウント ページの div に読み込まれ、ページを更新しなくてもすべて機能します。

この記事に基づいてjqueryを作成しました。

ページを更新せずに div 内のメッセージを開くためのメッセージ リンクを取得する方法と、プロファイル リンクを実際に更新して実際のプロファイル ページに移動できるようにするフィルタを追加する方法について、ここでいくつかのヘルプを取得しました。それはすべて良いことです。

モーダル (twitter ブートストラップ) を使用して外部フォームをロードするメッセージ送信側に移りました。それも機能しますが、リンクで行ったのと同じことをフォーム送信で行う方法、つまりページ全体を更新せずに送信する方法を考え出すのに何年も費やしました。ここでも、受信トレイ部分とほぼ同じ jQuery を使用しています。

受信トレイのコードは次のとおりです。

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

Javascript:

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $('a.loader').live('click', function() {
        var toLoad = '<? echo base_url(); ?>user/messaging/';
        $('.messages').fadeOut(100, loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>');
        $('#load').fadeOut(1000);

        function loadContent() {
            $('.messages').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});
4

2 に答える 2

1

通常のフォームを保持し、送信イベントをキャプチャするだけの場合は、次のようにすることができます。

http://jsfiddle.net/ufomammut66/uPvYx/2/

基本的に、そのフォームの送信時に、すぐに送信するのではなく、関数を実行します。ajax呼び出し（フォームデータの送信）を送信してから、return false。falseを返すと、ページはフォームを送信できなくなります（ajaxで送信したばかりなので、この時点で再度送信されます）。したがって、すべてのロジック、ajax呼び出し、追加のチェック/処理を実行してから、falseを返して送信を停止できます。

エラー回復やajax送信の使用に関する条件が必要な場合に備えて、そこにもう少し追加しました。falseではなくtrueを返すと、ページはフォームの送信を続行し、そのページにリダイレクトされます。したがって、ajax送信を無効にするモードがある場合は、ここでそれを使用できます。概念実証として、そこにナンセンスチェックを入れました。そのチェックで遊んで、それが機能することを確認できます。

于 2013-03-04T22:17:48.713 に答える
-2

私はそれがあなたを助けると思います：

function submit()
{
 $.ajax({
      type:'POST',
      url: "your url to submit",
      data: ({param_1:somevar}),    
      dataType:"json",  
      beforeSend: function(){ //do something here }
          success: function(return){ //do something here }
 });
}

また、送信ボタンを配置しないでください。次のコマンドを使用して送信機能を呼び出すことができます。

$('#button').click(function(){
        submit(somevalue);  
      });
于 2013-03-04T21:33:48.183 に答える