I want to run javascript code before generating the pdf using LaravelMpdf but it doesn't work
Any ideas?
<div>foo</div>
<div id="insertHere"></div>
<div>bar</div>
<script type="text/javascript">
document.getElementById('insertHere').textContent = 'New text';
</script>
Related
I'm trying to do something as simple as changing the text in my <p> tag from "hello" to "goodbye: but I can't get it to work.
Here is my html
<body>
<div id="passwordBox">
<!-- <div id="title">
<span>PASSWORD GENERATOR</span>
</div> -->
<p id="password">Hello</p>
</div>
</body>
here is my js
document.getElementById('password').innerHTML = "goodbye";
My js is linked correctly in my head. Other functions that I had in there were working correctly. So I'm wondering what the issue is. I'm sure it's something simple that I am just not seeing but I can't figure it out.
HTML execution happens top-down. HTML calls each script it finds while parsing the HTML document. Since you placed your script in "head" the script gets called immediately. When the script is called, your DOM is not yet ready and your script accesses your DOM element returning a null. So load the script after your DOM is loaded completely ie., after body or just before ""
So the ideal code should look like:
<html>
<body>
<div>
<p id="password">Hello</p>
</div>
</body>
<script>
document.getElementByID("password").innerHTML="goodbye";
</script>
</html>
Or you can still load your script from the head, but just add a button along with event listener (onClick) which calls the JavaScript function when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent() {
document.getElementById("demo").innerHTML="goodbye";
}
</script>
</head>
<body>
<p id="password">Hello</p>
<button onclick="changeContent()">Try it</button>
</body>
</html>
The Sheety API is great but I cannot make it work with Vue.
The only included example uses jQuery with handlebars.js which, like vue.js, uses double mustache syntax that collides.
<html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
var template = Handlebars.compile($('#item-template').html())
$('#items').html(template(data))
})
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>
Is there a way to make this example work inside the Vue component? Most preferably, to make it work without having to import the handlebars.js or jQuery?
Please mind that I am an exploratory designer, not a well-versed js coder, so I would greatly appreciate a working example :)
On our website we use a HubSpot registration form with custom styling that loads in a fancybox popup.
This is how it should look
Our problem is that we need to add an 'on click trigger' (see HTML and JS below) to load the dropdown with the right styling We want to form to work properly without the trigger. Without the click trigger it looks like below:
Also the dropdown isn't working when this form appears.
Our code looks like:
<div class="popup-mask">
<div class="popup sm" id="popup-gartner-get-in-touch">
<h4 class="section-title blue">Get in touch</h4>
<div class="download-form">
<div class="hubpop">
<div class="download-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
$('a[href="#popup-gartner-get-in-touch"]').click(function() {
hbspt.forms.create({
portalId: "538005",
formId: "190bdb23-c363-4d93-8189-9c7d28782017",
target:'.hubpop',
});
});
</script>
</div>
</div>
</div>
</div><!-- end popup -->
</div><!-- end popup-mask -->
My guess is that you are using some kind of jQuery plugin to style the dropdown. The problem is, your code for that is trying to style something that doesn't exist in the DOM until that trigger is clicked. What you should do is put that jQuery plugin code into the forms onReady function.
hbspt.forms.create({
portalId: '',
formId: '',
onFormReady: function($form) {
// YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
console.log($form.find('select'));
}
});
If you're just looking to style the form selects without using a jQuery plugin, you can use this tool to get the css needed to do that.
I am new to javascript and dojo, and am trying to write code to navigate to
another URL dynamically. This seems easy to do with javascript, but I can't
get it to work with dojo/on.
Here is my example code. The trivial callback works fine. The dojo/on callback
invokes the callback, but the new page never appears. I have to do this
dynamically and with dojo because, well just because my project requires it.
Anyone know why this is failing and how to make it work?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js">
</script>
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
function init() {
var node = dojo.byId("test");
var childNode = dojo.create("a", { href : "" }, node);
childNode.innerText = "dojo callback click here";
require(["dojo/on"], function(on){
on(childNode, "click", callback);
});
}
dojo.ready(init);
</script>
<div id="test">
<p>
trivial callback click here
</div>
Starting with Dojo 1.7, the AMD loader is the preferred way of using Dojo modules.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function(on, dom){
on(dom.byId('theDiv'), 'click', function(){
alert("Click!") // replace this line with location changes
})
})
</script>
</head>
<body>
<div id="test">
Click Me
</div>
</body>
</html>
In this example, the core Dojo.js is loaded (as you requested), but the difference is I used the require method, attaching the click method of dojo/on to the div. Ideally, you would use separate javascript files to dictate the behavior of your page, but for this example, embedding the js into the index page is sufficient.
Using the parser, you can use declarative <script type="dojo/on" data-dojo-event="click">...</script>, but for a variety of reasons you should use programmatic parsing and use javascript files for maximum efficiency.
In addition, defining functions/methods/variables in the global scope:
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
</script>
... isn't recommended and there are better alternatives.
I'm using Aptana Studio with the following source code:
<html>
<head>
<title>New Adobe AIR Project</title>
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script>
$(function() {
alert('ok');
})
</script>
</head>
<body>
</body>
</html>
This works if I just pull up the page as an html page.
But why am I getting
ReferenceError: Can't find variable: google.
ReferenceError: Can't find variable: $
When I use Aptana's Run command, or even if I build the application into an .air file and run it from Window's explorer.
You cannot load external JS files using the tag in an AIR application. It violates the AIR security stuff.
You MUST load js files from the application sandbox.
http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7ef7