I have written a code, which is auto-logout when user doesn't perform any activity.
But one thing, I am not able to figure out.
I want that when I select the options from the drop-down, it will be passed to AJAX,
Can you please modify that so that I can send the data from options to AJAX.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }
</style>
</head>
<body>
<div id="idletimeout">
You will be logged off in <span><!-- countdown place holder --></span> seconds due to inactivity.
<a id="idletimeout-resume" href="#">Click here to continue using this web page</a> Please select reason for being idle.
<select id='idleReason' size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
Content Lorem Impsum
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="jquery.idletimer.js" type="text/javascript"></script>
<script src="jquery.idletimeout.js" type="text/javascript"></script>
<script type="text/javascript">
$.idleTimeout('#idletimeout', '#idletimeout a', {
idleAfter: 3,
pollingInterval: 2,
keepAliveURL: 'keepalive.php',
serverResponseEquals: 'OK',
onTimeout: function(){
$(this).slideUp();
window.location = "timeout.htm";
},
onIdle: function(){
$(this).slideDown(); // show the warning bar
},
onCountdown: function( counter ){
$(this).find("span").html( counter ); // update the counter
},
onResume: function(){
$(this).slideUp(); // hide the warning bar
}
});
//
</script>
</body>
</html>
I would be grateful to you.
The basic form of your jQuery function should look like this:
$('#idleReason').change(function(){
$.ajax({
url: 'http://www.your.ajax.handler'
data: $('#idleReason option:selected').html()
});
);
You should look up the ajax documentation for more information about how to customize your query.
Related
I created a table as company_list. This table consists of following fields
1)Company Name 2) Country 3) Vertical
So, lets assume there are 5 companies as following
Company Name: Water, Earth, Sun, Moon, Star
Countries: Water= UK, Earth=UK, Sun=Australia, Moon, =India, Star=Germany
Vertical:Water, Earth, Sun = WWF and Moon, Star=Social Welfare
First HTML is a select option to filter by
1st Country 2nd Vertical
So, if I chose UK country, vertical should auto select WWF (exclude AUS country company name)
Now, post this I have button to FETCH single COMPANY DETAILS first that matches the above condition.
Code, I have designed is not adding a filter and does fetch every company.
Kindly help with this.
1) index page
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$sql = "SELECT * FROM company_list";
$res= mysqli_query($conn,$sql);
$res1=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<style media="screen">
.navbar-inverse {
background-color: #4a8cbb;
border-color: #4a8cbb;
}
#row1{
margin-left: 100px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<select class="form-control">
<?php while ($row=mysqli_fetch_array($res)):; ?>
<option value="">SELECT COUNTRY</option>
<option value=""><?php echo $row['country']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<select class="form-control">
<?php while ($row1=mysqli_fetch_array($res1)):; ?>
<option value="">SELECT VERTICAL</option>
<option value=""><?php echo $row1['vertical']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<button id="fetch_company" class="btn btn-success btn-lg btn-block btn-huge">FETCH COMPANY DETAILS</button>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
Company Name:<span id="com_get_data"></span>
</div>
</div>
</body>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$("#com_get_data").load("get_data.php",{countNew:count});
});
});
</script>
</html>
2)Get_data.php
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
?>
Please check using $.ajax
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$.ajax({
type:"POST",
url: "get_data.php",
data:{countNew:count},
cache: false,
success: function(result){
$("#com_get_data").html(result);
}
});
});
});
</script>
Php Code
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
else
{
echo 'No result found';
}
?>
Note: here you loop trough fetch data you need to add data in string array after that return data in JSON
Please check here for more details Click Here
In multi select dropdown Select all option should be displayed at last after displaying all other options...
Ex : Select All
Black
Red
What i want is
Ex : Black
Red
Select All
i am referring below link
https://github.com/davidstutz/bootstrap-multiselect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta name='viewport' content='width=device-width'>
<link href="<?php echo base_url();?>assets/css/fonts.css" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/library/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/controller/bootstrap_multiselect.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true,
selectedBottom:true
});
});
</script>
<script type="text/javascript">
var web_link2="<?php echo base_url();?>";
$(function () {
$('#btnSelected2').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).val() + "\n";
});
var array_split=message.split(',');
var document_array = document.getElementById('selectedtoken').value;
window.location.href = web_link2+"campaign/confirm_unsubscribe/"+document_array+'-'+message;
});
});
</script>
</head>
<body>
<div class="subscribe-Container">
<header class="subscribe-Header">
<a class="link"><img src="<?php echo base_url();?>assets/images/opend-logo.png" class="logo-img" alt="Opend" title="Opend"></a>
</header>
<div class="subscribe-Content">
<h1>admin#opend.com</h1>
<?php if(!isset($msg)||$msg=='')
{
?>
<p>Please Confirm your unsubscribe request Opend by Clicking on "Unsubscribe" button below to remove your email address</p>
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
</select>
<input type="hidden" id="selectedtoken" value="<?php echo $mail_token_var?>"/>
<!--<button class="" id="btnSelected2" value="Unsubscribe"></button>-->
<a class="unsub_button" id="btnSelected2" >Unsubscribe</a>
<?php } else echo $msg; ?>
</div>
</div>
</body>
</html>
I tried using the below mentioned code
use this script for select all functionality for your multiselect dropdown
html
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
<option id="select_all">Select All<option>
</select>
JS
$('#select_all').click(function() {
$('#lstFruits option').prop('selected', true);
});
I have a combobox with filled info (filled by mysql_query) i want to add autocomplete.
$urun_bul="";
$sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug))
{
$urun_bul.='<option value="'.$yyy["urun_id"].'">'.$yyy["urun_kodu"].' - '.$yyy["urun_adi"].'</option>';
}
Then prints $urun_bul
just try
click here
you will bind your option tag with mysql using this example...
OR
Example:
index.php file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<div class="side-by-side clearfix">
<?php mysql_connect("hostname","username","password"); mysql_select_db("database_name"); ?>
<div>
<em>Select option with DB using autocomplete</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<?php $sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug)){
?>
<option value="<?php echo $yyy["urun_id"]; ?>"><?php echo $yyy["urun_kodu"].' - '.$yyy["urun_adi"]; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</form>
</body>
</html>
please copy chosen.css and chosen.jquery.js files from downloaded code from above link and past into your folder where your index.php file is locate.
I wrote a simple Codeigniter PHP app to implement Chosen.
Here's the page:
<!DOCTYPE html>
<html>
<head>
<script src="<?php echo base_url();?>js/jquery-1.11.0.min.js"></script>
<script src="<?php echo base_url();?>js/chosen.jquery.js"></script>
<script>
jQuery(document).ready(
function() {
jQuery(".chosen").chosen();
}
);
</script>
</head>
<body>
<h2>Chosen Plugin Test</h2>
<select class="chosen" style="width: 200px; display: none;">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
<select class="chosen" multiple="true" name="faculty">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
</body>
</html>
Since I am quite new to this platform, and do not have a high reputation, I cannot post a screen-capture of what it looks like. I will describe it instead:
I get a select control that looks nothing like the nice control I see in the demos, and it does not behave the same way.
May I ask what am I doing wrong?
you have not included the css file of chosen, chosen works with its js file and its css file.
these files are needed for it:
<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css">
<link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script>
<script type="text/javascript" src="/PulseBeta/js/prism.js"></script>
On the select tag just needed to add class "chosen-select" you are missing that as well.
Html:
<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL">
<option value="1">Hematology (2)</option>
<option value="2">Clinical Chemistry (0)</option>
<option value="3">Histopatholgy (0)</option>
</select>
Initialization Script:
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%"}//,
//'.chosen-search': {disable_search: false}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
See Tutorial Here at my Blog I made few months ago
Have been using the following on a form's Thankyou page to redirect back to the form in 5 seconds and neatly pre-fill the name fields with values:
<script> setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); </script>
Works great until the returnurl field is a https:// url.
Then it stays on the thankyou page in a loop trying to do the redirect.
There are no iframes involved .... have tried top.location.href ... no good ... even tried location.replace
Can anyone see any limitations with the code that may be impacting the redirect to an https:// url.
Code in the php file ...
<!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" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="width">
<title>Thankyou</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background: #fff;
font-family: Arial;
}
#message
{
position: absolute;
left: 50%;
width: 320px;
margin-left: -160px;
}
</style>
<?php
$answers = $_POST;
$var1 = array("first" => $answers[fullname][0]);
$var2 = array("last" => $answers[fullname][1]);
$var3 = array("returnurl" => $answers[returnurl]);
?>
</head>
<body>
<script>
setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); // this duration is in millisecs
</script>
<div id="message">
<p> </p>
<div style="text-align: center;"><h1>Thank You!</h1></div>
<div style="text-align: center;">Your submission has been received.</div>
<div style="text-align: center;">We're most grateful</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"><img src="http://www.mazeguy.net/bigsmilies/thumbsup.gif"></img></div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">You will return in 5 seconds</div><br />
</body>
</html>
Here's the result of a submission ... the Thankyou Page source shows ... yeah the secure page url is not being passed through ....
<script>
setTimeout(function() {location.href = '?fullName[first]=&fullName[last]='}, 5000); // this duration is in millisecs
</script>
Have you considered submitting the form via Ajax? The user would never leave the form submission page. You could simply display a modal with the confirmation message. That seems simpler than redirecting the user. It may be a nicer user experience as well.
Let's assume your form has a submit button with a class of 'submit'. You could so something like this in jQuery:
$(function() {
$('body').on('click', '.submit', function(event) {
event.preventDefault();
var target = event.currenTarget;
var form = $(target).closest('form');
var action = $(form).attr('action');
$.post(action, form.serialize())
.done(function() {
alert('Thanks for your submission!');
})
.fail(function() {
alert('Oops! Something went wrong... PLease try again.');
});
});
});
Check out Bootstrap. They have some nifty looking modals you can use.