I have an ASP.NET web application with a jw player embedded inside
I have this function that calls the player. It loads, but it doesn't play the video.
function watchMovie() {
$("#vidRecorderHolder").html("<span id='vidRecorderDIV'></span>");
var flashvars = {};
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/flv:streams/vid_undefined.flv";
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
flashvars.bufferLength = 2;
flashvars.autostart = "false";
var parameters = {};
var attributes = {};
attributes.id = "audioPlayer";
attributes.name = "audioPlayer";
swfobject.embedSWF("jwplayer/player.swf", "vidRecorderDIV", "400", "320", "11.2.0", "scripts/expressInstall", flashvars, parameters, attributes);
}
For the first two commented-out lines designating the file, it gives me a "not found" error, but as it is now, the player only has a "play" symbol, but pressing it does nothing.
\ is an escape character, so I figured I'd put double slashes there, because when I viewed the page source with Chrome, it omitted the characters.
Now the page source reads
<param name="flashvars" value="file=C:\Red5\webapps\irreducibleVideoRecorder\streams\vid_undefined.flv&bufferLength=2&autostart=false">
Which still looks weird, but I'm not sure if that's relevant or not
I can confirm that the file is in the directory, and is playable.
Page source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA2NTIwMDgwNw9kFgJmD2QWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhZGQlAX0mmeHCCAuOdpcUwBxGH14XJq01zIbI4uCjZlatCw==" />
</div>
<script src="/WebResource.axd?d=MJP5xkYPuyWBAjVU2xsV-Ap2JP1L220SBXlo3NjcDd8nogK0ORiSjVtryfppfDDGc0ng66U7H1aIS7AXhxSYzmap9_sZlZB7JlPbjfVnsV41&t=635067596440015508" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwL3msvyAgKbwpb7BgKQ27PvDeRlS3bV+I+t0mZfoGe3YHVdQS6I+/ddesy6Gg5KpxvT" />
</div>
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
[ Log In ]
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=T_8NFTKgMGpmwN-MxtBGLhNPWQQCQCTOa8uoBDlXGQ-NVWkd3uGFEJgng62cCcewoNt4jyQGp3B6P2tEJPk51WuRKvO1gE1qzDp5lWaAI9c1&t=635067596440015508" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<input name="ctl00$MainContent$File1" type="file" id="MainContent_File1" />
<input type="submit" name="ctl00$MainContent$b1" value="Upload" id="MainContent_b1" />
<link href="vid.css" rel="stylesheet">
<object width="400" height="400">
<embed src="commercialtribe.swf" type="application/x-shockwave-flash" width="400" height="400" allowscriptaccess: "always" name="vidRecorder" Attributes.name="vidRecorder"/>
</object>
<input type="button" value="next" onclick="DoNext()" />
<input type="button" value="watch" onclick="watchMovie()" />
<img src="" id="imagebox" height=400 width=400/>
<input type="hidden" name="ctl00$MainContent$fetch" id="MainContent_fetch" />
<div id="vidRecorderHolder"><span id="vidRecorderDIV"></span></div>
<script type="text/javascript">
var index = 1;
document.getElementById("imagebox").src = "./Data/image1.png";
function DoNext() {
var get = document.getElementById('MainContent_fetch').value;
var getInt = parseInt(get);
if(index<getInt){
index++;
document.getElementById("imagebox").src = "./Data/image"+(index)+".png";
}else{
index=1;
document.getElementById("imagebox").src = "./Data/image1.png";
}
thisMovie("vidRecorder").addTimeStamp();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
var timeArr = Array();
function timeArray(x) {
alert("Your time array is " + x);
x = timeArr;
}
function watchMovie() {
$("#vidRecorderHolder").html("<span id='vidRecorderDIV'></span>");
var flashvars = {};
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
//flashvars.file = "rtmp://localhost:5080/irreducibleVideoRecorder/flv:streams/vid_undefined.flv";
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
flashvars.bufferLength = 2;
flashvars.autostart = "false";
var parameters = {};
var attributes = {};
attributes.id = "audioPlayer";
attributes.name = "audioPlayer";
swfobject.embedSWF("jwplayer/player.swf", "vidRecorderDIV", "400", "320", "11.2.0", "scripts/expressInstall", flashvars, parameters, attributes);
}
</script>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
I found the solution.
I replaced
flashvars.file = "C:\\Red5\\webapps\\irreducibleVideoRecorder\\streams\\vid_undefined.flv";
With this:
flashvars.file = "http://localhost:5080/irreducibleVideoRecorder/streams/vid_undefined.flv";
Before the absolute file-system path, it was previously rtmp://, and that didn't work, but then when I changed it to http, then it worked.
I was going off this tutorial, but perhaps I don't have an rtmp server. I thought Red5 was one, but now I see it only supports it.
Related
Here is the JS code:
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f1").value = "country2";
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
How to get the result in separate text box when mouse is hovered over the image of a country flag.
I want only the output on which mouse is present.
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#flag1").mouseover(function() {
$("#f1").val("country1");
});
$("#flag1").mouseleave(function() {
$("#f1").val("");
});
$("#flag2").mouseover(function() {
$("#f2").val("country2");
});
$("#flag2").mouseleave(function() {
$("#f2").val("");
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="images/banner1.png" id="flag1">
<img src="images/mobile.png" id="flag2">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
Hi and welcome to Stackoverflow, i think this could be a more generic solution for you:
function flag(element) {
document.getElementById(element.getAttribute('data-target')).value = element.id;
}
function clean(element) {
document.getElementById(element.getAttribute('data-target')).value = ''
}
img {
width: 150px;
}
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country1" data-target="f1" onMouseOver="flag(this)" onMouseOut="clean(this)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country2" data-target="f2" onMouseOver="flag(this)" onMouseOut="clean(this)">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
onMouseOver
function flag(id){
document.getElementById("f1").value = id;
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src = "flag.js"></script>
<script src = "C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel = "stylesheet" text = "text/css" href = "flag.css">
</head>
<body>
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag1.png" id = "flag1" onmouseout = "clean()">
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag2.png" id = "flag2" onmouseout = "clean()">
<form action = "#" method = "GET">
<input type = "text" name = "Flag1" id = "f1">
<input type = "text" name = "Flag2" id = "f2">
</form>
</body>
</html> onmouseover="bigImg(this)"
How is the structure of you project?
flag.js has to be in the same folder that index.html. Also link your javascript scripts at the end of the body.
And then you have a couple of errors with the document.getElementById, you are using the wrong ids.
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f2").value = "country2";
}
function clean(){
document.getElementById("f1").value = "";
document.getElementById("f2").value = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
</body>
</html>
you can use o onmouseover = "flag()" the parameter this.id like
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag(this.id)" onmouseout = "clean()">
and after make a if to put the value
if (parameter == flag'){
put one flag
}else{
put the other flag
}
You need to pass your event or this inside of onmouseover and onmouseout event
You can find the textfield by using document.querySelector() and set value inside of onmouseover/onmouseout
You can get the you target attribute value using getAttribute() method.
DEMO
function flag(tag) {
document.querySelector(`[name=${tag.id}]`).value = tag.getAttribute('value');
}
function clean(tag) {
document.querySelector(`[name=${tag.id}]`).value = '';
}
<img src="C:\Users\DELL\Desktop\flag1.png" value="Country 1" id="flag1" onmouseover="flag(this)" onmouseout="clean(this)">
<img src="C:\Users\DELL\Desktop\flag2.png" value="Country 2" id="flag2" onmouseover="flag(this)" onmouseout="clean(this)">
<form action="#" method="GET">
<input type="text" name="flag1">
<input type="text" name="flag2">
</form>
I have a partial view where I want to reload certain <div> tag based on successful response. I am using .filter to get specific tag but it is not working. Based on other stack-overflow articles and google, this should work but not in my case.
My objective is, out of AJAX response, extract specific div tag and reload the view.
AJAX:
$.ajax(
{
url: '/MyUrl',
success: function(response)
{
updateOrderStatusContent(response);
}
});
this.updateOrderStatusContent = function (markup) {
alert("markup " + markup); // This returns HTML.
var $response = $(markup); // Creating jQuery object from HTML response.
// Option-1 = Get text
var getSpecificText = $response.filter('#delivery-status-update').text();
alert(getSpecificText); // This is empty.
// Option-2 = Get HTML
var getSpecificHtml = $response.filter('#delivery-status-update').html(); // to get HTML
alert(getSpecificHtml); // This is empty.
// Option-3 = Here I tried output the content of #delivery-status-update in new <div> which is also not working.
$('#delivery-status-updated').html(jQuery(markup).find('#delivery-status-update').html());
};
markup output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content='IE=Edge' http-equiv='X-UA-Compatible' />
<script src="/Scripts/S2/console.js"></script>
<!--[if IE]> <script src="/Scripts/S2/html5.js"></script>
<script src="/Scripts/S2/json2.js"></script>
<![endif]-->
<title></title>
<link href="/Content/S2/menu.css" rel="stylesheet" />
<link href="/content/themes/stwo/jquery-ui.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-png" href="/Branding/Snapfinger/favicon.png" />
<link rel="apple-touch-icon" href="/Branding/Snapfinger/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Branding/Snapfinger/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Branding/Snapfinger/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/Branding/Snapfinger/touch-icon-ipad-retina.png">
<link rel="stylesheet" href="/Branding/Snapfinger/Snapfinger.css" />
<!--[if IE]><link rel="stylesheet" href="/Branding/Snapfinger/ie.css" /> <![endif]-->
</head>
<body>
<header class="header" id="header"> Skip to content
<div class="header-wrapper">
<div class="logo" id="logo" aria-label="Zaxby's logo" itemscope itemtype="https://schema.org/Organization" tabindex="0"> <img itemprop="logo" alt="Zaxby's logo" src="/api/content/image/119/7/200/200"></div>
<input type="hidden" id="restaurantId" value="9018" />
<input type="hidden" id="menuType" />
<input type="hidden" id="unitNumber" value="198" />
<input type="hidden" id="currentUtcTime" value="2018-04-24T19:27:29.2451514Z" />
<div class="restaurant-info">
<h1 class="title" id="title">Zaxby's</h1>
<meta itemprop="brand" content="Zaxby's" />
<meta itemprop="menu" content="https://local.kiofc.com/o/Restaurant/9018" /> <span itemprop="geo" itemscope itemtype="https://data-vocabulary.org/Geo"><meta itemprop="latitude" content="34.0756282" /><meta itemprop="longitude" content="-84.6527738" /> </span>
<div class="restaurant-name" itemprop="name">Zaxby's</div>
<div class="store-name" itemprop="name">ACWORTH_00198</div>
<ul id="restaurant-address" class="address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<li class="street" itemprop="streetAddress" tabindex="0">3511 BAKER RD</li>
<li class="city" itemprop="addressLocality" tabindex="0">ACWORTH</li>
<li class="state" itemprop="addressRegion" tabindex="0">GA</li>
<li class="zip" itemprop="postalCode" tabindex="0">30101</li>
<li class="country" itemprop="addressCountry" tabindex="0">US</li>
</ul><a title="View location on google maps" class="map" itemprop="map" target="_blank" href="https://maps.google.com/maps?client=gme-snapfinger&channel=SnapfingerMobileViewMap&oi=map&q=3511+BAKER+RD,+ACWORTH,+GA+30101"> View Map </a>
<div class="phone" itemprop="telephone"> <a title="Call 678-574-0400" href="tel://678-574-0400">678-574-0400</a></div>
<input type="hidden" id="LocationDescription" value="ACWORTH - BAKER RD" />
</div>
</div>
</header>
<div class="page" id="delivery-status-bar">
<div class="content">
<section class="delivery-status" id="delivery-status-bar-section">
<div id="delivery-status-update">
<h3 class="summary-title">Delivery Status</h3>
<div id="order-id">
<h3 class="summary-title" tabindex="0">Order Confirmation : 97140987</h3></div>
<ol class="progress-tracker" data-progress-tracker-steps="4">
<li class="progress-tracker-done">Received</li>
<li class="progress-tracker-done">Kitchen</li>
<li class="progress-tracker-todo">In Transit</li>
<li class="progress-tracker-todo">Delivered</li>
</ol>
</div>
</section>
</div>
</div>
<footer class="footer" id="footer">
<div id="copyright-version">
<div id="copyright-info" tabindex="0"> © Copyright 2018 Tillster, Inc. All rights reserved.</div>
<div id="version-info" tabindex="0"> v 1.0.0.21003</div>
</div>
</footer>
<input id="concept-key" name="concept-key" type="hidden" value="Snapfinger" />
<input id="concept-id" name="concept-id" type="hidden" value="-1" />
<input id="is-vanity-url" name="is-vanity-url" type="hidden" value="False" />
<input id="is-on-premise" name="is-on-premise" type="hidden" value="False" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.1.js"></script>
<script src="/Scripts/S2/modernizr2.7.1.js"></script>
<script src="/Scripts/S2/jquery.lazyload.min.js"></script>
<script src="/Scripts/jquery/getscriptonce/jquery.getscriptonce.js"></script>
<script src="/Scripts/handlebars.js"></script>
<script src="/Scripts/S2/utility.js"></script>
<script src="/Scripts/S2/loginRegister.js"></script>
<script src="/Scripts/S2/analytics.js"></script>
<script src="/Scripts/S2/orderStatus.js"></script>
<div id="dialog">
<p id="dialog-message"></p><img id="dialog-image" alt="dialog message" src="#" /></div>
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PC8WMW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-M84GGD');
</script>
<script type="text/javascript">
s$.analytics.getOrderLevelData("pageLoad")
</script>
</body>
</html>
What am I missing here? Do I need to create another partial view to achieve what I want?
Basically you need to use .find() instead of .filter().
var markup = '<!DOCTYPE html><html lang="en"><head> <title></title></head><body><header class="header" id="header"> </header><div class="page" id="delivery-status-bar"><div class="content"><section class="delivery-status" id="delivery-status-bar-section"><div id="delivery-status-update"><h3 class="summary-title">Delivery Status</h3><div id="order-id"><h3 class="summary-title" tabindex="0">Order Confirmation : 123</h3></div><ol class="progress-tracker" data-progress-tracker-steps="4"><li class="progress-tracker-done">Received</li><li class="progress-tracker-done">Kitchen</li><li class="progress-tracker-done">In Transit</li><li class="progress-tracker-todo">Delivered</li></ol></div></section></div></div><footer class="footer" id="footer"></footer></body></html>';
var $response = $(markup); // Creating jQuery object from HTML response.
var $delivery = $response.find('#delivery-status-update');
var getSpecificText = $delivery.text(); // to get text
var getSpecificHtml = $delivery.html(); // to get HTML
console.log(getSpecificText);
console.log(getSpecificHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am able to download content of HTML page but page contain image of QR code, which is not visible in my downloaded image instead of that I am getting blank space
My HTML and jQuery code is in the following fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="content">
<form method="post" id="qrForm">
<center>
<h4 style="color:red">Generate QR Code using Google Chart API</h4>
<br>
<b>Type Website URL:</b>
<!--Create TextBox Code-->
<input type="text" id="QRCode" value="https://www.google.com" size="25">
<br><br>
<h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />
<img id="embedImage" />
<img id="embedImage" />
<!--<!--<!-- Create Button Code-->
<center>
<input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
</center>
</center>
<center>
<a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
<br />
<!--Print Preview Img In this Div-->
<h3>Preview :</h3>
<div id="previewImage">
</div>
</center>
</form>
</div>
</div>
<script>
//Generate QR Code Function
function generateQRCode() {
this.qrImage.style.display = 'none';
//GoogleAPI + TextBox Value= Create QR Image.
this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display = 'inline';
//Convert Html To Png
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
$("#QRCanvas").append(canvas);
getCanvas = canvas;
}
});
//jQuery: Download HTML to IMAGE
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
$("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
//<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
});
}
</script>
I found your html a bit complicated so I changed it to fit with my style. I did not use html2canvas, I was doing some annoying stuff for some reason, so I used another library that does the same thing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Download QR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
</head>
<body>
<div style="background-color:lightgrey; padding: 25px;">
<h3>Generate QR Code using Google Chart API</h3>
<form>
<label for="QRCode">Type url:</label>
<input type="text" id="QRCode" value="https://www.google.com">
<button type="button" id="btn-generateQR">Generate QR</button>
</form>
<div id="displayImg"> </div>
<button id="btn-downloadQR" style="display:none;">Download QR</button>
</div>
<script>
$(document).ready(function () {
$('#btn-generateQR').click(function () {
let inputValue = $('#QRCode').val().trim()
$('#displayImg').html(
`
<h4>Output QR Image:</h4>
<img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
`
)
$('#btn-downloadQR').show()
})
$('#btn-downloadQR').click(function () {
domtoimage
.toJpeg(document.getElementById('linkQR'), {
quality: 0.95
})
.then(function (dataUrl) {
let link = document.createElement('a')
link.download = 'imageQR.jpeg'
link.href = dataUrl
link.click()
})
})
})
</script>
</body>
</html>
TRY THIS
$('#btn-generateQR').click(function () {
html2canvas(document.getElementById('displayImg'), {
onrendered: function(canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data,
width: 500,
height:400,
}],
pageMargins: [ 50, 20, 20, 10 ]
};
pdfMake.createPdf(docDefinition).download("budget.pdf");
},
logging: true,
useCORS:true,
});
});
I've tried to apply similar code to an existing Stackoverflow topic which applies the following code: http://jsfiddle.net/zsNF5/4/
The problem is: I get the message Uncaught ReferenceError: ic1 is not defined when I click my button.
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.no = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
this.yes = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}
var ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);
The variable ic1 is defined in the code, that's why I'm confused.
This is my html:
<!DOCTYPE html>
<html>
<head>
<title>Face or no face</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="javascript.js"></script>
</head>
<body>
<div class="title">
<h1 >IS THIS A FACE?</h1>
</div>
<img class="photo" src="images/test.jpg">
<div class="container">
<form method="post" action="store.php">
<input type='button' class="button1" value='NO' onclick='ic1.no("container")' />
<input type='button' class="button2" value='YES' onclick='ic1.yes("container")' />
</form>
</div>
</body>
</html>
I hope I'm clear as my JS skills are obviously very limited. Thanks!
You're using var keyword to define ic1. This limits it to the closest scope which might not be window. To define it as a global do
window.ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);
Where is your <img id='container' like in your example in the link?
This is the html code from the working example-
<img id='container' src="data:image/jpeg;base64,/bla bla bla base 64" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />
And this is your code with class and not id
<div class="container">
And in your function you are looking for var img = document.getElementById(imgId);
So try to replace class with id like <div id="container">
I'm using ASP.NET and I have a link which has both onclick and onserverclick. Both are important, but I want the onclick to prevent the onserverclick running if at all possible.
Here is the item I'm playing with at the moment:
<ul class="clickables">
<asp:Repeater ID="MenuRepeater" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<li class=" <%# ((DataRowView)Container.DataItem)["CSSClass"]%>"
style="background-color: <%# ((DataRowView)Container.DataItem)["BackgroundColour"]%>">
<a id="A1"
runat="server"
onserverclick="LinkClick"
onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
</a>
<%# ((DataRowView)Container.DataItem)["DisplayName"]%>
</li>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</ul>
Here's the JS I'm expecting to stop the postback:
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
Am I missing something? Is this even possible? I know that I can prevent a normal postback by returning false in onclick, but can I stop the onserverclick?
UPDATE
After debugging a little more (been away from webdev for a while...), the JS function isn't firing...
UPDATE 2
Here is the full rendered page source:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="YkYtJBVbLo0YmPPXHO5sO8FI5kAxszDeDe/bdeHgDCummp4bGaZKj3W6ihINzdq9PFQT6uCqE2eRXLhF1OEeKh8qJgRJnXWiisrDZ2ivw6JISfxuhIFP1VKKrZET9NIJqrJKpS2namuXzQL+yDJG8WGGvDrQ7oEBMDT6seSXr3zoowlA6tB4+gdbsPJ4utvNKCrhhTImpeXTzeaYCNV3t8QzsiGA7wK51Pgqo9vFQ6LH31NRYJEJ/yfhnnUcoSG6YR8SHNp+j7cGMVMoZPpgLu4bcMNSixHjGW+yin4YN7sf4wtXqQHIGFOwbSHM0VcAxd3is4lUJVYMoBH4pqAjjgBZMuaXPHwDfmZZk3Dk8feyn2btCh0nwXUrkAiAf8n1+a3hs9VfR0JeNs6x0WVzlMxgm4JFzIkthXtJ+632NaNh4rJyvib+j/Vs+HjtRFQXaIDj1fXp2KFniReSjZANiBaepyJqozJghhYnEB8MP1ZOePmrrbLCxUl1MD5Wn2bgFKkNSK25NC1hQoXdnZbEeA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="zxCYbgjQBAQXVsCg6EwWqRNbeqa/5PzOIgwdhVB5mEasbEk06ik+VT9njAhsM8vF0ymfwdsNmbuX2R7iMJjdpqLMAVABvva4eorpK2PdajpD+g2RzFXI5SEEG9VjwQUXf3kKgb0KnPjWGYQdgZHGDQ==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for a question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return LinkClick('True')" customid="80f03602-cb67-4d46-99ea-4200459e6a48" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')">
</a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return LinkClick('False')" customid="91f76613-ecaa-47df-a5d6-5a921935b1f9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')">
</a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function(clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function() {
var link = this.getElement('a');
if(this.getFirst('a')) {
window.location = link;
}
});
});
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
</body>
</html>
Edit 3
Even when I do:
onclick='return LinkClick(False)'
OR
onclick="return LinkClick(False)"
I still get:
onclick="return LinkClick('True')"
Edit 4
Here is the current rendered source:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ATtNaDBRU6vswFif62qens2E35fTb32GNoGWb9g2UFbg0Pli0sVNrzGeLKgFI41ojer32c0dUpY2F54DIn0L0dQgi7XFwJCum71RivEO8THI+xsj3ACip5IKj0hPTlB0mDtjRUcRAPxTUDJlxNB2ZvpP1nAR8i7b/tsSrF5sP3Xx3JOb59POn4nxVDOTm80j0OAolK09Mo0leI9EzyQWbpig8Q8FaT7eKzCoJ1Z40TNWX24ZKsxsND4ebBfakOnI8qd2lNdBcJ9FrhBCTEJDCQksXs/rhyJXkksaonPGNFdtWMpiIyQDGkT0V6Q+CPt5fFnZZp4fbKZyRVMcs6XdxwHG3qTYJJgnDbfSvnswKce7la8JVSxoWy+dufG6gxIfJK2rKw0mhfQ21y90ZtkaKZ4CeZWB4TveHRhYJVlinC7bwXwKJGXhqcHJeJ0IoinTS+ZgsbuJOo3zHCslpWThP+ib7IVpmFx+nluy31L65Zy7dVoSZeySboBq10C9e1D3Tm0K5Pvcn/ovG7NmRupa+vgrcYEWQgb6QKym1aartoVmtPm1dWZiJzwA9X7j7Wn5mus2XrE5SXqbvp0bANO1rQ==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vi/Uef51SWAjwpFRuN3fwE5Y2FDB84KMHL6HjRIbWSKMEsSrg2RiGbteExTKFCbKhGe16A7xsn6DzMULMalMxqrg2yi9wkWZb0w2ifgCG6mmU0fH3V6zELQeACrtHDQ+4YlxeZ8k7HfGC592ammq3g==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for the question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return LinkClick(True);" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')">
</a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return LinkClick(False);" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')">
</a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function(clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function() {
var link = this.getElement('a');
if(this.getFirst('a')) {
window.location = link;
}
});
});
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
</body>
</html>
Update 5
So if I leave the method and just return true/false it should stop the postback? This doesn't work (more rendered source).
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<script>
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="PiZp7nhFhCoiWV3slT5szv5Z5GAkeDWYHj7QpAPmnwSoKxWg6Zm9HTQGkZXS2Osddx6KwS0eGu/ZMaLjgxVBm1U+Eszzf/OjmAbB78jPAeSwW8GwXRUUp984a7cPZc9cYajKHkhBVtuuALV6HSsT3oRzEPlziohjgWGiV8HFAEOd1CWTj+RAC3B/mWcmrFcexzpR1XhQgnV5LQC7GplUB9Y2E/rb8MFQHfYsRxG5GjWJ5zqe51FhwstLL/dbSklaBkRlFHyFyZNUeA74My6AHCOAWbUjZ42sVcMjaSVnM1zZsxQtSG8+UdbshaLZ9Gz5SOB0Vq4fS8J+TrUlswsSLqQ77Q+m2ouZG+jhPf7jKC59KvIYGlKHkgYVqCvhqhkIG91xg7k9M3f5KAf0yOB6yaesVxnWBCC+UQWcKRePIV9tq2eE8C+8F+rLCPJ6RXgUzpC+DvVmlQMHzmiXWLehtymb2HRX4O/2RUJxLDlVP/8=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="aQDXp34k4YJiEBt3URBFL0do/c8NXsEmuBtFz8JLRhtXerYXPFYRZmyXIpCef68aO7itJ4EUwQ9eXl2KkxDndTmS4149nNN8BX3AoFLDgB0b4w6cNsn3nzoZ3ENnU4vExyeHdXVJyyVwmZruhoQ7GA==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for a question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return true;" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')"></a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return false;" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')"></a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function (clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function () {
var link = this.getElement('a');
if (this.getFirst('a')) {
window.location = link;
}
});
});
</script>
</body>
</html>
You should not do onclick=<%# .... %>, because that automatically encodes output.
It should be something like:
<a onclick="javascript:return LinkClick('<%# ((DataRowView)Container.DataItem)["Postback"] %>')" href="something"></a>
Your output return LinkClick('True') is not even javascript call. That's why you don't see any error.
There is usefull link about asp.net inline expressions:
http://support.microsoft.com/kb/976112
Thank you all so much for your help. The issue was .NET's XSS stuff (built in, automagically screwing with you via the config file..)
Once I removed this line it worked, I guess the way I'm getting my server variable into the JS makes my site think it's being attacked... It's going to be a private site anyway, so XSS is being turned off. If anyone can find a better solution (safer) then please post and I'll try it out...
<httpRuntime requestValidationMode="4.5" targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
^^ Remove that line from Web.config (at your own peril)...
Have you checked to see that parameters[0] == "False"? Could be a string comparison issue? Or it could be that your text is actually outside of the link tag:
<a id="A1"
runat="server"
onserverclick="LinkClick"
onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
</a>
<%# ((DataRowView)Container.DataItem)["DisplayName"]%>
should probably be:
<a id="A1"
runat="server"
onserverclick="LinkClick"
onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
<%# ((DataRowView)Container.DataItem)["DisplayName"]%>
</a>
If I understood your question, then suppressing the onserverclick because of something that happended in the onclick event is quite simple:
<span class="psw">Forgot password?</span>
This is an actual forgot password link on one of my pages. The code behind ForgotPassword() method specified in the onserverclick event is never triggered unless a valid email address is present.
The 'checkForRequiredEmailAddress' method checks for its existence, structure and correctness and then returns true or false depending on the outcome of the checks.
I know your question says that you tried this, but it is definitely working for me so I can only assume it is something silly. Maybe the missing semi-colon in the click event makes a difference.