Problem loading ajax with Cakephp 2.x

Question

Problem loading ajax with Cakephp 2.x

Navigation

#1 by (2 votes)

5

My page loads are done via ajax and loaded into the div content. Where do I get the url through the onclick event of the link, and then do the loading. Calls made directly through the menu work normally, but when I try to get the onclick event inside the div where the new data has been loaded, the event does not work, but not the error.

Javascripts are loaded at the bottom of the page.

My code looks like this:

Layout default.ctp

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

    <link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>

    <?php
        echo $this->Html->meta('icon');
        echo $this->Html->css('bootstrap');
        echo $this->Html->css('lib/unsemantic-grid-responsive');
        echo $this->Html->css('lib/jquery-ui-1.10.4.custom');

        echo $this->fetch('meta');
        echo $this->fetch('css');
    ?>
</head>
<body>
    <header>
        <?php echo $this->element('menu/menu')?>
    </header>
    <div id="header">

    </div>

    <div id="container">
        <div id="content">
            <?php echo $this->Session->flash(); ?>
            <?php echo $this->fetch('content'); ?>
        </div>
    </div>

    <div id="modal-carregando">
        <?php echo $this->Html->image('ic_loading.gif')?>
        <h1>Aguarde! Carregando...</h1>
    </div>

    <div id="modal-mascara"></div>

    <footer>
        <?php echo $this->Html->script("http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js") ?>
        <?php echo $this->Html->script("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js") ?>
        <?php echo $this->Html->script('lib/jquery.scrollTableBody-1.0.0')?>
        <?php echo $this->Html->script('lib/jquery.maskedinput')?>
        <?php echo $this->Html->script('core');?>
    </footer>
</body>

Menu: menu.ctp

<div id='cssmenu'>
    <ul>
         <li><a class="ajax-link" href=<?php echo Router::url('/unidades/add')"?>Unidades</a></li>
    </ul>
</div>

And within the core.js file I have the page call:

$(".ajax-link").bind('click', function(ev){
    _url = $(this).attr('href');
    $('#content').load(_url);
    ev.preventDefault();
});

When you enter the main page, all javascripts and css are loaded normally, and the menu call functions normally.

Ex: I call the 'units / add' page and load into the div content, but the links that are on the 'units / add' page with the 'ajax-link' class do not work, anyway, anything related to javascript do not work. Only the ones that were loaded during the first upload. However, when I use the 'onclick' event directly on the link, it works there. I know I can do this, but I wanted to avoid having to call a function on all links manually, and just use the jquery's 'click' event to avoid overwork.

I hope you have been able to express me correctly.

Any suggestions?

php jquery ajax cakephp

asked by anonymous 12.03.2014 / 16:24

1 answer

How to make the clip property: rect (...) do not occupy space (width) Simulate another environment by using the 'composer update' command

score 2 · Accepted Answer

You're using the 1.11.0 version of jquery and in your code I noticed the following excerpt $(".ajax-link").bind('click', function(ev){ being that according to method documentation this .bind() has been replaced

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must be at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate() .

That in free translation says:

Starting with jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For previous versions, the .bind() method is used to attach an event handler directly to the elements. Manipulators are bound to the elements currently selected in the jQuery object, so these elements must exist at the time the .bind() call occurs. For the most flexible event link, see the event delegation discussion at .on() or .delegate() .

So you should replace $(".ajax-link").bind('click', function(ev){ with $(".ajax-link").on('click', function(ev){ .

If your element is not dynamic you can simply use

$(".ajax-link").click(function(ev){
    _url = $(this).attr('href');
    $('#content').load(_url);
    ev.preventDefault();
});