I'm currently trying to receive word information from Wiktionary, as said in the title. However, doing this approach doesn't work:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function search(){
var a = document.getElementById('search');
var b = document.getElementById('content');
$.ajax({dataType: 'text/html', url: 'http://pl.wiktionary.org/w/index.php?title=' + a.value + '&printable=yes', success: function(data) { b.innerHTML = data; } });
}
</script>
</head>
<body>
<p>
<textarea id="search" rows="1" cols="40" style="resize: none;"></textarea>
<button onclick="search();">Search</button>
</p>
<p id="content">x</p>
</body>
</html>
When I enter a word(eg. myszka[little mouse]), it does not change the element's inner content and the console doesn't show anything either. The query, however, seems to work, as I'll get an 404 error when entering a word that doesn't exist.
Is it something obvious I'm missing, or...?
Thanks in advance
Related
I want to print reportviewer content directly without save as pdf, excel or word. After searching from Google, there is a solution like code below:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body></html>";
var newstr = document.getElementById(printpage).innerHTML;
var oldstr = document.getElementById("body1").innerHTML;
document.getElementById("body1").innerHTML = headstr + newstr + footstr;
window.print();
document.getElementById("body1").innerHTML = oldstr;
return false;
}
<div id="body1">
<input name="b_print" type="button" class="ipt" onclick="printdiv('div_print');" value="Print" />
<div id="div_print">
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="944px" ShowPrintButton="true" SizeToReportContent="True" AsyncRendering="false" ></rsweb:ReportViewer>
</div>
The problem is, it come out error said 'Cannot read property 'innerHTML' of null'.
What had I missing ?
Your javascript code should go last in the body tag. What is happening here is that your javascript is running first but it can't find the element with id body1 since that markup is not in defined yet. You can also define it in the head in a script tag with an src attribute.
It should be like this:
<head>
<script src="my_script.js"></script>
</head>
<body>
<div id="body1"></div>
...
<script type="text/javascript">
function printdiv(printpage) {...}
</script>
</body>
I'm trying to make a simple register/login system but when I press the button for both, it doesn't do what I need it to do.
I put
alert("I work!");
at the beginning of each function supposed to work to see if it actually gets triggered but it doesn't. I also checked if the onclick events for both are referenced correctly and they are. I even tried to copy the actual scripts into the html file to ensure that it's not a reference issue. At this point, I'm really stuck, and if this is some syntax error, it doesn't alert me and I'm not aware of any.
The codes are:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Opportunities</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<p>Uwu</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="loginUser()">Login</button>
</form>
<p>Not yet registered? Click here to create an account. </p>
</body>
</html>
registration.html:
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=/js/script.js"></script>
</head>
<body>
<p>Registration page</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="registerUser()">Register</button>
<!--onclick event doesn't work-->
</form>
<p>Click here to go back.</p>
</body>
</html>
and script.js:
var url = "http://localhost:8888";
function test(){
console.log('hello');
}
function registerUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax{(
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
}
function loginUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax({
url: url + "/login",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
}).success(function(response){
alert(response.message);
}).error(function(response){
alert(response.message);
});
}
Whenever I press the buttons for each, it just clears the texts in my inputs but doesn't launch an alert like I intend to. Please do tell me what I should check regarding this. Thank you.
I think your script is not loaded
Remove the frist backslash ('/') from
<script type="text/javascript" src=/js/script.js"></script>
If you are using your browser I would try first that you dont have any "popup" script blocking extensions, I had the same issue and the issue was chrome popup js blocker cause simple adblocker doesnt work for some sites.
cheers
Looks like a typo in the registerUser() function try changing the ajax call to
$.ajax({
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
},
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
Hi i have return url for JSON search. Now i would like to have a textfield. In which people can enter there search terms. And when pressed submit. I would like to go and run the search.
So far i have this code. the reading of the JSON works fine. Because when i fill in a complete url it show me the desired results. But i'am doing something incorrectly in building the URL form the basis url + search terms.
I would be great if someone could explain me what i am doing wrong.
document.getElementById('submit').onclick = function() {
var urlFD = "http://domain.com/support/search/solutions.json?term=" + document.getElementById('txt_name').value);
$.getJSON('urlFD', function(data) {
var output="<ul>";
for (var i in data) {
output+="<li>" + data[i].title + "--" + data[i].desc+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="txt_name" />
<input type="button" name="submit" id="submit" value="Submit">
<div id="placeholder"> </div>
</body>
</html>
Dont quote your variable!
$.getJSON(urlFD, function(data) {
I am working on a simple page that contains 2 iframes. Text is input into iframeA and once a button is clicked on iframeB I want it to display the text from iframeA but it just displays undefined. I feel like I am close but cannot seem to see what I am doing wrong. The code for both iframe pages is below.
--iframeA (ifr1.htm)
<html>
<head>
<script type="text/javascript">
var var_name = document.getElementById("textbox").value;
</script>
<body>
<input type="text" name"textbox" id="textbox"/>
</body>
</html>
--iframeB (ifr2.htm)
<html>
<body>
<script type="text/javascript">
function f2(txt){
var name2 = parent.ifr1.var_name;
document.getElementById('div2').innerHTML = name2;
}
</script>
<div id="div2"></div>
<button onclick="f2('complete')"></button>
</body>
</html>
parent.ifr1.var_name;
I would recommend parent.frames.ifr1.var_name
it just displays undefined:
var var_name = document.getElementById("textbox").value;</script>
</script>
…
<input type="text" name"textbox" id="textbox"/>
You're assigning the value of the input only once, when the document is loading (I doubt that it works at all actually). When you later type anything in, the value of var_name never changes.
Instead, you want to get the value when the button is clicked:
function f2(txt){
var name2 = parent.frames.ifr1.document.getElementById("textbox").value;
document.getElementById('div2').innerHTML = name2;
}
(and you can remove the script from ifr1.htm). Alternatively, use this for the first iframe:
<html>
<head>
<body>
<input type="text" name"textbox" id="textbox"/>
<script type="text/javascript">
var var_name;
document.getElementById("textbox").onchange = function(e) {
var_name = this.value;
};
</script>
</body>
</html>
Please bear with me because I'm student. My instructor had us watch 5 YouTube videos and now expects us to program using JQuery instead of standard JavaScript. All I want to do is swap an element with an element from another file.
Here's my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing JQuery</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1 id="header">Testing JQuery</h1>
<p id ="dummy">Lorem Ipsum </p>
<script src="changes.js"></script>
<form name="input" action="changes.js">
<input type="button" value="Change the Header">
</form>
</body>
</html>
Here is my JavaScript/JQuery code:
$(document).ready(function() {
$('input').click(function() {
var url = $(this).attr('form');
$('#header').load( greeting.html + '#ajax h1');
return false;
});
});
The third file is called greeting.html and this is all it contains:
<h1 id="ajax">Hello from jQuery with AJAX</h1>
$('#header').load( 'greeting.html #ajax' );
That's all you need. Get rid of all the other stuff.
You dont need to declare url and you dont need to return false.
To replace the element, load() won't work as it loads the new H1 inside the old H1, it does not replace it, so you have to use $.get and do it yourself :
$(document).ready(function() {
$('input').on('click', function() {
$.get({
url : 'greeting.html'
}).done(function(data) {
var h1 = $('<div />').append(data).find('h1#ajax');
$('#header').replaceWith(h1);
});
return false;
});
});