I find myself in a perplexing situation. Despite not encountering any errors in my apache logs or browser (chrome), I am faced with an issue that has left me baffled.
On a specific page (localhost/admin/networks), I can click on an item from a database-generated list, which opens a CSS popup div allowing me to add a database entry. This functionality works seamlessly. However, the problem arises when using a live search box to input a partial network and see the results. Upon clicking one of the displayed results, the CSS popup appears empty, almost as if it fails to locate the necessary file - even though everything functions perfectly before conducting a search. At one point, this feature was working well, but after adding a route prefix, I suspect the problem lies in the interaction between my JS file and route prefixes. Unfortunately, I'm uncertain where to start investigating, as the functionality breaks only post-search.
Constructive criticism is welcome. I acknowledge that I am still learning, so any feedback on how I can improve is highly appreciated!
Edit 2:
Narrowing down the issue, I have identified the third argument of the .load method in my JavaScript file as the culprit. After reintroducing my route prefixes, here is a snippet of my current js.js file.
current js.js file
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);
});
// Function to handle popup closure
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());
});
});
Edit 1:
In an attempt to resolve the issue, I removed the route group I previously defined. Reverting back to a state before creating another popUp DIV, suspicion arose regarding a potential conflict. Although unsure about the root cause, further exploration led me to believe that the issue resides within my js.js file.
The concern seems to be related to async operations since I am utilizing the http://api.jquery.com/load/ method. Modifying the subnets button code below resulted in loading a popup successfully. However, it continued to display the previously loaded content because the div did not reset upon closure.
Progress is evident, yet a significant piece of the puzzle remains elusive.
$(".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());
});
});