Foros del Web » Programando para Internet » Jquery »

Jquery Plugin: Object #<Object> has no method

 Estas en el tema de Jquery Plugin: Object #<Object> has no method en el foro de Jquery en Foros del Web. Tengo un inconveniente con un plugin jquery que hice sobre XHR leve 2. el plugin en cuestion: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original ( ...
  #1 (permalink)  
Antiguo 06/03/2013, 13:30
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Sonrisa Jquery Plugin: Object #<Object> has no method
Tengo un inconveniente con un plugin jquery que hice sobre XHR leve 2.

el plugin en cuestion:

Código Javascript: 
Ver original
  1. (function($){
  2.         
  3.         
  4.         $.AjaxPrepare = function(option){
  5.                 
  6.                 // Definiendo opciones
  7.                 options = $.extend($.AjaxPrepare.default,option);
  8.                 
  9.                 // Instanciando
  10.                 var ajax        = new XMLHttpRequest();
  11.                 var form        = new FormData();
  12.                 
  13.                 // Condicionales
  14.                 var swiTch      = false;
  15.                 var GET         = null;
  16.                 
  17.                 // Definiendo metodo
  18.                 if(options.method=='' || !options.method){
  19.                         
  20.                         options.method='POST';
  21.                         
  22.                 }
  23.                 
  24.                 // Insertando datos pasados por post.
  25.                 if(options.insert.length>0 && options.method=='POST'){
  26.                         
  27.                         for(var i=0;i<options.insert.length;i++){
  28.                                 
  29.                                 form.append(options.insert[i][0],options.insert[i][1]);
  30.                                 
  31.                         }
  32.                         
  33.                 }
  34.                 
  35.                 // Parseando datos ingresados por get.
  36.                 if(options.insert.length>0 && options.method=='GET'){
  37.                         
  38.                         GET='?';
  39.                         
  40.                         for(var i=0;i<options.insert.length;i++){
  41.                                 
  42.                                 GET += options.insert[i][0]+'='+options.insert[i][1];
  43.                                 
  44.                                 if((i+1)!==options.insert.length){
  45.                                         
  46.                                         GET+='&';
  47.                                 
  48.                                 }
  49.                         }
  50.                         swiTch=true;
  51.                 }
  52.                 
  53.                 // Definiendo forma de abrir
  54.                 if(swiTch && GET!==null){
  55.                         
  56.                         ajax.open(options.method,options.url+GET,true);
  57.                 
  58.                 }else{
  59.                         
  60.                         ajax.open(options.method,options.url,true);
  61.                         
  62.                 }
  63.                 
  64.                 // Estados
  65.                 ajax.onreadystatechange = function(){
  66.                         
  67.                         if(ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){
  68.                                 
  69.                                 alert(options.onLoad());
  70.                                 options.onLoad();
  71.                                 
  72.                         }
  73.                         
  74.                         if(ajax.readyState==4 && ajax.status==200){
  75.                                 
  76.                                 alert(options.onLoaded(ajax.response));
  77.                                 options.onLoaded(ajax.response);
  78.                                 
  79.                         }
  80.                         
  81.                         if(ajax.readyState==4 && ajax.status==404){
  82.                                 
  83.                                 options.onError();
  84.                         
  85.                         }
  86.                 
  87.                 };
  88.                 
  89.                 // Progreso de peticion
  90.                 ajax.upload.onprogress = function(e){
  91.                         
  92.                         if(e.lengthComputable){
  93.                                 
  94.                                 var porcentaje=Math.ceil((e.loaded/e.total)*100);
  95.                                 
  96.                                 options.onProgress(porcentaje);
  97.                         
  98.                         }
  99.                         
  100.                 };
  101.                 
  102.                 // Forma de envio
  103.                 if(swiTch && GET!==null){
  104.                         
  105.                         ajax.send(null);
  106.                         
  107.                 }else{
  108.                         
  109.                         ajax.send(form);
  110.                         
  111.                 }
  112.                 
  113.         }
  114.         
  115.         // Opciones por default
  116.         $.AjaxPrepare.default = {
  117.                 
  118.                 insert          : [],                                   // [ ['name',value],['name','value'] ] name: nombre con el que identificas desde php. value: valor que obtendras en php [string | int | file]. 
  119.                 url                     : String,                               // Url php, etc... procesador de informacion. [String].
  120.                 method          : String,                               // Metodo a emplear para la peticion ['POST' | 'GET'].
  121.  
  122.                 onLoad          : function(){},                 // onLoad(){}           Funcion equivalente a readyState[1,2,3].
  123.                 onLoaded        : function(response){}, // onLoaded(){}         Funcion equivalente a readyState[4] y Status[200].
  124.                 onProgress      : function(progress){}, // onProgress(){}       Funcion que devuelve el procentaje de avance de la peticion.
  125.                 onError         : function(){},                 // onError(){}          Equivalente a readyState[4] y Status[404]
  126.                 
  127.         }
  128.         
  129.         
  130.         
  131. })(jQuery);







En Uso


Código Javascript: 
Ver original
  1. function handleFileSelect(evt){
  2.                 
  3.         // ---- Prevencion
  4.         evt.stopPropagation();
  5.         evt.preventDefault();
  6.  
  7.         // ---- Datos
  8.         var content             = $('article.Photos');
  9.         var category    = $('article.Photos').attr('id');
  10.         var files               = evt.dataTransfer.files; // FileList object.
  11.         
  12.         // Bucle for
  13.         for(var i = 0; i<files.length; i++){
  14.                 
  15.                 
  16.                 $.AjaxPrepare({
  17.                         
  18.                         insert  : [['category',category],['photo',files[i]]],
  19.                         url             : 'http://localhost/Nayla2/admin/UploadPhotos',
  20.                         method  : "POST",
  21.                         
  22.                         // Cargando...
  23.                         onLoad  : (function(){
  24.                                 
  25.                                 var html = '<div class="Foto Uploading" id="Foto_'+i+'"><img src=""><span id="Process_'+i+'"></span></div>';
  26.                                 content.append(html);
  27.                                 
  28.                         }),
  29.                         
  30.                         // Terminado...
  31.                         onLoaded: (function(response){
  32.                                 
  33.                                 // Datos Json
  34.                                 var json = eval("("+response+")");
  35.                                 
  36.                                 // Reemplazando el progress by el delete button
  37.                                 $('span#Process_'+i).replaceWith('<input type="button" value="X" class="delete_image" id="'+json.id+'">');
  38.         
  39.                                 // Reemplazando la imagen en base64 by image true
  40.                                 $('div#Foto_'+i+' > img').replaceWith('<img src="'+json.image+'">');
  41.                                 
  42.                                 // Eliminando clase uploading
  43.                                 $('div#Foto_'+i).removeClass('Uploading');
  44.                                 
  45.                         }),
  46.                         
  47.                         // Error...
  48.                         onError : (function(){
  49.                                 
  50.                                 $('#Foto_'+i).remove();
  51.                                 alert('No se pudo subir: '+files[i].name);
  52.                                 
  53.                         }),
  54.                         
  55.                         // Progreso...
  56.                         onProgress: (function(result){
  57.                                 
  58.                                 var result = (100-result);
  59.                                 
  60.                                 $('span#Process_'+i).css('height',result+'%');
  61.                                                                 
  62.                         })
  63.                         
  64.                 });
  65.                 
  66.                 // ----- Prevista
  67.                 $.ImagePreview({
  68.                         
  69.                         file    : files[i],
  70.                         onLoad  : function(image){
  71.                                 
  72.                                 $('div#Foto_'+i+' > img').attr('src',image);
  73.                                 
  74.                         }
  75.                         
  76.                 });
  77.                                                 
  78.                 
  79.         }
  80.         
  81. }




Error del uso:

Uncaught TypeError: Object #<Object> has no method 'onProgress' PluginAjaxXhr2.js
Uncaught TypeError: Object #<Object> has no method 'onLoaded'


como puedo hacer para que me tome como metodos las funciones y no como objetos el plugin? o como puedo solucionar el error xD
  #2 (permalink)  
Antiguo 06/03/2013, 14:02
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
No inventes la rueda, los chicos de jQuery ya han hecho muchas validaciones para el uso de Ajax, para empezar en tu codigo hay un error muy grave y es que no estas haciendo la funcion generica, no estas preguntando el tipo de explorador, recuerda que de IE 7 < se usa ActiveXObject para generar tu XHR.

Ten en cuenta algo muy claro, si vas a hacer un plugin lo tienes que hacer crossbrowser.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #3 (permalink)  
Antiguo 06/03/2013, 14:41
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
1) Los de jquery hicieron el $.ajax el cual funciona con XHR level 1. el cual es estable en todos los navegadores viejos [y hasta con hacks]...

2) Yo estoy haciendo el $.ajaxPrepare el cual funciona con XHR level 2. el cual es estable para todos los navegadores nuevos, no tengo intencion que funcione con los viejos, es para uso personal solo lo uso para los administradores de contenido preguntando que navegadores suele n usar los clientes.
  #4 (permalink)  
Antiguo 06/03/2013, 14:42
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
1) Los de jquery hicieron el $.ajax el cual funciona con XHR level 1. el cual es estable en todos los navegadores viejos [y hasta con hacks]...

2) Yo estoy haciendo el $.ajaxPrepare el cual funciona con XHR level 2. el cual es estable para todos los navegadores nuevos, no tengo intencion que funcione con los viejos, es para uso personal solo lo uso para los administradores de contenido preguntando que navegadores suele n usar los clientes.
  #5 (permalink)  
Antiguo 06/03/2013, 16:30
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
XHR level 2 es soportado en el momento que te permite crear la instancia de XMLHttpRequest(), jQuery lo crea al hacer el plugin de Ajax, sin embargo hasta que que sea un estandar lo va a definir como tal el equipo de jQuery.

En cuanto a tu problema con los objetos, primero te recomendaria que leyeras un poco mas sobre como crear plugins en jQuery, por ejemplo en esta linea

Cita:
options = $.extend($.AjaxPrepare.default, option);
Estas creando tu plugin con opciones que trae por default, sin embargo no las estas definiendo antes de usarlas, lo estas haciendo aqui:
Código Javascript: 
Ver original
  1. // Opciones por default
  2.                 $.AjaxPrepare.
  3.                 default = { insert: [], // [ ['name',value],['name','value'] ] name: nombre con el que identificas desde php. value: valor que obtendras en php [string | int | file].
  4.                     url: String, // Url php, etc... procesador de informacion. [String].
  5.                     method: String, // Metodo a emplear para la peticion ['POST' | 'GET'].
  6.                     onLoad: function () {}, // onLoad(){}           Funcion equivalente a readyState[1,2,3].
  7.                     onLoaded: function (response) {}, // onLoaded(){}         Funcion equivalente a readyState[4] y Status[200].
  8.                     onProgress: function (progress) {}, // onProgress(){}       Funcion que devuelve el procentaje de avance de la peticion.
  9.                     onError: function () {}, // onError(){}          Equivalente a readyState[4] y Status[404]
  10.                 }

Tendrias que hacer algo como esto:

Código Javascript: 
Ver original
  1. // Definiendo opciones por default
  2.                     // Opciones por default
  3.                     var defaults = { 
  4.                         insert: [], // [ ['name',value],['name','value'] ] name: nombre con el que identificas desde php. value: valor que obtendras en php [string | int | file].
  5.                         url: '', // Url php, etc... procesador de informacion. [String].
  6.                         method: '', // Metodo a emplear para la peticion ['POST' | 'GET'].
  7.                         onLoad: function () {}, // onLoad(){}           Funcion equivalente a readyState[1,2,3].
  8.                         onLoaded: function (response) {}, // onLoaded(){}         Funcion equivalente a readyState[4] y Status[200].
  9.                         onProgress: function (progress) {}, // onProgress(){}       Funcion que devuelve el procentaje de avance de la peticion.
  10.                         onError: function () {}, // onError(){}          Equivalente a readyState[4] y Status[404]
  11.                     }
  12.                     options = $.extend(defaults, option);

Salludos.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #6 (permalink)  
Antiguo 07/03/2013, 02:22
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
sigue con el mismo error :v y ya lo cambie
  #7 (permalink)  
Antiguo 07/03/2013, 19:03
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
:s bueno entonces esto requiere un analisis mas profundo, en cuanto lo termine te comento, saludos !!
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #8 (permalink)  
Antiguo 11/03/2013, 00:10
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
No lo he olvidado camarada pero tengo en cuanto pueda te notifico, saludos.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #9 (permalink)  
Antiguo 13/03/2013, 21:11
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
Saludos , gracias te agradezco por tu interes! :D yo también me voy a poner un rato a buscar sobre documentaciones, articulos todo lo relacionado con posibles errores en metodos=Function y parametros ñ.ñ

si encuentro el error te lo paso! Saludos!
  #10 (permalink)  
Antiguo 13/03/2013, 21:30
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
Puedes pegar tu codigo completo junto con tu html aquí ?

http://paste.behstant.com/

Para ahora si hacer la depuración exhaustiva.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #11 (permalink)  
Antiguo 13/03/2013, 21:33
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
ahi lo subo!
  #12 (permalink)  
Antiguo 13/03/2013, 21:40
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
http://paste.behstant.com/index.php?show=41
  #13 (permalink)  
Antiguo 14/03/2013, 00:50
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
Mira he estado viendo y me truena cuando haces ajax.send(form);, yo creo el problema viene con FormData(), por lo pronto te pongo un link donde pudes buscar un poco de esto:

http://stackoverflow.com/questions/6...ests-in-jquery
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #14 (permalink)  
Antiguo 14/03/2013, 15:46
 
Fecha de Ingreso: septiembre-2012
Ubicación: Buenos aires
Mensajes: 110
Antigüedad: 12 años, 1 mes
Puntos: 9
Respuesta: Jquery Plugin: Object #<Object> has no method
o.O , para mandar los datos que se insertaron dentro de FormData() a php se necesita mandar por send. no veo que hay de malo, podes averiguar más en html5rockets
  #15 (permalink)  
Antiguo 14/03/2013, 16:00
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 9 meses
Puntos: 36
Respuesta: Jquery Plugin: Object #<Object> has no method
Ayer que lo revise ahi es donde me tronaba en el codigo.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.

Etiquetas: ajax, funcion, html, input, javascript, js, object, php, plugin, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:51.