Yii and jquery and javascript inclusion...confused - javascript
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)
Related
How to execute Javascript Functions on a server by Python script?
I have to execute some Javascript functions from a local machine without using a browser. Searching around the internet, I've found a solution. This is my python code: url = "http://url/to/my/php/script.php?variable=HelloWorld" print("Url: ", url) urlData = requests.get(url) print(urlData.url) And this is my PHP script: <?php $variable = $_GET['comune']; echo '<div id="map"></div>'; echo '<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXtpSi5amANeo6IcUuPuilyJMWcYc_RxY&libraries=geometry,places"> </script> <script type="text/javascript" src="../jsLibrary/geoxml3/kmz/geoxml3.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script>$(document).ready(function() { $("body").bootstrapMaterialDesign(); });</script> <script type="text/javascript" src="../jsLibrary/echarts.min.js"></script> <script type="text/javascript" src="../jsLibrary/charts_functions.js"></script> <script type="text/javascript" src="../jsLibrary/geo_visualization_functions.js"></script>'; echo "<script>initMap();</script>"; echo "<script>initZone('$variable');</script>"; echo "<script>initSections('$variable')</script>"; ?> The idea is to generate an html code with php that automatically executes the javascript functions that I need. In fact, calling my php script within a browser all works fine! But if I try to call my php script, as I've done with my python script, anything works. What could be the problem? Is there another workaround? My problem is executing those javascript functions from python, how can I do this? Thanks a lot.
how call the all data and display by using ajax [duplicate]
How come this code throws an Uncaught ReferenceError: $ is not defined when it was OK before? $(document).ready(function() { $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } }); $('#featuredvid > ul').tabs(); }); Results in tabs don't close anymore. jQuery is referenced in the header: <script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script> <script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script> <script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>
You should put the references to the jquery scripts first. <script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script> <script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script> <script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>
You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first.
This is what solved it for me. Originally I went to Google and copied and pasted their suggested snippet for jQuery on their CDN page: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> The snippet does not include the HTTP: or HTTPS: in the src attribute but my browser, FireFox, needed it so I changed it to: edit: this worked for me with Google Chrome as well <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Then it worked.
If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur. So, always keep your own JavaScript or jQuery code after calling the jQuery plugin so the solution for this is : First add the link to the jQuery file hosted at GoogleApis or a local jQuery file that you will download from http://jquery.com/download/ and host on your server: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> or any plugin for jQuery. Then put your custom script file link or code: <script src="js/custom.js" type="text/javascript"></script>
In my case I was putting my .js file before the jQuery script link, putting the .js file after jQuery script link solved my issue. <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="exponential.js"></script>
Add the library before you start the script.You can add any of these following CDN to start it. Google: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> Microsoft <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> Jquery If you want any other Jquery cdn version check this link. After this: <script type="text/javascript"> $(function(){ //your stuff }); or $(document).ready(function(){ //your stuff }); </script> Wordpress: <script type="text/javascript"> var $ = jQuery; jQuery(document).ready(function($){ //your stuff }); </script>
Okay, my problem was different - it was Document Security model in Chrome. Looking at the answers here, it was obvious that I was somehow not loading my jquery files before calling the $(document).ready() etc. functions. However, they were all in the correct positions. In my case, this was because I was accessing the content over a secure HTTPS connection, whereas the page was trying to download the CDN hosted data from google, etc. The solution was to store them locally and then include then directly rather than from the CDN each time. Edit: The other way of doing this is to link to all the CDN-hosted stuff as https:// rather than http:// - then the model doesn't complain.
You are calling the ready() function before the jQuery JavaScript is included. Reference jQuery first. If you're in ASP.NET MVC, you can specify when your JS code should be rendered, by doing this: 1, In your page.cshtml wrap your <script> tag into a section, and give it a name, the common name to use is 'scripts': #section scripts { <script> // JS code... </script> } 2, In your _Layout.cshtml page add #RenderSection("Scripts", required: false), make sure to put it after you reference the Jquery source, this will make your JS code render later than the Jquery.
Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts. remove tag script on head and put end bady <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> then first write script in file js add /*global $ */ $(document).ready(function(){ });
If it's in wordpress, might be needed to change $(document).ready(function() { to jQuery(document).ready(function($){ or add var $ = jQuery; before $(document).ready(function() {
I had the exact same problem and none of these solutions above helped. however, I just linked the .css files after the .js files and the problem miraculously disappeared. Hope this helps.
In my case I had this referenceError as the order of script calls was wrong. Solved that by changing the order: <script src="js/index.js"></script> <script src="js/jquery-1.10.2.js"></script> to <script src="js/jquery-1.10.2.js"></script> <script src="js/index.js"></script>
I wanted to try to make my script asynchronous. Then I forgot about it and when I went live the [custom].js file only loaded 50% of the time before the jQuery.js. So I changed <script async src="js/script.js"></script> to <script src="js/script.js"></script>
I had the same problem , and I solved by putting jQuery at the top of all javascript codes I have in my code. Something like this: <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="js/app.js" type="text/javascript"></script> <script src="js/form.js" type="text/javascript"></script> <script src="js/create.js" type="text/javascript"></script> <script src="js/tween.js" type="text/javascript"></script> Hope can help some one in future.
put latest jquery cdn on top of your main html page Like If your main html page is index.html place jquery cdn on top of this page like this <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("h2").hide(); }); }); </script> </head> <body> <h2>This will hide me</h2> <button>Click me</button> </body> </html>
Include the jQuery CDN (or jQuery ref) in the index file first. before including your JS file to ensure we are accessing the jQuery. following lines worked for me Can get a clear idea about this by referring to the following link reference site: https://www.tutorialrepublic.com/faq/how-to-fix-dollar-is-not-defined-error-in-jquery.php Answer: Execute Code after jQuery Library has Loaded The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.
In my case it was a typo, I forgot a backslash and was referencing the source incorrectly. Before src="/scripts/jquery.js" After src="scripts/jquery.js"
If you are doing this in .Net and have the script file referenced properly and you jQuery looks fine, make sure that your users have access to the script file. The project I was working on (a coworker) had their web.config denying access to anonymous users. The page I was working on was accessible to anonymous users therefore they didn't have access to the script file. Dropped the following into the web.config and all was right in the world: <location path="Scripts"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location>
The source file jquery-1.2.6.min.js is not called the jQuery command $() is executed earlier than <..src='jquery-1.2.6.min.js'>. Please run <.. src="/js/jquery-1.2.6.min.js.."> at first and make sure the src path is right, then execute jquery command $(document).ready(function()
This happened to me before. The reason was that I'm connecting android to a webview with a JS. And I sent a parameter without quotes. js.sayHello(hello); and when I changed it to js.sayHello('hello'); it worked.
The error will occur in the following two scenarios as well. #section scripts element is missing from the HTML file Error in accessing DOM elements. For example accessing of DOM element is mentioned as $("js-toggle") instead of $(".js-toggle"). Actually the period is missing So 3 things to be followed - check required scripts are added, check if it is added in the required order and third syntax errors in your Java Script.
I had similar issue. My test server was working fine with "http". However it failed in production which had SSL. Thus in production, I added "HTPPS" instead of "HTTP" and in test, i kept as it is "HTTP". Test: wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false ); wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) ); Production: wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false ); wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) ); Hope this will help someone who is working on wordpress.
Your JavaScript file is missing so this error occurred. Just add the JavaScript file inside the <head> tag. See the example: <script src="js/sample.js" type="text/javascript"></script> <link href="css/sample.css" rel="stylesheet" type="text/css" /> or add the following code in tag : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
In my case i forgot to include this : <script src ="jquery-2.1.1.js"></script> Earlier I was including just jquery-mobile which was causing this error.
I modified the script tag to point to the right content and changed the script order to be the right one in the editor. But totally forgot to save the change.
Doh! I had mixed quotes in my tags that caused the jquery reference to break. Doing an inspect in Chrome allowed me to see that the file wasn't properly linked.
You have not referenced a jQuery library. You'll need to include a line similar to this in your HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I had a similar issue and it was because I was missing a closing > on a style sheet link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="local_xxx.js"></script> I have similar issue, and you know what, it's because of network is disconnected when I test in android device webview and I don't realize it, and the local js no problem to load because it doesn't need network. It seems ridiculous but it waste my ~1 hour to figure out it.
if you are laraveling that error comes on in blade files when you forgot to surround the code with : #section('section name') ....... #endsection
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 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
$(...).tablesorter is not a function
I'm having problems with the plugin tablesorter apparently my system is not identifying the function coo existing, do not know if it may be some conflict with other javascript (I'm making the change in a wordpress plugin). Below is my code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> (function($) { $('table').tablesorter(); })(jQuery); </script> I changed the way i'm calling the js file <?php wp_register_script( 'jquery.tablesorter.js', get_bloginfo('template_url').'/js/jquery.tablesorter.js' ); wp_enqueue_script( 'jquery.tablesorter.js' ); ?>
The problem was that the site which provided the download file provides a plugin with the same name as the plugin, just confusing me and downloaded the wrong file.