Javascript variables in <script> tag - javascript

My knowledge of javascript is medium, sorry if this question seem too newbie
I call a (stripe) script to display the checkout, my 'desc' variable, which is properly in my page, is just not used in the tag. Instead I have 'desc'.
data-description='bonjour' works
var desc = 'bonjour'
data-description=desc does not work
what am I missing here ?
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key=""
data-amount=amount
data-name="<%= current_user.full_name %>"
data-description=desc
data-panel-label="Encaisser"
data-label="Payer par carte"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="fr"
data-currency="eur">
</script>

You don't actually have any Javascript there - what you have is only HTML markup, describing a script tag and its HTML attributes, so you can't use var or anything else particular to Javascript.

<script no javascript here because this is HTML, not JS>
JS can only be used here, in the content of the script tag
</script>

Related

JavaScript in laravel-dompdf

I am using laravel-dompdf to generate a PDF with a summary of results, consisting of tables and a few images, nothing to spectacular. I would like to print highcharts in the generated PDF as well. So first, I want to try a simple javascript code to see if it was working... but it isn't. I have enabled the "DOMPDF_ENABLE_JAVASCRIPT" => true, but so far no luck yet. The simple code which I want to print:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
This only prints the foo and bar.. Could someone please help me out?
Dompdf (or more specifically Back-end that it uses for PDF rendering) doesn't really render javascript. What it does is - it parse everything inside <script type="text/javascript"></script> tag and adds it in the special section of the pdf file.
I'm not sure if this javascript is what you need, since you can work with the dom tree outside of the <script> tag. What you can do is write simple scenarios, for example like this one:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script type="text/javascript">
app.alert({cMsg:"Message", cTitle: "Title"});
</script>
Try to open generated file and you will see alert.
Here more complete guide on what you can do inside javascript section: Acrobat JavaScript Scripting Guide

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

How to use value in view bag as attribute of <script> tag?

I need to assign value from viewbag as one of the attribute of javascript tag in cshmt file. Im using asp .net mvc3. Im having value inside viewbag["myvalue"] . I need to use this value like
<script src="https://abcb.js?session_ id=1234&mytext="+'viewbag["myvalue"]' type="text/javascript"> </script>
Is it possible to do this? Please provide the code if it is possible
Edited : Im using razor view engine
Is it possible to do this?
Sure.
Please provide the code if it is possible
Sure, for Razor:
<script src="https://abcb.js?session_id=1234&mytext=#ViewVag.myvalue" type="text/javascript"></script>
and if you are using the WebForms view engine:
<script src="https://abcb.js?session_id=1234&mytext=<%= ViewVag.myvalue %>" type="text/javascript"></script>

Insert javascript widget on one page of Drupal site

I have a javascript widget that can be inserted on an a plain-old html page like this:
<html>
<head>
<script type='text/javascript' src="http://example.com/widget.js"></script>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
I would like to insert this javascript on one page of a Drupal 6 site (not every page).
This is what I have tried so far to get the script tag in the HEAD:
I set the Full HTML input format to allow php.
For the Drupal page, I set the input format to Full HTML
I then added this to the top of the body of my Drupal page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://example.com/widget.js"> </script>');
?>
But Drupal doesn't parse the php and instead prints this at the top of the page:
<?php drupal_set_html_head(''); ?>
Any suggestions as to how I can do this?
#Jeff: You should not really reconsider that. Using the PHP Filter is generally a bad idea as it potentially opens security holes. (In case someone would gain access to your user account or you have a misconfiguration in your settings this is a direct path to compromising the whole server)
I would rather propose to add js via the template.php of your theme. Also the right method to use is drupal_add_js with the option inline:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
Here are some further reads on how to use it:
http://drupal.org/node/304178#comment-1000798 http://drupal.org/node/482542
I'm not too familiar with Drupal so this answer merely gets around your widget not loading without actually answering the question why that PHP block isn't being parsed as PHP.
You don't need to call the <script> tag inside the <head>. You can just place that line right above the <script> tag that calls the widget constructor.
<html>
<head>
</head>
<body>
<script type='text/javascript' src="http://example.com/widget.js"></script>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
After writing that all out, I figured out the problem...
The full html input format has an HTML corrector filter turned on by default, and that filter appears to have caused problems with the PHP code. Reordering the filters to put the PHP evaluator first fixed the problem.

Can you make a javascript function replace itself on the page with custom html?

I have some javascript which will create some sort of widget on a page. I will be giving this snippet to clients so I want them to have to do very little.
The most obvious solution which I have work right now looks something like this:
<div id="divContent"></div>
<script type="text/javascript">
MakeWidget('divContent');
</script>
Make widget basically looks for the divContent div and fill it with my widget's html.
Is there a better way to do this?
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
I would really like it if I could reduce the code down to only the MakeWidget function and it would replace itself and the script tag with the html the function generates.
Edit - I essentially want to generate HTML exactly where the MakeWidget function is called on the page.
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
Yes. When the <script> element is reached, assuming it is not a defer or async script, it will be the last script element in the page so far. So you can say, either inline or in an external script:
<script type="text/javascript">
(function() {
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
var div= document.createElement('div');
div.innerHTML= 'Whatever content is going to be inserted';
script.parentNode.insertBefore(div, script);
})();
</script>
You have to have MakeWidget defined somewhere, right? Presumably this is going to be in an external script. Why not just have the external script source just attach itself to the divContent using the window.onload method?
This would result in this code on your client's page:
<script src="http://foo.com/makewidget.js"></script>
Your makewidget.js code could then look like this:
window.onload = function() { MakeWidget('divContent') }
There may some issues with other scripts loading and probably some cross-browser compatibility issues but that should get you pointed in the right direction.
So you want to have a script element which replaces itself with div.
Your initial code is like this:
<div id="divContent"></div>
<script>
MakeWidget('divContent');
</script>
You can rewrite it like this (I am using JQuery):
<script id="scriptContent">
$('#scriptContent').after('<div id="divContent"></div>');
MakeWidget('divContent');
$('#scriptContent').remove();
</script>
I have not tried it though!
I would think it would be possible to do it as follows:
<div id="divWidgets">
<script type="text/javascript">
MakeWidgets("divWidgets");
</script>
</div>
The end result should be (if I understand your description correctly) that MakeWidgets will replace the contents of the DIV, which, in this case, is the script itself.

Categories

Resources