There is nothing wrong with the following piece of mootools code. What I would like to do rewrite it with onsubmit event and without domready as on the second code block. Thanks.
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('myForm').addEvent('submit', function(e) {
e.stop();
this.set('send', {
onComplete: function(response) {
$('log_res').set('html', response);
}
});
this.send();
});
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Unfinished code:
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function loadMe() {
...
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" onsubmit="loadMe()" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
you can use the action attribute of a form with the javascript: prefix (http://jsfiddle.net/mT7WB/)
Here could be a possible implementation (code not tested):
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function submit() {
var obj = {};
["something","somethingElse"].each(function(n) {
obj[n] = ("myForm").getElement("input[name="+n+"]").get("value");
});
new Request.HTML({"url" : "ajaxRes.php"}).addEvent("success", function(resp) {$("log_res").adopt(resp);}).post(obj);
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="javascript:submit()" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="text" name="somethingElse" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Cheers !
Related
I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
I am trying to create a hotspot portal on a Microtik HAP RB951Ui-2nD. I can add users and remove them and it works fine, but the problem is that I want to use it with facebook authentication basically, everything should be working fine, with apache in my localhost it seems to work perfectly fine, but when I actually use it in mikrotik the facebook features that my login should have, are not there.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIFI-KECE</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//-->
</script>
$(endif)
<div class="container">
<div class="col-md-offset-4 col-md-4">
<div class="login-box">
<header>
<h1>Welcome</h2>
<small>Login now! </small>
</header>
$(if error) <p style="color:#ff0000;text-align:center;"><small>$(error)</small> $(endif)
<form class="login" name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<div class="form-group">
<input class="form-control" name="username" type="text" value="$(username)" placeholder="Username" required/>
</div>
<div class="form-group">
<input class="form-control" name="password" type="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default btn-block">LOGIN</button>
$(if trial == 'yes')
<div class="second-login text-center">Or you can log in a way like our facebook page.</div>
<div style="margin: 0 auto; width: 150px;">
<div class="fb-like" data-href="https://www.facebook.com/zeroumit" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
<div id="fb-root"></div>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: '1271642732875588',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version: 'v2.5'});
FB.Event.subscribe('edge.create',
function(response) {
window.location = "$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)";
}
);
FB.Event.subscribe('edge.remove',
function(response) {
window.location = "$(link-logout)";
}
);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
$(endif)
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
This is my login.html
Basically the like button, share etc is not there.
You must allow in walled-garden the FB domains
/ip hotspot walled-garden
add dst-host=*facebook* action=allow
add dst-host=*fbcdn* action=allow
add dst-host=*fb* action=allow
add dst-host=*akamai* action=allow
You can try cloud radius billing and social login for mikrotik at www.cloud-hotspot.com
I have tried to re-do some stuff, trying to get working code and then to modify it with what I need it to be once I get something working. Problem is, I've tried to copy Fancybox's #5 example, and titleshow is set to false, yet the title shows, as well as #login_error is supposed to be hidden, yet it shows from the start.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#tip5").fancybox();
});
$("#tip5").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});
$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/data/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
</script>
</head>
<body>
<div>
<a id="tip5" title="Login" href="#login_form">Login</a>
</div>
<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
</form>
</div>
</body>
</html>
Any suggestions?
The demonstration here worked to solve the problem. It created another problem, but that is for another question. I believe that was your demo, JFK, so thank you.
I have a page with both MooTools and JQuery UI. Both are working just fine. But when I submit my form (UI), the Slider using MooTools isn't loading anymore...
The header(Location...) doesn't work because I'm working with included pages...
Someone an idea how to solve this?
EDIT
The included JS files...
<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.timepicker.js"></script>
The form...
<form action="#" method="post" enctype="multipart/form-data">
<label class="labelx">Dag</td>
<input type="date" id="datepicker" name="datum"></p>
<label class="labelx">Uur</td>
<input type="text" id="timepicker" name="uur"></p>
<label class="labexl">title</td>
<input type="text" id="title" name="title"></p>
<label class="labexl">text</td>
<input type="text" id="text" name="text"></p>
<input type="hidden" name="submitted" value="activitypost"/>
<input type="submit" name="submitted" class="verzend" value="Activiteit toevoegen"/>
</form>
Let me know if you need anything else!
in the following, I am using filter('input:text,textarea') to set input fields as read only, (and make them opaque). However, this selector is selecting only the text inputs, and not the textarea. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>setReadOnly() Test</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="../scripts/jqia2.support.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadOnly = function(readonly) {
return this.filter('input:text,textarea')
.attr('readOnly',readonly)
.css('opacity', readonly ? 0.5 : 1.0)
.end();
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same ? $('#shipAddress').val():'');
$('#billCity').val(same ? $('#shipCity').val():'');
$('#billState').val(same ? $('#shipState').val():'');
$('#billZip').val(same ? $('#shipZip').val():'');
$('#bill_random_field').val(same ? $('#ship_random_field').val():'');
$('#billingAddress input').setReadOnly(same);
});
});
</script>
</head>
<body>
<div data-module="Test setReadOnly()">
<form name="testForm">
<div>
<label>First name:</label>
<input type="text" name="firstName" id="firstName"/>
</div>
<div>
<label>Last name:</label>
<input type="text" name="lastName" id="lastName"/>
</div>
<div id="shippingAddress">
<h2>Shipping address</h2>
<div>
<label>Street address:</label>
<input type="text" name="shipAddress" id="shipAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="shipCity" id="shipCity"/>
<input type="text" name="shipState" id="shipState"/>
<input type="text" name="shipZip" id="shipZip"/>
<textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea>
</div>
</div>
<div id="billingAddress">
<h2>Billing address</h2>
<div>
<input type="checkbox" id="sameAddressControl"/>
Billing address is same as shipping address
</div>
<div>
<label>Street address:</label>
<input type="text" name="billAddress"
id="billAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="billCity" id="billCity"/>
<input type="text" name="billState" id="billState"/>
<input type="text" name="billZip" id="billZip"/>
<textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Try to change the line $('#billingAddress input').setReadOnly(same); to $('#billingAddress input,textarea').setReadOnly(same);
Update
Actually, must be like you said in the comment: $('#billingAddress input,#billingAddress textarea').