I have posted this question in multiple places, but haven't had any responses so going to try here. I am creating a Wordpress plugin. Part of the plugin loads a dropdown from a database. When an option is selected from the dropdown, a form is loaded from an external page using Javascript. The issue I am having is that when I try to load the wp_editor, it is only partially loaded. It is missing the toolbars. Any help is appreciated.
Here is an image of what I am getting.
Here is the javascript used to load the page:
function showeditevent(str) {
var location1 = window.location.href;
var directoryPath = '<?php echo plugins_url(); ?>';
//alert(directoryPath);
if (str == "") {
document.getElementById("txtEditevent").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtEditevent").innerHTML = this.responseText;
}
};
xmlhttp.open("GET",directoryPath+"/events/editevent.php?q="+str,true);
xmlhttp.send();
}
}
And here is editevent.php
<script src="../../../wp-includes/js/tinymce/tiny_mce_popup.js"></script>
<script src="../../../wp-includes/js/tinymce/tinymce.min.js"></script>
<?php
require_once('../../../wp-load.php');
require_once('../../../wp-includes/class-wp-editor.php');
//require_once('../../../wp-admin/admin-ajax.php');
global $wpdb;
$id = $_GET["q"];
$sql = $wpdb->get_row("SELECT * FROM " . $wpdb->prefix . "cmc_events where id=$id");
$title = $sql->title;
$date = $sql->date;
$time = $sql->time;
$info = $sql->info;
$filename = $sql->filename;
$newdate = DateTime::createFromFormat('m-d-Y', $date)->format('Y-m-d');
?>
<form name="editevent" action="" method="post" enctype="multipart/form-data">
<table>
<tr>
<th align="right" valign="top">Title:</th>
<td><input type="text" name="title" placeholder="Title" value="<?php echo $title; ?>" /></td>
</tr>
<tr>
<th align="right" valign="top">Date:</th>
<td><input type="date" name="newdate" value="<?php echo $newdate; ?>" /></td>
</tr>
<tr>
<th align="right" valign="top">Time:</th>
<td><input type="time" name="newtime" value="<?php echo $time; ?>" /></td>
</tr>
<tr>
<th align="right" valign="top">Information:</th>
<td>
<?php
$content = $info;
$editor_id = 'info';
$settings = array(
'textarea_name' => 'info',
'textarea_rows' => 10,
'tinymce' => array(
'width' => 1000
)
);
wp_editor( $content, $editor_id, $settings );
?>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="save_edit_event" value="Save Edit"></td>
</tr>
</table>
</form>
Do you check if the current user can richedit by user_can_richedit() function? WP_Editor will only fully load when users can richedit.
Related
I am trying to make a poll with two pink bars to show the percentages of the results. I made my percentage bars images, although when I used the poll, they stay the same size and don't get any smaller/bigger according to their %. How should I change the code so that the % bars change their lengths?
HMTL code:
<html>
<head>
<script>
function getVote(int) {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("poll").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>
No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
PHP file:
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td><img src="images/poll.png"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td><img src="images/poll.png"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
You should not use image for indicating progress. Use <progress> or other HTML element with CSS.
I have changed your poll_vote.php file to use <progress> element.
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
$yesProgress = 100*round($yes/($no+$yes),2);
$noProgress = 100*round($no/($no+$yes),2);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<progress id="file" max="100" value="<?= $yesProgress ?>">
<?= $yesProgress ?>
</progress>
<?= $yesProgress ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<progress id="file" max="100" value="<?= $noProgress ?>">
<?= $noProgress ?>
</progress>
<?= $noProgress ?>%
</td>
</tr>
</table>
Refer below Links:
HTML Element
Bootstrap 4 Progress Bars
EDIT
Ive now got the following - but still it does not work
<script>
$(document).ready(function() {
$("button").click(function(){
var jsPostcode = document.login.getElementsByName("postcode").value;
var jsEmail = document.login.getElementsByName("email").value;
var formdata = {postcode:jsPostcode,email:jsEmail};
$.ajax(
{
type: "POST",
url: "database.php", //Should probably echo true or false depending if it could do it
data : formdata,
success: function(feed) {
if (feed!="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}}}};
</script>
=================================================================
ORIGINAL QUESTION FOLLOWS
I'm trying to take in data using a form and send some of this to a Mysql database. I cant use the action keyword in the form as that is being used to complete authentication therefore I am trying to use ajax and jquery. I have got to a point where I know I am close to cracking it but I'm not sure what is wrong. Please see my files below. First off the main file login.php is below:
Form Follows (login.php)
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
if (isset($_POST['postcode'])) {
$postcode = $_POST['postcode'];
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
}
?>
**SOME HTML HERE**
<script src="jquery-3.2.1.min.js"></script>
<script>
var js-postcode = document.login.getElementsByName("postcode").value;
var js-email = document.login.getElementsByName("email").value;
var formdata = {postcode:js-postcode,email:js-email};
$("button").click(function(){
$.ajax(
{
type: "POST",
url: "database.php", //Should probably echo true or false depending if it could do it
data : formdata,
success: function(feed) {
if (feed!="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}}}
</script>
</head>
<body>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="<?php echo $username; ?>"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 80px" name="postcode" type="text" /></td>
</tr>
<tr><td align="right">Email</td>
<td><input style="width: 80px" name="email" type="text" /></td>
</tr>
<td><button><input type="submit" value="OK" /></button></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
and called file database.php is as follows:
<?php
if ((isset($_POST['postcode'])) && (isset($_POST['email']))) {
$postcode = $_POST['postcode'];
$email = $_POST['email'];
$connect= new mysqli_connect('xx','xx','xx','xx');
if ($conn->connect_errno) {
echo "There was a problem connecting to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
if (!($sql = $conn->prepare("INSERT INTO visitors(postcode,email) VALUES(postcode,email)"))) {
echo "Prepare failed: (" . $conn->errno . ") " . $conn->error;
}
//NOTE: the "ss" part means that $postcode and $email are strings (mysql is expecting datatypes of strings). For example, if $postcode is an integer, you would do "is" instead.
if (!$sql->bind_param("ss", $postcode, $email)) {
echo "Binding parameters failed: (" . $sql->errno . ") " . $sql->error;
}
if (!$sql->execute()) {
echo "Execute failed: (" . $sql->errno . ") " . $sql->error;
}
} else {
echo 'Variables did not send through ajax.'; // any echoed values would be sent back to javascript and stored in the 'response' variable of your success or fail functions for testing.
}
?>
Please help - all assistance greatly appreciated
I want a Select Box where I can Filter the Data from the Database (with Ajax - no site reload). For example: Order the data by ID or Order the data by name
Thats working fine and now when I get that data I want also that I can edit the data with Inputs and save it (also trough ajax) but I dont know how. I know how to save data with ajax but not when the data is a response from another ajax.
Code: (Its not well formatted here, that's why pastebin: http://pastebin.com/7mgi6VMc)
Index:
<div class="wrapper">
<p id="result">Erfolgreich gespeichert!</p>
<br>
<div class="filter">
<form>
Anzeige:
<select class="selectFilter" onchange="filterFunction(this.value)">
<option value="id_back">ID - Aufwärts</option>
<option value="id_up">ID - Abwärts</option>
</select>
</form>
</div>
<br>
<br>
<div id="resultCatalogue">
<b>Bitte wähle die gewünschte Anzeige ...</b>
</div>
</div>
getData.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css? family=Open+Sans" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$("#save").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "./save.php",
data: $(this).serialize(),
success: function(data) {
if($('#result').css('display') == 'none') {
document.getElementById('result').style.display = 'block'
} else {
document.getElementById('result').style.display = 'none'
setTimeout(function() {
document.getElementById('result').style.display = 'block'
}, 100);
}
},
});
});
</script>
</head>
<body>
<?php
$type = intval($_GET['type']);
if($type == "id_up")
{
echo '
<table class="tableCatalogue">
<tr>
<th class="th" width="5%">ID</th>
<th class="th" width="5%">Unter-ID</th>
<th class="th" width="15%">Titel</th>
<th class="th" width="5%">Iceron</th>
<th class="th" width="10%">Sichtbar</th>
<th class="th" width="10%">Aktiv</th>
<th class="th" width="5%">Min. Rank</th>
<th class="th" width="5%">VIP</th>
<th class="th" width="5%">Reihen Nummer</th>
<th class="th" width="10%">Layout</th>
</tr>
<form method="post" id="save">
';
$index = 0;
$getCataloguePages = mysql_query("SELECT * FROM catalog_pages");
while($row = mysql_fetch_array($getCataloguePages))
{
$id = $row['id'];
$parent_id = $row['parent_id'];
$caption = $row['caption'];
$icon_image = $row['icon_image'];
$visible = $row['visible'];
$enabled = $row['enabled'];
$min_rank = $row['min_rank'];
$min_vip = $row['min_vip'];
$order_num = $row['order_num'];
$page_layout = $row['page_layout'];
$i++;
if(IsEven($i)){
$even = "Even";
} else {
$even = "Odd";
}
echo '
<tr>
<td class="td'.$even.'" width="5%"><input placeholder="ID" class="inputTable" name="id[]" value="'.$id.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Unter-ID" class="inputTable" name="parent_id[]" value="'.$parent_id.'"></td>
<td class="td<?php echo $even; ?>" width="15%"><input placeholder="Titel" class="inputTable" name="caption[]" value="'.$caption.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Icon" class="inputTable" name="icon_image[]" value="'.$icon_image.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Sichtbar" class="selectTable" name="visible[]"><option value="1">Sichtbar</option><option value="0">Nicht sichtbar</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Aktiviert" class="selectTable" name="enabled[]"><option value="1">Aktiv</option><option value="0">Nicht aktiv</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Mindest Rank" class="selectTable" name="min_rank[]"><option>1</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="VIP" class="selectTable" name="min_vip[]"><option value="1">Nur VIP</option><option value="0">Alle</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Reihen Nummer" class="inputTable" name="order_num[]" value="'.$order_num.'"></td>
<td class="td<?php echo $even; ?>" width="10%"><input placeholder="Layout" class="inputTable" name="page_layout[]" value="'.$page_layout.'"></td>
</tr>
';
$index++;
}
echo '
<input class="save" type="submit" name="save" value="Speichern">
<br><br>
</form>
</table>
';
?>
<script>
$("#save").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "./save.php",
data: $(this).serialize(),
success: function(data) {
if($('#result').css('display') == 'none') {
document.getElementById('result').style.display = 'block'
} else {
document.getElementById('result').style.display = 'none'
setTimeout(function() {
document.getElementById('result').style.display = 'block'
}, 100);
}
},
});
});
</script><?php
}
?>
save.php:
$size = count($_POST['id']);
$i = 0;
while ($i < $size)
{
$id = $_POST['id'][$i];
$query = "UPDATE catalog_pages SET id = '".$id."' LIMIT 1";
mysql_query($query) or die ("Error in query: $query");
++$i;
}
Like I said, everything is included. Database Connection, all fine.
It is also showing me the Response with the Select but then I want to Update that data - also with ajax.
Where do I have do place the Ajax Code? How can I do that?
Am trying to update data in two tables and according to my codes below, only the first table 'student_information' is getting updated
leaving out the 'training_information' table not updated. The two tables are linked by IndexNo. I need guidance with my code on how I can update both the tables at once using my sample prepared statements.
Please follow also that I try to get the id value using the URL as given. This helps me view and update data about one distinct column with IndexNo in one operation.
URL: http://localhost/sample/updateStudentInfo.php?id=14
updateStudentInfo.php code as below
<?php
// Connect to MySQL database
function connect(){
try{
$dbConn = new PDO('mysql:host=localhost; dbname=hpcz', 'root', 'root');
$dbConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConn;
}
catch(PDOException $e){
echo $e->getMessage();
}
}
$dbh = connect();
//gets the value of the id from the URL
$id = htmlspecialchars($_GET["id"]);
$sql = "SELECT
student_information.IndexNo,
student_information.SurName,
student_information.FirstName,
student_information.MiddleName,
grade_obtained.Grade,
secondary_school.SchoolName
FROM student_information
LEFT JOIN training_information
ON student_information.IndexNo = training_information.IndexNo
WHERE student_information.IndexNo='$id'";
$result = $dbh->prepare($sql);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC))
{
//Initializing the id from URL with the IndexNo from the database
$id=$row["IndexNo"];
?>
<div><form method="post" >
<table width="500" border="1" >
<tr>
<td colspan="4">Update Student Information</td>
</tr>
<tr>
<td colspan="4"><div align="center"><strong>Applicant Information</strong></div></td>
</tr>
<tr>
<td><div align="right">Sur Name:</div></td>
<td><input type="text" name="surname" id="surname" value="<?php echo $row['SurName']; ?>"/></td>
<td><div align="right">First Name:</div></td>
<td><input type="text" text-input" name="fname" id="fname" value="<?php echo $row['FirstName']; ?>"/></td>
</tr>
<tr>
<td><div align="right">Middle Name:</div></td>
<td><input type="text" name="mname" id="mname" value="<?php echo $row['MiddleName']; ?>"/></td>
<td><div align="right">NRC/Passport No:</div></td>
<td><input type="text" name="nrc" id="nrc" value="<?php echo $row['NRCPassportNo']; ?>"/></td>
</tr>
<tr>
<td colspan="4"><div align="center"><strong>Training Information</strong></div></td>
</tr>
<tr>
<td><div align="right">Secondary School Attended:</div></td>
<td><select name="secondarysch" id="secondarysch" >
<option selected="selected"><?php echo $row['SchoolName']; ?></option>
</select></td>
<td><div align="right">Grade Obtained:</div></td>
<td><select name="grade" id="grade" >
<option selected="selected"><?php echo $row['Grade']; ?></option>
</select></td>
</tr>
<input type="hidden" name="id" id="id" value="<?php echo $row['IndexNo']; ?>"/>
<tr>
<td colspan="4"><div align="center"><button id="update">Update</div></td>
</tr>
</table>
<?php }?>
</form>
JavaScript code:
$(document).ready(function(){
$("#update").click(function(){
/*Applicant Information*/
var vid = $("#id").val();
var vsurname = $("#surname").val();
var vmname = $("#mname").val();
var vfname = $("#fname").val();
/*Training Information*/
var vsecondarysch = $("#secondarysch").val();
var vgrade = $("#grade").val();
/*Jquery post method */
$.post("http://localhost/sample/sendUpdateStudentInfo.php",
{
id : vid,
surname : vsurname,
mname : vmname,
fname : vfname,
secondarysch :vsecondarysch,
grade : vgrade
},
/*Handles response from server*/
function(response){
alert(response);
});
alert("You are here");
});
});
sendUpdateStudentInfo.php code:
<?php
$method = $_SERVER['REQUEST_METHOD'];
function connect(){
try{
$dbConn = new PDO('mysql:host=localhost; dbname=hpcz', 'root', 'root');
$dbConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConn;
}
catch(PDOException $e){
echo $e->getMessage();
}
}
/*Checks if method is HTTP POST*/
if(strtolower($method) == 'post'){
/*Applicant Information*/
$id = addslashes($_POST['id']);
$surname = addslashes($_POST['surname']);
$mname = addslashes($_POST['mname']);
$fname = addslashes($_POST['fname']);
/*Training Information*/
$secondarysch = addslashes($_POST['secondarysch']);
$grade = addslashes($_POST['grade']);
try {
$dbHandler = connect();
$dbHandler->beginTransaction();
$setInfo = "UPDATE student_information
SET
SurName = :vSurname,
MiddleName = :vMName,
FirstName = :vFName
WHERE
IndexNo = '$id'";
$stmt = $dbHandler->prepare($setInfo);
$stmt->bindParam(':vSurname', $surname);
$stmt->bindParam(':vMName', $mname);
$stmt->bindParam(':vFName', $fname);
$stmt->execute();
$stmt->closeCursor();
$setTrainingInfo = "UPDATE training_information
SET
SecondarySchoolID = :Secondarysch,
GradeObtainedID = :Grade
WHERE
IndexNo = '$id'";
$stmt = $dbHandler->prepare($setTrainingInfo);
$stmt->bindParam(':Secondarysch', $secondarysch);
$stmt->bindParam(':Grade', $grade);
$stmt->execute();
$stmt->closeCursor();
$dbHandler->commit();
echo "The Operation was Successful!!!!!!";
} catch (PDOException $e) {
$dbHandler->rollback();
die($e->getMessage());
}
}else{
echo "Oops! Make sure Method is POST";
}
?>
I'm trying to make a poll, but the poll_results.txt file won't get written. I've tried on my Windows pc and my Linux server.
I'm using this example
index.html
<html>
<head>
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>No:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
poll_vote.php
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="http://www.w3schools.com/php/poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="http://www.w3schools.com/php/poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
I've tried changing permission, but they all looked correct. Is there something wrong with the example?