how to add Jquery datepicker in dynamically loaded textbox.i.e., When i click a button , the popup containing textboxes from external page will shows in the present page. in that textbox i want to use datepicker.
i have used following ajax for Loading a external page
<script type="text/javascript">
function manageapp(id,apcno)
{
/*alert(id);
alert(apcno);*/
//alert(dd);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
var strURL="manage_ajx.php?id="+id+"&acpno="+apcno;
if (req)
{
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200)
{
document.getElementById('show_details').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Following for Popup
<script type="text/javascript">
//New Pop up
$(document).ready(function() {
$('#inline').hide();
$('.login-window').click(function() {
$('#inline').addClass("login-popup");
$('#inline').css({'visibility':'visible'});
// Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup and add close button
$('#inline').fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$('#loginBox').css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
following is for call thae popup page
//php coding
<a class="login-window" href="#inline" title="Business Details" onclick="javascript:manageapp('<?php echo $patientlist[$i]['ap_id']; ?>','<?php echo $patientlist[$i]['apc'];?>')">
<img src="images/calendar-icon.png" title="manage appointment"/>
</a>
?>
//php coding
any body can help me to fix this problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
And for more deatils please follow the link http://jqueryui.com/datepicker/
try this:
$(document).on('load', 'your_datepicker_class_or_id', function(){
$(this).datepicker();
});
and assuming that you have these to referenced above your js stuff:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
I find the solutions , do it as follows, Add the datepicker function in Ajax return function ie in success
<script type="text/javascript">
function manageapp(id,apcno)
{
/*alert(id);
alert(apcno);*/
//alert(dd);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
var strURL="manage_ajx.php?id="+id+"&acpno="+apcno;
if (req)
{
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200)
{
document.getElementById('show_details').innerHTML=req.responseText;
$("#frompop").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
});
$('#timepickerpop').timepicker({ 'timeFormat': 'g:i A','step':15,'minTime': '8:00am','maxTime': '8:00pm' });
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Related
I have a list of rows from mysql table, each contains : a href tag, whose value is varying based on id like : href="123.php?id=sbsbd". I coded a jquery dialog, with 2 buttons - YES / NO. Upon, YES, I want to proceed with redirection request, from that particular a href link. Any guesses, how this can be done ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
// stuck here
// need to go to URL in ahref = "123.php?id=sbsbd";
// id value keeps changing
},
"No": function(){
$(this).dialog("close")
}
}
});
//////////////////////// 002 ///////////////////////////
$("a").click(function(){
//$("#proceed").css("display", "block !important");
$("#proceed").dialog("open");
return false;
}); // click-function ends
}); // document.ready function-ends
</script>
</head>
<body>
Click for confirmation!
<div id="proceed" title="Delete this Slide-Image" style="display:none">
<p>Slide-Image will be deleted permanently from Homepage and from Server, too. Ok ?</p>
</div>
</body>
</html>
create the global access variable and set the href value to that variable when on click and use it to redirect.
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
alert(url);
window.location.href = url;
//here you can use that variable
},
"No": function(){
$(this).dialog("close")
}
}
});
var url ='';
$("a").click(function(){
$("#proceed").dialog("open");
url = $(this).attr('href');
//asign the clicked url into this url variable
return false;
});
});
</script
I am trying to show multiple results in single php page, one of them is Google pie chart which takes data from mysql db. Without ajax I can show this chart separately successfully but using ajax to show the graph on same page has no luck.
Below code works, but on button click it redirects to ajax_graph_temp.php and shows graph on that page. I want using ajax to show the graph on same page i.e. ajax_form.php.
Problem is ajax_graph.php showing the result in div which is present in it only. How can I show it in the dive present in ajax_form_temp.php?
my ajax_form_temp.php:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript">
function viewChart(form, e){
e.preventDefault();
e.returnValue=false;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send();
}
//------------------Chart function end
</script>
</head>
<body>
<form action="ajax_graph_temp.php" method="post"/>
<h4>CLICK TO VIEW CHART</h4>
<input type="submit" class="submit" value="submit" name="view"/>
</form>
<br />
<div id="txtHint">
<b>Person info will be listed here.</b>
</div>
</body>
</html>
and ajax_graph_temp.php is:
<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
So I have this script which posts some text using ajax:
<?php
if (isset($_POST['q'])) {
echo 'q is '.$_POST['q'];
} else {
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","aj.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Accept","text/html");
xmlhttp.send("q=some text");
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState===4&&xmlhttp.status===200)
if (r=xmlhttp.response||xmlhttp.responseText)
document.write(r);
else
alert("no response")
}
</script>
</head>
<body>
body
</body>
</html>
<?php } ?>
The output is suppose to be 'q is some text' but in Google Chrome (Windows) it runs repeatedly and all you see is the word 'body' repeating across the page.
Whats going wrong?
jQuery is the way
$.post('ajax.php','q=some text',function(data){
$(document.body).html(data);
});
I want to display a pop-up alert box upon some condition in PHP being satisfied. Something like:
echo "<script type="text/javascript"> alert('bleh'); </script>";
except using a custom jquery alert box. Is this possible??
I've tried something like:
echo "<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>";
but it gives me a weird effect. Not pop up.
Thanks for your interest.
echo <<<EOD
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
</script>
EOD;
Try something like this. Where $bleh is the PHP variable with the message to show.
<script type="text/javascript">
$(document).ready(function(){
var dlg = $('<div>').text(<?php echo $bleh ?>);
$(body).append(dlg);
dlg.dialog(
modal: true
);
});
<script>
PHP is expecting " (double quotes) in any lines like rel="stylesheet" to be php code. You have to either use ' (single quotes) or escape them with a function around the echo like add_slashes. To get around this, I generally use single quotes around echo contents, so all the double quotes are not bothered.
echo 'all the "quoted" stuff here';
Yes its possible..
echo "<script type=\"text/javascript\">alert('bleh');</script>";
but i am not sure if its a good way to write whole function in echo, Instead Define Your Function in HTML some where in your Page and echo the function name here like i did above..
as noted before you need to escape your character or use it like this so no need to escape characters in here
<?php if (condition == true) : ?>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<?php endif; ?>
Sure thing. you probably want something around this:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
//check for PHP condition. Script will only be output on condition pass.
<?php if(condition == true){ ?>
<script>
$(function() {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
</script>
<?php } ?>
basically, you don't actually need to 'echo' the script, as long as you're outputting it from a .php file and not an external .js file. the script will show up as long as the condition passes.
I have this code to display the data retrieved from DB in accounts_view.php:
<script type="text/javascript">
function showPrice(str)
{
if (str=="")
{
document.getElementById("sender_price").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sender_price").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","?action=account&q="+str,true);
xmlhttp.send();
}
</script>
I have problem in the below line :
xmlhttp.open("GET","?action=account&q="+str,true);
Just to explain to you I have index.php and have many cases there, I have
case "account" :
$q=$_GET["q"];
//code is here to get data from db and return with result..
include($_STR_TEMPLATEPATH."/account_view.php");
break;
So, When I am redirecting to ?action=account&q=str in the account_view.php
it displays the page again, so I will have 2 pages over each other.
I hope the problem is clear to you :)
Thanks and Regards,
I would recommend using jquery to retrieve data from a database if you are wanting to use ajax. All the browser incompatibilities are already accounted for and you won't have to bother coding for all the issues you will encounter trying to accomplish this by hand. basically why re-invent the wheel that is already perfectly created.
Here is an example of my code using jquery and how easy it is to use.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some title</title>
<link href="customize.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/black-tie/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript">
function ShowActive(inputString){
//gives visual that something is happening
$('#Sresults').addClass('loading');
//send your data to a php script here i am only sending one variable
//if using more than one then use json format
$.post("allactive.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
//populate div with results
$('#Sresults').html(data);
$('#Sresults').removeClass('loading');
}
});
}
</script>
</head>
<body>
put your form here ....
<div id="Sresults" name="Sresults"></div>
</body>