Why The Program Writes To Socket Empty?

Why The Program Writes To Socket Empty? - php

I am making a program which records video, and sends its blobs to a socket every 5 secs.It seems working properly but when i look at the files received by the server, i see all the programs written by socket client are empty= 0kb.Can you help me please? My HTML/JS and PHP codes are below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebRTC Video Recording using MediaStreamRecorder</title>
<script src="https://cdn.WebRTC-Experiment.com/MediaStreamRecorder.js"></script>
<!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></script>
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
input {
border: 1px solid rgb(46, 189, 235);
border-radius: 3px;
font-size: 1em;
outline: none;
padding: .2em .4em;
width: 60px;
text-align: center;
}
select {
vertical-align: middle;
line-height: 1;
padding: 2px 5px;
height: auto;
font-size: inherit;
margin: 0;
}
</style>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
WebRTC Video Recording using MediaStreamRecorder
</h1>
<p>
HOME
<span> © </span>
WebRTC Experiment .
</p>
</header>
<section class="experiment" style="padding: 5px;">
<label for="time-interval">Time Interval (milliseconds):</label>
<input type="text" id="time-interval" value="5000">
<br>
<br> recorderType:
<select id="video-recorderType" style="font-size:22px;vertical-align: middle;margin-right: 5px;">
<option value="[Best Available Recorder]">[Best Available Recorder]</option>
<option value="MediaRecorder API">MediaRecorder API</option>
<option value="WebP encoding into WebM">WebP encoding into WebM</option>
</select>
<br>
<br>
<button id="start-recording">Start</button>
<button id="stop-recording" disabled>Stop</button>
<button id="pause-recording" disabled>Pause</button>
<button id="resume-recording" disabled>Resume</button>
<button id="save-recording" disabled>Save</button>
<br>
<br>
<label for="video-width">Video Width:</label>
<input type="text" id="video-width" value="320">
<label for="video-height">Video Height:</label>
<input type="text" id="video-height" value="240">
</section>
<section class="experiment">
<div id="videos-container">
</div>
</section>
<script>
function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
var mediaConstraints = {
audio: !IsOpera && !IsEdge, // record both audio/video in Firefox/Chrome
video: true
};
document.querySelector('#start-recording').onclick = function() {
this.disabled = true;
captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
};
document.querySelector('#stop-recording').onclick = function() {
this.disabled = true;
mediaRecorder.stop();
mediaRecorder.stream.stop();
document.querySelector('#pause-recording').disabled = true;
document.querySelector('#start-recording').disabled = false;
};
document.querySelector('#pause-recording').onclick = function() {
this.disabled = true;
mediaRecorder.pause();
document.querySelector('#resume-recording').disabled = false;
};
document.querySelector('#resume-recording').onclick = function() {
this.disabled = true;
mediaRecorder.resume();
document.querySelector('#pause-recording').disabled = false;
};
document.querySelector('#save-recording').onclick = function() {
this.disabled = true;
mediaRecorder.save();
// alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
};
var mediaRecorder;
function onMediaSuccess(stream) {
var video = document.createElement('video');
var videoWidth = document.getElementById('video-width').value || 320;
var videoHeight = document.getElementById('video-height').value || 240;
video = mergeProps(video, {
controls: true,
muted: true,
width: videoWidth,
height: videoHeight,
src: URL.createObjectURL(stream)
});
video.play();
videosContainer.appendChild(video);
videosContainer.appendChild(document.createElement('hr'));
mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.stream = stream;
var recorderType = document.getElementById('video-recorderType').value;
if (recorderType === 'MediaRecorder API') {
mediaRecorder.recorderType = MediaRecorderWrapper;
}
if (recorderType === 'WebP encoding into WebM') {
mediaRecorder.recorderType = WhammyRecorder;
}
// don't force any mimeType; use above "recorderType" instead.
// mediaRecorder.mimeType = 'video/webm'; // video/webm or video/mp4
mediaRecorder.videoWidth = videoWidth;
mediaRecorder.videoHeight = videoHeight;
mediaRecorder.ondataavailable = function(blob) {
var a = document.createElement('a');
a.target = '_blank';
a.innerHTML = 'Open Recorded Video No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);
a.href = URL.createObjectURL(blob);
videosContainer.appendChild(a);
videosContainer.appendChild(document.createElement('hr'));
// EKLENEN
var myRequest = new XMLHttpRequest();
myRequest.open('POST', 'save.php' , true);
myRequest.send(blob);
};
var timeInterval = document.querySelector('#time-interval').value;
if (timeInterval) timeInterval = parseInt(timeInterval);
else timeInterval = 5 * 1000;
// get blob after specific time interval
mediaRecorder.start(timeInterval);
document.querySelector('#stop-recording').disabled = false;
document.querySelector('#pause-recording').disabled = false;
document.querySelector('#save-recording').disabled = false;
}
function onMediaError(e) {
console.error('media error', e);
}
var videosContainer = document.getElementById('videos-container');
var index = 1;
function bytesToSize(bytes) {
var k = 1000;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
function getTimeLength(milliseconds) {
var data = new Date(milliseconds);
return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
}
window.onbeforeunload = function() {
document.querySelector('#start-recording').disabled = false;
};
</script>
<pre style="border-left: 2px solid red; margin-left:2em; padding-left: 1em;">
// cdn.webrtc-experiment.com/MediaStreamRecorder.js
var mediaConstraints = {
audio: true,
video: true // if firefox or chrome
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
var blobURL = URL.createObjectURL(blob);
document.write('' + blobURL + '');
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}
</pre>
MediaStreamRecorder Demos
<script>
window.useThisGithubPath = 'streamproc/MediaStreamRecorder';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</article>
<footer>
MIT License
<table>
<tr> <td>
</td>
</tr>
</p>
</footer>
</body>
</html>
And PHP Socket Client below :
<?php
$portnum = 'portnum';
$ipnum = 'Ipnum';
// No Timeout
set_time_limit(0);
if ( ($socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) == FALSE ) {
$message = "Socket not created";
echo "<script type='text/javascript'>alert('$message');</script>";
}
$context = stream_context_create($opts);
if ( ($file = file_get_contents($_FILES['blob'], false, $context ) ) == FALSE ) {
$message = "File_get_contents not working.";
echo "<script type='text/javascript'>alert('$message');</script>";
}
$ss = fopen ( file, "r");
$streamvid = fread ( $ss );
if ( ( $tt = fsockopen($ipnum, $portnum, $errno, $errstr, 30)) == FALSE ) {
$message = "fsockopen not working";
echo "<script type='text/javascript'>alert('$message');</script>";
}
if ( (fwrite ( $tt , $streamvid ) ) == FALSE ) { // DIŞARI ALINDI
$message = "fwrite failed";
echo "<script type='text/javascript'>alert('$message');</script>";
}
fclose( $tt );
?>

mediaRecorder.ondataavailable = function(blob) {
// upload blob to PHP server
uploadToPHPServer(blob);
};
function uploadToPHPServer(blob) {
var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
type: 'video/webm'
});
// create FormData
var formData = new FormData();
formData.append('video-filename', file.name);
formData.append('video-blob', file);
makeXMLHttpRequest('https://path-to-your-server/save.php', formData, function() {
var downloadURL = 'https://path-to-your-server/uploads/' + file.name;
console.log('File uploaded to this path:', downloadURL);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback();
}
};
request.open('POST', url);
request.send(data);
}
Here is save.php:
<?php
// via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php
header("Access-Control-Allow-Origin: *");
function selfInvoker()
{
if (!isset($_POST['audio-filename']) && !isset($_POST['video-filename'])) {
echo 'PermissionDeniedError';
return;
}
$fileName = '';
$tempName = '';
if (isset($_POST['audio-filename'])) {
$fileName = $_POST['audio-filename'];
$tempName = $_FILES['audio-blob']['tmp_name'];
} else {
$fileName = $_POST['video-filename'];
$tempName = $_FILES['video-blob']['tmp_name'];
}
if (empty($fileName) || empty($tempName)) {
echo 'PermissionDeniedError';
return;
}
$filePath = 'uploads/' . $fileName;
// make sure that one can upload only allowed audio/video files
$allowed = array(
'webm',
'wav',
'mp4',
'mp3',
'ogg'
);
$extension = pathinfo($filePath, PATHINFO_EXTENSION);
if (!$extension || empty($extension) || !in_array($extension, $allowed)) {
echo 'PermissionDeniedError';
continue;
}
if (!move_uploaded_file($tempName, $filePath)) {
echo ('Problem saving file.');
return;
}
echo ($filePath);
}
selfInvoker();
?>
Regarding PHP upload issues,
https://github.com/muaz-khan/RecordRTC/wiki/PHP-Upload-Issues
PS. Don't forget to create uploads directory here:
https://path-to-your-server/uploads/ ----- inside same directory as "save.php"

Related

On the click of the image it is not removing in jQuery

Selecting the multiple image from the input tag after that I am previewing the selected image but when I click on that image it should delete from the input tag it does not select that picture any more. But in my case that picture is removing only in preview not in input. And save it into database
Here is the code
<?php
include_once 'Functions.php';
$connect=new Connection();
$link=$connect->Connect();
print_r($_FILES['fil']['name']);
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var image=('')
('input[type="file"]'). change(function(e){
var fileName = e. target. files[0]. name;
alert('The file "' + fileName + '" has been selected.' );
});
$(function() {
var imagesPreview = function(input,placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img class="picture" width="70" name="multipic">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
$('.picture').click(function(){
$(this).remove();
});
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this,'div.gallery');
});
});
});
</script>
</head>
<body>
<form name="update" enctype='multipart/form-data' method="POST">
<input type="file" name="fil[]" multiple id="gallery-photo-add" class="a1">
<div class="gallery"></div>
<input type="submit" name="btnupdate" value="Update" />
</form>
</body>
</html>

Here is HTML Code :
<div class="container">
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files1" multiple />
</span><br/>
<ul class="fileList"></ul>
</div>
<div class="row">
<button type="x" id="uploadBtn" class="btn primary start">Start upload</button>
</div>
<div class="row">
<div class="span16">
<table class="zebra-striped"><tbody class="files"></tbody></table>
</div>
</div>
</form>
</div>
Here is CSS Code :
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
Here is jQuery Code :
$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
var fileIdCounter = 0;
this.closest(".files").change(function (evt) {
var output = [];
for (var i = 0; i < evt.target.files.length; i++) {
fileIdCounter++;
var file = evt.target.files[i];
var fileId = sectionIdentifier + fileIdCounter;
filesToUpload.push({
id: fileId,
file: file
});
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";
output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. ", removeLink, "</li> ");
};
$(this).children(".fileList")
.append(output.join(""));
//reset the input to null - nice little chrome bug!
evt.target.value = null;
});
$(this).on("click", ".removeFile", function (e) {
e.preventDefault();
var fileId = $(this).parent().children("a").data("fileid");
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for (var i = 0; i < filesToUpload.length; ++i) {
if (filesToUpload[i].id === fileId)
filesToUpload.splice(i, 1);
}
$(this).parent().remove();
});
this.clear = function () {
for (var i = 0; i < filesToUpload.length; ++i) {
if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
filesToUpload.splice(i, 1);
}
$(this).children(".fileList").empty();
}
return this;
};
(function () {
var filesToUpload = [];
var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
$("#uploadBtn").click(function (e) {
e.preventDefault();
var formData = new FormData();
for (var i = 0, len = filesToUpload.length; i < len; i++) {
formData.append("files", filesToUpload[i].file);
}
$.ajax({
url: "",
data: formData,
processData: false,
contentType: false,
type: "POST",
success: function (data) {
alert("DONE");
files1Uploader.clear();
},
error: function (data) {
alert("ERROR - " + data.responseText);
}
});
});
});
Try above code. Hope this will help

AJAX : Pass an image and data through Single AJAX [duplicate]

This question already has answers here:
How to send image to PHP file using Ajax?
(5 answers)
jQuery AJAX file upload PHP
(5 answers)
jQuery / ajax upload image and save to folder
(3 answers)
Upload image using jQuery, AJAX and PHP
(2 answers)
Closed 4 years ago.
I want to pass some text data and file through one ajax code
Here is my code's index.php :-
<?php
session_start();
if (#$_SESSION['user']!=true) {
echo "<script>window.alert('You are not login.');</script>";
echo "<script>window.open('login.php','_self');</script>";
}
else {
include_once '../connection.php';
$uid=$_SESSION['id'];
$query=mysqli_query($conn,"SELECT * FROM `register` WHERE `id`='$uid'");
$row=mysqli_fetch_array($query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Karthikeyan K">
<title>POST</title>
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style type="text/css">
body {
padding: 45px;
}
footer {
margin: 10px 0;
}
.photo {
margin-bottom: 10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mentionsInput.css">
<style type="text/css">
#status-overlay {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.50);
position: fixed;
top: 0;
left: 0;
z-index: 99999;
overflow: hidden;
}
#highlight-textarea {
background: #fff;
}
.form-control:focus {
box-shadow: 0 0 0 2px #3399ff;
outline: 0;
}
h2 {
font-size: 20px;
}
</style>
<style>
#upload_button {
display: none;
border: 0px;
background: linear-gradient(180deg, #f44, #811);
border-radius: 5px;
color: #fff;
padding: 5px;
}
</style>
</head>
<body>
<div id="status-overlay" style="display: none"></div>
<form method="POST" class="form" enctype="multipart/form-data">
<div class="form-group">
<input type="text" name="title" id="title" class="form-control" placeholder="Post title..."><br>
<div id="highlight-textarea">
<textarea onclick="highlight();" name="postText" class="form-control postText mention" cols="10" rows="8" placeholder="What's going on?" dir="auto"></textarea>
</div><br>
<select class="form-control" name="type" id="type" required>
<option value="">Choose Post Type</option>
<option value="Closet">Closet</option>
<option value="Follower">Follower</option>
<option value="Group">Group</option>
</select><br>
<p><button id="upload_button">Click here to select file</button></p>
<p><input id="upload_input" name="upfile" type="file"/></p>
</div>
<input type="button" value="Post" class="btn btn-primary pull-right postMention">
</form>
<!-- Bootstrap Script file -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src='https://cdn.rawgit.com/jashkenas/underscore/1.8.3/underscore-min.js' type='text/javascript'></script>
<script src='js/lib/jquery.elastic.js' type='text/javascript'></script>
<script type="text/javascript" src="js/jquery.mentionsInput.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('textarea').on('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function (e) {
$("#status-overlay").hide();
$("#highlight-textarea").css('z-index','1');
$("#highlight-textarea").css('position', '');
});
});
function highlight()
{
$("#status-overlay").show();
$("#highlight-textarea").css('z-index','9999999');
$("#highlight-textarea").css('position', 'relative');
}
$(document).ready(function(){
$('.postMention').click(function() {
$('textarea.mention').mentionsInput('val', function(text) {
var post_text = text;
if(post_text != '')
{
//post text in jquery ajax
var post_data = "text="+encodeURIComponent(post_text);
var val1 = $('#title').val();
var val2 = $('#type').val();
//var val3 = $('#upload_input');
//var post_title = $('#title').val();
var form = new FormData(document.getElementById('.postMention'));
//append files
var file = document.getElementById('upload_input').files[0];
if (file) {
form.append('upload_input', file);
}
$.ajax({
type: "POST",
data: post_data+'&title='+val1+'&type='+val2+'&upload_input='+form,
url: 'ajax/post.php',
success: function(msg) {
if(msg.error== 1)
{
alert('Something Went Wrong!');
} else {
$("#post_updates").prepend(msg);
//reset the textarea after successful update
$("textarea.mention").mentionsInput('reset');
}
}
});
} else {
alert("Post cannot be empty!");
}
});
});
//used for get users from database while typing #..
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
$.getJSON('ajax/get_users_json.php', function(responseData) {
responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, responseData);
});
}
});
});
</script>
</body>
</html>
<?php } ?>
here's a code of my php file to insert data into database ajax/post.php
. . . .
<?php
session_start();
if (#$_SESSION['user']!=true) {
echo "<script>window.alert('You are not login.');</script>";
echo "<script>window.open('login.php','_self');</script>";
}
else {
include_once '../../connection.php';
$uid=$_SESSION['id'];
$query=mysqli_query($conn,"SELECT * FROM `register` WHERE `id`='$uid'");
$row=mysqli_fetch_array($query);
if(isset($_POST) && !empty($_POST['text']) && $_POST['text'] != '')
{
include '../config/config.php';
$user = $uid; //w3lessons demo user
$postid=mt_rand();
$text = strip_tags($_POST['text']); //clean the text
$title= $_POST['title'];
$type= $_POST['type'];
define('FIRST_MATCH_GROUP', 1);
preg_match_all("/#\[(.+)\]/U", $text, $tags); // Value under #[]
$tags = implode(',', $tags[FIRST_MATCH_GROUP]);
$upfile_name = $_FILES['upload_input']['name'];
$upfile_size =$_FILES['upload_input']['size'];
$upfile_tmp =$_FILES['upload_input']['tmp_name'];
$upfile_type=$_FILES['upload_input']['type'];
$upfile_t = explode(".", $_FILES["upload_input"]["name"]);
$upfile_name = mt_rand() . '.' . end($upfile_t);
if($upfile_type == "image/jpg" && $upfile_type == "image/png" && $upfile_type == "image/jpeg" && $upfile_type == "video/mp4"){
echo "<script>window.alert('extension not allowed, please choose a JPG or PNG or MP4 file.');</script>";
}
else {
if($upfile_size > 10485760){
echo "<script>window.alert('File size must be Less 10 MB');</script>";
}
else {
move_uploaded_file($upfile_tmp,"../../uploads/".$upfile_name);
$DB->query("INSERT INTO posts(post_id,title,content,user_id,type,tags,image) VALUES(?,?,?,?,?,?,?)", array($postid,$title,$text,$user,$type,$tags,$upload_input));
?>
<div class="media">
<div class="media-left">
<img src="https://cdn.w3lessons.info/logo.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">w3lessons</h4>
<p><?php echo getMentions($text); ?></p>
</div>
</div>
<hr>
<?php
} } } else {
echo "1"; //Post Cannot be empty!
}
function getMentions($content)
{
global $DB;
$mention_regex = '/#\[([0-9]+)\]/i'; //mention regrex to get all #texts
if (preg_match_all($mention_regex, $content, $matches))
{
foreach ($matches[1] as $match)
{
$match_user =$DB->row("SELECT * FROM register WHERE id=?",array($match));
$match_search = '#[' . $match . ']';
$match_replace = '<a target="_blank" href="' . $match_user['profile_img'] . '">#' . $match_user['first_name'] . '</a>';
if (isset($match_user['id']))
{
$content = str_replace($match_search, $match_replace, $content);
}
}
}
return $content;
}
}?>
When i submit form data was passing at my php page but images index is goes undefined...

change the way you pass data in request
try this
$(document).ready(function(){
$('.postMention').click(function() {
$('textarea.mention').mentionsInput('val', function(text) {
var post_text = text;
if(post_text != '')
{
var formData = new FormData($('.form')[0]);
formData.append('text',encodeURIComponent(post_text));
$.ajax({
url: 'ajax/post.php',
type: 'POST',
data: formData,
success: function (data) {
if(msg.error== 1)
{
alert('Something Went Wrong!');
} else {
$("#post_updates").prepend(msg);
//reset the textarea after successful update
$("textarea.mention").mentionsInput('reset');
}
},
cache: false,
contentType: false,
processData: false
});
} else {
alert("Post cannot be empty!");
}
});
});
and input name
<input id="upload_input" name="upload_input" type="file"/>

Passing JavaScript Variables from JavaScript to PHP using AJAX

I am having some problems with my PHP file. So basically I am working on a project that takes two addresses from the user, then it uses javascript to show their route and once they click submit, I want to pass these two variables to PHP file. I researched a lot and found that I would need AJAX call. The problem I am running into is that AJAX call works perfectly, but when I go to PHP file it throws me an error that variables are not defined. Someone, please explain to me what I am doing wrong here.
JavaScript code:
/* ============================================================================================
Reference: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions
==============================================================================================
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
center: {lat: 41.881832, lng: -87.623177},
zoom: 13
});
new AutocompleteDirectionsHandler(map);
}
/**
* #constructor
*/
function AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.travelMode = 'DRIVING';
var originInput = document.getElementById('origin-input');
var destinationInput = document.getElementById('destination-input');
var submit_button = document.getElementById('button-to-submit');
/*var modeSelector = document.getElementById('mode-selector');*/
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
var originAutocomplete = new google.maps.places.Autocomplete(
originInput, {placeIdOnly: true});
var destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, {placeIdOnly: true});
/*this.setupClickListener('changemode-walking', 'WALKING');
this.setupClickListener('changemode-transit', 'TRANSIT');
this.setupClickListener('changemode-driving', 'DRIVING');*/
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(submit_button);
/*this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);*/
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
/* AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
var radioButton = document.getElementById(id);
var me = this;
radioButton.addEventListener('click', function() {
me.travelMode = mode;
me.route();
});
}; */
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("Please select an option from the dropdown list.");
return;
}
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else {
me.destinationPlaceId = place.place_id;
}
me.route();
});
};
AutocompleteDirectionsHandler.prototype.route = function() {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
this.directionsService.route({
origin: {'placeId': this.originPlaceId},
destination: {'placeId': this.destinationPlaceId},
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
origin_addr = document.getElementById('origin-input').value;
//console.log(origin_addr);
destination_addr = document.getElementById('destination-input').value;
//console.log(destination_addr);
//var place_id = document.getElementById('origin-input');
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
$("#button-to-submit").click(function() {
$.ajax({
url: "Database/save-points.php",
type: "POST", //send it through get method
data: {
origin_address: origin_addr,
destination_address: destination_addr
},
success: function(response) {
//Do Something
console.log("Succeed");
location.href="Database/save-points.php";
},
error: function(xhr) {
//Do Something to handle error
}
});
});
PHP code:
<?php
$origin_address = $_POST['origin_address'];
$destination_address = $_POST['destination_address'];
echo $origin_address;
echo $destination_address;
?>

/* maps.php */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#origin-input,
#destination-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 200px;
}
#origin-input:focus,
#destination-input:focus {
border-color: #4d90fe;
}
#mode-selector {
color: #fff;
background-color: #4d90fe;
margin-left: 12px;
padding: 5px 11px 0px 11px;
}
#mode-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
</head>
<body>
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location">
<input id="destination-input" class="controls" type="text"
placeholder="Enter a destination location">
<div id="mode-selector" class="controls">
<input type="radio" name="type" id="changemode-walking" checked="checked">
<label for="changemode-walking">Walking</label>
<input type="radio" name="type" id="changemode-transit">
<label for="changemode-transit">Transit</label>
<input type="radio" name="type" id="changemode-driving">
<label for="changemode-driving">Driving</label>
<input type="submit" id="button-to-submit" value="SAVE !" />
</div>
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOU_KEY&libraries=places"></script>
<script type="text/javascript">
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
new AutocompleteDirectionsHandler(map);
}
/**
* #constructor
*/
function AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.travelMode = 'WALKING';
var originInput = document.getElementById('origin-input');
var destinationInput = document.getElementById('destination-input');
var modeSelector = document.getElementById('mode-selector');
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
var originAutocomplete = new google.maps.places.Autocomplete(
originInput, {placeIdOnly: true});
var destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, {placeIdOnly: true});
this.setupClickListener('changemode-walking', 'WALKING');
this.setupClickListener('changemode-transit', 'TRANSIT');
this.setupClickListener('changemode-driving', 'DRIVING');
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
var radioButton = document.getElementById(id);
var me = this;
radioButton.addEventListener('click', function() {
me.travelMode = mode;
me.route();
});
};
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("Please select an option from the dropdown list.");
return;
}
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else {
me.destinationPlaceId = place.place_id;
}
me.route();
});
};
AutocompleteDirectionsHandler.prototype.route = function() {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
this.directionsService.route({
origin: {'placeId': this.originPlaceId},
destination: {'placeId': this.destinationPlaceId},
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
/************************************/
$(document).ready( function() {
$("#button-to-submit").click(function() {
origin_addr = $("#origin-input").val();
destination_addr = $("#destination-input").val();
$.ajax({
type: "POST",
url: "maps.exe.php",
data: {
origin_address: origin_addr,
destination_address: destination_addr
},
success: function(response){
alert(response);
window.location.href = 'test-resp.php?'+response;
}
});
return false;
});
});
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap" async defer></script>
</body>
</html>
/* maps.exe.php */
<?php
$origin_address = $_POST['origin_address'];
$destination_address = $_POST['destination_address'];
echo"origin=$origin_address&destination=$destination_address";
?>
/* test-resp.php */
<?php
$origin_address = $_GET['origin'];
$destination_address = $_GET['destination'];
echo"[ origin : $origin_address / destination = $destination_address ]";
?>

I have an example of me passing JS variable to PHP.
JS (url and content are JS variables) :
var data_to_send = {
filepath: ""+url,
filecontent: ""+content
};
jQuery.ajax({
url:"php/dynamic.php",
data: data_to_send,
cache: false,
async: true,
type:'post',
timeout:3000//purely optionnal, check jQuery's Doc to learn more about ajax optionnal parameters/settings
});
In dynamic.php :
<?php
$vars = serialize($_POST); /*easier access*/
$file_path = "../".$vars["filepath"];
$file_content = $var["filecontent"]; /*example of assigning a JS var's value to a PHP var*/
$fh = fopen($file_path, 'w+') or die("could not open file");
fwrite($fh, $file_content."\n");
fclose($fh);
?>
PS: I use jQuery for POST, I dunno the pure javascript way to do the same :/

jQuery doesnt work at all in IE8

I have read lots of past postings on this subject...
I have tried every "solution", change to type="text/javascript", upgrade it to the latest version, including this header <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> but nothing seems to work.
The site is testing.quierodecomer.com
NOTE: I wrote <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in the head for testing issues.
<?php
session_start();
?>
<!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 http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>Quiero de comer!</title>
<link href="favicon.png" type="image/png" rel="icon">
<style>
.ui-autocomplete-loading { background: white url('jquery-ui-1.8.21.custom/css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.imageZoom.css" />
<style type="text/css">
body {
padding: 0px;
vertical-align:bottom;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 360px;
overflow: hidden;
text-align:center;
}
.box {
position: absolute;
width: 400px;
height: 200px;
line-height: 40px;
font-size: 30px;
font-weight:bold;
color:black;
text-align: center;
border: 3px solid grey;
left: 50%;
top: 100px;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px;
margin-top:-70px;
margin-left: -200px;
}
#box1 {
background-color:#FFF;
}
#box2 {
background-color:#FFF;
left: 150%;
}
#box3 {
background-color:#FFF;
left: 150%;
}
.btn1, .coloniaButton{
background:#ff5d35;
border:none;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
vertical-align:middle;
cursor:pointer;
color:#fff;
font-weight:bold;
font-size:20px;
padding:5px 10px;
margin-right:-225px;
border: 1px solid #000;
}
.btn1:hover, .coloniaButton:hover{
background:#3f3f3f;
}
#tags, #tipoDeComida, #tags2, #city {
padding:.8em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border:none;
width:350px;
margin-bottom:5px;
border: 2px solid grey;
}
.titulo{
margin-top: 23px;
}
.caja{
margin-top: 20px;
}
.servicios{
font-size:15px;
font-weight:bold;
}
#ciudadBreadcrumb, #coloniaBreadcrumb{
font-size: 15px;
}
#footer{
text-align: center;
background-color: black;
width: 99.2%;
padding: 5px;
color: white;
position: absolute;
bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery.paginatetable.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/md5.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.6.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript" src="js/jquery.imageZoom.js"></script>
<?php
include("conecta.php");
$result = mysql_query("SELECT * FROM fondo WHERE id = 1");
while($row = #mysql_fetch_array($result)){
$fondo = $row['imgFondo'];
}
?>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'admin/uploads/fondos/<?php echo $fondo; ?>', title : '', thumb : '', url : ''}
]
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#colonia").hide();
$('.btn1').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this.parentNode).animate({
left: '-50%'
}, 500);
if ($(this.parentNode).next().size() > 0) {
$(this.parentNode).next().animate({
left: '50%'
}, 500);
} else {
$(this.parentNode).prevAll().last().animate({
left: '50%'
}, 500);
}
});
$('#domicilio').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this.parentNode.parentNode).animate({
left: '-50%'
}, 500);
if ($(this.parentNode.parentNode).next().size() > 0) {
$(this.parentNode.parentNode).next().animate({
left: '50%'
}, 500);
} else {
$(this.parentNode.parentNode).prevAll().last().animate({
left: '50%'
}, 500);
}
});
$('#colonia').click(function() {
setCookie("domicilio", "tipoDeServicio");
});
$('#ciudad').click(function() {
var e = document.getElementById("city");
var city = e.options[e.selectedIndex].value;
setCookie(city, "puraCiudad");
});
jQuery(document.body).imageZoom();
$('#pager').hide();
clienteBar();
$("#crossCiudad").hide();
$("#crossColonia").hide();
loadBreadcrumbs();
getTipoDeComida();
getCiudades();
$("#enviarSignUp").button();
$( "#logInContainer" ).dialog({
autoOpen: false,
height: 420,
width: 750,
modal: true,
buttons: {
"Regresar": function() {
$( this ).dialog( "close" );
}
},
});
$("#afiliarte").dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
buttons: {
"Enviar": function() {
//function
},
"Regresar": function() {
$( this ).dialog( "close" );
}
},
});
$("#contactanos").dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
buttons: {
"Enviar": function() {
//function
},
"Regresar": function() {
$( this ).dialog( "close" );
}
},
});
$( "#sugerirRestaurantes" ).dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
buttons: {
"Enviar": function() {
//function
},
"Regresar": function() {
$( this ).dialog( "close" );
}
},
});
$( "#terminosCondiciones" ).dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
});
$( "#signUpContainer" ).dialog({
autoOpen: false,
height: 320,
width: 480,
modal: true,
buttons: {
"Enviar": function() {
signUp();
},
"Regresar": function() {
document.getElementById("notificationCC").value = "";
$( this ).dialog( "close" );
}
},
})
});
function logInDialog(){
$( "#logInContainer" ).dialog( "open" );
}
function sugerirRestaurantesDialog(){
$( "#sugerirRestaurantes" ).dialog( "open" );
}
function terminosCondicionesDialog(){
$( "#terminosCondiciones" ).dialog( "open" );
}
function afiliarteDialog(){
$( "#afiliarte" ).dialog( "open" );
}
function contactanosDialog(){
$( "#contactanos" ).dialog( "open" );
}
function signUpDialog(){
$( "#signUpContainer" ).dialog( "open" );
}
function send(str, flag){
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//callback
//xmlhttp.responseText
switch(flag){
case "setCookie": setCookieCallback(xmlhttp.responseText);break;
case "deleteCookie": deleteCookieCallback(xmlhttp.responseText); break;
case "loadBreadcrumbs": loadBreadcrumbsCallback(xmlhttp.responseText);break;
case "getRestaurantes": getRestaurantesCallback(xmlhttp.responseText);break;
case "logIn": logInCallback(xmlhttp.responseText);break;
case "signUp": signUpCallback(xmlhttp.responseText);break;
case "logOut": logOutCallback(xmlhttp.responseText);break;
}
}
}
xmlhttp.open("GET",str,true);
xmlhttp.send();
}
function loadBreadcrumbs(){
//Checkboxes
if(document.getElementById('domicilioBreadcrumb').value == "set"){
document.getElementById('domicilio').checked = true;
}
if(document.getElementById('recogerBreadcrumb').value == "set"){
document.getElementById('recoger').checked = true;
}
if(document.getElementById('reservacionBreadcrumb').value == "set"){
document.getElementById('reservacion').checked = true;
}
var str = "printCookie.php";
send(str, "loadBreadcrumbs");
}
function loadBreadcrumbsCallback(response){
var arr = response.split("/");
//alert(response);
var colonia = arr[0].split("=");
var ciudad = arr[1].split("=");
var estado = arr[2].split("=");
var tipoDeComida = arr[3].split("=");
if(colonia[1] != ""){
document.getElementById("coloniaBreadcrumb").innerHTML = colonia[1]+"<br />";
$("#colonia").show();
}
if(ciudad[1] != ""){
document.getElementById("ciudadBreadcrumb").innerHTML = ciudad[1] + ", " + estado[1]+"<br />";
}
//document.getElementById("tipoDeComidaBreadcrumb").innerHTML = tipoDeComida[1];
if(document.getElementById('ciudadBreadcrumb').innerHTML == ""){
$("#crossCiudad").hide();
} else {
$("#city").hide();
$("#crossCiudad").show();
}
if(document.getElementById('coloniaBreadcrumb').innerHTML == ""){
$("#crossColonia").hide();
} else {
$("#tags2").hide();
$("#crossColonia").show();
}
//alert(colonia[1]+", "+ciudad[1]+", "+tipoDeComida[1]);
//getRestaurantes(colonia[1], ciudad[1], tipoDeComida[1]);
}
function handleSearch(event, ui){
term = document.getElementById("tags").value;
$.ajax({
url: 'loadCiudades.php?term='+term,
success: function(data) {
if(data == '[]'){
restaurantes = document.getElementById("content-background");
imagen = document.getElementById("proximamente");
restaurantes.style.display = "none";
imagen.style.display = "block";
}else{
restaurantes = document.getElementById("content-background");
imagen = document.getElementById("proximamente");
restaurantes.style.display = "block";
imagen.style.display = "none";
}
}
});
}
function getCiudades(){
ciudad = "<?php echo $_COOKIE['ciudad']; ?>";
$( "#tags2" ).autocomplete({
source: "loadCiudades.php?ciudad="+ciudad,
select: function(event, ui) {
setCookie(ui.item.value, "ciudad");
},
search: function(event, ui){ handleSearch(event,ui); }
});
}
function getTipoDeComida(){
$("#tipoDeComida").autocomplete({
source: "loadTipoDeComida.php",
select: function(event, ui) {
setCookie(ui.item.value, "tipoDeComida");
}
});
}
function setCookie(cookieValue, cookieType){
var str = "setCookie.php?cookieValue=" + cookieValue + "&cookieType=" + cookieType;
send(str, "setCookie");
}
function setCookieCallback(response){
switch(response){
case "puraCiudad": document.getElementById("tags").value = "";
$("#crossCiudad").show();
$("#city").hide();
break;
case "tipoDeComida": document.getElementById("tipoDeComida").value = "";
$("#crossComida").show();
$("#tipoDeComida").hide();
break;
case "ciudad": document.getElementById("tags2").value = "";
$("#crossColonia").show();
$("#tags2").hide();
$("#colonia").hide();
break;
case "tipoDeServicio": parent.location='index2.php';
break;
}
loadBreadcrumbs();
}
function getRestaurantes(colonia2, ciudad2, tipo2){
var direccion = document.getElementById('tags').value;
//var colonia = direccion.split(',')[0];
//var ciudad = direccion.split(',')[1];
var colonia = trim(colonia2);
var ciudad = trim(ciudad2);
var tipoComida = trim(tipo2);
var str = "getRestaurantes.php?colonia=" + colonia + "&ciudad=" + ciudad + "&tipoComida=" + tipoComida;
send(str, "getRestaurantes");
}
function getRestaurantesCallback(response){
if(response == "empty"){
document.getElementById('paging').innerHTML = "";
$('#pager').hide();
} else {
var arr = response.split("|");
var restaurantes = arr[0];
var promociones = arr[1];
var numPag = arr[2]/4;
document.getElementById("promocionesContainer").innerHTML = promociones;
$('#pager').show();
document.getElementById('paging').innerHTML = restaurantes;
$('#myTable').paginateTable({ rowsPerPage: numPag });
if(document.getElementById('totalPages').innerHTML == ""){
document.getElementById('pager').style.display = "none";
} else {
document.getElementById('pager').style.display = "block";
}
}
}
function stripVowelAccent(str)
{
var rExps=[
{re:/[\xC0-\xC6]/g, ch:'A'},
{re:/[\xE0-\xE6]/g, ch:'a'},
{re:/[\xC8-\xCB]/g, ch:'E'},
{re:/[\xE8-\xEB]/g, ch:'e'},
{re:/[\xCC-\xCF]/g, ch:'I'},
{re:/[\xEC-\xEF]/g, ch:'i'},
{re:/[\xD2-\xD6]/g, ch:'O'},
{re:/[\xF2-\xF6]/g, ch:'o'},
{re:/[\xD9-\xDC]/g, ch:'U'},
{re:/[\xF9-\xFC]/g, ch:'u'},
{re:/[\xD1]/g, ch:'N'},
{re:/[\xF1]/g, ch:'n'} ];
for(var i=0, len=rExps.length; i<len; i++)
str=str.replace(rExps[i].re, rExps[i].ch);
return str;
}
function deleteCookie(cookieType){
var str = "deleteCookie.php?cookieType=" + cookieType;
send(str, "deleteCookie");
}
function deleteCookieCallback(response){
//Borra el breadcrumb
switch(response){
case "puraCiudad": document.getElementById("ciudadBreadcrumb").innerHTML = "";
$("#crossCiudad").hide();
$("#city").show();
break;
case "tipoDeComida": document.getElementById("tipoDeComidaBreadcrumb").innerHTML = "";
$("#crossComida").hide();
$("#tipoDeComida").show();
break;
case "ciudad": document.getElementById("coloniaBreadcrumb").innerHTML = "";
$("#crossColonia").hide();
$("#tags2").show();
$("#colonia").hide();
break;
}
getRestaurantes();
}
function setCookieCheck(check, cookieType){
if(check.checked){
setCookie(1, cookieType);
} else {
deleteCookie(cookieType);
}
}
function logIn(){
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if(email == "" || password == ""){
document.getElementById("notification").innerHTML = "Ingresa tu email y contraseña";
} else {
password = hex_md5(password);
var str = "logIn.php?password=" + password + "&email=" + email;
send(str, "logIn");
}
}
function logInCallback(response){
if(response == "not_logged/0"){
document.getElementById("notification").innerHTML = "Las credenciales no son válidas";
} else {
document.getElementById("notification").innerHTML = "";
$("#logInBar").hide();
$("#logInBarMenu").hide();
$("#signUpBar").hide();
$("#clienteBar").show();
arr = response.split("/");
document.getElementById("usuarioIDnombre").innerHTML = arr[1];
$("#logInContainer").dialog("close");
loadColonia();
}
}
function loadColonia(){
var str = "getColonia.php";
send(str, "colonia");
}
function loadColoniaCallback(response){
}
function clienteBar(){
if(document.getElementById('usuarioID').value == 0){
$("#clienteBar").hide();
} else {
$("#logInBar").hide();
$("#signUpBar").hide();
}
}
function signUp(){
var valido = validateSignUp();
if(valido == true){
var nombre = document.getElementById("nombreCC").value;
var direccion = document.getElementById("direccionCC").value;
var email = document.getElementById("emailCC").value;
var password1 = document.getElementById("password1").value;
var nacimiento = document.getElementById("dia").value + "/" + document.getElementById("mes").value + "/" + document.getElementById("anio").value;
var sexo = document.getElementById("sexo").value;
var telefono = document.getElementById("telefono").value;
var str = "signUp.php?nombre=" + nombre + "&direccion=" + direccion + "&email=" + email + "&password=" + password1 + "&nacimiento=" + nacimiento + "&sexo=" + sexo + "&telefono=" + telefono;
send(str, "signUp");
}
}
function signUpCallback(response){
if(response == "existingEmail"){
document.getElementById("notificationCC").innerHTML = "Esa dirección de correo ya ha sido utilizada";
} else {
document.getElementById("notificationCC").innerHTML = "Ingresa a tu email para dar de alta tu cuenta";
document.getElementById("nombreCC").value = "";
document.getElementById("emailCC").value = "";
password1 = document.getElementById("password1").value = "";
password1 = document.getElementById("password2").value = "";
}
}
function validateSignUp(){
var nombre = document.getElementById("nombreCC").value;
var direccion = document.getElementById("direccionCC").value;
var email = document.getElementById("emailCC").value;
var password1 = document.getElementById("password1").value;
var password2 = document.getElementById("password2").value;
var dia = document.getElementById("dia").value;
var mes = document.getElementById("mes").value;
var anio = document.getElementById("anio").value;
var sexo = document.getElementById("sexo").value;
var telefono = document.getElementById("telefono").value;
var mydate=new Date()
var year=mydate.getYear();
if (year < 1000){
year+=1900
}
var month = mydate.getMonth();
month = month + 1;
var day = mydate.getDate();
if(day > 31 || mes > 12 || anio >= year){
document.getElementById("notificationCC").innerHTML = "La fecha de nacimiento no es válida";
return false;
} else{
//Valida que todos los campos esten llenos
if(nombre == "" || email == "" || password1 == "" || password2 == "" || telefono == "" || direccion == ""){
document.getElementById("notificationCC").innerHTML = "Por favor llena todos los campos";
return false;
} else {
//Passwords iguales
if(password1 != password2){
document.getElementById("notificationCC").innerHTML = "Las contraseñas no coinciden";
return false;
} else {
//Longitud del password
if(password1.length < 6){
document.getElementById("notificationCC").innerHTML = "La contraseña debe ser de al menos 6 caracteres de largo";
return false;
} else {
if(comparaFecha(dia, mes, anio, day, month, year) == false){
document.getElementById("notificationCC").innerHTML = "La fecha no es correcta";
return false;
}
else{
if(telefono.length < 10){
document.getElementById("notificationCC").innerHTML = "El telefono no es correcto";
return false;
} else {
return true;
}
}
}
}
}
}
}
function trim(value) {
var temp = value;
var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
if (obj.test(temp)) { temp = temp.replace(obj, '$2');}
var obj = / /g;
while (temp.match(obj)) { temp = temp.replace(obj, " ");}
return temp;
}
function comparaFecha(dia, mes, anio, day, month, year){
if(anio > (year-18)){
return false;
}
else
{
if(anio == (year-18))
{
if(mes > month){
return false;
}
else
{
if(mes == month)
{
if(dia > day){
return false;
}
else
{
return true;
}
}
}
}
else
{
return true;
}
}
}
function logOut(){
var str = "logOut.php";
send(str, "logOut");
}
function logOutCallback(response){
if(response == "success"){
$("#clienteBar").hide();
$("#logInBar").show();
$("#logInBarMenu").show();
$("#signUpBar").show();
document.getElementById("usuarioID").value = 0;
}
}
function setServicio(tipo){
setCookie("check", tipo);
}
function redirect(element){
window.location = element.title;
}
</script>
</head>
<?php
include("indexBackend.php");
?>
<body>
<?php
//Carga la session
if(isset($_SESSION['usuarioID'])){
echo ("<input type='hidden' id='usuarioID' value='".$_SESSION['usuarioID']."' />");
$nombre = $_SESSION['nombre'];
} else {
echo ("<input type='hidden' id='usuarioID' value='0' />");
$nombre = "";
}
?>
<?php
include("getPublicidad.php");
?>
<?php
//Domicilio
if($_COOKIE['domicilio'] == 1){
echo("<input type='hidden' id='domicilioBreadcrumb' value='set'/>");
} else {
echo("<input type='hidden' id='domicilioBreadcrumb' value='not_set'/>");
}
//Recoger
if($_COOKIE['recoger'] == 1){
echo("<input type='hidden' id='recogerBreadcrumb' value='set'/>");
} else {
echo("<input type='hidden' id='recogerBreadcrumb' value='not_set'/>");
}
//Reservacion
if($_COOKIE['reservacion'] == 1){
echo("<input type='hidden' id='reservacionBreadcrumb' value='set'/>");
} else {
echo("<input type='hidden' id='reservacionBreadcrumb' value='not_set'/>");
}
?>
<div style="width:100%; text-align:center;"><img src="images/logoadmin.png" alt="" align="middle" /></div>
<div id="container">
<div id="box1" class="box">
<div class="titulo">Selecciona tu Ciudad:</div>
<div class="caja">
<select id="city">
<option value="San Pedro Garza García, Nuevo Leon">San Pedro Garza García</option>
<option value="Monterrey, Nuevo Leon">Monterrey</option>
</select><input id="tags" style="display:none" />
</div>
<img id="crossCiudad" src="images/cross2.gif" style="cursor:pointer" onclick="deleteCookie('puraCiudad')"/> <span id="ciudadBreadcrumb"></span>
<span class="btn1" id="ciudad">Continuar</span>
</div>
<div id="box2" class="box">
<div class="titulo">Selecciona el Tipo de Servicio:</div>
<div class="caja">
<input type="radio" id="domicilio" name="tipo" value="domicilio" class="selec"/><span class="servicios">A Domicilio</span>
<input type="radio" name="tipo" value="recoger" class="selec" onClick="setCookie('recoger', 'tipoDeServicio')"/><span class="servicios">Pasar a Recoger</span>
<input type="radio" name="tipo" value="reservar" class="selec" onClick="setCookie('reservar', 'tipoDeServicio')"/><span class="servicios">Reservar</span>
</div>
</div>
<div id="box3" class="box">
<div class="titulo">Selecciona tu Colonia:</div>
<div class="caja"><input id="tags2" value="Escribe tu colonia: Ej. Del Valle" onblur="if(this.value=='') this.value='Escribe tu colonia: Ej. Del Valle'" onfocus="if(this.value =='Escribe tu colonia: Ej. Del Valle' ) this.value=''" /></div>
<img id="crossColonia" src="images/cross2.gif" style="cursor:pointer" onclick="deleteCookie('ciudad')"/> <span id="coloniaBreadcrumb"></span>
<span class="coloniaButton" id="colonia">Continuar</span>
</div>
</div>
<div id="footer">
<span style="float: left;">Derechos Reservados Quierodecomer.com</span>
<span onclick="terminosCondicionesDialog()" style="cursor:pointer; text-decoration: underline;">El uso de este sitio web implica la aceptación de los términos y condiciones de quierodecomer.com</span>
<span style="float: right;">Login Restaurantes</span>
</div>
<div id="terminosCondiciones" title="TÃ©rminos y Condiciones">
<?php echo $terminos; ?>
</div>
<script type="text/javascript">
/* Bookmark */
jQuery(document).ready(function(){
// add a "rel" attrib if Opera 7+
if(window.opera) {
if (jQuery("A.linkBookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set
jQuery("A.linkBookmark").attr("rel","sidebar");
}
}
jQuery("A.linkBookmark").click(function(event){
event.preventDefault(); // prevent the anchor tag from sending the user off to the link
var url = this.href;
var title = this.title;
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if( window.external ) { // IE Favorite
window.external.AddFavorite( url, title);
} else if(window.opera) { // Opera 7+
return false; // do nothing - the rel="sidebar" should do the trick
} else { // for Safari, Konq etc - browsers who do not support bookmarking scripts (that i could find anyway)
alert('Desafortunadamente, este navegador no soporta la petición ' + ' por favor, agrega esta página manualmente.');
}
});
$('.flexslider').flexslider();
});
</script>
</body>
</html>

I checked your JS console in IE7 mode and I got the following error :
SCRIPT1028: Expected identifier, string or number
testing.quierodecomer.com, line 215 character 2
So, try just to remove the last comma of your function :
$( "#terminosCondiciones" ).dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
});

Why am I unable to get sever time?

<html>
<head>
<title>Ajax Demonstration</title>
<style>
.displaybox {
width:150px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font:24px normal verdana, helvetica, arial, sans-serif;
}
</style>
<script language="JavaScript" type="text/javascript">
//<%=new java.util.Date()%>
function getXMLHTTPRequest() {
alert("Hello! I am an alert box!");
try {
req = new XMLHttpRequest();
} catch (err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function getServerTime() {
var myurl = 'http://localhost/csp 2/telltimeXML.php';
myRand = parseInt(Math.random() * 999999999999999);
// var modurl = myurl+"?rand="+myRand;
http.open("GET", myurl, true);
http.onreadystatechange = useHttpResponse;
http.send(null);
}
function useHttpResponse() {
if (http.readyState == 4) {
if (http.status == 200) {
var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
alert(timeValue);
document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
}
}
}
</script>
</head>
<body style="background-color:#cccccc"
onLoad="getServerTime()">
<center>
<h1>Ajax Demonstration</h1>
<h2>Getting the server time without page refresh</h2>
<form>
<input type="button" value="Get Server Time"
onClick="getServerTime()">
</form>
<div id="showtime" class="displaybox"></div>
</center>
</body>
</html>
Code for the PHP file:
<?php header('Content-Type: text/xml'); echo "<?xml version=\"1.0\" ?><clock1><timenow>" .date('H:i:s')."</timenow></clock1>"; ?>

Could be lots of things, since as others have pointed out we'd like to know what you are seeing. But one guess is that the url you are requesting is not hosted on the same server as the html file. That is, the html page you are one should be on http://localhost/.

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

Why The Program Writes To Socket Empty? - php

Related

On the click of the image it is not removing in jQuery

AJAX : Pass an image and data through Single AJAX [duplicate]

Passing JavaScript Variables from JavaScript to PHP using AJAX

jQuery doesnt work at all in IE8

Why am I unable to get sever time?

Categories

Resources