Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema usar .js en contenido cargado con ajax

Estas en el tema de Problema usar .js en contenido cargado con ajax en el foro de Frameworks JS en Foros del Web. Buenas, A raíz del problema anterior que pude solucionar, resulta que cargo vía ajax unos productos. Para cada producto tengo un botón para sugerir una ...
  #1 (permalink)  
Antiguo 19/02/2012, 04:58
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Problema usar .js en contenido cargado con ajax

Buenas,

A raíz del problema anterior que pude solucionar, resulta que cargo vía ajax unos productos. Para cada producto tengo un botón para sugerir una nueva categoria, y lo que hace este botón sugerir, es ocultar ciertas capas y mostrar otra con un desplegable.

Para el desplegable utilizo un fichero externo .js, es el siguiente:
http://www.mbe.ro/wp-content/uploads/replace_selects/

La libreria la cargo en el head de la cabecera de la web, pero al tratarse (imagino yo, pq sino no tiene explicación lógica) los datos de los productos vienen vía Ajax, no es capaz de detectarlo correctamente y no se despliega el select!!

Alguien sabe cómo tengo que hacerlo para que funcione este .js o cualquier otro en contenidos que son cargados vía ajax? hay algo parecido al live pero para ficheros .js?¿

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 19/02/2012, 05:11
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Respuesta: Problema usar .js en contenido cargado con ajax

Se me olvidaba decir que en el head además de cargar el .js de la página que indicaba en el post de arriba, se instancia de la siguiente forma para que funcione:

$('select').replaceSelects({
replaceForIphone: false
});

Lo probé con el evento live pero tampoco funciona, no sé de que manera conseguirlo y si de esta forma está bien escrito...

$('select').live('replaceSelects',function(){
replaceForIphone: false
});

Alguna idea por favor?
  #3 (permalink)  
Antiguo 19/02/2012, 07:17
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 15 años, 1 mes
Puntos: 265
Respuesta: Problema usar .js en contenido cargado con ajax

El evento live deberia ir dentro del js externo, lo has puesto ahi?
  #4 (permalink)  
Antiguo 19/02/2012, 08:26
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Respuesta: Problema usar .js en contenido cargado con ajax

Cita:
Iniciado por MarioAraque Ver Mensaje
El evento live deberia ir dentro del js externo, lo has puesto ahi?
Hola MarioAraque, el .js externo es este y no veo donde indicarle el live :S

http://www.mbe.ro/wp-content/uploads...ement.1.0.0.js

¿Donde lo pondrías?

Muchas gracias
  #5 (permalink)  
Antiguo 19/02/2012, 08:54
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 15 años, 1 mes
Puntos: 265
Respuesta: Problema usar .js en contenido cargado con ajax

No se neodani, yo no soy el que esta haciendo el desarrollo y no se en que eventos tengo que poner el live.
Veo que hay algunos eventos click, deberias cambiar cada uno de ellos y probar. En mas no te podemos ayudar.

Saludos.
  #6 (permalink)  
Antiguo 19/02/2012, 09:35
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Respuesta: Problema usar .js en contenido cargado con ajax

He modifico los 3 sitios donde había un evento click pero sigue sin funcionar

Código Javascript:
Ver original
  1. (function($){
  2.     $.fn.replaceSelects = function(options) {
  3.         var defaults = {
  4.             cssClass: 'optionbox',
  5.             zIndex: 2,
  6.             hideOnBodyClick: true,
  7.             replaceForIphone: false,
  8.             onElementSelect: function (element) {
  9.                 return true;
  10.             },
  11.             hideListEffect: function (element) {
  12.                 $(element).hide('fast');
  13.             },
  14.             toggleListEffect: function (element) {
  15.                 $(element).toggle('fast');
  16.                 return true;
  17.             }
  18.         };
  19.         var options = jQuery.extend(defaults, options);
  20.         var is_select_opened = null;
  21.        
  22.         return this.each(function() {
  23.             if (!options.replaceForIphone && (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) )  {
  24.                 return false;
  25.             }
  26.             var opts = new Array;
  27.             var selected = new Object();
  28.             var width = $(this).width();
  29.             if (parseInt($(this).css('width'))>0) {
  30.                 width = parseInt($(this).css('width'));
  31.             }
  32.             var hasFloat = $(this).css('float');
  33.             width += 40;
  34.             $(this).children().each(function() {
  35.                 var o = new Object();
  36.                 o.value = $(this).attr('value');
  37.                 o.html = $(this).html();
  38.                 o.selected = $(this).attr('selected');
  39.                 o.disabled = $(this).attr('disabled');
  40.                 if (o.selected) {
  41.                     selected = o;
  42.                 }
  43.                 opts.push(o);
  44.             });
  45.             $(this).hide(); //hide me
  46.             html = ''; _title = '';
  47.             for (x in opts) {
  48.                 html += '<a href="#'+escape(opts[x].html)+'" class="option'+(opts[x].selected?'-selected':'')+(opts[x].disabled?'-disabled':'')+'" rel="'+opts[x].value+'">'+opts[x].html+'</a>';
  49.             }
  50.             if (!$(this).parent().hasClass('select-container')) {
  51.                 $(this).wrap('<div class="select-replacement '+options.cssClass+'" '+(hasFloat?'style="float:'+hasFloat+';"':'')+'><div class="select-container" style="display:none"></div><div class="selected" style="width:'+width+'px"><div class="selected-inner">'+selected.html+'</div></div><div class="options" style="display:none;width:'+width+'px">'+html+'</div></div>');
  52.             }
  53.             $('.select-replacement .selected').unbind('click');
  54.             //$('.select-replacement .selected').click(function() {
  55.             $('.select-replacement .selected').live('click',function(){
  56.                 if (options.toggleListEffect($(this).parent().children('.options')[0])) {
  57.                     options.zIndex++;
  58.                     $(this).parent().css('z-index',options.zIndex);
  59.                     $(this).parent().children('.options').css('z-index',options.zIndex);
  60.                     if ($.fn.replaceSelects.is_select_opened && $.fn.replaceSelects.is_select_opened.parent().children('.selected')[0]!=this) {
  61.                         options.hideListEffect($.fn.replaceSelects.is_select_opened[0]);
  62.                     }
  63.                     $.fn.replaceSelects.is_select_opened = $(this).parent().children('.options');
  64.                 }
  65.             });
  66.             $('.select-replacement .options .option, .select-replacement .options .option-selected, .select-replacement .options .option-disabled, .select-replacement .options .option-selected-disabled').unbind('click');
  67.             //$('.select-replacement .options .option, .select-replacement .options .option-selected, .select-replacement .options .option-disabled, .select-replacement .options .option-selected-disabled').click(function() {
  68.             $('.select-replacement .options .option, .select-replacement .options .option-selected, .select-replacement .options .option-disabled, .select-replacement .options .option-selected-disabled').live('click',function(){
  69.                 if (options.onElementSelect(this)) {
  70.                     if (!$(this).is('.option-disabled') && !$(this).is('.option-selected-disabled')) {
  71.                         var optionbox = $(this).parent().parent();
  72.                         var select = optionbox.children('.select-container').children('select');
  73.                         optionbox.children('.selected').children('.selected-inner').html($(this).html());
  74.                         select.val($(this).attr('rel'));
  75.                         var f = select.attr('onchange');
  76.                         if (f) {
  77.                             f.call(select.val());
  78.                         }
  79.                         $(this).parent().children('.option, .option-selected').each(function() {
  80.                             $(this).removeClass('option-selected');
  81.                             $(this).addClass('option');
  82.                         });
  83.                         options.hideListEffect($(this).parent()[0]);
  84.                        
  85.                         $(this).addClass('option-selected');
  86.                         $(this).removeClass('option');
  87.                     }
  88.                 }
  89.                 return false;
  90.             });
  91.             if (options.hideOnBodyClick) {
  92.                 $(document).ready(function() {
  93.                     //$('body').click(function (event) {
  94.                     $('body').live('click',function(){
  95.                         if (!$(event.target).is('.select-replacement,.select-replacement *,.select-replacement .selected *')) {
  96.                             options.hideListEffect('.select-replacement .options');
  97.                         }
  98.                     });
  99.                 });
  100.             }
  101.         });
  102.     };
  103. })(jQuery);
  #7 (permalink)  
Antiguo 19/02/2012, 12:17
Avatar de ocesitaro  
Fecha de Ingreso: diciembre-2011
Ubicación: Carabayllo
Mensajes: 274
Antigüedad: 12 años, 11 meses
Puntos: 36
Respuesta: Problema usar .js en contenido cargado con ajax

el problema es que jquery trabaja con los elementos cargados de la etiqeuta y los qeu se crean dinamicamente ya no respetan .

bsuc ainfo sobre:
live()
delegate()
on()

cada uno segun al version del .js con el que trabjas-

Etiquetas: ajax, cargado, contenido, funcion, js, usar
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




La zona horaria es GMT -6. Ahora son las 05:16.