I have WHMCS script but my main problem is Java script not working, I have tried many solutions but no luck. I'm sure about files path and their work I have tested it in another script, but no luck.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} -
{$kbarticle.title}{/if}</title>
<link rel="stylesheet" type="text/css" href="templates/{$template}/kk.css" media="screen" />
<!-- slider0000000000 -->
<!-- Le styles -->
<link href="templates/{$template}/1st/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.animations.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.min.css" rel="stylesheet" />
<link href="templates/{$template}/1st/flexslider/flexslider.css" rel="stylesheet" />
<link href="templates/{$template}/1st/assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- //slider00000000 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.lush.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script>
<!-- popup -->
<!-- /popup -->
<!-- slideshow -->
<script language="JavaScript" type="text/javascript"
src="templates/{$template}/scripts/jquery.cycle.all.2.74.js"></script>
<!-- slideshow/// -->
<!-- fade -->
<script type="text/javascript" src="templates/{$template}/scripts/55.js"></script>
<script type="text/javascript" src="templates/{$template}/scripts/66.js"></script>
<!-- /fade -->
</head>
<body>
Add {literal} before start of your js and {/literal} after js finish.
ex:
{literal}
$(document).ready(function(){
alert("here");
});
{/literal}
WHMCS use smarty templates you'll need to add {literal} before start of javascript and {/literal} at the end of javascript.
Which version are you using? based on the date of the submission I will say the latest or close to it, but I would have added to much code to the javascript link, I currently have mine setup as under the example as - <script src="templates/{$template}/js/jquery.easing.1.3.js"></script> which then registers and pulls the right location, so if your link is <script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script> and the 1st is the name of the template then WHMCS you need to remove that and test it again, you don't need the folder name after linking to it as it register the folder name and will display it properly. Hopefully this helps a little bit better for you.
Refer to WHMCS documentation on bracelet
Everything within the {literal} {/literal} tags will not be parsed (such as the template variables). However, you would be able to accomplish adding the template variables by using multiple literal statements.
Related
I have index.html with all the source Javascripts and ui-view defined in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script>
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script>
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
</body>
</html>
I have around 150 such js files and currently all files are loaded when the webapp loads, resulting in increased loading time. I want to minify all these files and load files related to dashboard in index.html and others in the children templates for better user experience. I tried to move those script in templates but didn't work out. Is it possible to do so? What could be the best way to solve this?
A common approach is to move script tags to the end of the body tag, so this way, the content (html) is loaded and the scripts are loaded the last, so the user experience is better.
Despite the first time it could take some time to completely load all the resources, after that, you'll see the results, since you won't have to load any other resource again the user experience is so much better than if you load some scripts every time in a different template. That would be distribute the initial time in many portions (for every template). Not to mention that you might switch from one template to another more than once (and this way you load again the same resources). This is kind of a matter of perspective and what your final goal is: invest some time at the beginning and not after that, or just divide that time in minor portions, for every template you load.
With the first approach it would be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<!-- ... -->
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<!-- ... -->
</body>
</html>
Hope this help :)
I am trying to get the following behaviour on some font-awesome icons that are being used within a table.
When hover over the icon, shows a popover with more information for the user.
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/search.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/box.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
I thought I'd loaded the script correctly, but there is not the expected response when the file is put live onto the server (I checked bootstrap.js, it does include popover.js and tooltip.js inside of it as code sections.)
in the pastebin below is a version of the table where I have removed the majority of the rows whilst still keeping it visible what my intention is: http://pastebin.com/hYUBA711
(didn't want to paste it straight in cause tables always take up a lot of space, even this small 4 rows tall one, the real table is 16 rows)
Edit: oddly enough, when I try it on jsfiddle it does seem to work as I intend, but the live site doesn't... must be a different issue? The JSFiddle http://jsfiddle.net/zmug2y2q
Place your jquery code under jquery.js and bootstrap.js:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
});
</script>
Add a ; at the end of your jquery code: https://learn.jquery.com/using-jquery-core/document-ready/
I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.
This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.
I've followed the steps given at http://fancyapps.com/fancybox/.
This is the code I have in my head.php file:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
This is copied from the given website.
I'm using the exact samen folder-name "fancybox", so I think that can't be the problem.
In my code where I want to load an image, this is what I have:
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
After loading this page, I have this code (also copied from the given website):
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.
Thanks for your help in advance!
This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this.
Here is a test page using your code with the urls modified to match the folder layout shown in the image below. As you can see it does work. Therefore, your issue must be due to your urls being incorrect or the files themselves being missing.
This is the code from the test page:
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<?php
$row['bestandsnaam'] = 'images.jpg';
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
?>
</body>
</html>
Folder layout:
I'm curious problem linking my js files in my php webpage. First at all, I put it at the end of the file (just before closing body tag) and in local mode everything works ok. But when I upload my web to my server js files seems not linking, I have to put it in header to work it.
So that way could be important to say all my functions are in a separated file called "scripts".
It's not important trouble, but I'm concerned. Anybody could explain me?
Thanks in advance
Edited
Thank you #Pointy and #Jochen for your quickly answer. I tried using chrome inspector. No errors show, only not load files. This is my web structure (I don't copy complete code cause would be so extense)
<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--CSS starter-->
<link href="" rel="stylesheet" media="screen">
<!--CSS font-awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link href="font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- javascript (here links working) -->
</head>
<body>
<!--sections-->
<!--/sections-->
<!-- javascript (here not working) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/messages_es.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I guess this path is wrong, try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I'm getting the following error message in Chrome and firefox while trying to implement gorbachev's syntax highlighter.
The page at local host says:
SyntaxHighlighter
Can"t find brush for: php
It's all the more frustrating because i just got it working on a test page in the same folder, it still works. There is very little different between the two pages. Here's my code:
<??>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--JQUERY SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<!--PROCESSING SCRIPTS
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
-->
<!--syntax highlighter-->
<script type="text/javascript" src="shBrushPhp.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
SyntaxHighlighter.all();
});
</script>
</head>
<title>code</title>
<body>
<div id="content">
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<!--<script type="application/processing">
</script>
<canvas data-processing-sources="processing/lines.pde">
</canvas> -->
</div>
</body>
</html>
<??>
For me, the solution was making the brush style non-capital. So for me, I was adding a new brush to syntaxhighlighter (haskell), and I changed the markup:
<pre class="brush:Haskell">...</pre>
To
<pre class="brush:haskell">...</pre>
Alternatively, you could change the brush identifier:
Brush.aliases = ['Haskell'];
Hope this helps!
It cant find the js file for the php highlighter. Make sure you uploaded the right brush and have the correct path for the brush. I had a lot of trouble getting it work in an MVC 3 application. I ended up using the S3 hosted files that Alex has.
Trying calling the remoted files and see if it works. Also take the call SyntaxHighlighter.all() out of your jquery call. Mine is in its own set of script tags. See if that works.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
i just moved all the content from the page into the test page, renamed it and it works fine now. just one of those things i guess.