Laravel ajax对身体做出回应但不回应#results

时间:2017-06-15 13:45:32

标签: ajax laravel laravel-5

如果我将结果附加到他们显示的正文中,但是当我将结果附加到#results时,我会在输出结果来自id为'results'的div中搜索结果。

搜索框位于master.blade.php的导航栏中,其他每个页面都包含它。

master.blade.php

 <form id="search_form" action="/search" method="get" autocomplete="off" class="navbar-form navbar-left">
    <div class="form-group">
        <input type="text" class="form-control" id="search_text" onkeyup="search_data(this.value);" placeholder="Search">
            </div>
            <div id="result">
            <table style="width:100%">
    @if (isset($results) && count($results) > 0)
    @foreach( $results as $business )
    <tr>
        <td>{{ $business->logo }}</td>
        <td>{{ $business->name}}</td>
    </tr>
    @endforeach
@endif
</table>
                                </div>
                            </div>
                        </form>

控制器:

public function search($search_value) {
    $search_text = $search_value;
    if ($search_text==NULL) {
        $data= Business::all();
    } else {
        $data=Business::where('name','LIKE', '%'.$search_text.'%')->get();
    }
    //$data = $data->toArray();
    return view('master')->with('results',$data);
    }

的Ajax:

function search_data(search_value) {
    $.ajax({
        url: '/searching/' + search_value,
        type: 'post',
        dataType: 'html',
        success: function(data) {
            $('#results').append(data);
        },
        error: function(data) { 
            $('body').html(data); 
        },
        headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }       
    });
}

路线::

Route::post('/searching/{search}', 'SearchController@search');

如果我真的查看ajax响应,结果是:

<table style="width:100%">
        <tr>
    <td></td>
    <td>dasd</td>
</tr>
</table>

但它永远不会出现在页面上!如果将附加内容更改为正文,则会执行此操作。

//修改

我有一个加载的GIF工作正常,但现在它永远不会消失,每次执行ajax,它也不想消失:

$(document).ajaxStart(function() { Pace.restart(); });
$(window).on('load', function () {
    setTimeout(function(){
            $('.se-pre-con').fadeOut('slow', function () {
            $(".container").css({ opacity: 1.0 });
            });
        }); // set the time here
});
$(document).ready(function() {
    setTimeout(function() {
    $(".messages").fadeOut(5000);
});
    setTimeout(function() {
    $(".messages").fadeOut(5000);
});
});

的CSS:

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #6d6968;
    background: url(../images/default.gif) center no-repeat #fff;
}

1 个答案:

答案 0 :(得分:0)

jQuery.ajaxSetup({
    beforeSend: function (xhr, data) {
            $('.se-pre-con').show();
    },
    complete: function ()
    {
        $('.se-pre-con').hide();
    }
});