how to call jquery function in php file - javascript

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
?>

Related

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; ?>

Ajax-loaded JQuery issue in IE

I have a website with many products, from within the listing I have a link to a fancybox which opens a full detail of the product (detail.php file)
<a class="fancy fancy'.$_GET['type'].'" href="detail.php?id='.$equip[$c]['equipId'].'">'.$equip[$c]['equipment'].'</a>
The problem is that I have some jquery script inside detail.php, it works fine in every browser except internet explorer, in which I get error $ not defined or JQuery not defined. Above is the jquery code in detail.php
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script type="text/javascript" src="Resources/Script/jquery.imageLens.js"></script>
<script type="text/javascript" src="Resources/Script/jquery.nicescroll.js"></script>
<script>
window.onload = function(){
$("#<?php echo $_GET['id'];?>").imageLens({borderSize: 4, borderColor: "#FFF",lensSize: 200,imageSrc: "<?php echo "Resources/Image/equipamiento".$row['link'];?>_B.jpg"});
$(".niceScroll").niceScroll({cursorborderradius:"0px",cursorwidth:4,cursoropacitymin:0.5,cursoropacitymax:0.7,background:"#c9c9c9"});
}
$("#catDesc<?php echo $_GET['id'];?>").click(function(){
if(!$("#catDesc<?php echo $_GET['id'];?>").hasClass("active"))
{
$("#tech<?php echo $_GET['id'];?>").fadeOut('fast',function(){
$("#desc<?php echo $_GET['id'];?>").fadeIn('fast')
$("#catDesc<?php echo $_GET['id'];?>").addClass("active")
$("#catTech<?php echo $_GET['id'];?>").removeClass("active")
})
}
})
$("#catTech<?php echo $_GET['id'];?>").click(function(){
if(!$("#catTech<?php echo $_GET['id'];?>").hasClass("active"))
{
$("#desc<?php echo $_GET['id'];?>").fadeOut('fast',function(){
$("#tech<?php echo $_GET['id'];?>").fadeIn('fast')
$("#catTech<?php echo $_GET['id'];?>").addClass("active")
$("#catDesc<?php echo $_GET['id'];?>").removeClass("active")
})
}
})
</script>
It looks like your jQuery is undefined because you're referencing a cdn and it is a security issue in some versions of IE. I would recommend downloading jquery and referencing it locally and seeing if that clears up your problem.
Whenever you have $ is not defined, you are not loading the library you are using. That may be caused by IE but I also see you're using "window.onload" and that is "usually" a bad idea (especially for IE) when triggering javascript.
My guess is window.onload behaves differently and possibly reloads the window. Which could be why $ is no longer defined and the library fails to load. Something to keep in mind.

Dreamweaver Shows Red Line Near Script Tag In PHP File

Here is my code in product.php file where a red line is shown by dreamweaver editor when i try to add the constant path of my own which i define in my php configuration.php file. Here is the snapshot so you can understand properly.
my product.php file snapshot is here
<?php require_once('header.php'); ?>
<script type="text/javascript">
$(document).ready(function() {
$('#search_div').get(0).scrollIntoView();
});
</script>
<script type="text/javascript" src="<?php echo BASE_PATH;?>js/jssor.js"></script>
<script type="text/javascript" src="<?php echo BASE_PATH;?>js/jssor.slider.js"></script>
I tried but can't able to fix the error. Please, any help would be appreciated.
put your javascript tag's code with src attribute i.e with source file above the document.ready script and right after the php code where you call your header.php file like this
<?php require_once('header.php'); ?>
<script type="text/javascript" src="<?php echo BASE_PATH;?>js/jssor.js"></script>
<script type="text/javascript" src="<?php echo BASE_PATH;?>js/jssor.slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search_div').get(0).scrollIntoView();
});
</script>
When you write any coded script tag in the php file make sure that your coded script tag should be called below the script tag in which you call your javscript source file with php define constants.

How do I insert the value of a PHP variable into javascript code?

I need to insert a value from php code into the page for use in javascript.
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
and this is PHP:
<?php echo WEB_ROOT; ?>
i need to insert here:
<?php echo WEB_ROOT; ?>assets/js/jquery1x.min.js
How can i do?
Thanks!
Just simply echo it
<script type="text/javascript">
window.jQuery || document.write("<script src='<?php echo WEB_ROOT; ?>assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
And even if your code is separate file, you can still rename it to .php and include in html
<script src="file.php"></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

Categories