[SOLUCIONADO] X-editable leer valores desde base de datos

[Montes28]

hola amigos espero me puedan ayudar

estoy utilizando X-editable y necesito leer desde la base de datos , el ejemplo que se encuentra en el ejemplo es el siguiente

Código Javascript:

<script>
$(function(){
    $('#address').editable({
        url: '/post',
        title: 'Enter city, street and building #',
        value: {
            city: "Moscow", 
            street: "Lenina", 
            building: "15"
        }
    });
});
</script>
 

mi duda es si el value lo puedo hacer con un json creado desde php

Código Javascript:

<script>
$(function(){
    $('#address').editable({
        url: '/post',
        title: 'Enter city, street and building #',
        value:valores.php
    });
});
</script>
 

[maycolalvarez]

necesita un lenguaje del lado del servidor para conectar con bases de datos, y AJAX para mejorar la interacción (no limitativo).

tambien puede usar SQLite (HTML 5 local storage) pero la base es local y única por cleinte, no se puede centralizar

[Montes28]

maycolalvarez gracias por responder

estoy utilizando php lenguaje del lado del servidor para conectar con bases de datos y creo el array tipo json

Código PHP:

<?php
$arr = array('city' => 'Moscow', 'street' => 'Lenina', 'building' => 15);
 
return json_encode($arr);
?>
 

y hice lo que que me indicaste de usuar ajax pero no logro que funcione , que estoy haciendo mal?

Código Javascript:

$('#address').editable({
        url: 'multiples.php',
        title: 'Enter city, street and building #',
        value:function() {
           $.ajax({
           url: "datos.php",
           type: json,
           sucess: function( resultado){
           }
           });
         
         },
    
    });
 

con este plugin no se tiene control del html osea de los input

[maycolalvarez]

de nada te sirve return allí, consulte sobre dicha palabra reservada

lo que necesitas es hacer un echo para "volcar" el json a la salida, así lo recibe ajax, puedes usar un die() y así finalizas el script php de una vez:

Código PHP:

<?php
$arr = array('city' => 'Moscow', 'street' => 'Lenina', 'building' => 15);
 
die( json_encode($arr));
 

[Montes28]

maycolalvarez gracias por responder

con esta funcion ajax puedo llenar los input que hace el plugin?

el plugin trabaja asi, en el DOM debe de estar

Código Javascript:

<script>
$(function(){
$('#address').editable({
url: '/post',
title: 'Enter city, street and building #'
/* en el demo asi se cargan los input , pero yo lo necesito desde base de datos
value: {
city: "Moscow",
street: "Lenina",
building: "15"
}*/
});
});
</script>
 

Código HTML:

<a href="#" id="address" data-type="address" data-pk="1">awesome</a>
 

y se hace referencia a un archivo js

Código Javascript:

<script src="src/js/address.js"></script>
 

y address.js es https://github.com/vitalets/x-editab...ess/address.js

indicame si estoy muy equivocado por favor

[maycolalvarez]

eso depende de lo que espere el plugin, si el espera un json con input:valor, eso leerá, a no ser que tengas que especificar otras cosas, consulte su documentación.

[Montes28]

maycolalvarez gracias por responder , disculpame estoy un poco confundido y no me funciona lo que me indicaste

estoy viendo la documentacion del plugin
http://vitalets.github.com/x-editable/docs.html en $().editable(options)

Name:value
Type:mixed
Default: element's text
Description:Initial value of input. If not set, taken from element's text.


segun el ejemplo que hay en el plugin se llenan los input con un array json

Código Javascript:

<script>
$(function(){
$('#address').editable({
url: '/post',
title: 'Enter city, street and building #',
value: {
city: "Moscow",
street: "Lenina",
building: "15"
}
});
});
</script>
 

me corriges si estoy equivocado , hice lo que me indicaste y no me funciona

Código Javascript:

$('#address').editable({
        url: 'multiples.php',
        title: 'Enter city, street and building #',
        value:function() {
           $.ajax({
           url: "datos.php",
           type: json,
           sucess: function( resultado){
           }
           });
         
         },
    
    });
 

Código PHP:

<?php
$arr = array('city' => 'Moscow', 'street' => 'Lenina', 'building' => 15);
 
die( json_encode($arr));
 

[maycolalvarez]

ya veo el problema, estás implementando AJAX inadecuadamente:

1 - ajax es asíncrono: él NO puede retornar el resultado como si fuese una función, por lo tanto no puedes establecer la llamada AJAX al parámetro value

2 - Para establecer los datos del objeto editable, tienes que esperar a la respuesta del servidor hacia AJAX (onreadystatechange), lo que es el success y setear el response al objeto:

Código Javascript:

$.ajax({
   url: "datos.php",
   type: json,
   sucess: function(resultado){
        $('#address').editable({
            url: 'multiples.php',
            title: 'Enter city, street and building #',
            value: resultado //¡¡¡resultado devuelto por el Server!!!
        });
   }
);
 

[Montes28]

maycolalvarez gracias por responder y por ayudarme , hice lo que me indicas pero no funciona

Código Javascript:

$(document).ready(function() {
$.ajax({
   url: "datos.php",
   type: json,
   sucess: function(resultado){
        $('.address').editable({
            url: 'multiples.php',
            title: 'Enter city, street and building #',
            value: resultado //¡¡¡resultado devuelto por el Server!!!
        });
   }
);
});
 

[Carlangueitor]

Si estás en Chrome, ¿probaste abrir la consola a ver si te muestra algún error?

Saludos

[Montes28]

Carlangueitor gracias por responder

estoy utilizando mozilla y abri firebug y no sale ningun error , no se porque no me funciona el codigo ajax

[Carlangueitor]

Veo un error en la linea 4:

Código Javascript:

type: json
 

Debe ser 'POST' o 'GET', y por lo que dices debe ser 'GET', así que puedes omitir ese parámetro.


Saludos

[David]

Quizás la idea era:

Código Javascript:

dataType: 'json'
 

[Carlangueitor]

Suena muy lógico

[Montes28]

Carlangueitor gracias por responder .

segun lo que me indicas deberia de quitar type:json la respuesta es el formato json te voy a mostar con lo estoy trabajando hice lo que me indicaste y no funciona , ya instale chrome y no veo ningun error .

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-editable.css" rel="stylesheet">
<link href="css/address.css" rel="stylesheet">

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-editable.min.js"></script>
<script src="js/bootstrap-tabs.js"></script>
<script src="js/ovsm.js"></script>

<script src="js/address.js"></script>
<script src="js/html5types.js"></script>

Código Javascript:

<script>
$(document).ready(function() {
 
$.ajax({
   url: "prueba.php",
   dataType: 'json',
   sucess: function(resultado){
        $('.address').editable({
            url: 'multiples.php',
            title: 'Enter city, street and building #',
            value:resultado
        });
   }
}),
});
 
 
 
 
</script>
 

Código HTML:

<a href="#" class="address" data-type="address" data-pk="1">awesome 2 </a>
 

[Carlangueitor]

La respuesta es formato json, eso está bien, pero puedes hacer solo peticiones POST o GET (o en el caso puede ser DELETE, PUT, etc), mira la documentación de jQuery:

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

Prueba agregar también el callback para el error:

Código Javascript:

<script>
$(document).ready(function() {
 
$.ajax({
   url: "prueba.php",
   dataType: 'json',
   sucess: function(resultado){
        $('.address').editable({
            url: 'multiples.php',
            title: 'Enter city, street and building #',
            value:resultado
        });
   },
   error: function(error){
       console.log(error);
    }
}),
});
</script>
 

Saludos

[Montes28]

amigos estoy desesperado no se que mas hacer , en consola me aparece esto , pero los errores a los que hace referencia no son del proyecto

Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:236
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:236
Exception in onResRdy: TypeError: Cannot read property 'htmlRes' of undefined ContentScript.js:84

[David]

¿Y si haces un console.log(resultado) qué obtienes en la Consola?

¿Has verificado en la pestaña "Red" de Firebug cuál es la respuesta que estás obteniendo?

[Montes28]

al cargar el proyecto en el navedador en el firebug observo que GET prueba.php y en respuesta obtengo {"city":"Moscow","street":"Lenina","building":1 5} y json

city "Moscow"
street "Lenina"
building 15

y en el ejemplo del plugin el value es asi

value: {
city: "Moscow",
street: "Lenina",
building: "15"
}
pero no me abre la ventana con los input

http://vitalets.github.com/x-editable/demo.html


viendo un ejemplo Process JSON response http://jsfiddle.net/xBB5x/62/


alguien tiene idea porque no funciona?

[Montes28]

solicito a alguien que haya usado el plugin http://vitalets.github.com/x-editable/ para que me ayude con mi problema , no logro que abra la ventana para editar .

Código Javascript:

$(document).ready(function() {
$.ajax({
   url: "prueba.php",
   dataType: 'json',
   sucess: function(resultado){
        $('.address').editable({
            url: 'multiples.php',
            title: 'Enter city, street and building #',
            value:resultado
        });
   },
   error: function(error){
       console.log(error);
    }
});
});
 

que estoy haciendo mal ? que hace falta para que funcione

[Montes28]

hola amigos espero me puedan ayudar , le escribi al autor del plugin

https://github.com/vitalets/x-editable/issues/110 y el me responde que haga lo siguiente

Código Javascript:

$(document).ready(function() {
//init editable
$('.address').editable({
url: 'multiples.php',
title: 'Enter city, street and building #'
});
 
//set value from ajax
$.ajax({
url: "prueba.php",
dataType: 'json',
sucess: function(resultado){
$('.address').editable('setValue', resultado);
},
error: function(error){
console.log(error);
}
});
});
 

observando en consola function(resultado) no arroja ningun resultado, porque?

[Montes28]

amigos tenia un problema en el sucess y deberia de ser success