I have spent the last several hours trying to simply post the data (text/html) that was entered in the ckeditor (textarea) to the PHP file.
Their API claims that the data automatically posts the data on form submissions, but it does not, it returns nothing.
EDIT: here is the real code:
<?php
require("fns.php");
// grab tab content from database
$tab = array();
$query ="SELECT * FROM tabs";
$db_conn = db_connect();
$results = mysql_query($query,$db_conn);
while($row = mysql_fetch_array($results))
{
$tab[]= $row;
}
// form validation
if($_POST['btnSave'])
{
// grab selected tab ID
$tabId = $_POST['tabId'];
$title = $_POST['txtTitle'];
$content = $_POST['ckeditor'];
// all fields required
if(isset($tabId) && isset($title) && isset($content))
{
// update recorde where id = tabId
$query = "UPDATE tabs SET title = '$title', content = '$content' WHERE id = $tabId";
if($content !== "")
{
if(mysql_query($query,$db_conn))
{
$message = "<h3 style='color:#003300;'>Changes Saved!</h3><br /><p>".$content."</p>";
header("Location:testtabs.php");
}
}
else
{
$message ="<h3 style='color: #950000;'>Content cannot be blank!</h3>";
}
}
}
?>
<!-- in head section -->
<script type="text/javascript">
$(document).ready(function() {
// inflate ckeditor
$('#ckeditor').ckeditor();
//track selected tab
var currentId = -1;
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
$("#ckeditor").val(content);
}
});
});
<body>
<?php echo $message; ?>
<div id="tabs">
<ul>
<li><?php echo $tab[0]['title'];?></li>
<li><?php echo $tab[1]['title'];?></li>
<li><?php echo $tab[2]['title'];?></li>
</ul>
<div id="tabs-1">
<div class="content">
<?php echo $tab[0]['content']; ?>
</div>
</div>
<div id="tabs-2">
<div class="content">
<?php echo $tab[1]['content']; ?>
</div>
</div>
<div id="tabs-3">
<div class="content">
<?php echo $tab[2]['content']; ?>
</div>
</div>
</div>
<?php
if (isset($_SESSION['valid_user']) && ($_SESSION['account_type'] == 'ADMIN'))
{
// display editor with tab 1 content
?>
<table id="tab-editor">
<form action = 'testtabs.php' method ='post'>
<input type="hidden" id="tabId" name ="tabId" value="-1"/>
<tr><td>Title: <input type='text' name='txtTitle' id='title' value='<?php echo $tab[0]['title'];?>'/></td></tr>
<tr><td>Tab Content:</td></tr><tr><td> <textarea name='ckeditor' id='ckeditor' class='tab-editor'><?php //echo $tab[0]['content'];?></textarea></td></tr>
<tr><td><input type='submit' name='btnSave' value='Save Changes' /></td>
</form>
</table>
<?php
}
?>
CKEditor create an istance of CKEditor from a textarea (maybe even from other elements, I don't know that) using the content of the textarea to populate the editor.
Anyway when you use jQuery:
$('#ckeditor').val("Initial text (test)");
you're putting text inside the textarea tag.
After you create a CKEditor instance you'll need to use CKEditor methods to get the data:
http://docs.cksource.com/ckeditor_api/
Specifically I think you'll need:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
PS: sorry for my bad english
EDIT: hadn't seen the edit, sorry
Reverted back to the traditional ckeditor javascript, works fine now...
CKEDITOR.replace( 'ckeditor' );
// Tab initialization
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
CKEDITOR.instances['ckeditor'].setData(content);
}
});
Related
I want to get questions one by one by clicking on button from mysql database table. Each question is one single row, want to get every next question by clicking on "next" button from every next row. I have made this code but this only shows first question in the table of first row in the database. My html code is:
<span ng-repeat="record in records" id="next">
<p id="hello">{{record.ques_no}}.
{{record.question}}</p>
<p><input type="text" ng-model="ans" id="ans" value=""></p>
<p align="center">Next</p>
</span>
php code getting value from database is:
$result=mysqli_query($con,"SELECT * FROM quest limit 1");
$record=array();
$number = 0;
while($row =mysqli_fetch_array($result))
{
$record[] = array(
'ques_no'=> $row['ques_no'],
'question'=> $row['question'],
'answer'=> $row['answer']
);
$number++;
}
<html>
<head>
<style>
.invisible{
display:none;
}
.visible{
display:visible;
}
</style>
<script src="js/jquery.min.js"></script>
<script>$(function()
{
$( "#button" ).click(function()
{
$( "div.container div.invisible" ).first().addClass( "visible" ).removeClass("invisible");
});
});
</script>
</head>
<div class="container">
<div class="invisible">1</div>
<div class="invisible">2</div>
<div class="invisible">3</div>
<div class="invisible">4</div>
<div class="invisible">5</div>
<div class="invisible">6</div>
<div class="invisible">7</div>
<div class="invisible">8</div>
<div class="invisible">9</div>
<div class="invisible">10</div>
</div>
<input type="button" id="button"/>
</html>
Something I put together real quick.
$("#nex").click(function() {
var formData1 = $("#ques").val();
$.ajax({
type:'POST',
data:{'tota':formData1},
url:'list1.php',
success:function(data){
alert(data);
var json = $.parseJSON(data);
// $("#hello").html(data);
$("#hello").html(json[0]);
}
});
});
list1.php
<?php
$total=$_POST['tota'];
$input=1;
$con=mysqli_connect("localhost","root","root","school");
$result=mysqli_query($con,"SELECT * FROM quest LIMIT $total OFFSET $input");
$record=array();
echo $input;
while($row =mysqli_fetch_array($result))
{
$record[] = array(
'ques_no'=> $row['ques_no'],
'question'=> $row['question'],
'answer'=> $row['answer']
);
}
echo json_encode($record);
mysqli_close($con);
?>
Facing some problem in retreiving json data
I have some content that is fed in from mysql that, when clicked should fire an alert()...
however, this is not working...
here is my code for the code that is fed in from php/get_answers.php
<?php session_start(); ?>
<?php require_once("../includes/include_all.php"); ?>
<?php $answers = $question->get_answers_for_question($_GET['id']); ?>
<?php while($row = $answers->fetch_array()){ ?>
<!-- ALL ANSWERS HERE -->
<div class = 'answer-row'>
<div class = 'answer-side'>
<div class = 'arrow-contain-answer' type = 'answer' id = 'arrow-up' answer-id = '<?php echo $row["id"]; ?>'></div>
<div class = 'answer-votes-contain'>
<?php echo $row['popularity']; ?>
</div>
<div class = 'arrow-contain-answer' id = 'arrow-down'answer-id = '<?php echo $row["id"]; ?>'></div>
</div>
<div class = 'answer-content'>
<?php
echo $row['content'];
?>
</div>
<div class = 'actions'>
<a href = '#' class= 'add-comment' id = '<?php echo $row["id"]; ?>'> add comment </a>
</div>
</div>
<?php } ?>
and here is the jquery on the page that it is displayed on:
$(".arrow-contain-answer").click(function(){
alert();
});
What I want to happen is when someone clicks the element with the class of 'arrow-contain-answer' an event will occur..
I think I have had problems before when elements are being 'fed' into the page via mysql/php.
$(document).on("click", ".arrow-contain-answer", function(){
alert();
});
Try this way for dynamic added elements!
even better(performancewise) if you delegate it with the closest static element(parent) which is present in the document when dynamic fed element is added.
$('.answer-row').on("click", ".arrow-contain-answer", function(){
alert('clicked');
});
to read more about on delegated event
I am trying to update a value within the jquery ui tab via a ui dialog.
The expected process as such:
From tab display, user clicks on the edit link.
Prompts a ui dialog box with form for user to input value.
User input value and save changes.
After saving, user is brought back to the tab with the updated value.
I have issues on point 4, and here are the codes so far.
HTML:
<div id="acc">
<input type="text" id="edit_acc" value="">
</div>
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Account</li>
<li>Tab Three</li>
</ul>
</div>
<div id="one">
<p>Tab One Listing</p>
</div>
<div id="account">
<p>Tab Account Listing</p>
<table width="100%">
<?php
while ($rows = mysql_fetch_array($query))
{
echo '<tr>';
echo '<td id="editacc_'.$rows['id'].'">'.$rows['name'].'</td>';
echo '<td><a id="acc_'.$rows['id'].'" class="link_acc" href="#">Edit</a></td>';
echo '</tr>';
}
?>
</table>
</div>
<div id="three">
<p>Tab Three Listing</p>
</div>
Javascript:
$('#tabs').tabs({
ajaxOptions: {
error: function(xhr, index, status, anchor)
{
// if page does not exist, this will load
$(anchor.hash).text('Could not load page');
}
}
});
$('.link_acc').click(function() {
acc = $(this).attr('id');
acc = acc.replace('acc_', '');
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
// prompt dialog box with the value of the stated id
$('#acc').dialog({
title: 'Edit Account',
modal: true,
buttons: {
"Save": function() {
var data = $('#edit_acc').val();
$.post('set.php', { item: acc, val: data}).success(function() {
$('#tabs').tabs('load', 2);
$('#acc').dialog( "close" );
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
});
get.php - retrieve value from the database
if (isset($item))
{
// check for the cat id
$query = mysql_query('SELECT name FROM acc WHERE id = '.$item);
$rows = mysql_num_rows($query);
if ($num_rows == 1)
{
while ($result = mysql_fetch_array($query))
{
echo $result['name'];
}
}
}
set.php - update the database
if (isset($item))
{
mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item);
}
I have 2 questions:
how to get display refreshed and displayed the updated value within the tab Account listing?
is there a better/neater way to in the passing of the referencing the id instead of using the id attr and replacing it?
Thank you in advance.
You don't need an ajax request to get the data. You can read it from the table cell.
Replace
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
with
var valueHolder = $(this).parent().prev();
$('#edit_acc').val(valueHolder.text());
And if you want to update the data after the save-request in the table cell, you can use the variable again:
valueHolder.text(value);
P.s.: in your code you have the id 'account' twice, this is not allowed, ids have to be unique; in the javascript code you're using the id 'acc', so you should use it in the html too.
=== UPDATE ===
Also see this example.
P.s.: you should remove the $('#tabs').tabs('load', 2); and move the divs with the ids one, account and three into the div with the id tabs.
i am new to ajax . i want to submit a data with the help of ajax and then get the new data replacing the old one in the same div as of which the old data was .
here is the jquery for sliding tab
$(document).ready(function() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
});
ajax
function addhubs()
{
var group =$('#customhubs').val();
var user=$('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val='+group+'&& loguser='+user,
success: function(html){
}
});
}
the div i want to replace data
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php $sql=mysql_query("select * from groups");
while($ab=mysql_fetch_array($sql))
{
$gpID[]=$ab['group_id'];
$gp=$ab['group_id'];
$gpName=$ab['group_name'];
?>
<li><?php echo $gpName;?></li>
<?php
}
?> </ul>
</div> <!-- /.st_slide_container -->
</div> <!-- /.st_tabs_container -->
and the mfrnds.php of the ajax call file contains query to update the new data.
$user=$_GET['loguser'];
$group=$_GET['val'];
$sql=mysql_query("insert into groups (group_name) values ('$group')");
how can i update the div in the above . plz help me .m stuck badly luking for solution from 4 days. thanks
Note that in your addhubs function you should only add one & in your url and concatenate everything without spaces in between such as below.
When the ajax call has finished it returns the contents of the page you requested (mfrnds.php) in the html variable. So you can simply select the div you want and enter the html as you can see below. So here we go...:
Your Page
<html>
<body>
<script>
$(document).ready(function() {
setupTabs();
});
function setupTabs() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
}
function addhubs() {
var group = $('#customhubs').val();
var user = $('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val=' + group + '&loguser=' + user,
success: function(html) {
//Get div and display the data in there
$('div.st_slide_container).html(html);
//As your slide effect is gone after you updated this HTML, redo your slide effect:
setupTabs();
}
});
}
</script>
<!-- Vertical div -->
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
</div> <!-- /st_slide_container -->
</div> <!-- /st_tabs_container -->
</div> <!-- /st_vertical -->
</body>
</html>
So in your mfrnds.php you should have a PHP script that uses the val and loguser GET variables and updates the database. After the database has been updated you should return the updated HTML like the following:
*mfrnds.php
<?php
$user = $_GET['loguser'];
$group = $_GET['val'];
$sql = mysql_query("insert into groups (group_name) values ('$group')"); ?>
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
Note though that this code is basically meant as an example, I don't know what you want to do exactly in mfrnds.php etc, but I hope this gives you a good idea!
It looks like you are almost there.
In your mfrnds.php file add a line to grab the updated rows
use:
PSEUDOCODE
"SELECT * FROM groups"
for each row in groups
echo "<div> groups.name groups.category </div"
and then in your callback function
success: function(html){
$('.st_tabs').html(html); //replace the html of the sttabs div with the html echoed out from mfrnds.php
}
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.