I have a problem redirecting a page with javascript. I want to redirect the page after clicking a button, but it is redirecting it automatically.
Why is that?
window.onload=initAll;
function initAll(){
if(window.addEventListener) {
document.getElementById('check').addEventListener("click",redirection,false);
} else if (window.attachEvent){
document.getElementById('check').attachEvent("onclick", redirection);
}
function redirection(){
window.location.href='http://www.google.com';
}
}
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="glavna.js"></script>
</head>
<body>
<div id="wrapper">
<form action="glavna.html">City:<input id="city" type="text"/>
Price: From:<input type="text" id="from"/> To:<input type="text" id="to"/>
Refresh in min :<input type="text" id="refresh"/>
<button id="check" >Search</button>
</form>
</div>
</body>
</html>
this can be done with window.location.href what it does
// similar behavior as clicking on a link
window.location.href = "you want to redirect";
window.location is location object. To redirect Use window.location.href instead
Related
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Java, Spring Boot, FreeMarker</title>
<link href="/css/main.css" rel="stylesheet">
</head>
<script>
function myFunction() {
<#test/>
}
</script>
<body>
<h2>Java, Spring Boot, FreeMarker</h2>
<form action="/search" method="post">
Search : <input type="text" name="firstName" onkeyup="myFunction()" id = "fname">
<input type="submit" value="Submit">
</form>
<div style="background-color:lightblue">
<#macro test>
<#list empList as emp>
<div id="emp-data">
<ul>
<li>${emp}</li>
</ul>
</#list>
</div>
</#macro>
<script src="/js/main.js"></script>
</div>
</body>
When I run this code I am getting some errors on the browser console:
(index):60 Uncaught ReferenceError: myFunction is not defined at HTMLInputElement.onkeyup ((index):60) onkeyup # (index):60 – PCS 1 hour ago
Is it possible in FreeMarker to do something like that?
In a sense you can... but it doesn't do what you apparently believe it does. First all FreeMarker instructions, like <#test/>, are resolved on the server, then later the resulting output runs in the browser. So as far as the browser sees, function myFunction() { ... } contains HTML div-s directly in inside the { ... }, which is invalid JavaScript.
I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.
I tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">
This should be an easy fix for the right guru! Everything is working for me except that I can't get this form to submit without clicking the submit button. The data values are all valid. The action page, ...gdform.php, uses $_post to get the "redirect" value from the form and then uses php to do a header Location change. That works fine if I execute the form with the submit button. I just need it to happen without any click...
Take a look, please!
<?php session_start();
require_once('Connect.php') ;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Nitrofill Document</title>
<?php
//error_reporting(E_ALL);
$sn=$_GET['num'];
echo $sn;
mysql_connect($hostname,$username, $password) OR die('Unable to connect to database! Please try again later.');
mysql_select_db($dbname);
$selectSQL = "select * from `Presentations` where `serialnum` ='" . $sn ."'" ;
$result = mysql_query($selectSQL) or die(mysql_error());
$row = mysql_fetch_array($result, MYSQL_BOTH);
$thedoc = urldecode($row['docurl']);
$therecip=urldecode($row['recipient']);
$thetracker=urldecode($row['tracker']);
$lastacc=urldecode($row['last_accessed']);
?>
</head>
<body>
<form id="notice" action="http://m3sglobal.com/gdform.php" method="post">
<input name="subject" value="<?php echo $therecip . " has viewed the document you sent them.";?> " />
<input type="hidden" name="redirect" value="<?php echo $thedoc ; ?>"/>
<label>Email:</label><input type="text" name="email" value="<?php echo $thetracker ; ?>"/>
<label>Comments:</label><textarea name="comments" cols="40" rows="5">
Document Viewed:<?php echo $thedoc ; ?>
When Accessed:<?php echo $lastacc ; ?>
</textarea>
<input type="submit" name="submit"/>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
myfunc
});
function myfunc () {
var frm = document.getElementById("notice");
frm.submit();
}
</script>
I might be wrong but shouldn't it be: (corrected typos)
$(document).ready(function(){
myfunc(); <--// with ();
});
function myfunc() { <--// without space
var frm = document.getElementById("notice");
frm.submit();
}
or better yet:
$(document).ready(function(){
$("form#notice").submit();
});
EDIT:
Prowla is right, you also didn't declare the jQuery library. Good catch Prowla, I missed that, just saw the typos.
EDIT #2:
Your code is pretty messy there, and you have that PHP generated string in the <head>. Also your submit had no value, you used name. I cleaned it up, here is working code (for me at least):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nitrofill Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form#notice").submit();
});
</script>
</head>
<body>
<!--// ALL THE PHP SHOULD GO HERE TO MAKE THE URL BELOW //-->
qyO452ZKphttps://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000<br/>greg.mcgee#gmail.com<br/>greg.mcgee#advetel.com<br/>Thu, 23 Feb 2012 19:42:11 MST<br/>
<!--// END PHP //-->
<form id="notice" action="http://m3sglobal.com/gdform.php" method="post">
<input name="subject" value="greg.mcgee#gmail.com has viewed the document you sent them. " />
<input type="hidden" name="redirect" value="https://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000"/>
<label>Email:</label><input type="text" name="email" value="greg.mcgee#advetel.com"/>
<label>Comments:</label><textarea name="comments" cols="40" rows="5">
Document Viewed:https://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000
When Accessed:Thu, 23 Feb 2012 19:42:11 MST
</textarea>
<input type="submit" value="submit"/>
</form>
</body>
</html>
You might want to consider using firebug to help you troubleshoot your pages. Its how I figured this out. Also remember Prowla's advice, and protect your SQL.
Using jQuery: (Remember to put the jquery script in your <head> tags).
<head>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
...
<head>
...
// submit form with id notice
$(document).ready(function(){
$('#notice').submit();
});
Also your SQL is subject to injection. Please look into using prepared statements.
Sample in PHP:
$mysqli = new mysqli('localhost', 'user', 'password', 'db');
$stmt = $mysqli->prepare('select * from `Presentations` where `serialnum` =?');
$stmt->bind_param('i',$sn);
$stmt->execute();
....
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>