Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Phil on Apr 27, 2009 06:37
open dhtmlx forum
Can't edit dhtmlxeditor in a dhtmlxwindow

Hello,

I have a grid populate with a connector. To edit a record, i open a window where the record detail is loaded (php file).
In this windows appear a dhtmltabbar with some input fields and in the last tab a dhtmlxeditor. All works fine except that i can't access the editor to insert or modify text.

Can you help me ?

this code open the widows

function edit_actualite(ajoute){
if (grille.getSelectedRowId()!=null || ajoute==true){
var url="Fiche.php";
var winedit = parent.wins.createWindow("win2",0,0,600,400);
winedit.center();
winedit.setModal(true);
winedit.button("park").hide();
winedit.button("minmax1").hide();
winedit.button("minmax2").hide();
winedit.denyResize();
winedit.setText("Fiche actualité");
if (ajoute==false){
url="Fiche.php?Actu="+grille.getSelectedRowId();
}
winedit.attachURL(url);}
else
alert("Sélectionner d'abord un enregistrement");
}

and this code is the file Fiche.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Css/Style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Suite/dhtmlx.css">
<script src="Suite/dhtmlx.js"></script>
</head>
<body style="margin:10px">
<?php
    include ('class.eyemysqladap.inc.php');
    $db = new EyeMySQLAdap('localhost', 'root', '', 'cosic');

    if (isset($_GET['Actu'])){
    $actu=$db->selectOne("*", "news", "IdNews='".$_GET['Actu']."'");
    $actif = stripslashes($actu['Actif']);
    $titre = stripslashes($actu['Titre']);
$texte = stripslashes($actu['Texte']);
    $date = stripslashes($actu['Date']);
    $datedebut = stripslashes($actu['Datedebut']);
    $datefin = stripslashes($actu['Datefin']);
    $idauteur = stripslashes($actu['IdAuteur']);
$idnews = stripslashes($actu['IdNews']);
    }
else{
    $titre = '';
$texte = '';
    $date = date("Y-m-d");
    $datedebut = date("Y-m-d");;
    $datefin = date("Y-m-d");;
    $idauteur = 0;
$idnews = 0;
    }
?>
<div id="cal"></div>
<div id="a_tabbar" style="width:100%"></div>
<form action="" method="post" name="formulaire">
<div id="un" style="margin:10px">
<label for="p_titre">Titre :</label>
<input type="text" style="width:65%" id="p_titre" value="<?php echo $titre; php?>" />
<br />
<br />
<label for="p_date">Date :</label>
<input type="text" size="15" readonly id="p_date" value="<?php echo date("d/m/Y", strtotime($date));?>" />
<br>
<br>
<label for="p_actif">Page d'accueil :</label>
<input id="p_actif" type="checkbox" value="Oui" <?php if ($actif=='Oui') echo 'Checked';php?>>
<br />
<br />
<?php
$aut=$db->selectOne("*", "utilisateurs","IdUtilisateur='".$idauteur."'");
if ($aut['Mute']=='Oui')
{
$auts=$db->select("*", "utilisateurs");
}
else
{
$auts=$db->select("*", "utilisateurs","Mute!='Oui'");
}
?>
<label for="p_idauteur">Auteur :</label>
<select size="1" style="width:65%" id="p_idauteur" <?php if ($aut['Mute']=='Oui') echo 'disabled';?>>
<?php
            foreach($auts as $rec=>$valeur)
            {
            ?>
<option value="<?php echo $valeur[IdUtilisateur];?>" <?php if ($idauteur==$valeur[IdUtilisateur]) {echo ' selected';}?>><?php echo $valeur[Nom].' '.$valeur[Prenom];?></option>
<?php }
             ?>
</select>
</div>
<div id="deux" style="margin:10px">
<label for="p_datedebut">Début :</label>
<input type="text" class="inputWithImage1" id="p_datedebut" value="<?php echo date("d/m/Y", strtotime($datedebut)); ?>" /><img class="imginsere1" id="trigger1" src="Images/Cal.png" onClick="from='trigger1'; affichecal('trigger1');">
<br />
<br />
<label for="p_datefin">Fin :</label>
<input type="text" class="inputWithImage2" id="p_datefin" value="<?php echo date("d/m/Y", strtotime($datefin));?>" /><img class="imginsere1" src="Images/Date.png" title="La date de fin est identique à la date de début" onClick="CopieDate();"><img class="imginsere2" id="trigger2" src="Images/Cal.png" onClick="from='trigger2'; affichecal('trigger2');">
</div>
<div id="trois" style="margin:10px">
</div>
<div align="right" style="margin-top:10px">
<input name="" type="button" value="Annuler" onClick="annuler();"> <input name="" type="button" value="Valider" onClick="valider();">
</div>
</form>
<script>
function CopieDate()
{
    document.getElementById("p_datefin").value=document.getElementById("p_datedebut").value;
}

function affichecal(src){
if (src=="trigger1")
mCal.setPosition(40,215);
else
mCal.setPosition(80,200);
mCal.show();
}

function mSelectDate(date){
if (from=="trigger1")
document.getElementById("p_datedebut").value= mCal.getFormatedDate("%d/%m/%Y", date);
else
document.getElementById("p_datefin").value= mCal.getFormatedDate("%d/%m/%Y", date);
mCal.hide();
}

function annuler(){
parent.wins.window("win2").close();
}

function transdate(d){
var exp=new RegExp("/","g");
var tab=d.split(exp);
return tab[2]+"-"+tab[1]+"-"+tab[0];
}

function valider(){
<?php
if ($idnews==0){
?>
indice=parent.grille.uid();
parent.grille.addRow(indice,["Images/News.png",transdate(document.getElementById("p_date").value),document.getElementById("p_titre").value,transdate(document.getElementById("p_datedebut").value),transdate(document.getElementById("p_datefin").value),document.getElementById("p_idauteur").value,document.getElementById("p_texte").value],-1);
parent.grille.selectRowById(indice,false,true,true);
parent.doOnRowSelected(indice);
<?php
}
else
{
?>
parent.grille.cells(parent.grille.getSelectedRowId(), 1).setValue(transdate(document.getElementById("p_date").value));
parent.grille.cells(parent.grille.getSelectedRowId(), 2).setValue(document.getElementById("p_titre").value);
parent.grille.cells(parent.grille.getSelectedRowId(), 3).setValue(transdate(document.getElementById("p_datedebut").value));
parent.grille.cells(parent.grille.getSelectedRowId(), 4).setValue(transdate(document.getElementById("p_datefin").value));
parent.grille.cells(parent.grille.getSelectedRowId(), 5).setValue(document.getElementById("p_idauteur").value);
parent.grille.cells(parent.grille.getSelectedRowId(), 6).setValue(document.getElementById("p_texte").value);
parent.dp.setUpdated(parent.grille.getSelectedRowId(),true);
parent.doOnRowSelected(parent.grille.getSelectedRowId());
<?php
}
?>
parent.wins.window("win2").close();
}

dhtmlxCalendarLangModules = new Array();

dhtmlxCalendarLangModules['fr'] = {
langname: 'fr',
dateformat: '%d/%m/%Y',
monthesFNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
monthesSNames: ["Jan", "Feb", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
daysFNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
daysSNames: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
weekend: [0, 6],
weekstart: 1,
msgClose: "Fermer",
msgMinimize: "Minimiser",
msgToday: "Aujourd'hui"
}

var from="";
var tabbar=new dhtmlXTabBar("a_tabbar","top");
//tabbar.setSkin("dhx_blue");
tabbar.setStyle("modern");
tabbar.setImagePath("Suite/imgs/");
tabbar.enableAutoSize(true,true);
//tabbar.enableAutoReSize(true);
tabbar.setSize("","300",true);
tabbar.addTab("onglet1","Identification","*");
tabbar.addTab("onglet2","Période","*");
tabbar.addTab("onglet3","Texte","*");
tabbar.setContent("onglet1","un");
tabbar.setContent("onglet2","deux");
tabbar.setContent("onglet3","trois");
tabbar.setTabActive("onglet1",true);
var mCal = new dhtmlxCalendarObject("cal", false, {isYearEditable: true,isMonthEditable: true});
mCal.setYearsRange(2000, 2020);
    mCal.setSkin("dhx_blue");
    mCal.loadUserLanguage("fr");
    mCal.attachEvent("onClick",mSelectDate);
mCal.draw();
    mCal.hide();
    dhtmlxEvent(document.body,"click",function(){ mCal.hide(); });
dhtmlxEvent(document.getElementById("trigger1"),"click",function(e){ (e||event).cancelBubble=true; });
    dhtmlxEvent(document.getElementById("trigger2"),"click",function(e){ (e||event).cancelBubble=true; });
var editor = new dhtmlXEditor("trois");
editor.setIconsPath("Suite/imgs/");
editor.init();
</script>
</body>
Answer posted by Support on Apr 27, 2009 08:37
Unfortunately the issue can't be reconstructed locally.
Please try to add the next line to the tabbar's init
          tabbar.enableForceHiding(true);
Answer posted by Phil on Apr 27, 2009 09:37
It doesn't work
But you're right, the problem appears only if the editor is binding with the tab.
If the editor is elsewhere in the page, i can write text.

In fact, when the editor is in the tabbar, i can click buttons in the toolbar but the text is not accessible.
I replace dhtmlxeditor by Tinymce editor and the behaviour is the same, but a simple textarea works.

It seems that the dhtmxtabbar prevents the editor area from being accessible.

Do you have an idea ?

Thanks for your answer.

Phil
Answer posted by Phil on Apr 27, 2009 09:44
Me again,

Just for your information,

When i open the file Fiche.php directly in the browser, the dhtmlxeditor in the third tab is fully accessible.