I have a div with a object type="application/pdf" and two select tags that change the src of the object on change. Plus, there is an icon that opens a new window with this content (object + html select tags):
<div id="navegador_pdfs">
<div id="btn_toggle_pdf_navigator">
<a href="#" onclick="destacar();"><?php echo $this->Bootstrap->glyphicon('new-window'); ?></a>
</div>
<div style="position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-align: center;">
Pasta Digital
<?php
echo $this->Form->select('linhas',
[ 'Documentos: ' => $documentos, ' Ou: ' => [ '' => 'Ver Todos' ] ],
['default' => $documento_id,
'class' => 'form-control truncated',
'onchange' => " if( $.isNumeric($(this).val()) ) { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "binario", "action" => "visualizar"]) . "/'+$(this).val()); "
. "} else { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "binario", "action" => "ver-todos", "?" => [ 'numero_processo' => $numero_processo ]]) . "'); "
. "} "]);
?>
</div>
<div style="position: absolute; bottom: 0; right: 15px; background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-align: center;">
Pasta Digital Externa
<?php
echo $this->Form->select('linhas',
[ 'Documentos: ' => $documentosExternos, ' Ou: ' => [ '' => 'Ver Todos' ] ],
['class' => 'form-control truncated',
'onchange' => " if( $(this).val() != '' ) { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "solicitacao", "action" => "downloadDocumentoTj"]) . "/'+$(this).val()); "
. "} else { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "solicitacao", "action" => "baixarTodosDocumentos", $cnj ]) . "'); "
. "} "
]);
?>
</div>
<object id="myPdf" type="application/pdf" data="<?php echo ($documento_id > 0 ) ? $this->Url->build([ "controller" => "binario", "action" => "visualizar", $documento_id]) : "" ; ?>" width="100%" height="100%"></object>
</div>
And the script that opens this content on a new window:
function destacar(){
const leftpos = screen.width / 2;
const toppos = 0;
var params = 'width='+ (screen.width/2);
params += ', height='+ (screen.height/1.2);
params += ', top='+toppos+', left='+leftpos;
params += ', fullscreen=yes';
var divText = '<html><head>';
divText += '<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">';
divText += '<link rel="stylesheet" type="text/css" href="/css/theme.css">';
divText += '</head><body style="padding: 0px 5px;">';
var myWindow = window.open('','',params);
var doc = myWindow.document;
doc.open();
doc.write(divText);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/jquery.min.js';
$(doc.head).append(script);
doc.write(document.getElementById("navegador_pdfs").outerHTML);
doc.close();
$('#form_novo_despacho').removeClass('col-md-6');
$('#form_novo_despacho').addClass('col-md-12');
$('#navegador_pdfs').hide();
myWindow.onunload = function(){
$('#form_novo_despacho').removeClass('col-md-12');
$('#form_novo_despacho').addClass('col-md-6');
$('#navegador_pdfs').show();
};
}
And then, when i change the value of any select tags on the opened window, its possible to see on console the error:
Uncaught ReferenceError: $ is not defined
at HTMLSelectElement.onchange (VM1774 nova:1)
I suppose that's jQuery is not initialized on this new recently opened window. Is there a way to initialize jQuery or is just another thing that i'm missing?
Thanks!
from How to initiate jquery on a new window.open and avoid "Uncaught ReferenceError: $ is not defined" error?
No comments:
Post a Comment