I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear Ask Question

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this

 <section class="reservation">
        <img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
        <div class="wrapper">
            <div class="container-fluid">
                <div class=" section-content">
                    <div class="row">
                        <div class="col-md-5 col-sm-6">
                            <form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
                                      {{ csrf_field() }}

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">

                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
                                               placeholder="    Name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control reserve-form empty iconified" id="email"  placeholder="    e-mail">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone"  placeholder="    Phone">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder="  Time">
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3"  placeholder="    We're listening"></textarea>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <button type="submit" id="submit" name="submit" class="btn btn-reservation">
                                        <span><i class="fa fa-check-circle-o"></i></span>
                                        Make a reservation
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

Handle slave tabs dynamically Ask Question

I’m using bootstrap to create a tabbed interface on my page. Functionally I have it working in the way I’d like but I’ve hard coded and am duplicating a lot of code which may be better handled dynamically. I’d like to have the option of scaling my slave tabs up. If I’m to do that with my current setup I will have much more duplicated code.

Here is what I have so far:

  <section>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
      <br />

      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
        </li>
        <li class="nav-item">
          <a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
        </li>
        <li class="nav-item">
          <a href="#slave1" class="nav-link" role="tab" data-toggle="tab">Slave 1</a>
        </li>
        <li class="nav-item">
          <a href="#slave2" class="nav-link" role="tab" data-toggle="tab">Slave 2</a>
        </li>
        <li class="nav-item">
          <a href="#slave3" class="nav-link" role="tab" data-toggle="tab">Slave 3</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="run">
          <div>
            {% for spkVersion, spkObject in results %}
              {% for sVersion, sObject in spkObject %}
                {% for jobRun in sObject.jobRuns %}
                  <div class="fontSize14 margin20 marginBottom5">
                    <span class="bold">Run #{{ jobRun.runNumber }}</span>
                    <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ jobRun.jobType }}.log</span>
                  </div>
                  <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
                Loading log file...
                  </div>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="master">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-master.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave1">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave1.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave2">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave2.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave3">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ this.slaveId }}.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
      </div>
      </div>
    </div>
  </section>

{% endblock %}

{% block pageScript %}
  <script>
    //run log
    $(document).ready(function(){
      $(".jobRunLogContainer").each(function( index ) {
        var jobRunLogContainer = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer.html(data);
          }
        });
      });
    });

    //master log
    $(document).ready(function(){
      $(".jobRunLogContainer2").each(function( index ) {
        var jobRunLogContainer2 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer2.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer2.html(data);
          }
        });
      });
    });

    //slave1 log
    $(document).ready(function(){
      $(".jobRunLogContainer3").each(function( index ) {
        var jobRunLogContainer3 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave1";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer3.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer3.html(data);
          }
        });
      });
    });

    //slave2 log
    $(document).ready(function(){
      $(".jobRunLogContainer4").each(function( index ) {
        var jobRunLogContainer4 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer4.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer4.html(data);
          }
        });
      });
    });

    //slave3 log
    $(document).ready(function(){
      $(".jobRunLogContainer5").each(function( index ) {
        var jobRunLogContainer5 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer5.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer5.html(data);
          }
        });
      });
    });
  </script>
{% endblock %}

I get the salves from the hosts file which looks like this:

xxx.xxx.xxx.xxx slave1
xxx.xxx.xxx.xxx slave2
xxx.xxx.xxx.xxx slave3

Is it possible to get the slave tab names from the hosts file and also can I display the slave log files for the current setup with one function rather than 3?

Add Output HTML

<!doctype html>

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

    <link href="/css/main.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header>
      <h1>Runner</h1>
    </header>

    <div class="contentWrapper">

  <h2>Job Log</h2>
  <section>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
      <br />

      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
        </li>
        <li class="nav-item">
          <a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
        </li>
        <li class="nav-item">
          <a href="#slave1" class="nav-link" role="tab" data-toggle="tab">slave 1</a>
        </li>
        <li class="nav-item">
          <a href="#slave2" class="nav-link" role="tab" data-toggle="tab">slave 2</a>
        </li>
        <li class="nav-item">
          <a href="#slave3" class="nav-link" role="tab" data-toggle="tab">slave 3</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="run">
          <div>



                  <div class="fontSize14 margin20 marginBottom5">
                    <span class="bold">Run #1</span>
                    <span class="monospace" style="margin-left: 50px;">1-teragen.log</span>
                  </div>
                  <div data-jobRunId="1" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
                    Loading log file...
                  </div>



          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="master">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-master.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave1">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-slave1.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave2">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-slave2.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave3">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



      </div>
      </div>
    </div>
  </section>


    </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

  <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

  <script>
$(document).ready(function(){
  $("body").on("click", ".backToMain", function(){
    window.location = "/jobs";
  });
});
  </script>


  <script>
    //run log
    $(document).ready(function(){
      $(".jobRunLogContainer").each(function( index ) {
        var jobRunLogContainer = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer.html(data);
          }
        });
      });
    });

    //master log
    $(document).ready(function(){
      $(".jobRunLogContainer2").each(function( index ) {
        var jobRunLogContainer2 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer2.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer2.html(data);
          }
        });
      });
    });

    //slave1 log
    $(document).ready(function(){
      $(".jobRunLogContainer3").each(function( index ) {
        var jobRunLogContainer3 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave1";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer3.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer3.html(data);
          }
        });
      });
    });

    //slave2 log
    $(document).ready(function(){
      $(".jobRunLogContainer4").each(function( index ) {
        var jobRunLogContainer4 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer4.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer4.html(data);
          }
        });
      });
    });

    //slave3 log
    $(document).ready(function(){
      $(".jobRunLogContainer5").each(function( index ) {
        var jobRunLogContainer5 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave3";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer5.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer5.html(data);
          }
        });
      });
    });
  </script>

</html>

Add button with dynamic data attributes that matches row information Ask Question

function getItems() {
  let name = inputVal.value;
  console.log(name);
  clearTable();
  $.ajax({
    type: "GET",
    url: "../php/includes/search.php",
    dataType: "json",
    data: { "name": name },
    success: function (data, status) {
      if (data == false) {
        clearTable();
      } else {
        for (let i = 0; i < data.length; i++) {
          createRow(i, data[i].name, data[i].Item_Id);
        }

        if ($('td').hasClass('cell4')) {
          $('.cell4').append('<button class="btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold" data-summary="test" data-quantity="1"><i class="fas fa-shopping-cart fa-lg align-middle mr-1"></i>Add to cart</button>');
        }
      }
    },
    complete: function (data, status) {
      console.log(status);
    }
  });
}

function createRow(id, name, Item_Id) {
  let row = table.insertRow(id);

  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);

  cell1.appendChild(document.createTextNode(id));
  cell2.appendChild(document.createTextNode(name));
  cell3.appendChild(document.createTextNode(Item_Id));
  $(cell2).addClass('cell1');
  $(cell2).addClass('cell2');
  $(cell3).addClass('cell3');
  $(cell4).addClass('cell4 text-center');
}

This code works so far, but now I want to add data attributes to the button so it matches the row it’s placed on.

I’m thinking something like this when it comes to adding the values:

$('.btn-addToCart').attr("data-id", Item_Id);
$('.btn-addToCart').attr("data-name", name);

But how can I do that dynamically so it can loop through every row and match the rows info in cell2 and cell3 and then create a button that’s connected to that row? Hope you understand what I mean.

Bootstrap v4 – Tapping burger button on mobile pushes all elements to the side of the screen Ask Question

When I tap the burger button to toggle my navbar on mobile, it seems to push all of my elements to the side and completely mess up my page.

Keep in mind this doesn’t always happen but if I mistakenly tap the ‘outside’ of the burger button, this seems to occur constantly. Chrome, Edge, Firefox, you name it.

This is what it should normally look like

This is the issue

This is the navbar code

<nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand grow" href="#">

        <img width="65" height="80" src="img/logo.png">
    </a>
    <div class="collapse navbar-collapse" id="containerNavbar">
        <ul class="navbar-nav mr-auto">

            <li class="nav-item active">
                <a class="nav-link" href="user_login"><span class="fa fa-home grow">&nbsp;</span>Home</a>
            </li>


                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-wrench"> HR Control Panel</span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        <a class="nav-link" href="filtration"><span class="fa fa-bar-chart-o grow">&nbsp;</span>Filtration</a>

                        <a class="nav-link" href="edit-filtration"><span class="fa fa-eye grow">&nbsp;</span>View Filtration</a>

                        <a class="nav-link" href="overview"><span class="fa fa-calendar grow">&nbsp;</span>Gap overview</a>

                    </div>
                </li>


            <li class="nav-item" data-toggle="collapse" data-target="#GapMenu">
                <a class="nav-link"><span id="GapMenuCollapse" data-toggle="collapse" data-target="#GapMenu" class="fa fa-caret-square-o-down grow">&nbsp;</span>Gaps</a>

                <div id="GapMenu" class="collapse">
                    <a class="nav-link" data-toggle="modal" href="#ModalGaps"><span class="fa fa-calendar grow">&nbsp;</span>Add your gaps</a>
                    <a class="nav-link" data-toggle="modal" href="#ModalSchedule"><span class="fa fa-calendar-o grow">&nbsp;</span>View your gaps</a>
                </div>

            </li>

            <li class="nav-item">
                <a class="nav-link" href="attendance"><span class="fa fa-check-square-o grow">&nbsp;</span>Attendance</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="profile"><span class="fa fa-tachometer grow">&nbsp;</span>Attendance Monitor</a>
            </li>

        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#user-menu"><span class="fa fa-user-circle-o grow">&nbsp;</span>Logged in as <?php echo $info['name']; ?> <span class="fa fa-caret-down">&nbsp;</span></a>
                <div id="user-menu" class="collapse">
                    <ul>
                        <a class="nav-link" data-toggle="modal" href="#ModalUserSettings"><span class="fa fa-cog">&nbsp;</span>User profile</a>

                        <a class="nav-link" href="index.php?uref=logout"><span class="fa fa-sign-out">&nbsp;</span>Log out</a>

                    </ul>
                </div>
            </li>
        </ul>
    </div>
</nav>

This is all the CSS associated with my navbar:

.navbar-toggler {
z-index:99999;
}

.nav-link, .nav-item{
cursor: pointer;
}

.navbar-nav > li{
    padding-left:50px;
    padding-right:50px;
}

Form end tag not working properly in bootstrap 4 modal Ask Question

I am trying to implement confirmation delete with bootstrap 4 modal in my laravel project. When modal is open then submit button not working, I inspected browser and showing that, my form end tag was not closed in where am I placed, form end tag placed exactly after form start tag. I am not finding the problem. I checked everywhere in my code.Would someone help me to solve this problem please?

index.blade.php

<div class="panel-body">

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Address</th>
                <th>Blood Group</th>
                <th>Type</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($patients as $patient)
            <tr>
                <td>{{ $loop-> index + 1 }}</td>
                <td>{{ $patient->name }}</td>
                <td>{{ $patient->address }}</td>
                <td>{{ $patient->blood_group }}</td>
                <td>{{ $patient->type_rh }}</td>
                <td>
                    <a href="{{ url('admin/patient/'.$patient->id.'/details') }}" target="_blank">
                        <i class="fa fa-eye" style="color:#006400"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/'.$patient->id.'/edit') }}">
                        <i class="fa fa-edit" style="color:#e64980"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" data-toggle="modal" data-target="#deletePatient-{{ $patient->id }}">
                        <i class="fa fa-trash" style="color:#cc3300"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/pdf/'.$patient->id) }}" class="btn btn-primary pull-right"><i class="fas fa-file-pdf"></i>&nbsp;PDF</a>
                </td>
                <!-- Delete Modal -->
                <div class="modal fade" id="deletePatient-{{ $patient->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                 <h4>Confirm Delete</h4>

                            </div>
                            <form action="{{ url('admin/patient/'.$patient->id.'/delete') }}" method="POST">
                                {{ csrf_field() }}
                                {{ method_field('DELETE') }}
                            <div class="modal-body">
                                <p>Are you sure want to delete this?</p>
                            </div>
                            <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-danger">Delete</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </tr>

            @empty

            @endforelse
        </tbody>
        <tfoot></tfoot>

    </table>
</div>

after inspect the browser

Bootstrap/WordPress menu bugs [closed] Ask Question

I’m having weird problems with my mobile drop down menu. When you click the toggle button the menu appears briefly scrolling just below the button then moves to its proper location.

It also doesn’t always run, sometimes clicking it has no effect.

You can see it in action by looking at the mobile version of this page (its the menu activated by the hamburger icon in the top right hand corner):

http://u1f8aki.nixweb23.dandomain.dk

And here is the code that creates the menu:

                    <div class="mobilenav">
                            <div class="navbar-header">

                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="primary-menu"><?php esc_html_e( '', 'mentordanmark' ); ?>
                                  <span class="icon-bar top-bar"></span>
                                  <span class="icon-bar middle-bar"></span>
                                  <span class="icon-bar bottom-bar"></span>
                                </button>

                                <div id="navbar" class="navbar-collapse collapse">
                                    <?php
                                        wp_nav_menu( array(
                                            'theme_location' => 'menu-1',
                                            'menu_id'        => 'primary-menu-nav', 
                                            'container_class' => 'mobileDropdownmenu',
                                            'menu_id'             => ' ',
                                        ) );
                                    ?>
                                </div>

                                <div id="blivMentorMenu" class="BlivMentor-Login-Menu" style="display: none">
                                    <?php wp_nav_menu(
                                        'menu=secondary-menu&after=<li class="menu-divider">|</li>'
                                        ); ?>   
                                </div>

and the CSS:

/* To get the menu to appear */
button.navbar-toggle.collapsed {
    display: flex;
    flex-direction: column;
}
button.navbar-toggle {
    display: flex;
    flex-direction: column;
    margin-left: 2em;
}
.mobilenav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5.7em;
    width: 100%;
}

    #primary-menu-nav {
        width: 100%;
        position: absolute;
        left: 0;
        top: 5.7em;
        border-bottom: 1px solid #e0e4ea;
        padding-top: 4em;
    }

    #primary-menu-nav a {
        margin: 0;
        padding: 1em;
        min-width: 15em;
        text-align: center;
    }

    button.menu-toggle {
        border: 0;
        font-size: 20px;
        width: 1em;
        height: 1em;
        position: absolute;
        top: 1.4em;
        overflow: hidden !important;
    }

    button.menu-toggle:active, button.menu-toggle:focus, a.btn-navbar:active, a.btn-navbar:focus {
        border: 0 !important;
        outline: 0;
    }

    a.btn-navbar {
        display: flex;
        position: absolute;
        top: 2.5em;
        height: 3em;
        width: 3em;
        padding: .3em 0;
        flex-direction: column;
    }

    span.icon-bar {
        background: #000;
        height: .3em;
        width: 100%;
        margin: .2em;
    }

Show Success message on successful form validation in Bootstrap 4 Ask Question

So I am trying to get a success modal to show after form validation is successful using Bootstrap 4 and the Javascript code that comes with it with a slight modification. Not sure if this is the correct way to handle it though.

Think my event.showModal is wrong.

<div class="row content">
    <div class="container">
        <div class="col">
            <form id="form" class="needs-validation" novalidate>
              <div class="form-group">
                <label for="exampleInputEmail1">Your Name <em class="required">*</em></label>
                <input type="Name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" required>
                <div class="invalid-feedback">
                    Please add your name
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Your Email <em class="required">*</em></label>
                <input type="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"  required>
                <div class="invalid-feedback">
                    Please add a valid email
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Label <em class="required">*</em></label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
                <div class="invalid-feedback">
                    Please add some details
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Anything else you want us to know? <em class="required">*</em></label>
                <textarea class="form-control" id="exampleFormControlTextarea2" rows="6" required></textarea>
                <div class="invalid-feedback">
                    Just do it…
                </div>
              </div>

              <button type="submit" class="btn btn-primary btn-givi hvr-grow-shadow hvr-back-pulse">Submit</button>
            </form>
        </div>
        <div id="success" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <h1>Success</h1>
            </div>
          </div>
        </div>


(function() {
 'use strict';
  window.addEventListener('load', function() {
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
   var forms = document.getElementsByClassName('needs-validation');
   // Loop over them and prevent submission
   var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
       if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
        else if (form.checkValidity() = true) {
           event.showModal('#Sucess');
        }
       form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

Button not put to the right place Ask Question

I use bootstrap 4, thymeleaf and datatable

On top of the table to the right i try to put a button

 <div class="col-sm-12">
     <div class="float-right">
         <button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">Nouveau utilisateur</button>
     </div>
 </div>

I used col-sm-12 to take all space

<table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th th:text="#{user.id}">Id</th>
            <th th:text="#{user.login}">Login</th>
            <th th:text="#{user.firstname}">Firstname</th>
            <th th:text="#{user.lastname}">LastName</th>
            <th th:text="#{user.roles}">Roles</th>
        </tr>
    </thead>
</table>

screen imgage

Like you can see, button is not the right

Edit: add code to init table

    $(document).ready(function() {
    var url = "/users";
    $('#usersTable').DataTable({
        "bLengthChange": false, //hide 'show entries dropdown
        'processing': true,
        'serverSide': true,
        'pagingType': 'simple_numbers',
        'ajax': {
            type: 'get',
            'url': url,
            'data': function(d) {
                var current = $('#usersTable').DataTable();
                d.page = (current != undefined) ? current.page.info().page : 0;
                d.size = (current != undefined) ? current.page.info().length : 5;
                d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
                //return JSON.stringify( d );
            }
        },
        "columns": [{
                "data": "id"
            },
            {
                "data": "username"
            },
            {
                "data": "firstname"
            },
            {
                "data": "lastname"
            },
            {
                "data": "username"
            }
        ]
    });
});

Anyway with proposed solution, buton is not aligner with the text box, will need to check with datatable

Edit 2

to add better integration, this extensions could be an solution

https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Bootstrap v4: understanding and adding custom classes Ask Question

Motivation

Bootstrap (v4) currently does not have input tagging functionality. While libraries exist which provide tagging functionality (e.g. TagsInput, and Select2 – specifically for select elements), neither provide the exact functionality that I want; namely, having typeahead supported tags in a textarea that are stacked vertically. While one can modify Bloodhound and these libraries to do so, given some other features I would like to personally add, I figure going from the ground up would be easier. In addition, as a new [Bootstrap] user I am quite fond of their light but functional javascript and wanted to take a moment to try and learn from them. In addition, while I have written a lot of javascript, I am not a jQuery user, so this would provide a jumping point into jQuery as well.

While making a functional tagging library is outside the scope of any single S.O. question, making a new bootstrap class (heavily incumbent upon an existing class) should be in scope.

Context

If we think about what a “tag” is – in context of input – it is simply the user provided input encased in some form of block/bubble often with a dismiss-able button nearby. Bootstrap (v4) has a class which already has most of the stylistic features implemented – alerts. The provided link is to the source code. In essence, to build upon the Alert class, I can either inherit or just copy-paste and replace all instances of “alert” with “tag”. The result of doing so can be found at the bottom of the post for readability.

As being a beginner to jQuery, there is a lot I do not understand about their code. Even having written a fair amount of javascript, I have also never had the use for export and import statements – which were causing errors when trying to use the code.

So I went ahead and from the Util source code, copy-pasted the three needed features from util.js:

Util.TRANSITION_END, 
Util.getTransitionDurationFromElement(element), 
Util.getSelectorFromElement(element) 

I figured that I would now be good to go, assuming jQuery is already loaded.
It turns out that this is not the case. I have the error:

TypeError: element.getAttribute is not a function
tag.js:67:24

where line 67 is the first line of the pasted-over Util.getSelectorFromElement(element) function:

let selector = element.getAttribute('data-target')

Question(s)

So, in short, my question is, how can I incorporate my “new” class (copy pasting the alert class into a new file and renaming it be the tag class) into my local version of Bootstrap?

Any additional insights into the class structure used by Bootstrap would also be appreciated.

const Tag = (($) => {
  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
   */
  const NAME = 'tag'
  const VERSION = '0'
  const DATA_KEY = `bs.tag`
  const EVENT_KEY = `.${DATA_KEY}`
  const DATA_API_KEY = '.data-api'
  const JQUERY_NO_CONFLICT = $.fn[NAME]

  const Selector = {
    DISMISS : '[data-dismiss="tag"]'
  }

  const Event = {
    CLOSE : `close${EVENT_KEY}`,
    CLOSED : `closed${EVENT_KEY}`,
    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
  }

  const ClassName = {
    TAG: 'tag',
    FADE: 'fade',
    SHOW: 'show'
  }

  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */
  class Tag {
    constructor(element) {
      this._element = element
    }

    // Getters
    static get VERSION() {
      return VERSION
    }

    // Public
    close(element) {
      element = element || this._element
      const rootElement = this._getRootElement(element)
      const customEvent = this._triggerCloseEvent(rootElement)

      if (customEvent.isDefaultPrevented()) {
        return
      }

      this._removeElement(rootElement)
    }

    dispose() {
      $.removeData(this.element, DATA_KEY)
      this._element = null
    }

    // Private
    _getRootElement(element) {

      const selector = function(element) {
        let selector = element.getAttribute('data-target')
        if (!selector || selector === '#') {
          selector = element.getAttribute('href') || ''
        }
        try {
          const $selector = $(document).find(selector)
          return $selector.length > 0 ? selector : null
        } catch (err) {
          return null
        }
      }
      // const selector = Util.getSelectorFromElement(element)
      let parent     = false

      if (selector) {
        parent = $(selector)[0]
      }

      if (!parent) {
        parent = $(element).closest(`.${ClassName.TAG}`)[0]
      }
      return parent
    }



    _triggerCloseEvent(element) {
      const closeEvent = $.Event(Event.CLOSE)

      $(element).trigger(closeEvent)
      return closeEvent
    }

    _removeElement(element) {
      $(element).removeClass(ClassName.SHOW)

      if (!$(element).hasClass(ClassName.FADE)) {
        this._destroyElement(element)
        return
      }

      const transitionDuration = function(element) {
        if (!element) {
          return 0
        }

        // Get transition-duration of the element
        let transitionDuration = $(element).css('transition-duration')
        const floatTransitionDuration = parseFloat(transitionDuration)

        // Return 0 if element or transition duration is not found
        if (!floatTransitionDuration) {
          return 0
        }

        // If multiple durations are defined, take the first
        transitionDuration = transitionDuration.split(',')[0]

        return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER
      }
      // const transitionDuration = Util.getTransitionDurationFromElement(element)

      $(element)
        .one('transitionend', (event) => this._destroyElement(element, event))
        .emulateTransitionEnd(transitionDuration)
        // .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
    }

    _destroyElement(element) {
      $(element)
        .detach()
        .trigger(Event.CLOSED)
        .remove()
    }

    // Static
    static _jQueryInterface(config) {
      return this.each(function () {
        const $element = $(this)
        let data       = $element.data(DATA_KEY)

        if (!data) {
          data = new Alert(this)
          $element.data(DATA_KEY, data)
        }

        if (config === 'close') {
          data[config](this)
        }
      })
    }


    static _handleDismiss(tagInstance) {
      return function (event) {
        if (event) {
          event.preventDefault()
        }

        tagInstance.close(this)
      }
    }
  }


  /**
   * ------------------------------------------------------------------------
   * Data Api implementation
   * ------------------------------------------------------------------------
   */

  $(document).on(
    Event.CLICK_DATA_API,
    Selector.DISMISS,
    Tag._handleDismiss(new Tag())
  )

  /**
   * ------------------------------------------------------------------------
   * jQuery
   * ------------------------------------------------------------------------
   */

  $.fn[NAME]             = Tag._jQueryInterface
  $.fn[NAME].Constructor = Tag
  $.fn[NAME].noConflict  = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Tag._jQueryInterface
  }

  return Tag
})($)
// export default Tag