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.