Autosave the text in tinymce with AJAX - php

I want to autosave my text in tiny mce with a post to my controller. I want only autosave the name="inhoud2" of the textarea.
Here is my header:
#extends('dashboard.app')
#section('content')
#include('auth.flashMessageError')
<script src="\tinymce_4.4.1\tinymce\js\tinymce\tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>tinymce.init({ selector: 'textarea', height : 350, }); </script>
<script>tinymce.init({ selector:'textarea' });</script>
<script>
var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
if (!autosaveOn)
{
autosaveOn = true;
$('#inhoud2').everyTime("300000", function(){
$.ajax({
type: "POST",
url: "opslaanedit",
data: $("#editsubmit").serialize(),
success: function(msg) {
$('autosave').text("gesaved");
}
});
}); //closing tag
}
}
</script>
This is my html code:
<form method="POST" id="editsubmit" action="/opslaanedit" >
{!! csrf_field() !!}
<div id="autosave"></div>
<div class="panel panel-flat">
<div class="panel-heading">
<h5 class="panel-title">Wijzig Document</h5>
<div class="heading-elements">
</div>
</div>
<div class="panel-body">
<fieldset>
<legend class="text-semibold">Wijzig de inhoud</legend>
<div class="form-group">
<input type="hidden" value="{{basename($root)}}" name="filename" id="filename" readonly="readonly" class="form-control" > <!-- verborgen veld voor de html name -->
<label><b>Titel</b> </label>
<input type="text" value="{{$title}}" id="titelnieuw" name="titelnieuw" class="form-control">
</div>
<textarea id="inhoud2" name="inhoud2"><?php echo file_get_contents($root);?></textarea> <!--tiny mce editor -->
<br>
<div class="text-left">
<button type="submit" class="btn btn-primary">Wijzig <i class="icon-arrow-right14 position-right"></i></button>
</div>
</div>
</div>
</form>
#endsection
I doesn't save my text automatically.

This looks like inherited code. There's lot of space for improvement. I don't know if textarea is saved for the first time, or just updated, so I cant figure to which route should I post value of textarea. Are there any other fields required for that?
There are many factors. And if you only afraid of losing textarea content, I would use just autosave plugin from tinymce. It keeps content in local storage.

Related

dropzone $_FILES is empty

I try to submit a form with some dropzone-added files and additional fields.
I donĀ“t want those dropzone Ajax Features, because i want to add some information by additional inputs.
So, at least a very simple Submit-Form with multiple Files, which gets processed after pressing the submit button.
So far, the client side works fine, but when I submit the form, $_FILES is empty! Why?
What I got so far:
<?
if(isset($_POST))
{
print_r($_POST);
print_r($_FILES);
exit;
}
?>
<form id="smart-form" enctype="multipart/form-data" method="POST" action="upload.php">
<div class="form-body">
<div class="section">
<div class="dropzone" id="myDropzone">
<h3 class="dz-drop-title"> Drop files here or </h3>
<p class="dz-clicker"> <span> Browse File </span> </p>
<div class="fallback">
<input name="file[]" type="file" multiple />
</div>
</div>
</div><!-- end section -->
</div><!-- end .form-body section -->
<label style="padding: 5px;" for="another_field_1">another field 1 <input id="another_field_1" type="text" name="testinput1"></label><br>
<label style="padding: 5px;" for="another_field_2">another field 2 <input id="another_field_2" type="text" name="testinput2"></label>
<div class="form-footer">
<button type="submit" class="button btn-primary"> Send Form </button>
</div><!-- end .form-footer section -->
</form>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery(".dropzone").dropzone({
url: "upload.php",
dictDefaultMessage: "Datei bitte hier ablegen!",
success: function() {
jQuery('.success-mark').show();
jQuery('.error-mark').hide();
},
error: function() {
jQuery('.success-mark').hide();
jQuery('.error-mark').show();
}
});
});
</script>

jQuery show hide select menus based on serialized hash

I am trying to get select menus show hide by using ajax and serialised hashes. I had this system working last night but I changed the #selector from a form to a div and suddenly its stopped running. I had to broaden the form for additional data on post and did not want to serialise all the data at once for this as it would be additional strain on the system.
The page somewhat works as expected. It shows the first select, allows me to select an option, I can see the AJAX posting but the hash value is empty which I believe is breaking the PHP above. I cant figure out why the hash is posting empty. I assume its not getting the value from the select but I cant work out why..
If possible can you please point out where I am going wrong?
<section id="add">
<div class="container">
<form method="post">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1"></select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
$(document).on('change', '#selector', function(e) {
ajax_post(this);
});
ajax_post();
})(jQuery);
function show_hide_select(select){
if ($(select).find('option').length < 1) {
$(select).hide();
} else {
$(select).show();
}
}
function ajax_post(element=null) {
var frm = $('#selector');
if (element != null) {
// Reset selections
var found=false;
frm.find('select').each(function(e){
if (found==true) {
$(this).hide().find('option:selected').prop("selected", false)
}
if (element==this) found=true;
});
}
$.ajax({
url: '?ajax=1',
type: "POST",
data: frm.serialize(),
dataType: 'json',
success: function (data) {
if (data.box1hash != frm.find('.box1hash').val()) {
frm.find('.box1').html(data.box1?data.box1:'');
frm.find('.box1hash').val(data.box1hash);
show_hide_select(frm.find('.box1'));
}
if (data.box2hash != frm.find('.box2hash').val()) {
frm.find('.box2').html(data.box2?data.box2:'');
frm.find('.box2hash').val(data.box2hash);
show_hide_select(frm.find('.box2'));
}
if (data.box3hash != frm.find('.box3hash').val()) {
frm.find('.box3').html(data.box3?data.box3:'');
frm.find('.box3hash').val(data.box3hash);
show_hide_select(frm.find('.box3'));
}
if (data.box4hash != frm.find('.box4hash').val()) {
frm.find('.box4').html(data.box4?data.box4:'');
frm.find('.box4hash').val(data.box4hash);
show_hide_select(frm.find('.box4'));
}
if (data.box5hash != frm.find('.box5hash').val()) {
frm.find('.box5').html(data.box5?data.box5:'');
frm.find('.box5hash').val(data.box5hash);
show_hide_select(frm.find('.box5'));
}
}
});
}
</script>
Contrary to my earlier comments, a form tag cannot be nested within another form tag. jquery serialize() only works on forms, so unfortunately it's not possible to focus it on a div component of the form. Instead however you can serialize the whole form as a string, and then extract the subsection of that string for reduced ajax posting. Snippet below with inline comments...
$('form').on({
'change':function(e){
e.preventDefault();
var dats = $(this).serialize(); // serialize the whole form into a string
var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
$('#results').text(dats+' '+newDats);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="add">
<div class="container">
<form method="post" id='bob'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
<p><tt id="results"></tt></p>

How can I stop the Bootstrap Modal popup from closing during a submit of data to db?

I have a commenting system that sits within a Bootstrap Modal, all works fine in terms of pulling data from the database, and the ability to enter data. the problem is on Submit.
This below is my code for the submit.
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: form.serialize(),
success: function(data){
console.log(data);
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
},
error: function(e){
alert(e);
}
});
});
});
myjobspage.php - this is the start of my modal on my main page, it's called from the Notes button
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>
I originally had the rest of the modal within the div above, but as I was having this issue of it closing the form and refreshing the page, I decided to move the modal onto another page, and have it called when the button is clicked, but still having the same issue
This is the modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--comment form -->
<form class="notesform" id="notesform" name="notesform" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid; ?>">
<input type="hidden" name="projno" value="<?php echo $projectno; ?>">
<input type="hidden" name="name" value="<?php echo $inputby; ?>">
<div class="col-md-12 ">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
<div class="col-md-8">
<textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<br>
<input type="submit" class="btn green" id="savenotes" name="submit" value="Submit Comment" />
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
One question on this though is that to call the jquery/Ajax code is done through my main page, is this right or should it be done through the page that the Model body is on?
When the Submit button id="savenotes" is clicked, the modal closes and refreshes the page losing all data within the main page.
How can I submit data to the database without the Modal closing?
I don't know if you've found an answer to this but at least for others who might need solutions just like I once did.
This is the modal page named modal.php:
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1"
data-
width="960">
<!-- div wrapper for modal dialog -->
<div class="modal-dialog">
<!-- div wrapper for modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<!-- I guess you wanted your body centered .justify-content-center
should fix that -->
<div class="modal-body justify-content-center">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<!-- I guess you wanted your form centered .justify-content-center
would fix that -->
<div class="row justify-content-center">
<!--comment form -->
<form class="notesform form-block" id="notesform" name="notesform"
method="post" action="projectnoteuploads.php">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid =
'propid'; //replace variable $propid ?>">
<input type="hidden" name="projno" value="<?php echo $projectno =
'projectno'; //replace variable $projectno ?>">
<input type="hidden" name="name" value="<?php echo $inputby =
'inputby'; //replace variable $inputby ?>">
<div class="form-group">
<label for="comment" class="control-label">Project Notes *</label>
<textarea class="form-control form-control-md" rows="3" cols="25"
name="comment" style="resize: none;" id="comment" placeholder="Type
your comment here...." required></textarea>
</div>
<input type="submit" class="btn btn-success" id="savenotes"
name="submit" value="Submit Comment" />
</form>
</div>
<!-- I can't find where your Comments are appended
to, so I placed them here using the
class name 'comment-block' as you used in your script -->
<div class="row justify-content-center">
<div class="comment-block"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-
default">Close</button>
</div>
</div>
</div>
</div>
Then this is your myjobspage.php where you will include the modal.php
<?php
include 'modal.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Myjobspage</title>
<link rel="stylesheet"
href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
<script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
<script src="path/to/bootstrap-
4.0.0/assets/js/vendor/popper.min.js">
</script>
<script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Some Code Here-->
<!-- Button to Launch Modal. Replace appropriately-->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#projnotes">
Launch Comments Modal
</button>
<!-- some other code -->
<!-- script to trigger your modal.php -->
<script src="modalScript.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
</body>
</html>
This is the script modalScript.js that will make the request to projectnoteuploads.php via the ajax method.
$(document).ready(function(){
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: $('form').serialize(),
success: function(data){
console.log(data);
//This I guess was where the error was in the previous code.
$('.comment-block').append(data).hide().fadeIn(800);
$('textarea').val(''); //This will wipe out the textarea after
//comment input
},
error: function(e){
alert(e);
}
});
});
});
Please take note, the codes have all being modified from the question, I tried it and it works.

Unable to Retrive Ajax Response in some Records

I am using onclick jquery event to append ajax response in modal box.My purpose is to display a form with auto Filled Data in modal box that comes from ajax Response according to id from mysql database.But it is not dispaying form for some users.
my code for above explained is here
Jquery code:
$(document).on("click",".edit_recent_member_form",function(e){
e.preventDefault();
$("#overlay").addClass("load_show");
$("#formModal .modal-body").html("");
var edit_recent_member_form="edit_recent_member_form";
var mem_id=$(this).attr("mem_id");
var datastring="edit_members_form="+edit_recent_member_form+"&mem_id="+mem_id;
//alert(datastring);
$.ajax({
url:"modules/my_members/edit_member_form.php",
type:"post",
dataType:"json",
data:datastring,
}).done(function(data){
var html=data["html"];
//alert(html);
$("#formModal .modal-body").append(html);
$('#formModal').modal({
show:true
//backdrop:'static'
});
/////
$(".mi-multiup").dropzone({ url: "modules/my_members/ajax.php?var=edit_profile_pic" ,acceptedFiles : ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF" });
var sendingHandler = function(file, xhr, formData) {
formData.append('mem_id',mem_id);
//formData.append('img_name', $(".img_name").val());
//formData.append('img_desc', $(".img_desc").val());
};
$('.mi-multiup').each(function() {
Dropzone.forElement(this).on('sending', sendingHandler);
});
//////
$("#overlay").removeClass("load_show");
});
});
Ajax code:
if(isset($_REQUEST['edit_members_form']))
{
$mem_id=$_REQUEST['mem_id'];
$html='<div class="panel panel-default">
<form class="form-horizontal form-border">
<div class="alert alert-success successbox">
Selected Record is Saved Successfully.
</div>
<div class="alert alert-danger dangerbox"></div>
<div class="panel-heading">
Edit Member
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-md-2">Login</label>
<div class="col-md-10">
<input type="text" class="form-control user_login" placeholder="" value="'.get_edit_member_detail($mem_id,"user_login",$page).'">
</div><!-- /.col -->
</div><!-- /form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select class="form-control chzn-select category">
<option>None selected or enter new category</option>
'.get_category_detail($mem_id,$page,"none").'
</select>
<input type="text" class="form-control" name="newcategory" value="" placeholder="Enter a new category" size="28" />
</div><!-- /.col -->
</div><!-- /form-group -->
<div>Upload Image</div>
<div class="form-horizontal form-border" style="display:none;">
<h3>Click on area to upload new image</h3>
<div class="dropzone mi-multiup"></div>
</div>
</div>
<div class="panel-footer">
<div class="text-right">
<button class="btn btn-sm btn-success update_member_info" mem_id='.$mem_id.'>Update Member Information</button>
</div>
</div>
</form>
</div><!-- /panel -->';
$list = array('html' =>$html);
echo json_encode($list);
}
and it is the code whose onclick all work should be done
<td>
<i class="fa fa-user-md fa-lg"></i></td>
please any solution.
May be this solution. Add this code in ajax calling
url:"modules/my_members/edit_member_form.php",
type:"post",
dataType:"json",
data:datastring,
async: false

how to load a page containing jQuery with ajax and keep the code functioning?

Hey everybody thanks for reading .
I have a problem i don't know how to keep functioning jquery code of a page that has been loaded with ajax. The problem is that on the original page the code executes so the jquery framework has already loaded and when the ajax call comes in to load the data of the other page i get unfunctioning jquery code. The jquery code that was loaded from the ajax page dose not work .
If i was not clear ask for clarification , for more detal the code is below :
The page into which i load the jquery pages :
<?php
ob_start();
include 'includes/chk.php';
?>
<script type="text/javascript">
$(document).ready(function() {
$('#account_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
$('#settings_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
});
</script>
<div class="ui-grid-a">
<div class="ui-block-a">
<ul data-role="listview" data-divider-theme="d" data-inset="true">
<li data-theme="c">
<a href="#settings" >
Settings
</a>
</li>
<li data-theme="c">
<a href="#account" id="account_link" >
Account
</a>
</li>
</ul>
</div>
<div id="div_container_sett_acc">greg</div>
</div>
<?php
$pagemaincontent = ob_get_contents();
ob_end_clean();
$pageHead='';
$home_page='ui-btn-active';
$pageTitle ='';
include("master.php");
?>
On of the ajax pages being loaded :
<?php
include_once ("../includes/mysql.php");
include_once ("../includes/chk.php");
?>
<div class="ui-block-b">
<div id="settings_link" data-theme="a">
<div data-role="content" data-theme="a" >
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p>Back to page "one"</p>
</div><!-- /content -->
</div><!-- /page two -->
<div id="account" data-theme="a">
<div data-role="content" data-theme="a">
<form url="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
Boh
</label>
<input id="textinput1" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="selectmenu1">
Choose:
</label>
<select name="selectmenu1" id="selectmenu1">
<option value="option1">
Option 1
</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="radiobuttons1" id="radio1" value="" type="radio" />
<label for="radio1">
Option
</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="checkbox1" id="checkbox1" type="checkbox" />
<label for="checkbox1">
Checkbox
</label>
</fieldset>
</div>
<input type="submit" value="Submit" />
</form>
</div><!-- /content -->
</div><!-- /page two -->
</div>
If someone could help me out i would be most great-full
You should use on instead of bind:
$(document).ready(function() {
$('#account_link').on('click', function() {...})
$('#settings_link').on('click', function() {...})
});
You need to have a jquery script code inside loaded content. So, there must be the same in the base page and the same included in code called by $.post
$.Posted content is not served by default $(document).ready(function()

Categories