I am pretty new to django-channels.
while trying to set websocketbridge I ran into an errorin my JS:
Uncaught ReferenceError: channels is not defined
I loaded websocketbridge.js on top of my html template:
% load staticfiles %}
{% static "channels/js/websocketbridge.js" %}
and in my JS I have tried both:
const webSocketBridge = new channels.WebSocketBridge(); // try 1
const webSocketBridge = new WebSocketBridge(); // try 2
which are raising a similar error. What I am missing?
I solved this one pretty quick but I am leaving a solution for beginners like me who might find themselves into the same problem.
In my case, I am just handling the static files a bit differently so I just changed
{% static "channels/js/websocketbridge.js" %}
on top of my html template to
<script type="text/javascript" src="{% static '/channels/js/websocketbridge.js' %}"></script>
at the bottom of the template body, where I load specific static files and other js scripts.
Hope that helps.
Related
I'm trying to get working jQuery UI and prototype libraries together and finally arrived to this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script>
var jq = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="/js/jquery-ui.js"></script>
And call jQuery like so:
jQuery(function($){
$('#myid').[...]
});
or
jQuery('#myid').[...]
But now, I can't get rid of the following error (without calling anything):
Uncaught TypeError: proto.plugins[i].push is not a function
and comes from the jquery-ui.js file with this part:
$.ui.plugin = {
add: function( module, option, set ) {
var i,
proto = $.ui[ module ].prototype;
for ( i in set ) {
proto.plugins[ i ] = proto.plugins[ i ] || []; // Error fires here
proto.plugins[ i ].push( [ option, set[ i ] ] );
}
},
Is there a solution?
I ran into the same problem. The cause for me was my attempt to add a function to javascript's Object class.
In fact, simply extending javascript's Object is not supported at all by jQuery - and thereby its plugins.
This answer to the question of extending Object has a good solution which solved the problem with jQueryUI for me.
I am using Jquery mobile and laravel4.
I have 2 views called "mobilepage1" and "mobilepage2".
On every page there is a "Next"button". A very linear app.
This my controller:
public function login(){
View::share('test','test');
return View::make('mobilepages.mobilepage1');
}
On mobilepage1 i do this:
{{$test}}
{{ Form::open(array('url' => 'mobilepage2', 'method' => 'get')) }}
{{Form:: submit("VERDER")}}
{{ Form::close() }}
That goes to mobile page2
On mobilepage2 i also do:
{{$test}}
This does not seem to work. And gives me the "Error loading page" with the error:
{"error":{"type":"ErrorException","message":"Undefined variable: test (View: C:\\Google Drive\\htdocs\\laravel4_test4\\app\\views\\mobilepages\\mobilepage2.blade.php)","file":"C:\\Google Drive\\htdocs\\laravel4_test4\\app\\storage\\views\\cdf5614a0a7f85ce1182cff09ad77222","line":17}}
If i'm right SHARE is supposed to share in all views like a cookie right? Could it be Jquery mobile is interfering?
UPDATE:
I tried turning off ajax on Omars request:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
The variable still is not shared mobilepage2.
$test variable will be available in all views as long as the View::share('test','test'); command is executed.
In your case, this command is executed only in the login() method.
If you place:
View::share('test','test');
in the top of routes.php file you'll see that it will work because this file is executed on every call to your app.
If you don't want to mess your routes.php file with view shares or composers, you can do the following:
Create a new file (E.g. composers.php) inside the app folder (Where routes.php and filters.php live)
Open app/start/global.php and at the end of the file add
require app_path().'/composers.php';
Now your can place View::share('test','test'); inside this file and have it available in every call.
I'm trying to implement some static resource improvements into my ASP.net MVC 4 project (VB.net) by changing how static resources such as javascript and css files are retrieved.
I've been following this link (ASP.NET & MVC 4: Cookieless domain for bundling and static resources ) to help accomplish this but I've come across an issue whereby unbundled javascript and css files are not rendered.
Normally when rendering .js or .css bundles you use the following:
#Scripts.Render("~/bundles/jquery")
This will then render each script tag separately in the ~/bundles/jquery bundle when in development mode, and render a single script tag pointing to the minified bundle when in production.
According to the link above, when the scripts are bundled into a single file, you can use the following line:
<script src="#Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>
This works fine for me for bundled files since the src property is valid and the StaticContent function is able to change the src URL. But when in development mode, the bundled file does not exist as no bundling takes place and all scripts are rendered seperately to the browser by #Scripts.Render and so this method does not work.
Does anyone know if it is possible to create an extension method for the Scripts helper that will accomplish what I need, or am I going to have to do something like this?
#If Misc.IsLocalDev Then
#Scripts.Render("~/bundles/jquery")
Else
#<script src="#Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>
End If
I managed to find a solution to this problem, so hopefully by putting it up here for all to see this will help others with a similar problem that I had.
Working off the same idea as the workaround I posted in my original question, I created 2 new helper functions to help generate the necessary Script and Style references in my views...
Scripts
<ExtensionAttribute()> _
Public Function RenderScripts(helper As HtmlHelper, async As Boolean, ParamArray Paths() As String) As IHtmlString
If Misc.IsLocalDev Then
Return Optimization.Scripts.Render(Paths)
Else
Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
Dim html As String = ""
For Each Path In Paths
If async = True Then
html = html & "<script async src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
Else
html = html & "<script src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
End If
Next
Return New HtmlString(html)
End If
End Function
So instead of using:
#Scripts.Render("~/bundles/jquery")
I replaced the calls with:
#Html.RenderScripts(False, "~/bundles/jquery")
A few notes on the above method...
I added an async parameter to the function call to allow me to utilise modern browser aynsc scripts.
The GetAppVersionSuffix() function call returns the assembly version which is appended to the end of the scripts source as ?v=1.2.3.4 for example. This ensures that the browser gets a new copy of the scripts and style-sheets when a new version is released.
The Misc.IsLocalDev function is a special function I use to change the way certain parts of the web application behave when I'm developing on my local machine. In this case, it ensures that unbundled scripts and styles are rendered instead of minified/bundled ones to ease debugging.
Styles
<ExtensionAttribute()> _
Public Function RenderStyles(helper As HtmlHelper, ParamArray Paths() As String) As IHtmlString
If Misc.IsLocalDev Then
Return Optimization.Styles.Render(Paths)
Else
Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
Dim html As String = ""
For Each Path In Paths
html = html & "<link href=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ rel=""Stylesheet"" />"
Next
Return New HtmlString(html)
End If
End Function
So again, instead of using:
#Styles.Render("~/Content/Style")
I replaced the calls with:
#Html.RenderStyles("~/Content/Style")
I hope this is useful to someone!
The Firebase key-value store looks intriguing, and would be fun to use with Dart's HTML framework.
They offer a JavaScript library for reading/writing to their model. Has anyone tried using it with Dart?
My plan (based on very little Dart knowledge) is to:
Include their library in my html
Load the js.dart package
instantiate a model through js.dart
read and write through model.
Does that seem like the right approach? Or, is there a much better way of doing it?
Thanks
You can use any Javascript library through the js package.
For Firebase you have to :
add the js package to your pubspec.yaml
dependencies:
js: any
add the the following <script> to your html page :
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script type="application/dart" src="youDartCode.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
use Firebase Javascript SDK through js package. Something like :
import 'package:js/js.dart' as js;
void main() {
final myDataRef = new js.Proxy(js.context.Firebase,
'https://xxx.firebaseio-demo.com/');
myDataRef.on('child_added', (snapshot, String previousChildName) {
final message = snapshot.val();
print("${message.name} : ${message.text}");
});
myDataRef.push(js.map({"name": 'myName', "text": 'js interop rocks'}));
}
The above Dart code is the equivalent of the following JavaScript code :
var myDataRef = new Firebase('https://xxx.firebaseio-demo.com/');
myDataRef.on('child_added', function(snapshot, previousChildName) {
var message = snapshot.val();
console.log(message.name + " : " + message.text);
}));
myDataRef.push({name: 'myName', text: 'js interop rocks'});
Basically :
when you have to instantiate a Javascript object, use new js.Proxy(js.context.MyJavascriptObjectName, arg1, arg2, arg3)),
when you have to provide a Javascript anonymous object, use js.map({'attr1', value1}, {'attr2', value2}).
There's now a wrapper for the firebase.js library in Dart here: https://github.com/firebase/firebase-dart/ (also available on pub). It uses dart:js as discussed in this thread, so inclusion of firebase.js is still required!
I got the error message "Breaking on exception: ReferenceError: ReceivePortSync is not defined" when Dart got to here.
js.scoped (() {
});
An additional line of code is needed to use Firebase with Dart. Add the line "packages/browser/interop.js"
<script type="application/dart" src="ScrollViewDemo.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
----------------- Edit Aug 15 ----------
js.scoped is no longer needed in the newer version of interopt.js
I'm struggling with a problem while trying to render a custom error page in Silex.
According to what I found in this link :http://refactoring.us/silex/custom-error-pages-with-silex-and-twig/
I am trying to set up a custom 404 error page in my application. Everything works fine until I start to use helpers in my twig template.
An exemplary code for 404 error page template is as follows :
{% extends "layout.html.twig" %}
{% block main %}
<div id="error404">
<h2>{{ app.translator.trans('page404.title') }}</h2>
<p>{{ app.translator.trans('page404.para1') }}</p>
<p class="btn-footer">
{{ app.translator.trans('page404.button') }}
</p>
</div>
{% endblock %}
PHP code for error handling in my Silex app:
$app->error(function (\Exception $e, $code) use($app) {
switch ($code) {
case 404:
$message = $app['twig']->render('error404.html.twig');
break;
default:
$message = $app['twig']->render('error500.html.twig');
}
return new Response($message, $code);
});
Once i remove {{ url('home') }} (this helper and route works perfectly in other cases!) I get the proper rendered site, but without the translations.
With the helper, I get the following error:
Fatal error: Uncaught exception 'Symfony\Component\Routing\Exception\RouteNotFoundException' with message 'Route "" does not exist.' in D:\projects\projectname\application\vendor\symfony\routing\Symfony\Component\Routing\Generator\UrlGenerator.php:119 Stack trace:
#0 D:\projects\projectname\application\vendor\symfony\twig-bridge\Symfony\Bridge\Twig\Extension\RoutingExtension.php(45): Symfony\Component\Routing\Generator\UrlGenerator->generate(NULL, Array, false)
#1 D:\projects\projectname\application\vendor\twig\twig\lib\Twig\Environment.php(327) : eval()'d code(68): Symfony\Bridge\Twig\Extension\RoutingExtension->getPath(NULL, Array)
#2 D:\projects\projectname\application\vendor\twig\twig\lib\Twig\Template.php(265): __TwigTemplate_ca53e56b87abd45da5c34a79d4c2ce34->doDisplay(Array, Array)
#3 D:\projects\projectname\application\vendor\twig\twig\lib\Twig\Template.php(239): Twig_Template->displayWithErrorHandling(Array, Array)
#4 D:\projects\projectname\application\vendor\twig\twig\lib\Twig\Envir in D:\projects\projectname\application\vendor\twig\twig\lib\Twig\Template.php on line 280
So I need some guidance here on what could be the possible reason behind this that is causing this and steps to resolve this issue. All help appreciated.
This is not a Silex problem (as of now) - Everything works perfectly on my side (Silex 1.2)
Did you register the UrlGeneratorServiceProvider in your app ?
in web/index.php:
$app->register(new Silex\Provider\UrlGeneratorServiceProvider());
And you should really use path() instead of url()in this case :
{{ path('home') }}