0

Trying to improve the CRUD by implementing the export to pdf(barryvdh). Everything is working but I want to put some twist. The admin can select what column/s their want to export.

I created checkboxes,my checkboxes are: "Select all" "Column 1" "Column 2". When I check the "Select All", "Column 1" "Column 2" will be both check but when I uncheck the "Column 1", the "Select All" will be uncheck

I found this http://jsfiddle.net/rupakdas85/nnwupsck/ and tried to put it in my application using laravel it didn't work but when I put this into my CI application its working.

NOTE: I also check the console, there's no error and removed the jquery.min.js its still not working.

Question: Why the jquery didnt work when I apply it in my Laravel application?

Layout

// Header code
<!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="{{ asset('js/app.js') }}" defer></script>
     <script type="text/javascript">
        $("#checkAll").change(function () {
            $("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
        });
        $(".cb-element").change(function () {
                _tot = $(".cb-element").length                        
                _tot_checked = $(".cb-element:checked").length;

                if(_tot != _tot_checked){
                    $("#checkAll").prop('checked',false);
                }
        });

    </script>

.....

index.blade

@extends('layouts.post')

@section('content')
<div class="col-md-12">
    <div class="card">
    <div class="card-header text-white bg-primary">MY POST</div>
        <div class="card-body">
            <a class="btn btn-primary" href="{{ route('posts.create') }}">Add Post</a>

            <input type="checkbox" id="checkAll"/> ALL

<br />

<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3
Angel
  • 966
  • 4
  • 25
  • 60
  • Your code seems to work fine in isolation: http://jsfiddle.net/dnvgjcbL/. Can you give us specific details of what your issue is. Also, please check the console for errors – Rory McCrossan Oct 19 '18 at 13:55
  • What.. In my application it didnt work but in the link you've given its working. – Angel Oct 19 '18 at 13:59
  • You need to wrap your code in a `$(function() { ... });` - it is likely the HTML has not rendered before your code is run – mplungjan Oct 19 '18 at 14:01
  • When should I use $(function() { ... }); ... document.... and .click(event....)).. – Angel Oct 19 '18 at 14:04
  • code inside `$(function() { ... });` which is a shorter version of `$(document).ready(function)({....})` will execute after page load - there is also a DOMReady but i always use $(function... – mplungjan Oct 19 '18 at 14:12
  • Oh i see. thank you! – Angel Oct 19 '18 at 14:15

0 Answers0