Problem with ajax loading with Cakephp 2.x

Asked

Viewed 436 times

5

My pages are uploaded via ajax and uploaded within div content. Where I take the url by the onclick event from the link, and then upload it. Calls made directly from the menu work normally, but when I try to get the onclick event inside the div where the new data was loaded, the event does not work, but also not from the error.

Avascripts are loaded at the bottom of the page.

My code is 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 inside 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 entering the main page, all Avascripts and css are loaded normally, and the menu call works normally.

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

I hope you managed to express me correctly.

Any suggestions?

php jquery ajax cakephp
  • 1

    Replace "bind" with "on", must solve

  • It worked. Thank you very much!

1 answer

2


You are using the version 1.11.0 of and in your code I realized the following excerpt $(".ajax-link").bind('click', function(ev){ and according to the documentation of the method this .bind() was 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 exist at the point the call to .bind() occurs. For more Flexible Event Binding, see the Discussion of Event delegation in .on() or .delegate().

Which in free translation says:

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

So you must replace $(".ajax-link").bind('click', function(ev){ for $(".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();
});

  • Thank you! I managed to solve.

Browser other questions tagged php jquery ajax cakephp

You are not signed in. Login or sign up in order to post.