Hi all,
I want to two drop downs ,one is product and on selection of product there will be an another drop down subproduct . Then on selecting sub product ,the content of that sub product will be displayed in ckeditor. When I update the ckeditor content will be updated and reflected to the web page. I did it till two drop downs using ajax but need the rest.
Thanks in advance
Subrata
I'm assuming that the text from the subproduct dropdown is not what you want in the editor - I take it that your DB is holding some descriptive text/images etc about that subproduct.
Ajax should be able to fill the editor for you.
Your onchange or .change() event for the subproduct dropdown should:
1) Run a js getInfo() function, which should have statements for retrieving the subproduct dropdown selected value - easy for jQuery:
var id = $('#subproduct').val();
2) Pass this via ajax to a php file to retrieve the info, which then echoes the info within the file itself, e.g.
echo $row['description'];
3) The js function then updates the editor with this info.
When you finish editing the info in the box, have an 'update' button that you can press to run another ajax function, which does an update to the DB.
Hi diafol,
Thanks for early response but here is my code:
in findsubproduct.php
<?php
mysql_select_db('db_ajax');
$query="SELECT Subproductid,Subproductname FROM subproduct WHERE productid='$product'";
$result=mysql_query($query);
?>
<select name="subproduct" id="subproduct" onchange="getcontent(<?php echo $product?>,this.value)">
<option>Select State</option>
<?php while($row=mysql_fetch_array($result))
{
?>
<option value=<?php echo $row['subproductid']?>><?php echo $row['subproductname']?></option>
<?php
}
?>
</select>
and in cms.php here is ajax code with ckeditor :
<script language="javascript" type="text/javascript">
// Roshan's Ajax dropdown code with php
// This notice must stay intact for legal use
// Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(countryId)
{
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(countryId,stateId) {
var id = $('#state').val();
alert(id);
var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
<script language="javascript">
function trim(str)
{
return str.replace(/^\s+|\s+$/g,'');
}
function validate()
{
var pagename=document.getElementById("textfield_pagename");
if(trim(pagename.value)=='')
{
alert("Please enter the Page Name");
pagename.focus();
return false;
}
}
</script>
<?php
$country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query1="select CountryID,CountryName from country";
$result1=mysql_query($query1);
//$res_selectall=mysql_fetch_array($qry_selectall);
//$content_all=$res_select['instrumentid'];
?>
<select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<?php while($row1=mysql_fetch_array($result1)) { ?>
<option value="<?php echo $row1['CountryID'];?>"><?php echo $row1['CountryName'];?></option>
<?php } ?>
<tr>
<td colspan="3" align="left" class="fieldBox"><?php
include_once '../ckeditor/ckeditor.php';
$ckeditor = new CKEditor();
$ckeditor->basePath = '../ckeditor/';
$ckeditor->config['filebrowserBrowseUrl'] = '../ckfinder/ckfinder.html';
$ckeditor->config['filebrowserImageBrowseUrl'] = '../ckfinder/ckfinder.html?type=Images';
$ckeditor->config['filebrowserFlashBrowseUrl'] = '../ckfinder/ckfinder.html?type=Flash';
$ckeditor->config['filebrowserUploadUrl'] = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
$ckeditor->config['filebrowserImageUploadUrl'] = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
$ckeditor->config['filebrowserFlashUploadUrl'] = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
$ckeditor->editor('contentText',$content);
//$ckeditor->config['width'] = 400;
//$ckeditor->config['height'] = 600;
$ckeditor->replace("contentText");
</td>
</tr>
Now what should I do to bring content from database from subproduct selected value to ckeditor ?
Hi ,
in cms.php country,state ,countryid and stateid will be replaced by product,productid,subproduct and subproductid
sorry for the mistake
OK - here's some old code I dusted down and refactored slighly for you. It's not an exact fit and it doesn't deal with ckeditor - but that's the easy bit:
It makes use of jQuery...
main.php
<?php
$call = 'first';
include('ajax.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form>
<label for ="products">Products</label>
<select name="products" id="products">
<?php echo $products;?>
</select>
<label for ="subproducts">Subproducts</label>
<select name="subproducts" id="subproducts">
<?php echo $subproducts;?>
</select>
<textarea id="editor"><?php echo $subproduct_desc;?></textarea>
<div id="msg"></div>
<input type="submit" name="submit" id="submit" value="Update" />
</form>
<script>
function getSubProducts(){
var p = $('#products').val();
$.ajax({
type: "POST",
url: "ajax.php",
dataType: "json",
data: { call: 'getsubproducts', product_id: p }
}).done(function( data ) {
$('#subproducts').html(data.subproducts);
$('#editor').val(data.subproduct_desc);
});
}
function getSubDesc(){
var s = $('#subproducts').val();
$.ajax({
type: "POST",
url: "ajax.php",
dataType: "html",
data: { call: 'getsubdesc', subproduct_id: s }
}).done(function( data ) {
$('#editor').val(data);
});
}
function updateData(){
var s = $('#subproducts').val();
var c = $('#editor').val();
$.ajax({
type: "POST",
url: "ajax.php",
dataType: "html",
data: { call: 'update', subproduct_id: s, content: c }
}).done(function( data ) {
alert(data);
$('#msg').html(data);
});
}
$('#products').change(function(){
getSubProducts();
});
$('#subproducts').change(function(){
getSubDesc();
});
$('#submit').click(function(e){
e.preventDefault();
updateData();
});
</script>
</body>
</html>
ajax.php
<?php
$link = mysql_connect("localhost","rootytoottoot","pwpwpwpw");
if (!$link) {
die('Not connected : ' . mysql_error());
}
$db_selected = mysql_select_db("whatever", $link);
if (!$db_selected) {
die ('Can\'t use database : ' . mysql_error());
}
$products = "";
$subproducts="";
//JUST FOR UPDATING
if(isset($_POST['call']) && $_POST['call'] == 'update' && isset($_POST['subproduct_id']) && isset($_POST['content'])){
$subprod_id = intval($_POST['subproduct_id']);
$content = mysql_real_escape_string($_POST['content']);
$r = mysql_query("UPDATE subproducts SET subproduct_desc = '$content' WHERE subproduct_id = $subprod_id");
echo (mysql_affected_rows()) ? "Successful save at " . date('d/m/Y H:i:s') : "Problem saving data";
exit;
}
//JUST FOR DESCRIPTION ON SUBPRODUCT CHANGE
if(isset($_POST['call']) && $_POST['call'] == 'getsubdesc' && isset($_POST['subproduct_id'])){
$subprod_id = intval($_POST['subproduct_id']);
$r = mysql_query("SELECT subproduct_desc FROM subproducts WHERE subproduct_id = $subprod_id LIMIT 1");
if(mysql_num_rows($r)){
$d = mysql_fetch_assoc($r);
$subproduct_desc = $d['subproduct_desc'];
echo $subproduct_desc;
}
exit;
}
//JUST FOR FIRST RUN (PAGE LOAD)
if(isset($call) && $call == 'first'){
$r = mysql_query("SELECT product_id, product_name FROM products ORDER BY product_name");
if(mysql_num_rows($r)){
while($d = mysql_fetch_assoc($r)){
$products .= "\n\t<option value=\"{$d['product_id']}\">{$d['product_name']}</option>";
if(!isset($prod_id))$prod_id = $d['product_id'];
}
}
}
//FOR PAGE LOAD AND PRODUCT CHANGE
if(isset($_POST['call']) && $_POST['call'] == 'getsubproducts' && isset($_POST['product_id']))$prod_id = intval($_POST['product_id']);
$r = mysql_query("SELECT subproduct_id, subproduct_name, subproduct_desc FROM subproducts WHERE product_id = $prod_id ORDER BY subproduct_name");
if(mysql_num_rows($r)){
while($d = mysql_fetch_assoc($r)){
$subproducts .= "\n\t<option value=\"{$d['subproduct_id']}\">{$d['subproduct_name']}</option>";
if(!isset($subproduct_desc))$subproduct_desc = $d['subproduct_desc'];
}
}
if(isset($_POST['call']) && $_POST['call'] == 'getsubproducts' && isset($_POST['product_id'])){
echo json_encode(array("subproducts"=>$subproducts,"subproduct_desc"=>$subproduct_desc));
}
?>
This is done already but what I want to do is ,in cms page using ckeditor ,first to select product from dropdown , based on this all the sup product will be displayed in sub product drop down then selecting sub product from drop down ,the content of the selected sub product will come from databae on the ckeditor. The image is attached herewith.
Thanks 
SO what's the problem? My code will allow you to change subprods on prod change and load subprod description whenever subprod changes. It also updates any changes via the update button.
If you're struggling with getting data from the editor for an ajax update, you can do this:
var editor_data = CKEDITOR.instances.editor1.getData();
If your textarea id is set to "editor1".
But this is getting into JS now.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.