Whenever I call beautifyCode(), the formatting of the code does changes, but it all comes on one line with varying spaces... Is this how it works or am I doing something wrong? Also, how can I solve this as an issue?
Code:
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor");
// This function is called to beautify the editor's code
function beautifyCode()
{
beautify.beautify(editor.getSession());
}
Input:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<form action="shyam.php">
<input name="name" value="Shyam"/>
<input type="submit"/>
</form>
</body>
</html>
Output:
<html><head> <title>Hello World</title></head><body> <form action="shyam.php"> <input name="name" value="Shyam"/> <input type="submit"/> </form></body></html>
Please let me know if any more information is needed.
I solved the issue while trying to implement auto-complete for my editor.
You might need to import other scripts as well to ensure that the beautifier works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
The above script solved the issue for me.
Source: Autocompletion in ACE editor
Related
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
I am trying to add the below codes to Wordpress, however, wordpress always gives me error 404 whenever I try to update. I'm new to coding. So would appreciate some help.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
</head>
<body>
Code 1: <input type="text" id="code1">
<br>
<p id="code1ans"></p>
Code 2: <input type="text" id="code2">
<br>
<p id="code2ans"></p>
Code 3: <input type="text" id="code3">
<br>
<p id="code3ans"></p>
Code 4: <input type="text" id="code4">
<br>
<p id="code4ans"></p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
var code1 = document.getElementById("code1").value;
var code2 = document.getElementById("code2").value;
var code3 = document.getElementById("code3").value;
var code4 = document.getElementById("code4").value;
document.getElementById("code1ans").innerHTML = code1;
document.getElementById("code2ans").innerHTML = code2;
document.getElementById("code3ans").innerHTML = code3;
document.getElementById("code4ans").innerHTML = code4;
}
</script>
</body>
</html>
Wordpress uses the template hierarchy, so I'm guessing you want this code to execute on a specific page or perhaps you want it to run on every page load?
Wordpress uses a system of hooks called filters and actions to run things at certain times. One of them is https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts which allows you to load scripts. Here you can also add code run the script only on specific pages. You should add your script here based on the documentation.
Your question doesn't appear to specify where you are putting your code.
Thank you in advance for helping me with my issue. I was wondering if someone could explain this for me as i am self teaching about JavaScript JQuery. What i am trying to do is push a message into a variable that is in the parameters of a function. Then i want to display the message using the function by calling it back to the html file that i originally had. So i want write a message in my function and print to my html page. I think i maybe in the right direction here is my source code. I am trying to get use to write with external javascript files as i think it is much cleaner way of working with HTML, CSS3, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=".js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<form>
<input type="button" value="Click me" id="message "onclick="test();" />
</form>
</body>
</html>
External JavaScript file.
function test(message){
alert("Hello");
}
Use this.value to get the value of the input
<input type="button" value="Click me" id="message" onclick="test(this.value);" />
And then use the message you get
function test(message){
alert(message);
}
To show this message on your page, create an element on the page
<div id="message"></div>
Then, in your test function, instead of alert, set the innerText or innerHTML to the message
document.getElementById('message').innerText = message;
To show message in popup do it this way
Html:
<input type="button" value="Show message in popup" id="message "onclick="test2('hii this is my message');" />
JS:
function test2(message)
{
alert(message);
}
To show message in div
Html:
<input type="button" value="Show message in div" id="message "onclick="test('hii this is my message');" />
<div id="message"> </div>
JS
function test(message)
{
document.getElementById("message").innerHTML = message;
}
Demo : Fiddle
Adding the message: The easy way to do this would be by using jQuery or a javascript library of your choice. Otherwise, you can simply do this:
Create an empty div to display the msg with an id="msg"
and in your javascript function:
document.getElementById("msg").innerHTML = "Your message";
jQuery is much more fun: you can use readily available functions like .html() and .append()
You definitely want to do this, as it is much MUCH cleaner to do so. It also lets you use the same code in multiple places.
Look at this: http://www.w3schools.com/js/js_whereto.asp
(down by 'external JavaScript')
Essentially, you need to save the .js file as an actual file, like filename.js:
<script type="text/javascript" src="filewithcode.js"></script>
where filewithcode.js is the file path to the JavaScript file you have created.
Hope this helps
I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.
I have the following code which uses JavaScript to select a text box when the page loads. I have included a copy of my code below. My question is how can this be done in jQuery?
<!doctype html>
<html>
<head>
</head>
<body>
<input id="query">
<script type="text/javascript">
function box(query){
document.getElementById('query').focus();
}
box('query');
</script>
</body>
</html>
Thanks in advance, Callum
You also can use HTML5:
<input type="text" autofocus>
Reference: http://www.w3schools.com/html5/att_button_autofocus.asp
Cross Browser Compatibility: http://caniuse.com/#feat=autofocus
$(document).ready(function(){
$('#query').focus()
});