load jquery after page initialization using javascript function - javascript

I am working on a project to provide facebook autentication to an existing captive portal. This captive portal has one option to customize the template so... I can edit the html code to show one of my own.
The problem is that for some reason every time I import a script on the template like this
<script src="external http or https script"></script>
it fails and the result is a blank page with nothing loaded from the template...
I had found a solution by importing the script after the page has loaded like this....
var script=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
It is working ... I can confirm on console that calling $('body') for example return the body element of html.. so jquery is ready...
My problem:
If, after loading jquery ussing the workaraound I load other scripts (angular and socket.io in this case) those scripts fail with jquery issues
Uncaught ReferenceError: $ is not defined
My question:
How can i do to load those scripts after the jquery has finish loaded...
Do I need to initialize jquery some how to use it?
Thanks in advance
FULL CODE
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="-1"/>
</head>
<body onload="initialFunction()">
<script>
function initialFunction(){
document.getElementsByName('username')[0].placeholder="Nombre de Usuario"
document.getElementsByName('password')[0].placeholder="Contraseña"
var script=document.createElement('script');
var angularScript=document.createElement('script');
var socketScript=document.createElement('script');
var angularFacebookScript=document.createElement('script');
var appScript=document.createElement('script');
var materializeScript=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
angularScript.src="http://192.168.1.5/js/angular.js";
socketScript.src="http://192.168.1.5:8080/socket.io/socket.io.js"
angularFacebookScript.src="http://192.168.1.5/angular-facebook-master/lib/angular-facebook.js"
appScript.src="http://192.168.1.5/js/app.js"
materializeScript.src="http://192.168.1.5/js/materialize.min.js"
var head=document.getElementsByTagName('head')[0]
var body=document.getElementsByTagName('body')[0]
head.appendChild(script);
body.appendChild(angularScript);
body.appendChild(socketScript);
body.appendChild(angularFacebookScript);
body.appendChild(appScript);
body.appendChild(materializeScript);
}
</script>
<center>
<style>
body {
background-color:#298eea;
}
....some other stuff...
</style>
<div>
<h3>{company_logo}</h3>
<h2>Captive Portal</h2>
<div id="__loginbox"></div>
//here I want to insert the facebook button with an angular controller to pass info to a backend via socket io.... I have already do that before ussing the "normal way"
</div>
</center>
</body></html>

Try using onload event at script variables
script.onload = function() {
console.log(jQuery().jquery);
// do stuff with jQuery script
}
angularScript.onload = function() {
// do stuff with angular script
}
similarly with socketScript, angularFacebookScript, appScript, materializeScript

Related

Using html code with a javascript code as a widget in flutter web

I am currently using flutter web and I already have an html button that I want to add inside my flutter app. This html contains a java script as its body. How to add the html with javascript as a widget inside my app? This is the html snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paytabs Express Checkout V4</title>
</head>
<body>
<script
src="https://paytabs.com/express/v4/paytabs-express-checkout.js"
id="paytabs-express-checkout"
data-secret-key="key"
data-ui-type="button"
data-merchant-id="mid"
data-url-redirect="https://my09713z28.codesandbox.io/"
data-amount="3.3"
data-currency="SAR"
data-title="John Doe"
data-product-names="click"
data-order-id="25"
data-ui-show-header="true"
data-customer-phone-number="5486253"
data-customer-email-address="john.deo#paytabs.com"
data-customer-country-code="973"
data-ui-show-billing-address="false"
data-billing-full-address="test test test"
data-billing-city="test"
data-billing-state="test"
data-billing-country="BHR"
data-billing-postal-code="123"
></script>
<script>
</script>
</body>
</html>
Hope you provide me with some help.
You can go something like this. You should put your html releated code in index.html file and in src you need to put a path for your index.html e.g. 'assets/index.html'
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;
String viewID = "your-view-id";
#override
Widget build(BuildContext context) {
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
viewID,
(int id) => html.IFrameElement()
..width = MediaQuery.of(context).size.width.toString()
..height = MediaQuery.of(context).size.height.toString()
..src = 'path/to/your/index.html'
..style.border = 'none');
return SizedBox(
height: 500,
child: HtmlElementView(
viewType: viewID,
),
);
}
You can use HtmlElementView for adding html elements inside a flutter web app
https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html
Beware that would only work in flutter web and
Embedding HTML is an expensive operation and should be avoided when a
Flutter equivalent is possible
You should add this html content inside the file web/main.html.
I suggest you to build the button with Flutter and call javascript code with dart like this example calling javascript from Dart
If I understand correctly, your intention is to be able to render your html/javascript as a native widget in flutter.
Unfortunately, I don't think this is technically possible due to the fact that flutter is rendering everything in its own light-weight rendering engine, rather than creating native code that your native runtime executes. The artifact(s) created (even in flutter web) after compilation is a combination of flutter runtime + your compiled code that executes on flutter runtime. Therefore this is not possible to add html/javascript to your flutter code as a widget and run it everywhere.
The solution is to implement your widget in pure Dart code.

nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
The google PageSpeed Tools give it a high score which is i expected:
But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )
I'm not using js and css bundling feature in nopcommerce.
Can you guys please tell me what is the best solution in my scenarior now ?
Any helps are very appriciated.
Thank you so much.
Here is my code of _Root.head.cshtml:
#using Nop.Core.Domain.Common;
#using Nop.Core.Domain.Seo
#using Nop.Core.Infrastructure;
#{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html#(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) #Html.NopPageCssClasses()>
<head>
<title>#Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Html.NopHeadCustom()
#Html.Partial("Head")
#Html.Widget("head_html_tag")
#Html.NopCssFiles(this.Url, ResourceLocation.Head)
#Html.NopScripts(this.Url, ResourceLocation.Head)
#Html.NopCanonicalUrls()
#Html.Action("RssHeaderLink", "News")
#Html.Action("RssHeaderLink", "Blog")
#Html.Action("Favicon", "Common")
#if (displayMiniProfiler)
{
#StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
#RenderBody()
#Html.NopCssFiles(this.Url, ResourceLocation.Foot)
#Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>
First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.
Let's understand it with current scenario, the default code is:
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
In this case the order of js files are:
Now load jquery min js file asynchronously.
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);
And check console:
With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.
Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90

How to Cause Page to Redirect to a javascript snippet?

This example shows how to redirect to a url:
<meta http-equiv="refresh" content="0; url=http://example.com/" />
But, i do not want to redirect to a url, i want to redirect to a javascript snippet:
javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();
Goal is to do this with a single file.
I tried replacing the url in the meta redirect above with my js snippet, but it fails. I believe the problem is the double-quotes embedded in the js:
<meta http-equiv="refresh" content="0; url=javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();" />
I tried replacing the double-quotes in the js with " but that did not work. Also tried %22, also did not work.
I'm not trying to redirect using javascript, i'm trying to redirect to javascript (using meta or another non-js method). However, if there's a way to execute the above script using another piece of script, that's fine.
Not trying to redirect to a .js file-- i want to embed the js snippet inside the redirect.
This question is not a duplicate, because they are not redirecting a page, they are redirecting a link.
i guess you want to load the js file Dynamically! if so ..,here is my code i used before
(function( window, undefined ){
//设置meta 禁止缓存
document.write('<meta http-equiv="content-type" content="text/html; charset=GBK"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache">');
//加载公共JS文件
var jsFile = [
CONTEXT_PATH_NAME+"/js/jquery-1.4.2.min.js",
CONTEXT_PATH_NAME+"/js/jquery.easyui.min.js",
CONTEXT_PATH_NAME+"/js/jquery.cookie.js",
CONTEXT_PATH_NAME+"/js/Toolbar.js",
CONTEXT_PATH_NAME+"/js/common.js",
CONTEXT_PATH_NAME+"/js/ajax-request.js",
CONTEXT_PATH_NAME+"/js/validator.js",
CONTEXT_PATH_NAME+"/js/tooltip_split.js",
CONTEXT_PATH_NAME+"/js/cattMsg.js",
CONTEXT_PATH_NAME+"/js/watermark.js",
CONTEXT_PATH_NAME+"/html/js/session.jsp"
];
var jsTags = "";
for(var i in jsFile) {
jsTags += '<script type="text/javascript" src="' + jsFile[i] + '"></script>';
}
document.write(jsTags);
})( window );

esri new Portal(myUrl) returns a dojo error: CancelError "All requests canceled"

Esri ArcGis Javascript API 3.18
I'm issuing a new Portal("myUrl") command and getting back an error.
It's a dojo error, "CancelError" "All requests canceled."
It's a new https installation of the api on a new federated portal.
I have code that works when calling the esri portal so I think my code is probably correct. That would leave a installation configuration problem.
So far, I'm stumped.
My test web site is on the same webserver as the portal.
Here's a link to the plunkr with working code:
https://plnkr.co/edit/RFlStZbHA5axAD3J2KQt?p=preview
Any ideas?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>New Portal</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id='mainContent'>
<input id='message' value='initial value' />
</div>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
dojo.require('esri.arcgis.Portal');
dojo.require("esri.IdentityManager");
dojo.require("dojox.lang.aspect");
var portalUrl = 'https://www.arcgis.com';
var portal = null;
var message = document.getElementById('message');
var init = function() {
message.setAttribute('value', 'pre new portal');
portal = new esri.arcgis.Portal(portalUrl);
message.setAttribute('value', 'past new portal');
portal.on("error", function(errorMsg) {
message.setAttribute('value', 'error=' | errorMsg.message);
});
portal.on("load", function (data) {
message.setAttribute('value', 'success');
});
};
message.setAttribute('value', 'pre init');
dojo.ready(init);
</script>
</body>
</html>
Changing the portal settings per this document made the api work for maps.
All the examples online show using this:
var portal = new Portal('www.myurl.com');
I found that using this worked:
var portal = new Portal('www.myurl.com/arcgis');
Basically, since some of this may be due to configuration settings I haven't seen, I would recommend determining what url gets called by the Portal object's internal code, and then trying increasingly long fragments of the initial url until you get success.

Getting 404 for an external Javascript file in HTML on XAMPP

This is my first post on Stackoverflow. Please guide if I miss something.
I'm trying to do HTML5 development with external javascript file and testing the same on XAMPP 3.2.1 server.
I have stored "HF_Chapter10_WebWorkers_Example1" in "C:\xampp\htdocs" of XAMPP installation and the Javascript file "manager.js" is also residing in the same folder. The 'manager.js' internally creates a worker thread and invokes the same.
Issue: When I'm opening the HTML file in Google Chrome, I see 404 (in Dev chrome tools) stating the server can't find the external Javascript file referenced. Also, I see that the server is load the javascript file as 'text/HTML' instead of 'text/javascript'. I have tried appending type='text/javascript' in the call to the javascript but that didn't help either.
I'm trying to understand the reason of this issue.
This is what goes into the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 08 Jan 2014 05:07:11 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HF_Chapter10_WebWork_Example1</title>
<LINK REL="stylesheet" HREF="theme.css" TYPE="text/css">
<script type="text/javascript" src="manager.js"> </script>
</head>
<body>
<p id="output"> ![enter image description here][1]</p>
</body>
</html>
This is what goes into the javascript file 'manager.js'
window.onload = function() {
//create the worker thread
var worker = new Worker("worker.js");
//send the message to the worker thread
worker.postMessage("ping");
//create an event listener to act on the messages arriving from the worker thread
worker.onmessage = function(event) {
var message = "Worker says" + event.data;
document.getElementById("p").innerhHTML = message;
}
}
This is what goes into the worker.js file:
onmessage = pingPong;
function pingPong(event) {
//based on the type of data, respond back with the 'postMessage'.
//Note that the message will go to the main javascript handler
if (event.data == "ping") {
postMessage("pong");
}
}
not clear what generates the 404 but this might help you
http://w3-video.com/Web_Tools/XAMPP/xampp_example_htdocs.html
I am attaching the image of the folder structure.

Categories