"b.preventDefault is not a function" when using Bootstrap modal

StackOverflow https://stackoverflow.com/questions/22885809

Question

I'm trying to let users edit lists through a modal that posts to the items controller. However, when I click on the edit button, which is the pencil glyphicon, I get a javascript error from bootstrap. I don't have any custom javascript that could be conflicting at this point. I'm only including jQuery and Bootstrap js files. The modal pops up just fine, and the form works just fine. So I'm not sure what the error is about.

The error is also preventing any other javascript from getting run. I tried putting in some console.log() statements to help me debug but it wasn't happening.

Here is the error I get.

TypeError: b.preventDefault is not a function

I have jQuery included prior to bootstrap in my Views/Layouts/default.ctp

<html> 
<head>
<?php echo $this->Html->charset(); ?>
<title>
    <?php echo $cakeDescription ?>:
    <?php echo $title_for_layout; ?>
</title>
<?php
    echo $this->Html->meta('icon');

    echo $this->Html->css('cake.generic');
    echo $this->Html->css('bootstrap-theme.min');
    echo $this->Html->css('bootstrap.min');

    echo $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js');
    echo $this->Html->script('bootstrap');
    echo $this->Html->script('bootstrap.min');

    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->fetch('script');
?> 
</head>

Here is my view.

// view.ctp
<div class="col-md-8 col-xs-12">
<h1><?php echo h($list['Linkdlist']['name']); ?>
    <button type="button" class="btn btn-default ">
        <span class="glyphicon <?php echo ($list['Linkdlist']['public']) ? 'glyphicon-eye-open' :'glyphicon-eye-close' ?>"></span> Public
    </button>
</h1>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <?php echo h($list['Linkdlist']['name']); ?>
            <span class="badge pull-right"><?php echo $list['Linkdlist']['votes']; ?> votes</span>
        </div>
    </div>
    <div class="panel-body">
        <p><?php echo h($list['Linkdlist']['description']); ?></p>
        <ul class="list-group">
            <?php foreach($items as $item) : ?>
            <li class="list-group-item"><?php echo $item['Item']['display']; ?>
                <?php
                    echo $this->Form->postLink(
                        '<span class="glyphicon glyphicon-remove"></span>',
                        array('controller' => 'items', 'action' => 'delete', $item['Item']['id'], $list['Linkdlist']['id']),
                        array('escape' => false, 'class' => 'btn btn-default btn-xs pull-right', 'role' => 'button'),
                        __("Are you sure? This can't be undone.")
                    );
                ?>
                <button class="edit-item btn btn-default btn-xs pull-right" data-toggle="modal" data-target="#editItem">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>

<?php
echo $this->Html->link('Add Item', '/items/add/' . $list['Linkdlist']['id'], array('class' => 'btn btn-primary'));
?>
</div>

<div class="modal" id="editItem" tabindex="-1" role="dialog" aria-labelledby="editItemLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
 <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editItemLabel">Edit Item</h4>
            </div>
            <div class="modal-body">
               <?php
               echo $this->Form->create('Item', array('controller' => 'items', 'action' => 'edit'));
               echo $this->Form->input('display', array('div' => array('class' => 'form-group'), 'class' => 'form-control'));
               echo $this->Form->input('source', array('rows' => '3', 'div' => array('class' => 'form-group'), 'class' => 'form-control'));
               echo $this->Form->input('id', array('type' => 'hidden'));
               echo $this->Form->input('linkedlist_id', array('type' => 'hidden', 'value' => $list['Linkdlist']['id']));
               echo $this->Form->end(array('label' => 'Save Item', 'class' => 'btn btn-success'));
               ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
Was it helpful?

Solution

Duplication

<?php
    echo $this->Html->meta('icon');

    echo $this->Html->css('cake.generic');
    echo $this->Html->css('bootstrap-theme.min');
    echo $this->Html->css('bootstrap.min');

    echo $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js');
    echo $this->Html->script('bootstrap');
    //echo $this->Html->script('bootstrap.min');

    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->fetch('script');
?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top