O x-editable é um plugin jquery que conversa com jquery-ui.
Ele serve para transformar aqueles textos locais em campos editáveis.
Para começar a brincar fiz o seguinte:
Ele serve para transformar aqueles textos locais em campos editáveis.
Para começar a brincar fiz o seguinte:
No arquivo que aparecerá o popup ou inline coloque
<html>
<head>
<script language="JavaScript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery-ui.css" />
<script language="JavaScript" src="jquery-ui.js"></script>
<link href="jqueryui-editable.css" rel="stylesheet"/>
<script src="jqueryui-editable.min.js"></script>
<style type="text/css">
// essa parte é melhor ser colocada em um CSS separado
.input_text_editable {
cursor: pointer;
}
</style>
<script>
// essa parte é melhor ser colocada em um JS separado
$.fn.editable.defaults.mode = 'inline';
function setEditableInputText(link, id) {
$('.input_text_editable').editable({
type: 'text',
pk: id,
url: link,
ajaxOptions: {
dataType: 'json'
},
success: function(response, newValue) {
if(!response) {
return "Erro desconhecido";
}
if(response.success === false) {
return response.msg;
}
}
});
}
// ate aqui no JS separado
$(document).ready(function() {
setEditableInputText('alterar_campo.php',1);
});
</script>
</head>
<body>
<span class="input_text_editable" id="cidade">nome da cidade</span>
</body>
</html>
No arquivo alterar_campo.php coloque:
<?php
// faz o tratamento das variaveis
$name = $_POST['name'];
$value = utf8_decode($_POST['value']); // pois uso iso 8859-1
$pk = $_POST['pk'];
// executa as ações de alteração
if ($alterou) {
$result = array(‘success’=>true, 'newValue'=>$value);
} else {
$result = array('success'=>false, 'msg'=>utf8_encode('Ocorreu um erro e o dado não foi salvo.'));
}
echo json_encode($result);
die();
Espero que tenham gostado.
Comentários
Postar um comentário