Hello I tried every think i can and searched online but noting came up.
My index.html
<!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="en" lang="en">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote css/js-->
<link href="include/summernote.css" / rel="stylesheet">
<script src="include/summernote.min.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 200,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
$.ajax({
data: data,
type: "POST",
url: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
</script>
<head>
<title>Bootstrap WysWig Editor Summernote</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div class="container">
<div class="row">
<form class="span12" id="postForm" action="index.php" method="POST" enctype="multipart/form-data" >
<fieldset>
<legend>MyCodde.Blogspot.com Editor</legend>
<p class="container">
<textarea class="input-block-level" id="summernote" name="content" rows="18">
</textarea>
</p>
</fieldset>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</body>
</html>
My savetheuploadedfile.php
<?php
$dir_name = "uploads/";
move_uploaded_file($_FILES['file']['tmp_name'],$dir_name.$_FILES['file']['name']);
echo "http://localhost:90/summernote/".$dir_name.$_FILES['file']['name'];
?>
Problem is when i use this like that image is uploading but image doesn't adding to editor, From chrome tools i see this error Uncaught TypeError: Cannot read property 'insertImage' of undefined I found this code to fix it.
$('.summernote').summernote('editor.insertImage', url);
But still image is uploading but not adding to editor. Thank you for helping.
The onImageUpload callback signature was changed, try this modified JavaScript:
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 200,
onImageUpload: function(files) {
sendFile(files[0]);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
$.ajax({
data: data,
type: "POST",
url: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
$('#summernote').summernote('editor.insertImage', url);
}
});
}
});
</script>
Basically you don't get the editor object anymore but have to fetch it yourself in the success callback.
Related
I'm trying to create a page that uploads an image. When I hit the upload.php I get this error
Undefined index: files in E:\My-Laptop\Wamp\www\image-upload\upload.php on line 3
and if I do print_r($_FILES)I get an empty array.
I'm not sure where I went wrong.
Here is my code.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" >
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="file" multiple>
<!-- Drag and Drop container-->
<div class="upload-area" id="drop-zone">
<h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1>
</div>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
my main.js
$(document).ready(function(){
var dropZone = document.getElementById('drop-zone');
dropZone.ondrop = function(e){
e.preventDefault();
var transfer = e.dataTransfer.files;
uploadImage(transfer);
}
dropZone.ondragover = function(e){
return false;
}
dropZone.ondragleave = function(e){
return false;
}
});
function uploadImage(files){
var dataString = 'files='+files;
$.ajax({
type: 'POST',
url: 'upload.php',
data: dataString,
success: function(response){
console.log(response);
}
});
}
my upload.php
<?php
print_r($_FILES['files']);
Hope it's help:
function uploadImage(files){
var data = new FormData();
$.each( files, function( key, value ){
data.append( key, value );
});
$.ajax({
type: 'POST',
url: 'upload.php',
data: data,
success: function(response){
console.log(response);
}
});
}
I just need to display names of the array using ajax. Following code is working but the result ( Nilantha Ruwan Nimal Shamitha Alex) is just display and disappears.
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top:50px";>
<form >
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Enter Name....">
</div>
<div class="form-group">
<button class="btn btn-success" id="btn">Enter</button>
</div>
</form>
<div class="msg"></div>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
var name = $("#name").val();
$.post("ajax.php",{ajax_name:name},function(response){
$(".msg").html(response);
})
.fail(function(error){
alert(error.statusText);
})
})
})
</script>
</body>
</html>
ajax.php
<?php
if(isset($_POST['ajax_name'])){
$store = array("Nilantha","Ruwan","Nimal","Shamitha","Alex");
foreach($store as $names) {
echo $names,"<br>";
}
}
?>
Try the following code.
<script type="text/javascript">
function submit() {
jQuery("form").submit(function(e) {
e.preventDefault();
var name = jQuery("#name").val();
jQuery.ajax({
type: 'POST',
url: 'ajax.php',
data: {ajax_name:name},
success: function(response) {
jQuery(".msg").html(response);
jQuery('#name').val('');
},
error: function() {
console.log("Something wrong");
}
});});
}
jQuery(document).ready(function() {
submit();
});
</script>
I would suggest looking at the network tab of Chrome Devtools and ensuring that the AJAX call isn't running twice. I would think that if the query ran twice but the second one did not have any name attached then it would return blank once the first one had received its response.
I am working on trying to post to ajax file with jquery and showing result on page posted from. Post gets posted but I get no reply from ajax. Am i missing something here?
form 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" />
<title>Test Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
</form>
<div id="answer"></div>
<script type="text/javascript">
$('#myform').submit(function(){
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
ajax file
<?php
if(isset($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
}
echo $youTyped;
?>
Well, first of all, you didn't write your form correctly, the elements you want to send are not inside the form.
Second, your js function is not avoiding the form for being sent, so you're reloading the page when submitting the form.
So, to correct it, and get the answer, just change the code to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<form id="myform">
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</form>
<script type="text/javascript">
$('#myform').submit(function(e){
// Avoid send the form as a normal request
e.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
One last thing. To test it, when you're sending and receiving AJAX, if you're using Chrome you can use the development tools to know if you're sending correctly the requests. Just press F12, and then go to Network tab. If you're using correctly AJAX, you'll see how new lines are added when you press the submit button:
You need to return false on form submit. The form is being submited before ajax request. Also add a closing tag for form.
<script type="text/javascript">
$('#myform').submit(function () {
var youTyped = $("#youTyped").val();
var data = {
youTyped: youTyped
};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function (response) {
$("#answer").html(response);
}
});
return false;
});
</script>
Try if this code is working:
<body>
<input type="text" id="youTyped" value=""/>
<input type="submit" id="submit" value="Submit">
<div id="answer"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var youTyped = $("#youTyped").val();
$.post('scripts/ajaxTest.php',{"youTyped" : youTyped},function(response)
{
$("#answer").html(response);
});
});
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$('#myform').submit(function(event){
event.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "ajaxTest.php",
data: data,
success: successMsg,
error: errorMsg
});
});
function successMsg(response){
alert(response);
$("#answer").html(response);
}
function errorMsg(){
alert("Invalid Ajax Call");
}
</script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</body>
</html>
As I toyed with the idea, thought that this would make a good addition/contribution to the question.
I added and modified a few things.
One of which being:
If nothing was typed into the form input field, it would return "You typed: Nothing".
PHP:
<?php
if(!empty($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
echo "You typed: " .$youTyped;
}
else if (empty($_POST['youTyped'])){
echo "You typed: Nothing";
}
?>
I can't make the html loaded via ajax update the DOM. What am I doing wrong?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="//atpc.info/f/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/form.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/pesquisa.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//atpc.info/f/t/test.js"></script>
</head>
<body>
<form id="form_p" action="">
<fieldset class="p_test">
<legend>Test question text?</legend>
<label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
<label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
<small id="update_p"></small> <span id="status_p"></span>
</form>
</body>
</html>
JQuery:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
var id_p=$('input:radio:first').attr('name');
var v_r=$('input:radio:checked').val();
alert(v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
alert('Retorno:\n' + data);
//$('form').append($(data).hide().fadeIn('slow'));
$('body').append(data);
$('label').css('display','block');
}
);
});
});
PHP:
<?
if(!empty($_REQUEST['id_p'])) $id_p=$_REQUEST['id_p'];
else die('Ops! no id_p');
if(!empty($_REQUEST['v_r'])) $v_r=$_REQUEST['v_r'];
else die('Ops! no v_r');
if($_REQUEST['id_p']=='p_test1') die('Victory!!!');
echo<<<FORM
<fieldset class="p_test1">
<legend>Test 1 question text?</legend>
<small>Last question was $id_p and you option was $v_r</small>
<label for="p_test1_y"><input type="radio" id="p_test1_y" name="p_test1" value="ohy">Oh, Yes!</label>
<label for="p_test1_n"><input type="radio" id="p_test1_n" name="p_test1" value="ohn">Oh, No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
FORM;
?>
For those interested, here is the final working JQuery code:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
//var fieldset=$(this).closest('fieldset');
var fieldset=$(this).parent('fieldset');
//alert(fieldset.attr('class'));
//var id_p=$('input:radio').attr('name');
//var id_p=fieldset.attr('class');
var id_p=$('fieldset:last').attr('class');
var v_r=$('input:radio:checked:last').val();
if(v_r=='') v_r=$('textarea:last').val();
fieldset.hide();
//alert('id_p = '+id_p+' - v_r = '+v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
//alert('Retorn:\n' + data);
$('body').append($(data).hide().fadeIn('slow'));
//$('body').append($(data));
//$('body').append($data);
$('label').css('display','block');
//console.log(data);
}
);
});
});
Actually, the DOM is updated. But I think the selector is wrong.
Try this?
$(':radio:checked:last')
This will get the last checked radio input, which is probably what you want instead. Based on the markup:
<fieldset class="p_test">
<legend>Test question text?</legend>
<label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
<label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
The fieldset tag wraps everything up, so your handler can be defined like:
$('a.continue_r').live('click', function() {
var $fieldset = $(this).parent('fieldset');
// Do stuff like $fieldset.find(), which ensures that your matches are contained therein.
});
I have the following php script which works flawlessly in normal circumstances (i.e. visiting the page directly):
HTML
<!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" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/contact_search.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).click(function() {
$("#display").hide();
});
var cache = {};
$("#searchbox").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox.length < 3 ) {
$("#display").hide();
} else {
$.ajax({
type: "POST",
url: "contact_search/search.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
return false;
});
});
jQuery(function($) {
$("#searchbox").Watermark("Search for Group");
});
</script>
</head>
<body bgcolor="#e0e0e0">
<div class="body">
<div class="liquid-round" style="width:100%;">
<div class="top"><span><h2>Contacts List</h2></span></div>
<div class="center-content">
<img src="images/search.gif" style="float:right;" />
<input type="text" id="searchbox" maxlength="20" value="<?php echo $_SESSION['hello'];?>" />
<div id="display"></div><div style="clear:both;"></div>
</div>
<div class="bottom"><span></span></div>
</div>
<div class="liquid-round" style="width:97%;">
<div class="top"><span><h2>My Messages</h2></span></div>
<div class="center-content" style="min-height:200px;">
</div>
<div class="bottom"><span></span></div>
</div>
</div>
</body>
</html>
HOWEVER - when I add the following piece to the top of the page, the javascript/jquery functions simply stop working altogether.
<?php
session_start();
if( $_SERVER['SERVER_PORT'] == 80) {
header('Location:https://'.$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"]);
die();
}
?>
These pages require login so I need to ensure they are https protected but this error messes all that up. Any ideas what could be causing the issue?
It's probably the browser not displaying insecure (http) content on https pages, there's a simple fix though, use a scheme relative URL, like this:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
This way you'll get http://ajax.googleapis.com/.... on the http:// version of your page and https://ajax.googleapis.com/.... on the https:// version.
Since session_start produces HTTP-Headers I recommend to do the port check before session_start.
But, these lines should not affect your JS in any circumstances, because the redirect to HTTPS is independend from the fact if your site is working via HTTPS. So, if you are not sure, remove the lines and access your page with HTTPS. Bring JS to work there. And afterwards implement the redirect.