Javascript 使用Laravel和AJAX-不加载DIV

我真的很困惑。我在apache日志或浏览器（chrome）中没有错误

我可以访问这个特定页面（localhost/admin/networks）并从数据库生成的列表中单击一个项目。单击该项将打开一个css弹出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:

我删除了使用相同问题定义的路由组。我回复说 在我创建另一个弹出DIV之前，我怀疑 也许我在某个地方制造了冲突。我不确定这是什么 是的，但是在玩了更多的游戏之后，我觉得我的大脑有一个问题 js.js文件

我很确定我遇到的问题与async有关 我正在使用。我将“子网”按钮更改为 下面的代码，将得到一个加载的弹出窗口，但它将只是 它之前加载了一个，因为当 关闭

我觉得我离目标越来越近了，但显然我还是错过了一些重要的事情

$(".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'
    ));
});

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;
        }
    }
}
}

networkscocontroller.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'
    ));
});

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文件的一些修改，我解决了这个问题。下面是我的工作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 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());
    });
});

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());
    });

});