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.
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> &nbsp;Programs</a></li>
        <li><a href="#"><i class="fa fa-users"></i> &nbsp;Clients</a></li>
        <li><a href="#"><i class="fa fa-truck"></i> &nbsp;Employers</a></li>
        <li><a href="#"><i class="fa fa-lock"></i> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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. &copy;2016</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> <i class="fa fa-user-secret"></i> &nbsp;Dashboard Administration</a></li>
        <li><a href="#"> <i class="fa fa-terminal"></i> &nbsp;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.
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.
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.

Reply to this topic