How to enable ZendX integrated Jquery in Layouts

2019-08-29 03:00发布

问题:

I am trying to understand why ZendX_JQuery will not work when used directly in a layout. It works perfectly fine when in a view:

  • creates the needed code
  • puts the JQuery script in the head tag

But when used inside the layout

  • creates the needed code
  • does not insert the JQuery script in the head tag

Can this be overcome, and how? And, if anyone can answer this, why is it doing this?

To make it perfectly clear, here is what i want to do:

    //layout.phtml file
    <head>
    <?php echo $this->jQuery();?>
    </head>
    <body>
<?php echo $this->ajaxLink("Like",

                    "/mod/instr/like/id/".$this->books['id'],

                    array('update' => '#ajaxed',
                    'beforeSend'=>'fadeout'
                    ));
?>
<?php echo $this->layout()->content; ?>
    </body

It means, that I wish to put a jQuery object inside a layout. I want to put some jQuery related code DIRECTLY inside my layout file, not just the part that allows jQuery to initialized for the views that require it.

Edit: Ok, so here's the init function in the Bootstrap

    protected function _initJqueryLoad()
    {

        $view = new Zend_View();
     // $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
    $view->jQuery()->addStylesheet('/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css')
        ->setLocalPath('/js/jquery/jquery.js')
        ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.2.custom.min.js');
ZendX_JQuery::enableView($view);
    }

My layout file contains this in the head:

    <?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/admin.css'); ?>
    <?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/form.css'); ?>
<?php 
echo $this->headScript()->prependFile('/js/JP.js','text/javascript','');?>
<?php echo  $this->jQuery(); ?>
</head>

So the JQuery should be enabled in every view that uses this layout. The code that runs in my views, but not in my layouts is:

<div id="ajaxed">
<? 
echo $this->ajaxLink("Like",

                    "/mod/instr/like/id/".$this->books['id'],

                    array('update' => '#ajaxed',
                    'beforeSend'=>'fadeout'
                    ));
                     echo $this->ajaxLink("Don't like",

                    "/mod/instr/hate/id/".$this->books['id'],

                    array('update' => '#ajaxed'));?>


</div>

回答1:

I experience the same problem WITH AJAXLINK.

The link is generated using this helper in a LAYOUT, but the JQUERY function which should do the AJAX call in the header NOT.

It works all perfect if I try the same in a VIEW.

Edit: I ended up in copying the ajax-code manually into the layout without using the ajaxlink-helper.

And I opened up a bug report here: http://framework.zend.com/issues/browse/ZF-10317



回答2:

I found that if I add the "echo $this->jQuery()" at the end of my body (i.e. after the ajax link call) it works. Basically, the problem is that the jquery helper doesn't know about the ajaxlink until it has already echo'ed the javascript.



回答3:

Last edit: I just do not understand the question. I can run jquery code fine in my layout (example I can use a datepicker right there in layout.phtml). Also your ajaxLink showed up just fine. I downloaded the exemple code from zendcast and pasted your code in the layout and it worked. So I do not know what it is that is not working for you sorry for losing your time.

edit: have you tried adding a

return $view;

At the end of your init. Usually its bette rto return this from a init method in the bootstrap. Maybe this is why nothign seems to load.

What you are doing should work so there must be something wrongin your code. Check this great tutorial about integrating Zendx Jquery he does exaclty what you want. Zendcast:Working with ZendX_JQuery

Also post some code so we know what might be wrong.

BTW there is an error in your code (not related to the jquery stuff). You echo twice the headlink if you look at the generated code you should see all your stylesheets in double. the right syntax would be:

<?php $this->headLink()->prependStylesheet($this->baseUrl().'/css/admin.css'); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/form.css'); ?>

or

<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/admin.css')
           ->prependStylesheet($this->baseUrl().'/css/form.css'); ?>


回答4:

I had the same problem. I solved it by placing my ZendX Form in the bootstrap. This will work for any other ZendX element. The problem with putting anything ZendX related in the layout.phtml file is that by the time you get to your code, the $this->jQuery(); already executed and you're out of luck.

My example has to do with using ZendX in a placeholder that is echoed in the layout.phtml. I used the exact same code in a Search view and the code worked. This was driving me crazy!

//Bootstrap.php

protected function _initSearchBox(){
     $this->bootstrap('View');
     $view = $this->getResource('view');
     $searchForm = Search_From_Find::tinyFindForm(); //contains autocomplete textbox and submit button
     $view->placeholder('sidebarright')->prepend($searchForm);
     return $view;
}

//layout.phtml
<head>
    //... normal jquery and other head stuff ...
</head>
<body>
     //... normal body stuff like 'echo $this->layout->content();' ...
     echo $this->placeholder('sidebarright');
</body>

I hope this helps someone!

Edit: I also heard, but not personally verified, that echoing using <?= instead of <?php echo strangely works...