I am trying to include two scripts, one is a cdn:
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
The other is OneSignal code:
<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "xxxxxxxxxxxxxxxxxxxxxx",
});
});
</script>
I added these two inside app.blade.php but they don't work (I checked Inspect, the codes aren't rendered/showing). I read more about Vite in the Laravel documentation but couldn't understand the process.
Note: I am using Filament, and I followed their docs of installing vite
Related
I'm developing a Wordpress video plugin. I want the video to start loading AFTER the rest of the page has loaded. I have:
Created videosplash.php which contains code to create a div #video-splash.
Created videosplash-video.php which contains code for loading the video itself. This code works perfectly when it is included directly within the above DIV.
Attempted to use jquery bind the second PHP file to div #video-splash with directions for this to happen AFTER the rest of the page has loaded.
Both PHP files are within the same plugin directory.
I've tried the following ways of doing this with no luck; and I can't find any clarification of the matter by searching online.
Attempted Method 1
As a JS script normally calls things from whatever directory it is running from, I would have thought this should work - but it doesn't:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load('videosplash-video.php');
});
</script>
Attempted Method 2
I've also tried this way to load the file dynamically, but I don't think the plugins_url is a valid means of calling the file in javascript:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/assets/php/videosplash-video.php',__FILE__ ) );
});
</script>
and
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/videosplash-video.php',__FILE__ ) );
});
</script>
What am I missing folks? And thank you in advance
You cannot include wordpress plugins url via javascript,
one thing you can do, first hide the video div by giving the style="display:none", then on load you can make it display:block using javascript
for example consider this following is your video div,
<div id="video-splash" style="display:none;">
some video content inside
</div>
then use javascript to enable it after page load like this,
$(document).on("load", function() {
$('#video-splash').show();
});
I am workin on laravel project in which i have to integrate google maps. I am using this package https://github.com/alexpechkarev/google-maps for google maps . I install this package and get api key from https://console.developers.google.com/apis/credentials . then I just follow the usage of this package for example i write the code in my controller
$response = \GoogleMaps::load('geocoding')
->setParam (['address' =>'santa cruz'])
->get();
It giving me data in json encode formate but i dont't know what i do next . How can i display maps . can someone please give me proper example of this package via code i will be thankfull for that thanks in advanced
You need to actually implement the map on the front end in your views:
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<script>
function initMap() {}
</script>
Read this: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#introduction
I am maintaining Zend application with ExtJS 3 based views. Recently, I am working on migrating to ExtJS 4 MVC based application.
Background
With ExtJS 3 I used to combine ExtJS library + all my JS files and include that in Zend layout (let's call that combine.js).
<script type="text/javascript" src="combine.js"></script>
All I needed to do was to met dependencies in combined file.
Now, trying to accomplish ExtJS 4 MVC approach with Zend generating my views, I am running into multiple problems with the new Ext.Loader. My Zend layout consists of
<script type="text/javascript">
Ext.application({
name: 'demo',
appFolder: 'app',
controllers: [
// controllers list here
],
launch: function()
{
// viewport + page items
}
});
</script>
Moreover, in HEAD section I still maintain the same approach to include one combined file (ExtJS 4 library + all my js files). In theory, I have all js dependencies met since I include the whole library before my code.
Problem
I am running into multiple problems with new class loading mechanism.
Let's assume I have only one controller with one view and one store on ExtJS side:
Ext.define('demo.myModule.controller.MyGrid', function() {
extend: 'Ext.app.Controller',
stores: [ 'demo.myModule.store.MyStore' ],
views: [ 'demo.myModule.view.MyStore' ]
...
});
Rendering such page ends up with Ext.Loader trying to fetch not existing resource :
GET http://myPage/demo/myModule/store/MyStore.js?_dc=1390226857962 404 (Not Found)
Disabling Ext.Loader ends up with :
Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: demo.myModule.controller.MyGrid
Since ExtJS 4 is a really popular library, someone must have hit the same stumbling block before. What is the proper way to tackle such problem ?
BTW. I am asking that question having already spent couple of days on ExtJS documentation + official tutorials, tried Sencha CMD but I fail to get what the exact problem is.
EDIT:
I have added a sample project showing the problem: https://github.com/mirfilip/extjs-zend. You can see app.js containing simple class demo.myModule.view.Panel. In application/layouts/scripts/layout.phtml you can see that the whole library + app.js is loaded (in order). When you try to render the project it will show the blank page. However, if you go to layout and uncomment lines 23-33 (and comment out appending of app.js in line 11) and render, it works well. The only difference is where my class is defined in. There should be no possible time race between classes as Ext.application creation is wrapped it Ext.onReady. Any ideas ?
I don't use Zend Studio, so I cannot give a specific answer. I will just show you my code, how I integrate ExtJs into my own homebrewed framework.
This is the html code on my development site, which will use Ext.Loader to load the classes dynamically.
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="ext/locale/ext-lang-fr.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
This will then compile to :
<link rel="stylesheet" href="resources/Mb-all.css"/>
<script type="text/javascript" src="app.js"></script>
This snipped is found in the build/production/MyApp/index.php folder. I have then a build script that takes this file and copies it where it should be for the php framework to work.
I hope this will give you an idea to solve your specific problem.
Important: app.js is a autogenerated file by sencha cmd. It is not the same thing in the development environment and in the test environment.
In the development it just contains this text:
/*
This file is generated and updated by Sencha Cmd. You can edit this file as
needed for your application, but these edits will have to be merged by
Sencha Cmd when upgrading.
*/
Ext.application({
name: 'Mb',
extend: 'Mb.Application',
autoCreateViewport: true
});
In the production envrionment it contains the full, minified javascript source of the app.
Probably you have to indicate paths to Ext classes before your combined app js file. I'm using paths relative to domain root ('/app' not 'app').
<script>
Ext.Loader.setConfig({
paths : {
'demo' : '/app'
},
enabled: true
});
</script>
<script src="combine.js" />
I am developing a website in yii framework where I am am using ext js 4 mvc structure.
I am trying to use ext js 4 with yii framework.
I am using MVC in ext js 4 where i get forbidden message.
During execution of this application I get below message
GET http://localhost/helloext/protected/controller/Users.js?_dc=1350173045981 403 (Forbidden)
Below is my application structure:-
helloext-
--extjs // contins ext js 4 sdk
--protected
--controllers
--Users.js
--app.js
--index.html
Code:-
1)index.html
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
2)app.js
Ext.application({
name: 'helloext',
appFolder : 'protected',
controllers:['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: '',
items: [
{
xtype: 'panel',
title: '<b>Balaee<b>',
html : 'List of users will go here'
}
]
});
}
});
3)
protected
--Users.js
Ext.define('helloext.protected.controllers.Users',
{
//extend: 'Ext.app.Controller',
extend: 'Ext.protected.Controllers',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
}
);
How I integrate yii framework with ext js 4 mvc?
You said, "Below is my application structure" and your application structure seems something different. anyway...
protected folder is strictly restricted to the browser. Check the .htaccess (it is hidden in windows) file inside your protected folder and it contains deny from all. That's the reason why you get 403 Forbidden
1) Move Users.js outside of protected folder.
2) Remove .htaccess file (but it's a Security Risk )
2) or, use the Yii's assetManager.
http://www.yiiframework.com/forum/index.php?/topic/2032-assets/
http://www.yiiframework.com/wiki/148/understanding-assets/
I believe you need to redesign your Extjs Application to be compatible with Yii framework's design.
In order to do so, I'd recomend the following structure:
/yiiApp
/protected
/assets
/yourExtjsApp
You will also need to use Yii CAssetManager to publish your assets (aka. your ExtjsApp) so that they are worldwide accessible:
$assetUrl = Yii::app()->getAssetManager()->publish('application.assets', false, -1, false );
(you can do this wherever you want, I'd recommend views/layout/main.php or even protected/config/main.php so that you can access the assetUrl at a later time)
Finally in your protected/views/layout/main.php or protected/views/index.php (whichever you prefer), you can create your Extjs Application as follows:
Ext.application({
name: 'yourExtjsApp',
appFolder: '<?php echo assetUrl; ?>',
....
i designed a html page with the Accordion and it worked well, but when i changed the extension to PHP, the accordion wasnt working well again, below is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
Better create a new file on .php and copy there all the code, then close it. I have similar problems sometimes with images.