I'm on making a websites that uses Laravel 5.5 and blade templating engine for the view.
It's working on most of the browsers both desktop and mobile. But when I do a testing on an old Android mobile, I am getting error. I have checked anywhere on Google but could't find any answer.
It seems that the blade view that extends this layout, cannot read the function from the template layout. It shows the error "function undefined", and even for variable that I declared on the layout template, all unreadable on the view that extends this layout, even js file.
layout.blade.php:
<script src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#yield('scripts')
page.blade.php:
#extends('layout')
#section('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
main.js:
alert(main_url);
So, there's only one problem here, seems like the scripts that I have declared on the layout, are not rendered or something if we open it from old Android mobile browser.
The checkout function that I call on the buttonClick inside the page.blade.php is showing error undefined, and also the alert(main_url) that I call on the main.js file is shown undefined too.
Is there any suggestion for my problems?
#yield is for load content, So you should use stack and push for load js and css.
layout.blade.php:
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#stack('scripts')
page.blade.php:
#push('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endpush
Check more info push stack
May this can help you:
page.blade.php
#extends('layout')
#section('scripts')
#push
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
That's how javascript (and others too) works. Browser reads code from top to bottom.
Since you placed <script src="{{ asset('js/main.js') }}"></script> before var main_url = "https://test.com";, of course main_url in js/main.js is undefined.
You just need to aware with orders.
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
<script src="{{ asset('js/main.js') }}"></script>
About buttonClick shows undefined, we don't have a clue, since you don't post your code, where you call it.
Related
I am receiving an intermittent error from JavaScript in my production environment and was hoping to learn more about the loading process.
The error is simple enough to understand:
'kendo' is undefined.
It states that the kendo variable is undefined at a time that I try to use it. However, I have all of my JavaScript code wrapped inside a jQuery ready event, like so...
<head>
<script src="path/to/jQuery.js"></script>
</head>
<body>
<!-- ... -->
<script>
jQuery(function ($) {
var test = new kendo.data.DataSource({
// datasource options
});
});
</script>
<!-- ... -->
<script src="path/to/kendo.js"></script>
</body>
I was under the impression that doing jQuery(function() { ... }); would cause the inner code to run after the DOM is ready and that it would run only after all of the <script> tags have been parsed and processed.
Is this not the case? Should I be adding my code to the loaded event instead of the ready event?
FWIW, we are using Cloudflare to handle minifying and caching, and the intermittent behavior seems to only be related to IE. I can't replicate the problem, though, I just get notified when one of our pages fails to finish loading and I see the console has this undefined error. Navigating to the page again yields no problem, so I'm a little baffled. Any ideas?
Also, I don't see any duplicate references to the jQuery or kendo libraries in my code.
Use it this way ...
<head>
<script src="path/to/jQuery.js"></script>
</head>
<body>
<!-- ... -->
<script src="path/to/kendo.js"></script>
<script>
jQuery(function() {
var test = new kendo.data.DataSource({
// datasource options
});
});
</script>
<!-- ... -->
</body>
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>
I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.
You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
I have below view with scripts at the end:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// here all my stuff
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
</script>
so what I want is to put all the code within into a js file and place it under /Scripts folder in mvc 4 so how to do this? In this script I refer to items in the view.
so after this change I have:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.10.2.min.js)"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Customs/MyCustomJsFile.js")">
</script>
Javascript file (under /Scripts folder):
MyCustomJsFile.js:
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
in runtime I am getting an error saying synatx error in MyCustomJsFile.js in the ie debug console so I click the error and first line is shown as error:
but my js file has not any script line....
The only thing that should be in your MyCustomScript.js file is the code you had between the <script> tags, not the tags themselves nor the <script> tag to include jQuery. jQuery should be included in your view on in your Layout and it should be included before your file.
For example, your view:
<script type="text/javascript" src='#Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/Tests/MyCustomScript.js")'></script>
Your MyCustomScript.js file:
// here all my stuff
jQuery should really be included on your Layout since you will likely be using it on most, if not all, of your Views.
I have a document which uses old jQuery and I need new jQuery for a particular plug-in.
My document structure looks like this:
<html>
<head>
<script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
<script>
$("#elem").doSomething(); // use old jQuery
</script>
<!-------- My plugin begins -------->
<script type="text/javascript" src="jQuery.new.js"></script>
<script type="text/javascript" src="jQuery.doSomething.js"></script>
<script>
$().ready(function(){
$("#elem").doSomething(); // use new jQuery
});
</script>
<div id="elem"></div>
<!-------- My plugin ends ---------->
<script>
$("#elem").doSomething(); // use old jQuery
</script>
</body>
</html>
I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.
To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.
If you cannot do this, you can run in compatibility mode. Here is how.
<script src="jquery-1.3.2.js"></script>
<script>
var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
var jqueryB = jQuery.noConflict();
</script>
You would need to call
jqueryB("#myelement").....
To use the alternate version.
You should use jQuery.noConflict();
See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/
As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.
Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
var oldFunct = function (e,o) { alert("old jquery" + o); };
var newFunct = function (e,o) { alert("new jquery" + o); };
$("#elem").bind("doSomething", oldFunct);
$("#elem").trigger("doSomething", ["1"]);
</script>
<script>
$(document).ready(function(){
$("#elem").bind("doSomething", newFunct);
$("#elem").trigger("doSomething", ["2"]);
$("#elem").bind("doSomething", oldFunct);
});
</script>
<script>
$("#elem").trigger("doSomething", ["3"]);
</script>
</body>
</html>