Going slightly insane here, I'm wondering why a simple
console.log("test")
isn't appearing in my console. My code is below. I also tried
$(function() {
console.log("test")
});
but that didn't do it either. Isn't the purpose of the above and my function below to wait until the page loads and then do the function? No matter where I put the code - header, body...it's not working.
<!DOCTYPE html>
<html>
<head>
<title>jQM Autocomplete</title>
<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2.js"></script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
</div>
</div>
<script>
$(document).on("pageshow", "mainPage", function() {
console.log("test")
});
</script>
</body>
</html>
The console is ready way before the page so you won't get anything by using document.ready callback. Chances are something has overridden your console. To find out if that's true, inspect your console object by simply typing console into your console. In Chrome, it should return something like this:
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
If that proves true, you need to find where in your code is the console redefined. Also, you might want to test your code in another browser - perhaps you have an extension or something that's blocking the console for some reason.
But before everything, please double-check your code for syntax errors.
Also, make sure you've set your console to show logs (the filter button, it's next to the clear console button).
The problem was to do with my console settings. In console there's some grey buttons along the bottom - All, Errors, Warnings, Logs, Debug. Well, Errors was selected, for some reason. So I was getting nothing in Console but errors. Click 'All' and it works properly.
Having said that, my code was also missing that # before mainpage, as highlighted by null.
Related
I am experimenting with nicEdit, a WYSIWYG editor (http://nicedit.com/)
It is quite straightforward to use. Need to add just the following two lines to code
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
My html is
<!DOCTYPE html>
<html>
<head>
<!-- add list of tags here in meta data -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="index.css">
<title>some title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<textarea id="d" type="text"></textarea>
<textarea id="s" type="text"></textarea>
<textarea id="h" type="text"></textarea>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas)</script>
<-- ISSUE HERE IF I USE () -->
</body>
</html>
It seems I can pass configuration options to the editor - http://wiki.nicedit.com/w/page/515/Configuration%20Options
I want to call the allTextAreas by passing a configuration object to it. But when I call the allTextAreas by adding ({someProperty:someValue}), I get error in the console
nicEdit-latest.js:8 Uncaught TypeError: bkLib.domLoad[i] is not a function
at HTMLDocument.domLoaded (nicEdit-latest.js:8)
domLoaded # nicEdit-latest.js:8
Why does using () give error?
It looks it needs a function, try wrap it:
<script type="text/javascript">bkLib.onDomLoaded(() => nicEditors.allTextAreas({someProperty: someValue}))</script>
Explain
bkLib.onDomLoaded accepts a callback function.
nicEditors.allTextAreas works because it's a function, but you will not be able to pass custom argument when it's get called.
() => nicEditors.allTextAreas({someProperty: someValue}) works because it wraps nicEditors.allTextAreas in another function, and when it's get called, the {someProperty: someValue} is passed into it.
nicEditors.allTextAreas({someProperty: someValue}) doesn't work because it calls that function immediately and resolves whatever it returns and passed it into bkLib.onDomLoaded. Which I assume is not what you wanted.
I am not sure what I am doing wrong but in my application when I try to do something like
$('#root').text();
I get
VM269:1 Uncaught TypeError: Cannot read property 'val' of null(…)
I have no clue why as I am referencing jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>Document</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--materialize does not understand jquery if I use it as import-->
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
I am using reactjs but I don't think that should be a problem and the fact that I have no problems with firebug in firefox when I do the same command.
Edit
My bad $('#test') is something rendered into "root" div but same issue. So I just updated my query to do $('#root').text()
but doing $('#root') works it finds the element and like I said in firebug everything works.
You are trying to get the value from a tag with id='test' and you don't have one in your HTMl.
If you have used $('#root').val() it'd work.
Helpful selector link
I believe you want the value of id="test". However, I do not see id="test" on your html file that you have included. Furthermore, you can also try $('#test').text() that will grab html text.
I can not connect an external JavaScript file to my html page.
When I put the script in the page with the tag it all works
but when I insert it in an external file is not working, what is wrong?
<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>
<body>
<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>
<div id="info">
<ul class="infomenu">
<li class="newsletter">NEWSLETTER</li>
<li>PRIVACY</li>
<li>CONTACT</li>
<li>FOLLOW US</li>
</ul>
</div>
</body>
</html>
Javascript
//Jquery Info
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Welcome</title>
<link type="text/css" href="styles/default.css">
</head>
<body>
<!-- HTML Content -->
<script type="text/javascript" src=".."></script>
<script>
// Javascript inside this file
</script>
</body>
</html>
The link- and script part is not necessary, but you mostly will need it so I put it in the right order in.
Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.
If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.
But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.
<script>
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
</script>
I've made my web application and did hardwork to make this almost lost 180 days to make this. All my application is made into JAvascript. But i could see, many smart persons still can steal my codes. Can you please help me? How to encrypt in such a way that my code will never show into Inspect element and View Source? Is there any Algorithm?
Here is my code When i see into inspect Element and View Source:
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jplayer.flat.css" type="text/css" />
<link rel="stylesheet" href="css/app.v1.css" type="text/css" />
<link rel="stylesheet" href="css/load_bar.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/load_bar.js"></script>
<script src="js/app.v1.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/music_list.js">
</script>
--------
--------
--------
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="some-content-related-div" id="inner-content-div">
<section class="vbox">
PLEASE HELP, How to Encrypt it?
HELP WOULD BE APPRECIATED!
The Javascript code is executed in the browser, i.e. on the client side, which means it must be available not-encrypted on the client side.
The "best" you can do is probably to minify it, which will make it harder to understand it -- and a bit of obfuscation might do too -- even if someone really motivated will still be able to read it.
See for instance the YUI Compressor , which can both minify and obfuscate JS code.
Simple answer: You can't.
The only thing you can do is to uglify everything so it's not easy to read anymore, but anything that is sent to the browser is also theoretically visible to the user.
It is not possible but you can minify it using many compressors which are available online.
You can surely do this. You can disable the inspect element functionality by adding the code snippet below :-
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
Hi i am trying to display to contents of this test.html file by ajax and the jquery get function as an alert in index.html. The alert out side the .get works.
test.html
<p>herro my name is dog</p>
index.html
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<script>
alert("data");
$.get("test.html", function(data){
alert(data);
});
</script>
</body>
</html>
Open Developer tools by hitting F12. This should work in IE8+, FF, and Chrome.
View the Console and it should show you the error and point to an offending line of code. This should give you the information you need to fix or do further research.
It works for me in IE11.
Use a debugger to first confirm that jQuery is loading correctly. You can also do this with code:
alert("jQuery loaded OK? " + $ && typeof($) === 'function' && $ === jQuery);
Apologies for my previous answer, I was alluding to something and should have just been a comment. Also this answer is based on a hunch I have about your situation. If you try:
$.get("test.html", function(data){
alert(data);
}).fail(function() {
alert('ERROR');
});
You should at least have something returned to you even if it's not what you expected. If you then get your ERROR message you can then check your browser's console. You may see something like the following.
I am suspecting that you are not running this within a web server on your local computer so "test.html" cannot be accepted. You may want to check out a project such as WAMP if you are on Windows or MAMP if you are using a Mac.
If the message isn't like the one shown then update us on what you are getting.