DMXzone Security Provider PHP Support Product Page
Solved
Bootstrap Login Modal not being generated?
Reported 02 Mar 2016 17:36:11
1
has this problem
02 Mar 2016 17:36:11 Brad Lawryk posted:
Adding a security to a site seems to work but no Bootstrap Modal is being generated. I go to the page and I get an alert showing up that a 'modal is required'.Has something changed in the way the Bootstrap Modal on the security extension works?
Replies
Replied 02 Mar 2016 18:22:02
02 Mar 2016 18:22:02 Teodor Kuduschiev replied:
Hello Brad,
The security provider modal requires you to have the biotstrap 3 includes on your page.
The security provider modal requires you to have the biotstrap 3 includes on your page.
Replied 02 Mar 2016 18:23:12
02 Mar 2016 18:23:12 Brad Lawryk replied:
It does have it. That was the first thing I did when I started the site yesterday.
Replied 02 Mar 2016 18:32:54
02 Mar 2016 18:32:54 Teodor Kuduschiev replied:
Please provide a link to your page 
Replied 02 Mar 2016 18:36:23
02 Mar 2016 18:36:23 Brad Lawryk replied:
It isn't uploaded to live server yet - only local. I can zip the entire site up for you and send it if you like. It's only one page so far and the DMX generated files.
Replied 02 Mar 2016 18:45:26
02 Mar 2016 18:45:26 Brad Lawryk replied:
Here is the code form the page:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Kopar Administration Program Hub</title>
<link href="css/bootstrap-3.3.5.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.js"></script>
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" />
<script type="text/javascript" src="ScriptLibrary/dmxFormValidator.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxSecurityProvider.js"></script>
<script type="text/javascript">
/* dmxSecurityProvider name "dmxSecurityProvider" */
jQuery.dmxSecurityProvider(
{"url": "dmxConnect/api/koparSecurity.php", "form": {"username": "", "password": "", "remember": ""}, "modalText": {"title": "Kopar Administration"}, "events": {"onInvalid": "dmxSecurityProviderControl('modal');"}}
);
/* END dmxSecurityProvider name "dmxSecurityProvider" */
function dmxSecurityProviderControl(action) { // v1.0
if (jQuery.dmxSecurityProvider) {
var args = Array.prototype.slice.call(arguments, 2);
jQuery.dmxSecurityProvider[action].apply(args);
}
}
</script>
</head>
<body style="padding-top: 70px; padding-bottom: 70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Kopar Administration Hub</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-folder-open"></i> Programs</a></li>
<li><a href="#"><i class="fa fa-users"></i> Clients</a></li>
<li><a href="#"><i class="fa fa-truck"></i> Employers</a></li>
<li><a href="#"><i class="fa fa-lock"></i> Logout</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-lg-9 col-md-8">
<ul class="breadcrumb">
<li><i class="fa fa-lock"></i> Logged in as Brad Lawryk</li>
</ul>
<h2>My Dashboard</h2>
<hr />
</div>
<div class="col-lg-3 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-search"></i> Client Search</h3>
</div>
<div class="panel-body">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-sm" placeholder="Client ID or Last Name" />
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</span></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-search"></i> Employer Search</h3>
</div>
<div class="panel-body">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-sm" placeholder="Employer Name" />
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="button"> <i class="glyphicon glyphicon-search"></i> </button>
</span> </div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-file"></i> Kopar Documents</h3>
</div>
<div class="panel-body">
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"><i class="glyphicon glyphicon-file"></i> General Documents</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">Content for Accordion Panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1"><i class="glyphicon glyphicon-file"></i> Kopar Employment Services</a></h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">Content for Accordion Panel 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"><i class="glyphicon glyphicon-file"></i> Skills Quest</a></h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">Content for Accordion Panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1"><i class="glyphicon glyphicon-file"></i> SCAP</a></h4>
</div>
<div id="collapseFour1" class="panel-collapse collapse">
<div class="panel-body">Content for Accordion Panel 4</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseFive1"><i class="glyphicon glyphicon-file"></i> Peak Performance</a></h4>
</div>
<div id="collapseFive1" class="panel-collapse collapse">
<div class="panel-body">Content for Accordion Panel 5</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottomFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bottomFixedNavbar1">
<ul class="nav navbar-nav">
<li><a href="#">Kopar Administration Ltd. ©2016</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <i class="fa fa-user-secret"></i> Dashboard Administration</a></li>
<li><a href="#"> <i class="fa fa-terminal"></i> Tech Support</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html> Replied 02 Mar 2016 19:34:37
02 Mar 2016 19:34:37 Teodor Kuduschiev replied:
Well your page layout has many errors.
You have:
Two bootstrap css includes
Two bootstrap js includes
Two jquery includes
None of them should be included more than once on the page.
You have:
Two bootstrap css includes
Two bootstrap js includes
Two jquery includes
None of them should be included more than once on the page.
Replied 02 Mar 2016 19:36:41
02 Mar 2016 19:36:41 Brad Lawryk replied:
Anything added there was added by DMX Extensions. I'll clean it up and give it another try.
Replied 02 Mar 2016 19:43:59
02 Mar 2016 19:43:59 Brad Lawryk replied:
Anyways, cleaning up the includes corrected the problem.
I'll watch for that next time I have an issue.
Thanks.
I'll watch for that next time I have an issue.
Thanks.
Replied 02 Mar 2016 20:01:14
02 Mar 2016 20:01:14 Teodor Kuduschiev replied:
Well, as we explain every time - if you are using different bootstap css/js files ... just open Commands > DMXzone Bootstrap 3 Options, browse to your custom css/js files, turn off the automatic file update options and click OK.
This way the extension won't add any other includes.
This way the extension won't add any other includes.