How to call java script function using thymeleaf attribute th:href? - javascript

I have written like this in my HTML page:
<a th:href="#{javascript:deleteContact('deletemainmenu?id=${var[0]}')}">
</a>
And my script is:
function deleteContact(url)
{
var isOK = confirm("Are you sure to delete?");
if(isOK)
{
go(url);
}
}
It's showing an error:
Could not parse as expression: "#{javascript:deleteContact('deletemainmenu?id=${var[0]}')}"
How can i call javascript using th:href?

<html>
<head>
<script>
function deleteContact(url)
{
var isOK = confirm("Are you sure to delete?");
if(isOK)
{
go(url);
}
}
</script>
</head>
<body>
Test
</body>
</html>

<script type="text/javascript">
function getkey(a)
{
var pms = document.getElementById("textkey").value;
a.href = '/allTransaction' + pms;
}
</script>
<input id="textkey" type="text" name="">
gogogo

I think the solution you wanted is something like that
function myFunction(name,t) {
...
}
<a class="nav-link" th:href="'javascript:myFunction(&quot'+${category}+'&quot,1);'">

Related

Assign JSON to value in input

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.myip').text(data.ip);
});
};
</script>
<script type="text/javascript" src="https://api.ipify.org/?format=json"></script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>
<input type="text" name="ip" id="ip" maxlength="15" class="ipnput ip" value="">
<button type="button" class="submit send" id="showDiv" value="Check">Check</button>
In the javascript portion, I'm using ipify to grab the visiting users IP. I'd like to attach it to the html input value on load while running the second part of the JS that makes a call to ipapi with that ipify ip. New to JS so hoping someone could steer me in the right direction, thank you.
You got it pretty much right, but errors come from the typo.
In the onload handler you are targeting $('.myip') when in the HMTL you don't have an input with such classs. Also you need to use .val jQuery method.
Also the script element with ipify.org call in src is extra, not needed.
Try this:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.ip').val(data.ip);
});
};
</script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>

Input that searches google

I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:
<html>
<head>
</head>
<body>
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'http://www.google.com/search?q=' + one;
window.location = two;
}
</script>
</body>
</html>
My code doesn't work
When it runs, this pops up:
(Image of my code running)
Is my code wrong?
Any help will be aapreciated.
EDIT
<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>
<input id="input1">
<button id="link">Search Google</button>
</body>
</html>
and
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + one;
window.location = two;
}
});
});
Didn't work either
You declare the function searchGoogle inside the listener function but it is never called. Try with:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
//there is no need to declare a new function here.
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
window.location = two;
});
});

Javascript - Share Variables over different <script> tags

I have one test.html file with two <script> tags. I need to share a variable from one to another..
Sample code:
<script type="text/javascript">
var test = false;
function testing() {
test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
The output is always:
I am inside..
failed
I also tried to use the window class but it doesn't matter.. (window.test)
What I have to do to get the 'working' alert?
Thanks if anyone can help me. I saw some similar questions, but the answers wasn't a solution for me.
EDIT:
The original code (simplified):
<head>
...
<script type="text/javascript" src="detectblocker.js"></script>
<!-- GitHub: https://github.com/sitexw/BlockAdBlock/ -->
...
</head>
<body>
<script type="text/javascript">
var blocker = false;
function adBlockDetected() {
blocker = true;
alert('inside');
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
}
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
</script>
<div class="header">
...
</div>
<div class="content_body">
<div class="requirs">
<ul>
...
<script type="text/javascript">
if (blocker == true) {
document.write("<li>enabled!</li>")
} else {
document.write("<li>disabled!</li>")
}
</script>
...
</ul>
</div>
</div>
...
</body>
The output is an alert() "inside" and the <li> "disabled".. (Blocker is enabled..).
The only difference I can see is on the end of the first <script> tag:
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
So why the snippet is working and my code not? Confusing...
If you do not use var before a variable it becomes a global variable like
test = true;
The variable test will be true during the page and also in your next scripts and functions.
Try this:
<script type="text/javascript">
var test = false;
function testing() {
var test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
There are two ways of doing it.
1) create a hidden element and set your variable from your first script to attribute of that element.
This is your hidden element
<input type="hidden" id="hiddenVar"/>
and can set it in javascript as
document.getElementById("hiddenVar").setAttribute("myAttr",test)
Now you can get it in next script as
document.getElementById("hiddenVar").getAttribute("myAttr")
2) By .data() you can read about it here

Why this function javascript not alert?

Why this function javascript not alert ?
First , Click CLICK 1 it's will show delete and then click delete
Why not alert 111-aaaa How can i do that?
https://jsfiddle.net/tdpusq05/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div onclick="test_fn1()">CLICK 1</div>
<div id="demo"></div>
<script>
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick='delete_fn('111-aaaa')'>delete</span>";
};
</script>
<script>
function delete_fn(no_delete)
{
alert(no_delete);
};
</script>
Remove single quotes from onclick around delete_fn('111-aaaa') like following
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick=delete_fn('111-aaaa')>delete</span>";
};
<html>
<head>
</head>
<body>
<div onclick="test_fn1()">CLICK 1</div>
<div id="demo"></div>
<script>
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick='delete_fn(\"111-aaaa\")'>delete</span>";
}
</script>
<script>
function delete_fn(no_delete) {
alert(no_delete);
};
</script>
</body>
</html>
change the test_fn1 method to escape the quotes, here is the fiddle
function test_fn1() {
document.getElementById("demo").innerHTML = "<span onclick=\"delete_fn('111-aaaa')\">delete</span>";
}
function delete_fn(no_delete)
{
alert(no_delete);
}
JS will not catch dynamically created elements by using onclick function.
you have to do event delegation (if you are using jQuery) :-
$('#id').on('click', 'yourSelector', function() {
//do something
});

Json Object to HTML table

I have a simple page with a "button/link" when i press the button i need to call the github api to return all issues logged in my repository and show in table format.
But when i hit the link nothing happends..
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix">
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
</script>
</div>
</body>
</html>
Can anyone point me to where i have gone wrong with my code
your script is inside your div tag. When you change the html inside it, whole script will be removed. Try to place the script outside the div tag.
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix"></div>
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
You should see errors in your console. You didn't close the functions right
$(function () {
$('#ghsubmitbtn').on('click', function (e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function (json) {
if (json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
} else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
});
});
});
please look here again
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
The second parameter requires id of your table you have no table with id jsonTable i think that is the problem

Categories

Resources