i've added a textarea control in my PHP page, using the CKEditor's class.
Now if the textarea loads empty, CKEditor works. But if i try to load a PHP variable in the textarea, the page show correctly the editor, but it won't show the content (and the editor appears to be blocked).
Here's my code:
<div id="dialog-edit" title="Edit" style="display: none;">
<table cellspacing="10">
<tr>
<td>
<table>
<form method="post" name="form">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<br/>
<textarea class="ckeditor" name="html" id="html" style="width: 766px; height: 390px; margin-left: 6px;"><?php echo htmlentities($html) ?></textarea><br/>
<input type="submit" name="save" id="save" value="Salva modifiche" class="button" />
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function showDialogEdit()
{
$( "#dialog-edit" ).dialog({
width: 680,
height: 620,
modal: true,
open: function(event, ui)
{
}
});
}
</script>
The textarea must show the content (saved in a MySQL database as an HTML code), into the textarea, but it isn't doing this.
What's making this issue?
Thanks.
Try following the "replace by code" example in the CKEditor demo folder instead:
Remove the "ckeditor" class from the textarea.
Modify the the jQueryUI dialog "open" event to trigger it after the dialog is opened.
http://jsfiddle.net/mblase75/g2HFn/4/
$("#dialog-edit").dialog({
width: 680,
height: 620,
modal: true,
open: function (event, ui) {
CKEDITOR.replace('html');
}
});
Write in config file of ckeditor (config.js)
CKEDITOR.editorConfig = function( config ) {
/* ALLOW <?php ... ?> tags */
config.protectedSource.push(/<\?[\s\S]*?\?>/g);
config.extraAllowedContent = 'style';
};
Related
I pulled the template for this idea from jquery.com and included it around my form. On submit, the form is still following the action and submitting to and showing condoupdate.php, even with the 'preventDefault' event set. Testing on FF with WAMP.
<div style="display:block;margin:0px 10px 0px 10px;width:99%;">
<form id="condoupdate" name="condoupdate" method="post" action="condoupdate.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="img/details.png" /></td>
<td><textarea name="detail" cols="45" rows="5"><?php ECHO $extras; ?></textarea><BR /><BR /><input type="submit" class="unitBtn" name="svUnit" id="svUnit" value="Save"/> <input type="reset" class="unitBtn" name="resetUnit" value="Reset"/><div id="result" style="margin-left:10px;display:inline;"></div>
</td>
</tr>
</table>
</form></div>
<script>
$("#condoupdate").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page
url = $("#condoupdate").attr("action");
// Send the data using post
var posting = $.post(url);
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#result").empty().append(content);
});
});
</script>
I have a blog and get data from some SQL-database.
I have a problem to get correct data from a foreach loop and i don't know why. I will try to explain.
For each image there is a textarea where users can put in a comment. For each comment i have to send the corresponding id (ajax) to add to the database.
foreach($db->query("SELECT id, image FROM news") as $row)
{
<a href='images/news/{$row['image']}'><img src='images/news/{$row['image']}'/></a>";
<div class="save_comment">
<table width="400" border="0" cellspacing="1" cellpadding="2">
<tr>
<td>
<input type="text" class="_comment_id" name="id" value="<?php print_r($row['id'] );?>" />
Comment:
<textarea id="_comment_text" class="comment_area" name="comment_area" maxlength="400" cols="80" rows="8" ></textarea>
</td>
</tr>
<tr>
<td>
<a class="post_comment" href=".popupContainer">Post Comment</a>
</td>
</tr>
</table>
</div>
}
On click on "Post Comment" following js-script will be initialised....
<script type="text/javascript">
jQuery(document).ready(function() {
$(".post_comment").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
</script>
....and a popup Container (div with class .popupContainer) is shown, where users can finally submit their comment.
<div class="popupContainer" style="display:none;">
Your Name: <input type="text" class="_user_name" />
Email:<input type="text" class="_comment_email" />
<input type='button' class='_submit_comment' value='Speichern' >
</div>
By submitting this comment, following script is initialised and data will be sent by ajax.
<script type="text/javascript">
$("._submit_comment").click(function(){
var parentObj = $(this).closest('.save_comment');
var _comment_id = parentObj.find('._comment_id').val(); -> I don't get the correct id
So here begins the problem. I only get the first id from the foreach-loop, but i need to get for every comment the corresponding id. Can anybody help with this problem?
Thank you
Misch
This part is wrong IMHO :
$(this).closest('.save_comment');
You should set a JS variable when you click on "Post Comment" with the id that you can store in the link like :
<a class="post_comment" href=".popupContainer" data-idcomment="<?php print($row['id'] );?>">Post Comment</a>
And
var _comment_id = null;
jQuery('.tabs .tab-links a').on('click', function(e) {
_comment_id = jQuery(this).data('idcomment');
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
Then you can use _comment_id for you ajax call
I have a problem. jQuery Datepicker does not work in a dynamic form, so you can't pick a date. Here is my demo link http://gestionale.odoyabooks.com/sum.php.
JavaScript:
<script>
$(document).ready(function() {
$('.input_date').on('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
</script>
HTML:
<form action="" method="POST">
<div class="yes">
<div id="cost1" class="clonedCost" style="display: inline;">
<table border="0">
<tr>
<td><label class="date" for="date">Date</label></td>
</tr>
<tr>
<td><input class="input_date" id="date" type="text" name="date[]" /></td>
</tr>
</table>
</div>
<div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>
</form>
The problem is that when you bind the event initially, the new field doesn't exist.
By applying the on click to the body, with the selector .input_date, it should attach the event to the new element in the dynamic form.
$(function() {
$('body').on('click','.input_date', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
Working Example
A better way:
You should initialize the datepicker for the field when you create the element.
$(function() {
$('.input_date').datepicker();
});
function createNewDatepickerInput() {
var $newInput = $('<input type="text" name="date123" class="input_date" />');
$newInput.appendTo("form").datepicker();
}
Working Example
I don't understand why you're destroying/re-initializing the datepicker.
You simply need to call .datepicker() after creating the element. For example:
function createInput() {
$('<input type="text" name="date" />').appendTo("form").datepicker();
}
Edit:
Here's a demo: http://jsfiddle.net/xEmJu/
I'm increasing my system by entering the functionality of loading a page inside a div dynamically, in the other words, the central area of the page is updated. For this I am using the JQuery. But even I having a problem which is the following, when submitting the same FORM one has to load the next page via JQuery-Ajax to send the post to use the data on this second page.
The funny thing is that I'm not getting the pick. Submit() the FORM always and only in one case. I will post the HTML below the two situations:
In the html code below warning test that I created within the form.submit () is being displayed.
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Dados</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SIBE:* </b>
</td>
<td>
<select name="slSibe">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
</form>
In the second code warning. Submit () is not displayed, or is not recognized submission form:
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Filtrar por:</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SubTipo Produto:* </b>
</td>
<td>
<select name="slSubTipo">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
<div>
<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>
</div>
<br>
<table id="tabelainfo">
<tbody>
<tr id="corpotabela">
<td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
</tr>
</tbody>
</table>
</form>
Below the JQuery script that is already properly initialized in the HEAD of the page, in addition, already tested for other enventos as $ (this). Click and everything is ok.
$(document).ready(function() {
$("#form").submit(function() {
alert("SUBMIT FORM");
// alert($(this));
// console.log($(this));
// $.post($(this).attr("action"), $(this).serialize(), function(data) {
// $("#divCentral").html(data);
// });
// return false;
});
});
Could you help me find the bug that causes. Submit () is not recognized by JQuery?
Edited:
I already discovered the source of the problem. Looks like that when the component is drawn for a page loaded by jquery-ajax, the event .submit() doesn't works, but when the page is loaded for default away, the event works.
The problem is that the is loaded by Ajax, and the JQuery function don't recognize it. I'am creating the function for load the central page of the template by a ajax request to a file. I have two functions, the first just for test, and the second I'am creating for works with the $_POST. The JQuery function for now is well:
function carregaUrl(url) {
//alert("carregaUrl=" + url);
$("#divCentral").load(url);
console.log($('form').attr('name'));
}
function carregaUrl2(url) {
var data = $("form").serialize();
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(data) {
$("#divCentral").html(data);
});
}
What is happening here, is that the handler fires, starts the alert, and then form submit occurs, effectively reloading your page.
You need your event handler to return false if you want to prevent this submit and stay on your current page, or add an alert to the page you're going with this submit.
If you want to stay on your current page, try this:
jQuery(function($){
function formSubmit(form) {
$.post(form.attr('action'), form.serialize(), function(data){
$("#some-outer-container-with-form").html(data);
});
$("#form").submit(function(){ return formSubmit(form) }); //we need to rebind
return false;
}
$("#form").submit(function(){ return formSubmit( $(this) ) });
});
<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">
<form method="POST" action="google.com" id="pwdChange">
<table>
<tr>
<td width="175px"><label for="oldPwd">Enter your password</label></td>
<td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
</tr>
<tr>
<td><label for="oldPwd_>"Re-enter your password</label></td>
<td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Save Password" /></td>
</tr>
</table><br/>
</form>
</div>
<script>
$("#changePwd" ).click(function ()
{
if ($("#form_pwd").is(":show"))
{
$("#form_pwd").slideDown("normal");
}
else
{
$("#form_pwd").hide();
}
});
</script>
i would like to not display the form until the user click the button but I fail to make it work, it displays by default when the page shows up. thank you
add display:none to your div
<div id="form_pwd" style="display:none;">
Try this one.
<script type="text/javascript">
$("#form_pwd" ).hide();
$('#changePwd').click(function() {
$('#form_pwd').slideToggle('slow', function() {
});
});
</script>
$("#form_pwd" ).hide(); will hide your form on page load and only show once you click on change your password button.
Simply use CSS to do this
<div id="form_pwd" style="display:none;">
This will hide your div element until the click event occurs upon which jquery will slide the element down and automatically remove the display none for you
Or you can do :
$("#form_pwd" ).hide();
what is :show??? I'm guessing you mean :visible...
use this...
$("#changePwd").click(function() {
if (!$("#form_pwd").is(":visible")) {
$("#form_pwd").slideDown("normal");
}
else {
$("#form_pwd").hide();
}
});
demo