Problem :
How can I integrate my jQuery code with HTML?
The code is working in Chrome console but I have to integrate it with HTML
How should i call the below jQuery code in HTML?
Code:
$(function () {
$('.ibody tr').each(function (a, b) {
var count=0;
var name = $('.cl', b).text();
if(name.indexOf(".CSV")!==-1 && name.indexOf("TAS")!==-1){
var d= a-9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = `https://www.shipper-ml.com/viewReports.do?
ctrl=reportListForDownload&action=DownloadReport¶m=${d}`;
}
});
});
Your Script
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$('.ibody tr').each(function (a, b) {
var count=0;
var name = $('.cl', b).text();
if(name.indexOf(".CSV")!==-1 && name.indexOf("TAS")!==-1){
var d= a-9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "https://www.shipper-ml.com/viewReports.do?ctrl=reportListForDownload&action=DownloadReport¶m="+d;
}
});
});
</script>
and if you wanted to call the function either on a button click you could do like this for example
<!DOCTYPE html>
<html>
<head>
// let us say this is your jquery function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
JQuery is nothing but a javascript helper library. So to use any library, first you need to tell HTML that you are writing some functions from that library.
To do that , we need to include the library before you write any code that uses that library. In your case Jquery.
So 1st add the library using
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Then you can use any functions from that library.. in the same HTML file or in a different js file.
To use it in the same HTML file, write your code in the tags.
<script>
$(function () {
$('.ibody tr').each(function (a, b) {
var count=0;
var name = $('.cl', b).text();
if(name.indexOf(".CSV")!==-1 && name.indexOf("TAS")!==-1){
var d= a-9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "https://www.shipper-ml.com/viewReports.do?ctrl=reportListForDownload&action=DownloadReport¶m="+d;
}
});
});
</script>
To use it in a different file,
add your code in a new file (mycode.js), and use the relative path to it in the html file
<script src="mycode.js"/>
Related
Inside my JS function I need to add this:
< script src=https://xxxx.com/c3.js type="text/javascript" async defer>< /script>
How to edit the code the right way?
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
console.log(ab_id_transakce);
}
</script>
If I understand your question correctly, you are trying to add a script tag to the DOM. It seems that you are trying to add the HTML script tag in the Javascript function, which will not work. What you can try is:
Add the script tag directly in the HTML like this:
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
}
</script>
Add the script tag dynamically
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
var script_tag = document.createElement("script");
script_tag.src = "https://xxxx.com/c3.js";
script_tag.type = "text/javascript";
script_tag.async = true;
script_tag.defer = true;
// in case you want to add the script tag to the <head>
document.head.appendChild(script_tag);
// in case you want to add the script tag to the <body>
document.body.appendChild(script_tag);
}
</script>
I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.
I have a variable of the form :
var x = '<script type="text/javascript" language="javascript"> ..lots of stuff...</script>
<script type="text/javascript" language="javascript"> ..even more of stuff...</script>'
and I want to insert it with jquery into my HTML code and execute it.
I tried using the append, html and eval without any luck.
Any ideas?
sample script:
<script type="text/javascript" language="javascript">
var clk = 'http://......';
</script>
<script type="text/javascript" language="javascript" src="http://...."></script>
<noscript>
<img src="http://..." width="120" height="600" border="0" alt="">
</noscript>
this will in the end show an img, which will load asynchronously.
Usually having </script> tags nested within other <script></script> tags will break things. You'll need to split them up like in the Javascript below to not cause browser issues.
Here is a working fiddle:
https://jsfiddle.net/2vrfxrse/
Javascript
var jsCode = '<scr' + 'ipt>var executeTest = function(){ alert("This is a test."); }</scr' + 'ipt>';
$('head').append(jsCode);
HTML
<script>executeTest();</script>
This solution will probably work for your specific scenario:
var rx = new RegExp("<script .*?>(.*?)<\/script>", 'g');
var x = '<script type="text/javascript" language="javascript">alert("..lots of stuff...");</script><script type="text/javascript" language="javascript">alert("..even more of stuff...");</script>';
var res = rx.exec(x);
while (res) {
var s = document.createElement("script");
s.appendChild(document.createTextNode(res[1]));
document.body.appendChild(s);
res = rx.exec(x);
}
JSBin: http://jsbin.com/menocumiya/edit?html,js,console,output
You can use Jquery getScript:
//Moment example
if (typeof moment == "undefined") {
var url = "~/assets/js/moment.js";
$.getScript(url);
}
Or Jquery Function:
$(function(){
var test = "this.Foo = function() {alert('hi');}";
var F=new Function (test);
(new F()).Foo(); //Shows "Hi" alert
});
$(function(){
var test = "this.Foo = function() {alert('hi');}";
var F=new Function (test);
(new F()).Foo(); //Shows "Hi" alert
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
An extremely simple question but I am noob. I have been learning javascript and jquery for a while on jsfiddle, there everything works fine, building cool quizzes and all, but when I tried to actually create a directory, reference the jquery library and my javascript file, nothing works, even the below code, when saved as an HTML file doesn't work. I just paste it into notepad and save it as html, when I open it with it doesn'T work.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
window.onload = function() {
var myDiv = document.getElementById('#div');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
Use this as starting point:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>webpage</title>
<script type="text/javascript">
$(document).ready(function () {
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
});
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
Another approach that doesn't rely on JQuery but on pure, vanilla javascript.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
document.body.onload = loadSite;
function loadSite() {
var newDiv = document.createElement("span");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent);
myDiv.appendChild(newDiv);
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
You can find the full javascript sample as well as more information here, on the document.createElement MDN pages.
document.body.onload = addElement;
var my_div = null;
var newDiv = null;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
Trying to achieve a Jquery print template (C# ASP.net) which gets my map from my Default.aspx and appends it to a print page (Print.htm) whereby I can edit the HTML. so far...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>
<script type="text/javascript">
$(document).ready(function() {
$("#Printbtn").click(function() {
var mapObj = $("MapCell_Map1");
var mapHtmlStr = mapObj.html();
mapHtmlStr = mapHtmlStr.replace(/CURSOR: crosshair; /g, "");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].keyFocus=true;", "");
$.ajax({url:"print.htm", context: document.body,
success: function(response){
var printDoc = $(response);
printDoc.find("#mapPanel").html(mapHtmlStr);
var pwin = window.open("Print.htm");
var pdoc = window.document.open();
pdoc.write(printDoc.html());
pdoc.close();
});
return false;
});
});
</script>
Doesn't fire, just posts back after the button click...
<asp:Button runat="server" id="Printbtn" Text="Print" Forecolor="white"/>
Print.htm page...
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="MapPanel">
</div>
</body>
</html>
If the Html you want to add is static you could load a separate Html file into memory and then add the dynamic Html to the hidden div before writing contents to the new window
jQuery Example (Untested):
function printmap() {
var mapObj = $("#Map1");
var mapHtmlStr = mapObj.html();
// snip - do string replacements as shown in question
$.ajax({url:"print.html", context: document.body,
success: function(response){
var printDoc = $(response);
printDoc.find("#mapPanel").html(mapHtmlStr);
var pwin = window.open("#");
var pdoc = window.document.open();
pdoc.write(printDoc.html());
pdoc.close();
});
}
Further non-jQuery examples of loading Html File in Javascript are shown in this post: