Problem integrating jeditable in cakephp - php

I have integrated jquery jeditable in my project.
$(function() {
$(".editable_textarea").editable("/articles/edit/", {
indicator : "<img src='img/indicator.gif'>",
type : 'textarea',
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
method : 'POST',
});
});
Now when I click on the div.editable_textarea you see textarea with ok button. Now when make changes and click on OK. In my controller action /articles/edit, I am simple print $this->data.
It prints Array()(empty array).
No data is sent to controller. I also tried $this->params['url'].
It prints Array('URL' => '/articles/edit').
I appreciate any help.
Thanks.

You did not named it
$(function() {
$(".editable_textarea").editable("/articles/edit/", {
indicator : "<img src='img/indicator.gif'>",
type : 'textarea',
name : 'data[Articles][desc]',
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
method : 'POST',
});
});
and you can access this in your controller like
echo $this->data['Articles']['desc'];
You can go with this for your more info

Related

Two forms on the same page - errors messages visibles just in first one

I have two steps forms on different modal each.
Three steps on first one (#form1) and the same on second one (#form2).
All inputs and elements with different names and ID.
Links with validation pages (one by step)are working. My problem is just errors messages don't appear on second form. I made the verification with error containers id (one id by form too).
An idea why ?
I try to resolve by coding a array2 of errors for form2 but no error messages visible.
$(".step1").click(function() {
var data = {
'data1' : jQuery("input[name=data1]:checked", "#forml").val(),
'data2' : jQuery('#data2').val(),
'data3' : jQuery('#data3').val(),
};
jQuery.ajax({
url : '/mySite/parsers/check.php',
method : 'POST',
type : 'POST',
data : data,
success : function(data){
if (data != 'passed') {
jQuery('#list_errors').html(data);
}
if (data.result == 'passed') {
$(".frm").hide("fast");
$("#step2").show("slow");
$(".open1").css("display","none");
$(".open2").css("display","inline-block");
}
},
error : function(){
alert('no working.'); }
});
});
That's because you're outputting errors on a div using ID. ID of DIVs should be unique on a single page.
What jQuery does is, it updates the first DIV with list_errors ID and leaves the second one which is in second modal as it is.
Solution:
Use different IDs for each or use class of the DIV and access it with parent() or child() jQuery function.
You have to mention about in which form you need to display error. Also change id='list_errors' to class='list_errors' because its not good to use same id in one page.
$(".step1").click(function() {
var data = {
'data1' : jQuery("input[name=data1]:checked", "#forml").val(),
'data2' : jQuery('#data2').val(),
'data3' : jQuery('#data3').val(),
};
jQuery.ajax({
url : '/mySite/parsers/check.php',
method : 'POST',
type : 'POST',
data : data,
success : function(data){
if (data != 'passed') {
$(this).find('.list_errors').html(data);
}
if (data.result == 'passed') {
$(".frm").hide("fast");
$("#step2").show("slow");
$(".open1").css("display","none");
$(".open2").css("display","inline-block");
}
},
error : function(){
alert('no working.'); }
});
});

jeditable inline editing , recently updated value not showing when the page loads. shows default click to edit

I am using jeditable plugin to update some values in my textarea inline. When I update them the values are processed in a file save.php and the value is stored in a table record in the database and the field is updated.
However my problem is once I have already updated the record and when I load or refresh the page, I cannot see the updated value in the field, the default click to edit is displayed until I click and edit the value in which case it displays the new value. I have read on other posts that the save.php should echo out the value to be displayed in the field.
My save.php code
<?php
if(isset($_POST['suck'])){
mysql_connect('localhost','root','');
mysql_select_db('inline_database');
$data = $_POST['suck'];
$result = mysql_query("INSERT INTO `form_data` VALUES('','$data')");
$id = mysql_insert_id();
$query = "SELECT * FROM `form_data` WHERE `id` = '$id'";
$retrieve_result = mysql_query($query);
while($row = mysql_fetch_assoc($retrieve_result)){
$get_id = $row['id'];
}
echo $get_id;
}
?>
My function code which is inside the index.html
$(".editable_textarea").editable("http://localhost/newedit/save.php", {
indicator : "<img src='img/indicator.gif'>",
loadurl : "http://localhost/newedit/save.php",
type : 'textarea',
submitdata: { _method: "post" },
//id : 'elementid',
//name : 'newvalue',
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
tooltip : "Click to edit ",
});
My jeditable.js file
var blue =
$.fn.editable.defaults = {
name : 'suck',
id : 'id',
type : 'text',
width : 'auto',
height : 'auto',
event : 'click.editable',
onblur : 'cancel',
loadtype : 'GET',
loadtext : 'Loading...',
placeholder: 'click to edit',
loaddata : {},
submitdata : {},
ajaxoptions: {}
};
The Jeditable plugin documentation is here.
And this is the live Demo.

don't want to hide queue item bar after upload complete in uploadify

I am using uploadify in one application. I have successfully implemented it. I got that after complete the upload files, the files' queue bar hide slowly. But I do not want to hide this bar because I am able to understand how many files being uploaded as well as which files. I have tried to write something as
'onUploadComplete' : function() {
$('.uploadify-queue').show();
}
But no luck. Is there any option not hide the queue bar of uploadify.
$('#file_upload').uploadify({
'swf' : '/js/uploadify/uploadify.swf',
'uploader' : '/js/uploadify/uploadify.php',
'method' : 'post',
'formData' : { 'someKey' : 'someValue' },
'auto' : false,
'buttonClass' : 'form-control',
'removeCompleted' : false
});
use removeCompleted : false
Basic idea is to clone original block into another and define own rules of closing:
$('#file_upload').uploadify({
// other options
'onUploadSuccess': function (file, data, response) {
// clone block to another to prevent hidding
var blockOld = $('#' + file.id);
var block = blockOld
.clone()
.removeAttr('id')
.insertAfter(blockOld);
// remove original block
blockOld.remove();
// close block on cancel button click
block.find('.cancel').click(function () {
$(this)
.closest('.uploadify-queue-item')
.fadeOut(function () {
$(this).remove();
})
;
});
}
});

Retrieve data with extjs 3.4 panel + dataview + jsonstore

i'm trying to show some data via dataview, but for some reason i am getting an emptytext message (No data).
Here is my dataview:
xtype : 'dataview',
emptyText : 'No data',
id : 'cartdata',
multiSelect : true,
plugins : new Ext.DataView.DragSelector( { dragSafe : true } ),
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'images'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
}),
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="images">',
'<a title="{id}">test</a>',
'</tpl>',
'</tpl>'
)
and this is a data from php:
{"data":{"images":{"id":"2"}},"status":"success"}
I am new to extjs and appreciate any help.
By the looks of it you are not returning a successProperty value correctly. Change the response from you php code to be, as listed below.
The default successProperty of the JsonReader on your store is 'success'. ExtJs will look for this property in your server response.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader-cfg-successProperty
Also, you will probably want to return your data as a json array, not an object. You dont need the image object inside the data array.
Server response:
{ "data":[{"id":"2"}], "success":true }
Javascript:
...
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'id'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
})
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<a title="{id}">test</a>',
'</tpl>'
)

javascript to php question

<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'scripts/uploadify.swf',
'script' : 'scripts/uploadify.php',
'buttonImg' : 'css/btn_browseFiles.png',
'rollover' : 'true',
'wmode' : 'transparent',
'height' : '26px',
'width' : '109px',
'cancelImg' : 'cancel.png',
'folder' : 'uploads',
'queueID' : 'fileQueue',
'simUploadLimit' : '2',
'auto' : true,
'multi' : true,
'onComplete' : function(event, queueID, fileObj, response, data) {
$('#filesUploaded').append('<li><strong>file:</strong> '+fileName+'</li>');
}
});
});
</script>
I want to get the "+fileName+" to echo in PHP so I can pass it in a contact form.
<?php $que = ""; ?>` fill in the blanks
<input type="hidden" name="" value="<?php echo($que); ?>">
Besides doing the following, I don't know of a way to pass Javascript variables to PHP...
<script type="text/javascript>
location.href="thisPage.php?fileName=" + fileName;
</script>
And then you would use PHP to do:
<?PHP $que = $_GET["fileName"]; ?>
If you want to use the text in the filename variable, you will need to pass it to a server request somehow.
It can be done several ways:
cookie
getline variable/query string
post variable (put it in a form element)
If you just want to get it into a value on the current page, you should be able to use javascript to do it:
#('#id_of_element').val(filename);
This is assuming you are using jQuery.
This looks like some sort of uploading flash component. If it is uploading the file to your server, then you should be able to intercept the request and work with it from there.
$trigger('uploadifyComplete',ID,{
'name' : event.currentTarget.name,
'filePath' : getFolderPath() + '/' + event.currentTarget.name,
'size' : event.currentTarget.size,
'creationDate' : event.currentTarget.creationDate,
'modificationDate' : event.currentTarget.modificationDate,
'type' : event.currentTarget.type
},
can you see these?so you can use fileObj.name to get file name.

Categories