In my project I am using imperavi-redactor library. But it seems it doesn't load properly.
When using the import() method, the library is properly loaded in the assets, but it doesn't work. If I modify the template I am using to manually load the css/js AFTER all other libraries, it works.
Here is the generated HTML:
<head>
<link rel="stylesheet" type="text/css" href="/assets/92dfc12c/redactor.css" />
<link rel="stylesheet" type="text/css" href="/assets/f5a106d4/jui/css/base/jquery-ui.css" />
<script type="text/javascript" src="/assets/f5a106d4/jquery.js"></script>
<script type="text/javascript" src="/assets/92dfc12c/redactor.js"></script>
<script type="text/javascript" src="/assets/92dfc12c/lang/es_ar.js"></script>
<title>Create Notification</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/themes/p35/css/main.css" rel="stylesheet" type="text/css" media="all">
<link href="/themes/p35/css/mediaqueries.css" rel="stylesheet" type="text/css" media="all">
<!--[if lt IE 9]>
<link href="/themes/p35/css/ie/ie8.css" rel="stylesheet" type="text/css" media="all">
<script src="/themes/p35/js/ie/css3-mediaqueries.min.js"></script>
<script src="/themes/p35/js/ie/html5shiv.min.js"></script>
<![endif]-->
<!-- Slider -->
<link href="/themes/p35/js/responsiveslides.js-v1.53/responsiveslides.css" rel="stylesheet" type="text/css" media="all">
<!-- Redactor -->
<link rel="stylesheet" type="text/css" href="/assets/54ed052f/imperavi-redactor/redactor.css"/>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script src="/themes/p35/js/jquery.ba-bbq.js"></script>
<script>window.jQuery || document.write('<script src="/themes/p35/js/jquery-latest.min.js"><\/script>\
<script src="/themes/p35/js/jquery-ui.min.js"><\/script>')</script>
<script>jQuery(document).ready(function($){ $('img').removeAttr('width height'); });</script>
<script src="/themes/p35/js/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="/themes/p35/js/jquery-mobilemenu.min.js"></script>
<script src="/themes/p35/js/custom.js"></script>
<!-- Redactor -->
<script src="/assets/54ed052f/imperavi-redactor/redactor.min.js"></script>
<script src="/assets/54ed052f/imperavi-redactor/lang/es_ar.js"></script>
</head>
Notice how redactor.css, redactor.js and es_ar.js are included twice... The first time each file is included is because of using the regular import() method. The second time they are included is beacuse of manually modifying the template to include them.
I could forget about importing the module regularly, and just changing my theme to load required files all other libs, but I don't like it, and also it would be always loading a library that is only used in a few views.
Any idea of how could I manage to make the import() method work for me?
I can't tell from your code whether you're already using it, but I'd personally recommend the Yii-redactor extension. It handles all the registration of script files for you, all you do it create a redactor widget.
See here http://www.yiiframework.com/extension/redactor/
Related
I am new to Heroku and trying to get my app working on it. All works fine except non of my scrips are working. I have a PHP header file that provides all the links to e.g. jQuery etc. which I have stored in the js directory.
<title><?=$head_title;?></title>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/animatedcollapse.js" language="Javascript" type="text/javascript"></script>
<script src="js/functions.js" language="Javascript" type="text/javascript"></script>
I have an apache dyne (heroku-php-apache2) and a ClearDB MySQL database. How do I get jQuery running on Heroku?
Here is my code:
<head>
<link rel="stylesheet" href="http://localhost/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The program works, but if I use the inspect element, I get these warnings. Can anyone help me to figure it out?
Hope you can help me :D
The problem is that you have linked to your own version of jQuery incorrectly.
As you are already loading it twice from the CDNs, you shouldn't even need to load it locally. Just load the latest version of jQuery from the CDN once, and don't worry about loading a local copy as well:
<head>
<link rel="stylesheet" href="/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
Note that your CSS was throwing an error as well as your jQuery, meaning that you do not have a file at http://localhost/css/estilos.css. I've used /css/estilos.css/ in my anser, to refer to the root. This would point the CSS file at: [root]/css/estilos.css. Depending on your file structure, you may need to use css/estilos.css/ instead (without the leading slash). For more information about relative paths, check out CSS Trick's article.
Hope this helps!
It says your local css and js files are not found. look right at the debug panel, there is a 404 code.
I have a Magento website that I have cloned to my local machine running through MAMP Pro with a custom host name e.g: project.local
The issue is, the is a function in the file:
app/design/frontend/default/project/template/page/html/head.phtml
which includes a number of css/js files however the include path seems to be wrong using the base url/directory: /Applications/MAMP/htdocs/project_name/ which results in the files not being found. The function is:
$this->getCssJsHtml()
Here is a list of the files in question which I have taken from the source:
http://i.xomf.com/dcmsw.png
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/base/default/css/bubble/elasticsearch.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/inchoo_socialconnect/google/css/button.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/inchoo_socialconnect/facebook/css/button.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/ajax-cart.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/font-awesome.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/tablet.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/ie_10.css" media="all" />
<link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/css/print.css" media="print" />
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.noconflict.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.joypopup.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/lib/ccard.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/prototype/validation.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/varien/js.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/varien/form.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/mage/translate.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/js/mage/cookies.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/quickbuy.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/topmenu.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/event.simulate.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/html5.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/ajax_cart.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.CustomScrollbar.min.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.maketabs.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.instagram.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.minitwitter.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.placeholder.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery/jquery.jqzoom-core-pack.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/main.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/social_login.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/utagtracking.js"></script>
<script type="text/javascript" src="/Applications/MAMP/htdocs/project_name/skin/frontend/default/theme_name/js/play_video.js"></script>
Just to be clear, these are the only places that are effected. The other includes seem to relate to the base url set in the database: core_config_data.
I'm not sure if this is anything to do with MAMP Pro and the Virtual Hosts set-up, but needless to say I have tried everything I can after searching many... many hours on the internet for a solution with no success.
I would appreciate any help, thanks again in advance.
Typically simple problem, have you cleared js/css cache. This happens often when the server is moved from one location to the next because the directory path is cached when merged. Disabling Merge JS and Css files in system->developer javascript and css settings will correct the problem however you have to do some front-end hackery in order to actually save the value.
A way to verify this problem is to run the following query
SELECT *
FROM `core_config_data`
WHERE `path` LIKE '%merge%
If these values are set to 1 this will cause your problem, much easier to disable set to "0" this value via Database directly considering you have access. Then Clear Magento cache including JS / CSS cache and this should resolve your problem
Screen shot of what this should look like:
I always have some problems with IE. The problem is that my website must work on every browser, including IE.
Everything works well for the ckeditor plugin named prgfilemanager (I can add pictures into my ckeditor textarea). Every browser are working except IE... I first succeed displaying ckeditor using
<meta http-equiv="X-UA-Compatible" content="IE=9.0">
Without that meta, the textarea isn't a ckeditor textarea.
My problem is that when I try to add pictures, nothing happens ONLY IN IE.
When I click to search pictures there is a popup with the interface with no root..
If i write http://XXX/ckeditor/plugins/pgrfilemanager/PGRFileManager.php?type=Image&CKEditor=Description&XXX everything works well on every browser except for IE..
I'm on IE9. How to make pgrfilemanager working on IE 9 ?
This is what IE gives me
I found how to make it work. As I said, I used <meta http-equiv="X-UA-Compatible" content="IE=9.0"> in my files to make ckeditor working. What to do if you have the same problem that I HAD, in ckeditor\plugins\pgrfilemanager, open PGRFileManager.php and add the meta <meta http-equiv="X-UA-Compatible" content="IE=9.0"> on the <head>. Like
<head>
<!-- ADD THIS -->
<meta http-equiv="X-UA-Compatible" content="IE=9.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PGRFileManager v2.1.0</title>
<link rel="stylesheet" type="text/css" href="css/sunny2/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.treeview.css" />
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="css/PGRFileManager.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="SWFUpload v2.2.0.1 Core/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.i18n.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<?php if (PGRFileManagerConfig::$ckEditorScriptPath):?>
<script type="text/javascript" src="<?php echo PGRFileManagerConfig::$ckEditorScriptPath ?>"></script>
<?php endif;?>
<script type="text/javascript" src="lang/lang.js"></script>
<script type="text/javascript" src="js/PGRUploader.js"></script>
<script type="text/javascript" src="js/PGRContextMenu.js"></script>
<script type="text/javascript" src="js/PGRSelectable.js"></script>
<script type="text/javascript" src="js/PGRFileManager.js"></script>
<script type="text/javascript" src="js/PGRFileManagerContent.js"></script>
</head>
I am trying to merge two html heads by php include()-ing a php file (which contain the header for reusability) into another. The code works but it results into this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/custom-theme/jquery-ui-1.10.3.custom.min.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="./js/jquery191.js" ></script>
<script type="text/javascript" src="./js/jqueryui1103.js" ></script>
</head><html>
<head>
<title>Add Employee Form</title>
<link rel="stylesheet" type="text/css" href="./css/addform.css">
<script type="text/javascript" src="./js/talentform.js" ></script>
<script type="text/javascript" src="./js/form_submission.js" ></script>
</head>
Which is I think against the standards. Is there a way of merging those two heads into one without violating the standards? By the way, I am using CodeIgniter 2 Framework, if it helps. Thanks!