www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help please, loading javascript into a div with ajax

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    3

    Unhappy Help please, loading javascript into a div with ajax

    ]Help please, is that I want to load several different sliders within a div with ajax but the sliders need javascript code and does not run the show. Here you have an example of what happens to me and ajax code. I'm desperate to see if anyone helps me out, thanks. Sorry for my english, I'm from Spain.

    Example:

    https://dl.dropboxusercontent.com/u/...74/ejemplo.rar

    Code ajax:

    Code:
    <script>
    
    function nuevoAjax(){
    
        var xmlhttp=false;
        try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
        }
        }
    
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
        
    } 
    
    
    
    function Cargar(url){
    
    
    var centro_galeria = document.getElementById('centro_galeria'); 
    
          
    ajax=nuevoAjax(); 
    ajax.open("GET", url,true); 
    
    ajax.onreadystatechange=function(){
    
    if(ajax.readyState==4){
    	
    
    centro_galeria.innerHTML=ajax.responseText;
    
    }
    
    }
            
    ajax.send(null);
    
    
    
    
    }
    
       
    </script>

  2. #2
    Join Date
    Feb 2014
    Posts
    3
    Can anyone help me?

    leave here the codes for you to take a look:

    galeria.html :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BLOG</title>		
    <link href="estilo-pagina-css" rel="stylesheet" type="text/css" /><script src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.js"></script> 
    <script language="javascript">
    $(document).ready(function(){
    
    	$('#slider1').cycle({
    		fx: 'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
    		speed:  '600', 
       		timeout: '7000',
       		next:   '#next', 
        	prev:   '#prev',
        	pager:  '#thumb',
    		   pauseOnHover: false, 				// if you hover pauses the slider
                startClockOnMouseOut: false, 		// if clock should start on MouseOut
      
        	 
    		pagerAnchorBuilder: function(idx, slide) { 
            	return '<li><a href="#"><img src="' + slide.src + '" width="43" height="29" /></a></li>'; 
        	}  
    	});
    
    });
    </script>
    <script>
    function nuevoAjax(){
    
        var xmlhttp=false;
        try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
        }
        }
    
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
        
    } 
    
    
    
    function Cargar(url){
    
    
    var centro_galeria = document.getElementById('centro_galeria'); 
    
          
    ajax=nuevoAjax(); 
    ajax.open("GET", url,true); 
    
    ajax.onreadystatechange=function(){
    
    if(ajax.readyState==4){
    
    centro_galeria.innerHTML=ajax.responseText;
    
    }
    
    }
            
    ajax.send(null);
    
    
    
    
    }
    
    
    </script>
    <style type="text/css">
    
    #contenedor {
    	width: 900px;
    	margin: 0 auto;
    	height: 100%;
    	background-color: #000000;
    }
    </style>
    <link href="estilo-galeria.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="contenedor">
    <div id="cabecera" ></div>
    <div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
    <div id="sombra-galeria-botonera"><div class="botonera-galeria"><ul class="menu-galeria">
      <li><a href="#" onclick="Cargar('galeria1.html');">CONTENIDO 1</a></li>
        <li><a href="#" onclick="Cargar('galeria2.html');">CONTENIDO 2</a></li>
          <li><a href="#" onclick="Cargar('galeria3.html');">CONTENIDO 3</a></li>
    </ul>
    </div></div>
    <div id="para-contenido"></div>
    <div id="centro_galeria"><div class="container">
    
    <div class="slider">
    <div id="slider1">
    	<img  src="imagenes-galeria/1.jpg"   />
    	<img  src="imagenes-galeria/2.jpg"   />
    	<img  src="imagenes-galeria/3.jpg"   />
    </div>
    <ul id="thumb"></ul>
    <div id='next' class="slider_next"><img  src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
    <div id='prev' class="slider_prev"><img  src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
    </div>
    </div>
    </body>
    </html>
    galeria1.html

    Code:
    <div class="container">
    
    <div class="slider">
    <div id="slider1">
    	<img  src="imagenes-galeria/7.jpg"   />
    	<img  src="imagenes-galeria/2.jpg"   />
    	<img  src="imagenes-galeria/3.jpg"   />
    	<img  src="imagenes-galeria/4.jpg"   />
    	<img  src="imagenes-galeria/5.jpg"   />
    	<img  src="imagenes-galeria/6.jpg"   />
    	<img  src="imagenes-galeria/7.jpg"   />
        <img  src="imagenes-galeria/7.jpg"   />
        <img  src="imagenes-galeria/7.jpg"   />
        <img  src="imagenes-galeria/7.jpg"   />
        <img  src="imagenes-galeria/7.jpg"   />
        <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   />
    <img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   /><img  src="imagenes-galeria/7.jpg"   />
    
    
    </div>
    <ul id="thumb"></ul>
    <div id='next' class="slider_next"><img  src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
    <div id='prev' class="slider_prev"><img  src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
    </div>
    galeria2.html


    Code:
    <div class="container">
    
    <div class="slider">
    <div id="slider1">
    	<img  src="imagenes-galeria/4.jpg"   />
    	<img  src="imagenes-galeria/1.jpg"   />
    	<img  src="imagenes-galeria/3.jpg"   />
    
    
    </div>
    <ul id="thumb"></ul>
    <div id='next' class="slider_next"><img  src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
    <div id='prev' class="slider_prev"><img  src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
    </div>
    galeria3.html


    Code:
    <div class="container">
    
    <div class="slider">
    <div id="slider1">
    	<img  src="imagenes-galeria/5.jpg"   />
    	<img  src="imagenes-galeria/6.jpg"   />
    	<img  src="imagenes-galeria/7.jpg"   />
    
    
    </div>
    <ul id="thumb"></ul>
    <div id='next' class="slider_next"><img  src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
    <div id='prev' class="slider_prev"><img  src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
    </div>

    Aquí los archivos por si quereis echarles un vistazo, funcionan en localhost con wamp:
    Code:
    https://dl.dropboxusercontent.com/u/27792874/ejemplo.rar

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles