使用Laravel和AJAX - 不加载DIV

时间:2014-06-05 16:13:07

标签: javascript ajax laravel-4

我真的对此感到困惑。我在apache日志或浏览器(chrome)中没有错误。

我可以访问此特定页面(localhost / admin / networks)并单击数据库生成列表中的项目。单击该项目将打开一个css popup div,我可以添加一个数据库条目。这部分工作正常。但是,我还有一个实时搜索框,因此您可以键入部分网络以查看结果。当你点击其中一个结果虽然它会弹出css弹出窗口,但是它会因为找不到文件而变空 - 即使它的搜索功能很好。我有一点工作,但我添加了一个路由前缀,我认为我的问题在于我的JS文件和我的路由前缀之间。老实说我不知道​​从哪里开始检查,因为它一直有效,直到被搜查。

另外,请随意批评。我还在学习,如果我以一种可怕的方式做某事,请随时告诉我。任何帮助表示赞赏!

编辑2:

我把它缩小到我的javascript文件的.load上的第三个参数。我在后面添加了我的路由前缀是我当前的js文件。

当前js.js文件

var baseURL = "https://localhost/";
var admURL = "https://localhost/admin/";
//DIV View Toggle

function toggle(div_id)
{
    var el = document.getElementById(div_id);
    if(el.style.display == 'none')
    {
        el.style.display = 'block';
    }
    else
    {
        el.style.display = 'none';
    }
}
function togglePopBox(windowname)
{    
    toggle('popBox');
    toggle('popBackground');
}
$(document).ready(function()
{
    //Add Networks Button
    $("#addNet").on('click', function()
    {
        $("#popBox").load(admURL + 'addnetwork', setupInternalPopBoxNetworks);
    });

    //Kills popup
    function setupInternalPopBoxNetworks()
    {
        $("#cancelNet").on('click', function()
        {
            $("#popBox").load(baseURL + 'blank', setupInternalPopBoxNetworks);
        });
    }

    //Network Search Function
    $('#searchNetworkID').keyup(function(e){
        $("#networkBox").load(baseURL + 'network.search' + '?networkSearch=' + $('#searchNetworkID').val());
    });

    //Add Subnets Button
    $(".addSubnet").on('click', function()
    {
        var netID = $(this).attr('id');
        $("#popBox").load(admURL + 'addsubnet' + '?network=' + netID, setupInternalPopBoxNetworks);
    });

    //View Subnets Button
    $(".viewSubnet").on('click', function()
    {
        var netID = $(this).attr('id');
        $("#subnetBox").load(baseURL + 'viewsubnet' + '?network=' + netID, setupInternalPopBoxNetworks);
    });

//Subnet Search
    $('#searchSubnetID').keyup(function(e){
        $("#subnetBox").load(baseURL + 'subnet.search' + '?subnetSearch=' + $('#searchSubnetID').val());
    });

});

修改1:

  

我删除了我使用相同问题定义的路由组。我还原了   在我怀疑之前创建另一个popUp DIV之前回来了   也许我曾在某处制造过冲突。我不确定它是什么   是的,但在玩了一些之后,我认为我的问题就出现了问题   js.js文件。

     

我很确定我遇到的问题与async有关   我正在使用http://api.jquery.com/load/。我将子网按钮更改为   下面的代码将获得一个加载的弹出窗口,但它只是   之前加载的一个,因为div不会消失   闭合。

     

我觉得我已经接近了,但显然仍然缺少一些重要的东西。

$(".addSubnet").on('click', function()
{
    var netID = $(this).attr('id');
    $("#popBox").load(baseURL + 'addsubnet' + '?network=' + netID);
});

routes.php文件

#Route Prefix for administration
Route::group(array('prefix' => 'admin', 'before' => 'auth'), function()
{
    #Network Management Page - Add, Edit, Delete
    Route::get('networks', function()
    {
        $userGroups = implode(',', Auth::user()->groups);
        $userGroups = ''.$userGroups.'';
        $userGroups = explode(",", $userGroups);
        $CanIVisit = Link::whereIn('linkGroup', $userGroups)->count();
        if($CanIVisit > 0){
            return View::make('networks');
        }else{
            return Redirect::intended('landing');
        }
    });

    #Adds a Network
    Route::get('addnetwork', array(
        'as' => 'network.add',
        'uses' => 'NetworksController@add'
    ));

    #POSTS added network data
    Route::post('networks', array('before' => 'csrf', 
        'as' => 'network.create',
        'uses' => 'NetworksController@create'
    ));

    #Adds subnet to specified network
    Route::get('addsubnet', array(
        'as' => 'subnet.add',
        'uses' => 'NetworksController@addSubnet'
    ));

    #POSTS subnet information to database
    Route::post('subnets', array('before' => 'csrf', 
        'as' => 'subnet.create',
        'uses' => 'NetworksController@createSubnet'
    ));
});

NetworksController.php

public function search()
{
$lineNumber = 1;
$network = Input::get('networkSearch');
$networks = IPv4Network::where('easyNet', 'LIKE', "$network%")
    ->orWhere('route', 'LIKE', "$network%")
    ->orderBy('network', 'asc')
    ->get();
$networksCount = IPv4Network::where('easyNet', 'LIKE', "$network%")
    ->orWhere('route', 'LIKE', "$network%")
    ->orderBy('network', 'asc')
    ->count();

if($networksCount == 0){
    echo("No networks matched the criteria entered.");
}else{
    echo("<div id=\"networkListHead\">");
    echo("<div class=\"networkID\">Network</div>");
    echo("<div class=\"networkMask\">Mask</div>");
    echo("<div class=\"networkPath\">Route Path</div>");
    echo("<div class=\"networkSubnets\">Subnets</div>");
    echo("<div class=\"networkHosts\">Hosts</div>");
    echo("<div class=\"networkMaxHosts\">Max Hosts</div>");
    echo("</div>");

    foreach($networks as $foundNet){
        $findSubnets = IPv4Subnets::where('networkID', '=', $foundNet->networkID)
            ->get();
        $findSubnetsCount = IPv4Subnets::where('networkID', '=', $foundNet->networkID)
            ->count();


        $mask = (32 - $foundNet->mask);
        $MaxHosts = (pow(2, $mask) - 2);

        if($lineNumber == 1){
            echo("<div class=\"networkListA\">");
            echo("<div class=\"networkID\"><a href=\"#\" onclick=\"togglePopBox('popBox')\" class=\"addSubnet\" id=\"{$foundNet->networkID}\">".long2ip($foundNet->network)."</a></div>");
            echo("<div class=\"networkMask\">{$foundNet->mask}</div>");
            echo("<div class=\"networkPath\">{$foundNet->route}</div>");
            echo("<div class=\"networkSubnets\"><a href=\"#\" class=\"viewSubnet\" id=\"{$foundNet->networkID}\">{$findSubnetsCount}</a></div>");
            echo("<div class=\"networkHosts\">");
            if($findSubnetsCount == 0){
                echo("0");
            }else{
                $hostCount = IPv4Hosts::all()
                    ->count();

                if($hostCount == 0){
                    echo("0");
                }else{
                    echo $hostCount;
                }
            }
            echo("</div>");
            echo("<div class=\"networkMaxHosts\">");
            echo $MaxHosts;
            echo("</div>");
            echo("</div>");
            $lineNumber = 2;
        }else{
            echo("<div class=\"networkListB\">");
            echo("<div class=\"networkID\"><a href=\"#\" onclick=\"togglePopBox('popBox')\" class=\"addSubnet\" id=\"{$foundNet->networkID}\">".long2ip($foundNet->network)."</a></div>");
            echo("<div class=\"networkMask\">{$foundNet->mask}</div>");
            echo("<div class=\"networkPath\">{$foundNet->route}</div>");
            echo("<div class=\"networkSubnets\"><a href=\"#\" onclick=\"togglePopBox('popBox')\" class=\"viewSubnet\" id=\"{$foundNet->networkID}\">{$findSubnetsCount}</a></div>");
            echo("<div class=\"networkHosts\">");
            if($findSubnetsCount == 0){
                echo("0");
            }else{
                $hostCount = IPv4Hosts::all()
                    ->count();

                if($hostCount == 0){
                    echo("0");
                }else{
                    echo $hostCount;
                }
            }
            echo("</div>");
            echo("<div class=\"networkMaxHosts\">");
            echo $MaxHosts;
            echo("</div>");
            echo("</div>");
            $lineNumber = 1;
        }
    }
}
}

js.js

var baseURL = "https://localhost/";
var admURL = "https://localhost/admin/";
//DIV View Toggle

function toggle(div_id)
{
    var el = document.getElementById(div_id);
    if(el.style.display == 'none')
    {
        el.style.display = 'block';
    }
else
{
    el.style.display = 'none';
}
}
function togglePopBox(windowname)
{
    toggle('popBox');
    toggle('popBackground');
}
    $(document).ready(function()
    {
    //Add Subnets Button
        $(".addSubnet").on('click', function()
    {
        var netID = $(this).attr('id');
        $("#popBox").load(admURL + 'addsubnet' + '?network=' + netID, setupInternalPopBoxNetworks);
    }); 

    //Kills popup
    function setupInternalPopBoxNetworks()
    {
        $("#cancelNet").on('click', function()
        {
            $("#popBox").load(baseURL + 'blank', setupInternalPopBoxNetworks);
        });
    }


    //Network Search Function
    $('#searchNetworkID').keyup(function(e){
        $("#networkBox").load(baseURL + 'network.search' + '?networkSearch=' + $('#searchNetworkID').val());
    });
});

1 个答案:

答案 0 :(得分:0)

我明白了。我以为我绑定到一个静态元素,但我最终绑定到我的页面结构中更高一点的元素 - 再加上对我的js.js文件的一些修改,我解决了这个问题。这是我工作的js文件的样子。

<强> js.js

var baseURL = "https://localhost/";
var admURL = "https://localhost/admin/";
//DIV View Toggle

function toggle(div_id)
{
    var el = document.getElementById(div_id);
    if(el.style.display == 'none')
    {
        el.style.display = 'block';
    }
    else
    {
        el.style.display = 'none';
    }
}
function togglePopBox(windowname)
{
    toggle('popBox');
    toggle('popBackground');
}    
$(document).ready(function()
{
    //Add Networks Button
    $("#addNet").on('click', function()
    {
        $("#popBox").load(admURL + 'addnetwork', togglePopBox);
    });

    //Kills popup
    $("#popBox").on('click', '#cancelNet', function()
    {
        $("#popBox").load(baseURL + 'blank', togglePopBox);
    });

    //Network Search Function
    $('#superDuperBox').on('keyup', '#searchNetworkID', function(){
        $("#networkBox").load(baseURL + 'network.search' + '?networkSearch=' + $('#searchNetworkID').val(), null, null);
    });

    //Add Subnets Button
    $('#superDuperBox').on('click', '.addSubnet', function()
    {
        var netID = $(this).attr('id');
        $("#popBox").load(admURL + 'addsubnet' + '?network=' + netID, togglePopBox);
    });

    //View Subnets Button
    $('#superDuperBox').on('click', '.viewSubnet', function()
    {
        var netID = $(this).attr('id');
        $("#subnetBox").load(baseURL + 'viewsubnet' + '?network=' + netID);
    });

    //Subnet Search
    $('#superDuperBox').on('keyup', '#searchSubnetID',function(){
        $("#subnetBox").load(baseURL + 'subnet.search' + '?subnetSearch=' + $('#searchSubnetID').val());
    });

});