It behaves inconsistent with respect to browsers.
Google Chrome: Can invoke first one but cannot invoke another one.
$(function () {
$("div[href]").click(function (event) {
debugger;
window.protocolCheck("abcd:",
function () {
console.log('err1')
}, function () {
console.log('succ1');
window.protocolCheck("xyz:",
function () {
console.log('err2');
}, function () {
console.log('succ2');
});
});
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Custom Protocol Detection</title>
</head>
<body id="abcd">
<h1>Click one of these labels:</h1>
<div href="blahblah:randomstuff" style="background-color:aquamarine">
Non-exist protocol
</div>
<div href="mailto:johndoe#somewhere.com" style="background-color:aqua">
Send email
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://github.com/ismailhabib/custom-protocol-detection/blob/master/protocolcheck.js"></script>
<script src="example.js"></script>
</body>
</html>
I want to validate in user registry that some protocol exist.
If registry not found we download it if found we invoke next protocol.
Library https://github.com/ismailhabib/custom-protocol-detection/blob/master/protocolcheck.js
And for invoking can we use protocol check library.
The second callback is called on success. So, the first check fails, then the second check code will not be invoked.
Related
Why I am getting this error? I guess some of my HTML nodes are not created why I try to call the doSearch method. It's actually happening only second time I call this function.
I'm using React and calling this function inside componentDidUpdate lifecycle method.
Here is my HTML file where I load my script inside
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="//csr.inspsearchapi.com/lib/infospace.search.js">
</script>
<link rel="stylesheet" href="./static/style/styles.css" />
</head>
<body>
<div class="container"></div>
<script src = "bundle.js"></script>
</body>
Here is my function:
componentDidUpdate(prevProps) {
const signature = this.props.signature ? this.props.signature.response.data : '';
window.insp.search.doSearch({
query: this.state.searchText,
searchUrlFormat: this.state.searchText,
signature,
page: 1,
containers: {
'top': {id:'topResults'},
'related': {id:'relatedResults'},
},
});
}
I have been learning javascript and jquery for short period. I even know that the jquery is a library for the javascript. Now, I made a sample work on both and want to know the difference between the actions. Here is my code :
$(document).ready(function() {
$("#buttonOne").click(function() {
document.getElementById('paragraph').innerHTML = "You are yet to perform";
})
});
function checkButton() {
alert("Hello There");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="buttonOne" onClick="checkButton()">Click Me and Understand</button>
<p id="paragraph"></p>
index.html
<!DOCTYPE html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Wifi Wizard</title>
</head>
<body>
<br>
<br>
Start Wifi <input type="button" value="wifi" name="Wifi" id="wifi"/> <br>
Search Wifi <input type="button" value="search" name="Search" id="search"/> <br>
Scan Wifi <input type="button" value="scan" name="Scan" id="scan"/> <br>
<div id = "dataTable">
</div>
<input type = "password" name = "password" id = "passValue"></input>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
$(document).ready(function() {
$("#passValue").hide();
document.addEventListener("deviceready", onDeviceReady, false);
});
function onDeviceReady() {
$('#wifi').click( function()
{
try {
WifiWizard.isWifiEnabled(win, fail);
}
catch(err) {
alert("Plugin Error - " + err.message);
}
});
function win(e) {
if(e) {
alert("Wifi enabled already");
}
else {
WifiWizard.setWifiEnabled(true, winEnable, failEnable);
}
}
function fail(e) {
alert("Error checking Wifi status");
}
function winEnable(e) {
alert("Wifi enabled successfully");
}
function failEnable(e) {
alert("Error enabling Wifi ");
}
$('#search').click( function()
{
try {
WifiWizard.listNetworks(listHandler, fail);
}
catch(err) {
alert("Plugin Error - " + err.message);
}
});
function listHandler(a){
alert(a);
}
$('#scan').click( function()
{
try {
WifiWizard.getScanResults({numLevels: 1},listHandler1, fail);
}
catch(err) {
alert("Plugin Error - " + err.message);
}
});
function listHandler1(a) {
alert(JSON.stringify(a));
var network_array = [];
var content = "<table>"
for (i = 0; i < a.length; i++) {
content += '<tr><td><button onclick="clickWifi(\'' + a[i].SSID + '\');">' + network_array.push(a[i].SSID) + '</button></td></tr>';
}
content += "</table>"
alert(network_array);
$('#dataTable').append(content);
}
function clickWifi(ssid) {
alert("Hello");
var networkSSID = ssid;
$("#passValue").show();
var passWord = document.getElementById("passValue");
var config = WifiWizard.formatWPAConfig(networkSSID, passWord);
}
WifiWizard.addNetwork(config, function() {
WifiWizard.connectNetwork(networkSSID, connectSuccess, connectFailed);
});
}
For above scenario, I have a made a button to call its click function dynamically, so please help as I have no idea whether the button declared is correct or wrong.
Here I have made a click function using id in jquery and onclick function using javascript. But the alert first pops up and then the jquery does it's work. I would like to know why doesn't jquery go first. Please give a suggestion.
https://jsfiddle.net/m3prjL8q/
here is the answer to the question in the comments. As far as the original post goes, it was answered in the comments, there is no need to repeat that.
When you use $(document).ready(function(){}) what you are doing is actually creating an event listener that will 'trigger' once the document is ready and giving it a handler function. This is yourJQuery function in the example. If you declare a function within the handler, this function is not accessible to the native javascript outside of the handler.
function yourJQuery(){
function innerDeclare(){
alert("I cannot be accessed outside of yourJQuery function");
}
}
innerDeclare();
IF i understood your Question correctly you want to know why html onclick method runs before jQuery click method.
That is simply because sequence you are adding click event on element.
HTML onclick method does not wait for DOM to render and attach event directly to the element.
But your jQuery method waiting for for Dom to be ready then it goes and attach the click event to element.
Hence events are getting executed in sequence.
For better performance, use the native JavaScript. For faster development, use jQuery. Check the comparison in performance at jQuery vs Native Element Performance.
i've tried to write a simple youtube request to search video with youtube javascript api v3.
This is the source code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showResponse(response) {
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}
// Called automatically when YouTube API interface is loaded
function onYouTubeApiLoad() {
// This API key is intended for use only in this lesson.
gapi.client.setApiKey('API_KEY');
search();
}
function search() {
var request = gapi.client.youtube.search.list({
part: 'snippet',
q:'U2'
});
// Send the request to the API server,
// and invoke onSearchRepsonse() with the response.
request.execute(onSearchResponse);
}
// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
showResponse(response);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</head>
<body>
<pre id="response"></pre>
</body>
</html>
When i load this page on google chrome (updated), nothing happens, the page remains blank.
I have request the API Key for browser apps (with referers) and copied in the method gapi.client.setApiKey.
Anyone can help me?
Thanks
Try this example here
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Search API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// How to search through a YouTube channel aka http://www.youtube.com/members
google.load('search', '1');
function OnLoad() {
// create a search control
var searchControl = new google.search.SearchControl();
// So the results are expanded by default
options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
// Create a video searcher and add it to the control
searchControl.addSearcher(new google.search.VideoSearch(), options);
// Draw the control onto the page
searchControl.draw(document.getElementById("content"));
// Search
searchControl.execute("U2");
}
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
When you use <script src="https://apis.google.com/js/client.js?onload=onClientLoad" ..></script>
you have to upload the html file somewhere online or use XAMPP on your PC
To use html for searching YT videos, using Javascript on PC, as I know, we need to use other codings:
1- Use javascript code similar to this for API version 2.0. Except only the existence of API KEY v3.
2- Use the jQuery method "$.get(..)" for the purpose.
See:
http://play-videos.url.ph/v3/search-50-videos.html
For more details see (my post "JAVASCRIPT FOR SEARCHING VIDEOS"):
http://phanhung20.blogspot.com/2015_09_01_archive.html
var maxRes = 50;
function searchQ(){
query = document.getElementById('queryText').value;
email = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=50'+
'&order=viewCount&q='+ query + '&key=****YOUR API3 KEY*****'+
'&callback=myPlan';
var oldsearchS = document.getElementById('searchS');
if(oldsearchS){
oldsearchS.parentNode.removeChild(oldsearchS);
}
var s = document.createElement('script');
s.setAttribute('src', email);
s.setAttribute('id','searchS');
s.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
}
function myPlan(response){
for (var i=0; i<maxRes;i++){
var videoID=response.items[i].id.videoId;
if(typeof videoID != 'undefined'){
var title=response.items[i].snippet.title;
var links = '<br><img src="http://img.youtube.com/vi/'+ videoID +
'/default.jpg" width="80" height="60">'+
'<br>'+(i+1)+ '. <a href="#" onclick="playVid(\''+ videoID +
'\');return false;">'+ title + '</a><br>';
document.getElementById('list1a').innerHTML += links ;
}
}
}
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<input type="text" value="abba" id="queryText" size="80">
<button type="button" onclick="searchQ()">Search 50 videos</button>
<br><br>
<div id='list1a' style="width:750px;height:300px;overflow:auto;
text-align:left;background-color:#eee;line-height:150%;padding:10px">
</div>
I used the original code that Tom posted, It gave me 403 access permission error. When I went back to my api console & checked my api access time, it was expired. So I recreated the access time for the api. It regenerated new time. And the code worked fine with results.
Simply i must make request from a web server.
Thanks all for your reply
I'm using PhoneGap to develop an android app. in the index.html I load a js file like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/loading.css" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/cordova-2.5.0.js"></script>
<script type="text/javascript" src="scripts/readImages.js"></script>
<script type="text/javascript">
function onReadImage(event) {
//do something
}
document.addEventListener("onReadImage", onReadImage, false);
</script>
</head>
<body>
<!--
.....
-->
</body>
</html>
readImages.js
// Some codes
window.readImageEvent= document.createEvent("readImageEvent"); // line 4
readImageEvent.initEvent("onWeddingCakesRead", true, true);
//Some functions
readImageEvent.images = data;
document.dispatchEvent(readImageEvent);
but when I check LogCat, I see this error:
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 at file:///android_asset/www/scripts/readImages.js: 4
Any ideas?
finally I found out the problem.
I changed the below code:
window.readImageEvent= document.createEvent("readImageEvent");
to:
window.readImageEvent= document.createEvent("Event");
Because "readImageEvent" is not a proper event type. This link could be so useful
about this issue.
According to developer.mozilla.org
The createEvent method is deprecated.
I guess, you can try something like this:
var readImageEvent = new CustomEvent(
"onReadImage",
{
detail: {
images: data
},
bubbles: true,
cancelable: true
}
);
document.dispatchEvent(readImageEvent);
More information about usage, compatibility, etc can be found HERE
i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.