I am calling an ajax function that generates a button:
$html = $this->renderPartial( '/cart/_cartItem', array( 'data' => $data, ) , true );
The problem is, if I print out $html, I see the button, but the associated javascript to make the button work properly, is not there. Is there a way to force render to include the necessary javascript that would make this button work 100%?
Put the javascript on the page where you are including the button (don't use ...) , but for ex;
Yii::app()->clientScript->registerScript('toggle', "
$('#clearDate').click(function() {
$('#Project_start_date').val('');
});
");
if it still dose not working try including document.ready in the javascript
I fixed it by doing two things:
Firstly, include all the javascript by setting the process $outputTrigger to true;
$html = $this->renderPartial( '/cart/_cartItem', array( 'data' => $data, ) , true, **true** );
Secondly, it was adding this as well:
<link rel="stylesheet" type="text/css" href="/easionline2/www/assets/9bdc3248/css/bootstrap-yii.css" />
<script type="text/javascript" src="/easionline2/www/assets/1dffa579/jquery.js"></script>
<script type="text/javascript" src="/easionline2/www/assets/9bdc3248/js/bootstrap.js"></script>
I did a hack to get rid of this:
$start = strpos($html, '<div class="cartItem');
$end = strlen($html) - $start;
$html = substr($html, $start , $end );
Anyone know of a better way to do the second part?
The question was already answered, but this is related and may come in handy.
Take note with renerPartial() with AJAX calls in Yii. It is a known bug that Yii does not correctly account for the javascript outside the new view that has been brought in by AJAX. If you are loading a widget, or something that re-loads jQuery or another JS file, then the jQuery originally loaded onto the page before the AJAX call will be forgotten and all delegations made by it forgotten, too. This JS code sets up all your AJAX calls to strip the new HTML of any JS script that would load an already loaded JS file. Put it into your main view:
<script>
$.ajaxSetup({
global: true,
dataFilter: function(data,type){
// only 'text' and 'html' dataType should be filtered
if (type && type != "html" && type != "text")
{
return data;
}
var selector = 'script[src]'; // copy-paste the following back in after [src] if you also want stylesheets blocked too: ,link[rel="stylesheet"]
// get loaded scripts from DOM the first time we execute.
if (!$._loadedScripts) {
$._loadedScripts = {};
$._dataHolder = $(document.createElement('div'));
var loadedScripts = $(document).find(selector);
//fetching scripts from the DOM
for (var i = 0, len = loadedScripts.length; i < len; i++)
{
$._loadedScripts[loadedScripts[i].src] = 1;
}
}
//$._dataHolder.html(data) does not work
$._dataHolder[0].innerHTML = data;
// iterate over new scripts and remove if source is already in DOM:
var incomingScripts = $($._dataHolder).find(selector);
for (var i = 0, len = incomingScripts.length; i < len; i++)
{
if ($._loadedScripts[incomingScripts[i].src])
{
$(incomingScripts[i]).remove();
}
else
{
$._loadedScripts[incomingScripts[i].src] = 1;
}
}
return $._dataHolder[0].innerHTML;
}
});
</script>
