We Keep Coding

Javascript widget appearing only for logged in users

I have a javascript widget, but the widget should only be seen by logged in users.
<script>
window.fwSettings={
'widget_id':77000003788
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://euc-widget.freshworks.com/widgets/77000003788.js' async defer></script>
I have tried to use a php function, but it didnt work:
<?php
if(is_user_logged_in()) {
echo '<script>
window.fwSettings={
'widget_id':77000003788
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://euc-widget.freshworks.com/widgets/77000003788.js' async defer></script>';
}
?>
I placed the code in my footer.php file right before the body-closing tag as the widget should be placed there.
Any help is appreciated! (and yes, I'm very new to coding)

Your code has a quoting problem. You are starting a string with a single quote, ', but then you including additional single quotes inside the string. Make sure to turn on both WordPress and PHP error reporting when debugging, it will warn you about this. The easiest solution is to break out of PHP and switch back to HTML mode.
<?php if(is_user_logged_in()): ?>
<script>
window.fwSettings={
'widget_id':77000003788
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://euc-widget.freshworks.com/widgets/77000003788.js' async defer></script>
<?php endif; ?>

how to call jquery function in php file

I'm working on a project and my problem is calling a jQuery function like this placing it in my php file. I've tried searching a lot but I'm always coming out with an error:
Function:
$(function(){
$(".panorama-view").panorama360();
});
Php file
<?php
echo '<link rel="stylesheet" href="/css/panorama360.css" rel="stylesheet" >';
echo '<script src="/js/jquery.mousewheel.min.js" ></script>';
echo ' <script src="/js/jquery.panorama360.js" ></script>';
echo '<script> $(function(){ $(\'.panorama-view\').panorama360(); }); </script>';
echo '</script>';
if(isset($_POST['upload'])) {
$image_name= $_FILES['image']['name'];
$image_type= $_FILES['image']['type'];
$image_size= $_FILES['image']['size'];
$image_tmp= $_FILES['image']['tmp_name'];
if(move_uploaded_file($image_tmp,"uploadedimg/$image_name"))
{
echo "<script type='text/javascript'>alert('File Uploaded!');</script>";
}
$folder= "uploadedimg/";
if(is_dir($folder)) {
if($handle = opendir($folder)){
while(($file= readdir($handle)) !=false){
if($file === '.' || $file === '..')
continue;
echo '<div class="panorama round" style=" width:1200px; height:500px; padding:10px ;background-color:#444; position: relative;">';
echo '<div class="panorama-view">';
echo '<div class="panorama-container">';
echo '<img src="uploadedimg/'.$file.'" data-width="4077" data-height="500" alt="Panorama" />';
echo '</div>';
echo '</div>';
echo '</div>';
}
closedir($handle);
}
}
} ?>

You get Uncaught ReferenceError: jQuery is not defined or Uncaught ReferenceError: $ is not defined error (as seen in your shared screenshot in comments under your post) because you have not included the jQuery library in your project.
Both errors are identical and pointing to the same problem as explained above.
Note that you CANNOT use panorama360 without making use of the jQuery library as it (jQuery library) is a required dependency.
To include the jQuery library in your project, you have two (2) main options; either:
You consume it from a content delivery network (CDN) by including it in your project as shown in the snippet below,
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
or,
downloading and referencing it directly from your stored location
<script src="/path/to/jquery-3.1.1.min.js"></script>
There is a last option which has to do with combining the earlier two mentioned above, using one as a graceful failover; here is the illustration:
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.1.1.min.js"><\/script>')</script>
(With the above, you can make use of the jQuery library in your project by consuming it from the CDN and automatically load the version on your sever should the later fail. More details here)
It's important to note that your jQuery library declaration SHOULD occur before the referencing of your panorama360 JavaScript resources; either:
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script src="/js/jquery.panorama360.js" ></script>
Should you chose to use PHP echo() function to handle your file inclusion, do use a single quote or escape your double quotes. ... more details here.
So, you should be doing something like this:
<?php
echo "<link rel='stylesheet' href='/css/panorama360.css'>";
echo "<script
src='https://code.jquery.com/jquery-3.1.1.min.js'
integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='
crossorigin='anonymous'></script>";
echo "<script src='/js/jquery.mousewheel.min.js'></script>";
echo "<script src='/js/jquery.panorama360.js'></script>";
echo "<script>$(function(){ $('.panorama-view').panorama360(); });</script>";
To reference your resources without making use of PHP the raw HTML way as discussed in comment below,
<?php
// Should you want to run any PHP codes before referencing your resources,
// you may do so here.
// Remember: you MUST close this section as below this comments so as to
// mark the end of your PHP code
?>
<link rel="stylesheet" href="/css/panorama360.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script src="/js/jquery.panorama360.js"></script>
<script>$(function(){ $('.panorama-view').panorama360(); });</script>
<?php
// Here, other PHP codes
?>

Uncaught `TypeError: $(...).dataTable is not a function` in online server, but not in my local server

I have an error TypeError: $(...).dataTable is not a function when logged to my console after i uploaded my files to my online server, but in my local server, this won't appear and my app works fine.
I followed all the instructions here but still doesn't work. And I really don't know how to fix this.
Here's my script below:
<script src="<?php echo base_url();?>assets/grocery_crud/js/jquery-1.11.1.min.js"></script>
<script src="<?php echo base_url();?>assets/grocery_crud/js/jquery_plugins/config/jquery.noty.config.js"></script>
<script src="<?php echo base_url();?>assets/grocery_crud/js/common/lazyload-min.js"></script>
<script src="<?php echo base_url();?>assets/grocery_crud/js/common/list.js"></script>
<script src="<?php echo base_url();?>assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>assets/js/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/grocery_crud/themes/datatables/js/flexigrid.js"></script>
Please help me. Hope this won't be closed.

I found out that in my live server, the pathing of files is case-sensitive. Unlike in my local server, I can just mix cases and no issues found. In my case, when I call the script like this: <script src="mysite/assets/js/dataTables/jquery.dataTables.min.js"></script> , and the path is assets/js/datatables/jquery.dataTables.min.js , this won't work on a live server where datatables folder is not the same with dataTables folder in my path to call that file.

In the official documentation, it is telling to include datatables.min.js from the cdn. This script contains a definition of both jquery and DataTables.
The second script, bundles/datatables/js/datatables.js, is trying to patch jquery to add the functions initDataTables and dataTable.
Therefore, the order matters.
Here is my /symfony/templates/list.html.twig file for Symfony 4.2 :
<!-- Insert this at the end of your body element, but before the closing tag -->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.js"></script> {# Included libraries: jQuery 3 3.2.1, DataTables 1.10.16 #}
<script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script> {# An omines script that patches jquery : add initDataTables function #}
<script>
$(function() {
// 'datatable' is defined in the symfony controller.
// datatable_settings Twig function renders a compact JSON string with the configured settings required for initialization.
var table = $('#presidents');
if (table && table.initDataTables)
table.initDataTables({{ datatable_settings(datatable) }});
});
</script>

How Can JQuery be embedded in the <body> and </body> Tags in Joomla 3.1?

I've added this code below to my default.php file in joomla 3.1.
<?php
JHtml::_('jquery.framework');
JFactory::getDocument()->addScript(JURI::root().'template/mytemplate/js/jquery.min.js');
?>
This only embeds the script inside the head tags.
Is there a way i can make it appear in the body tag?

You can simply put
?>
<script type="text/javascript" src="<?php echo JURI::root();?>templates/<?php echo $app->getTemplate();?>/js/jquery.min.js" />
Into your template index.php
or
?>
<script type="text/javascript" src="<?php echo JURI::root();?>templates/mytemplate/js/jquery.min.js" />
into any template override
I can't see the benefit of doing this though at all.

As mentioned in my comment on the other question, you can't import jQuery in the <body> tag using the JHtml() or JFactory method. These methods add the script to the <head> tag automatically.
The only way you can achieve what you want is to use <script> tags, however please see how I have done it:
<?php
// load jQuery, if not loaded before
if(!JFactory::getApplication()->get('jquery')){
JFactory::getApplication()->set('jquery',true);
?>
<script>
jQuery.noConflict();
</script>
<script src="<?php echo JUri::root(). 'template/mytemplate/js/jquery.min.js'; ?>"></script>
<?php
}
?>
This basically checks to see if jQuery is being imported already and if not, then it imports it. Add this code to the index.php in your template folder.
If you see the following in your index.php:
JHtml::_('jquery.framework');
then remove it.
Please bare in mind that this is not a recommended method however it's the only way that I know of to import it after the <body> tag.
Also note that if you ever update your template, then your changes will be lost

Yii and jquery and javascript inclusion...confused

Crossposting from http://www.yiiframework.com/forum/index.php/topic/37313-confused-about-jquery-and-script-inclusion-handling/ but sometimes people answer here more rapidly...
I am totally confused about Yii's handling of jquery and other javascript file inclusion.
This was working:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#Event_recuring_nature, #Event_venue, #Event_expected_attendance, #Event_age_group, #Event_state, #Event_gender, #Event_ethnicity, #Event_exclusivity, #Package_cash_product_sponsorships, #Event_vanue_signature, #Event_logo_on_step_and_repeat, #Event_inclusion_in_press, #Event_ad_space, #Event_inclusion_in_event_materials, #Package_category_exclusivity, #logo_on_signature, #Event_proposed_events_included, #Event_dependant_on_sponsorship, #Event_sponsorship_type, #Event_attendee_professions, #Event_attendee_income').yaselect();
});
</script>
<script type="text/javascript" src="/js/libs/jquery-ui-datetimepicker.js"></script>
<script type="text/javascript" src="/js/event_create.js"></script>
<script type="text/javascript" src="/js/slider.js"></script>
<script type="text/javascript" src="/js/other_social.js"></script>
<script type="text/javascript" src="/js/package.js"></script>
while this (which supposedly would be better?) does not:
<?php
Yii::app()->clientScript->registerScript('create-script', "
$(function() {
$('body').css('overflow-x','hidden');
$('#Event_recuring_nature, #Event_venue, #Event_expected_attendance, #Event_age_group, #Event_state, #Event_gender, #Event_ethnicity, #Event_exclusivity, #Package_cash_product_sponsorships, #Event_vanue_signature, #Event_logo_on_step_and_repeat, #Event_inclusion_in_press, #Event_ad_space, #Event_inclusion_in_event_materials, #Package_category_exclusivity, #logo_on_signature, #Event_proposed_events_included, #Event_dependant_on_sponsorship, #Event_sponsorship_type, #Event_attendee_professions, #Event_attendee_income').yaselect();
});
");
?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery-ui-datetimepicker.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/event_create.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/slider.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/other_social.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/package.js'); ?>
I had the directory
<app_dir>/js/ for all javascript and created
<app_dir>/protected/assets/js as suggested in a post on the yii forum for registerScriptFile (which supposedly handles script inclusion nicely).
I ended up having of course duplicated files and I am cleaning up.
The layout has this in the header:
<?php Yii::app()->clientScript->registerCoreScript('jquery')?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery-ui-1.8.20.custom.min.js')?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery.yaselect.min.js')?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/script.js')?>
and I have this in config/main.php:
// application components
'components'=>array(
'clientScript'=>array(
'packages'=>array(
'jquery'=>array(
'baseUrl'=>Yii::app()->request->baseUrl . '/js/libs/',
'js'=>array('jquery-1.7.2.min.js')
)
)
),
(I know that baseUrl is now pointing to /js, but trying with
'baseUrl'=>Yii::app()->basePath . '/assets/js/libs'
also did NOT load jquery at all!!!
PLEASE HELP! I am new to Yii and am loosing my mind on this. Thank you.
EDIT: This is what the code generates:
<script type="text/javascript" src="/js/libs/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/ab20866e/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery-ui-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/event_create.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/slider.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/other_social.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/package.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery.yaselect.min.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/script.js"></script>
To me, the second line, /assets/ab20866e/jquery.yiiactiveform.js, looks suspicious as having a different asset id...

While I don't have your layout file in front of me, it would appear that your layout has $content before the script file registrations.
Because of this, the scripts in your view are loaded, then the scripts in the template. When this happens, the datetimepicker is being loaded, but reports errors as jquery-ui hasn't been loaded yet. Make sure that your template has the scripts loading before $content.
Alternatively, you could force scripts that are loaded in your view to be in the body, as opposed to the head by specifying a position argument, e.g.:
<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/libs/jquery-ui-datetimepicker.js', CClientScript::POS_BEGIN); ?>

Another thing to consider is forcing Yii to load jQuery from the start like so:
cs()->registerCoreScript('jquery');
You can also load jQuery UI like so:
cs()->registerCoreScript('jquery.ui');
I find this solves a lot of registerScriptFile POS_BEGIN/POS_HEAD issues when loading other jQuery libraries and files (as in ernies answer)