Cakephp 3.1 Javascript

Question

How to create a element that uses javascript without reloading the jquery.js? I've already load it on layout.

every time, I must load it. This is my element/contacts.ctp

(entire html)
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap/novo.js">
</script>
<script type="text/javascript">
  var id = '1';
  $(function(){$(document).on('click', '.btn-add', function(e){

      e.preventDefault();

      var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option>                <?php endforeach; ?>            </select>            <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]">            <button class="btn btn-danger btn-remove" id="addcontato" type="button">                <span class="fa fa-minus"></span>            </button>    </br> </div>';
      $(".novas").before(inpute);
      $('.entradas-'+id).slideDown('slow');
      return id++;
    })
    .on('click', '.btn-remove', function(e)
    {
      $(this).closest('div').slideUp();

      e.preventDefault();
      return false;
    });
  });
</script>

If I understand correctly, you include the script tags in the <body> for every page? Put them in the header file between the <head> tags, and load that header file for every page, so that you don't have to repeat yourself — Ozrix
– Ozrix, Commented Apr 27, 2016 at 19:44
wrap everything into $(document).ready(function(){ ... }); for the scripts to wait for all the elements on the page to render — Ozrix
– Ozrix, Commented Apr 27, 2016 at 20:03

Ozrix · Accepted Answer · 2016-04-27 20:10:30Z

1

First, put the custom JavaScript code in a separate file. Then, wrap it inside the $(document).ready() function, like this

$(document).ready(function(){
    var id = '1';

    $(function(){$(document).on('click', '.btn-add', function(e){
       ...
    }
    ...
});

This tells jQuery to wait with the code execution until all the elements on the page have been drawn.

Then, load all the scripts in the <head> tag:

<html>
   <head>
      <script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script>
      <script type="text/javascript" src="js/bootstrap/novo.js"></script>
      <script type="text/javascript" src="js/your/custom/path.js">
   </head>

Make the header the same for all your pages, and you're good to go.

answered Apr 27, 2016 at 20:10

Ozrix

3,5052 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cakephp 3.1 Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related