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>
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
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.
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'); ?>
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...