Hola,

bueno tengo para mostrarles hoy, dos funciones que hacen llamadas a código del servidor por medio de AJAX.

El problema que tengo es que si estas funciones ajax se ejecutan de manera "Secuencial" es decir, primero una y después la otra no va a haber ningún problema. Pero si las ejecuto al mismo momento se me bugean por lo menos la primer llamada de la siguiente manera.

Cuando digo que se bugean me refiero a que cuando la intento volver a llamar a dicha función esta no se ejecuta (no pasa absolutamente nada)

Para el ejemplo que les tengo, Un sistema donde tengo dos cajas donde en principio son de color gris pero al ejecutar "Ajax_Colour_A();" o "Ajax_Colour_B();" por medio de la consola del navegador va a modificar el color de las cajas. Si es Ajax_Colour_A modificará con color ROJO la primer caja pero si es Ajax_Colour_B modificará con color azul la segunda caja.

Además, abajo de todo habrá un mensaje en texto plano, de "Ejecutando..." cuando se este ejecutando el archivo php que este mensaje ayudará a que vean que no se ejecuta el archivo cuando se bugea su función correspondiente.

- test.php (tendrá las dos cajas y las definiciones de las funciones necesarias)
- ajax_colour_a.php (este archivo php será el que tendrá un script para modificar el color de la caja A con color ROJO)
- ajax_colour_b.php (este archivo php será el que tendrá un script para modificar el color de la caja B con color AZUL)

Aclaración: No hace falta verle el sentido al código, es solamente un ejemplo lo más básico posible para poder entender el problema.

test.php

<div id="box_a" style="background: #f2f2f2; border: 1px solid #e6e6e6; height: 300px; width: 300px; padding: 10px;">
         <h2 style="text-align: center; margin-top: 70px;">AJAX #1</h2>
         <h6 style="text-align: center; margin-top: 10px;">Ajax_Colour_A();</h6>
</div>
<div id="box_b" style="background: #f2f2f2; border: 1px solid #e6e6e6; height: 300px; padding: 10px;">
         <h2 style="text-align: center; margin-top: 70px;">AJAX #2</h2>
         <h6 style="text-align: center; margin-top: 10px;">Ajax_Colour_B();</h6>
</div>
 
<script type="text/javascript">
    var ajax_file_used = null;
    var ajax_files = ['ajax_colour_a.php', 'ajax_colour_b.php'];
    var ajax_enviando = [];
    var ajax_solicitud = [];
 
    for(var i = 0; i < ajax_files.length; i++)
    {
        ajax_enviando[ajax_files[i]] = false;
        ajax_solicitud[ajax_files[i]] = null;
    }
 
    function Ajax_Colour_A()
    {
        ajax_file_used = 'ajax_colour_a.php';
 
        if(ajax_enviando[ajax_file_used] == false)
        {
            ajax_enviando[ajax_file_used] = true;
 
            ajax_solicitud[ajax_file_used] = $.ajax({
                url: (ROOT_URL)+'/ajax/'+(ajax_file_used),
                type: 'POST',
                dataType: 'html',
 
                success: function()
                {
                    ajax_enviando[ajax_file_used] = false;
                }
            })
 
            .done(function(results)
            {
                $('body').append(results);
            })
 
            .fail(function()
            {
                ajax_enviando[ajax_file_used] = false;
            })
        }
    }
 
    function Ajax_Colour_B()
    {
        ajax_file_used = 'ajax_colour_b.php';
 
        if(ajax_enviando[ajax_file_used] == false)
        {
            ajax_enviando[ajax_file_used] = true;
 
            ajax_solicitud[ajax_file_used] = $.ajax({
                url: (ROOT_URL)+'/ajax/'+(ajax_file_used),
                type: 'POST',
                dataType: 'html',
 
                success: function()
                {
                    ajax_enviando[ajax_file_used] = false;
                }
            })
 
            .done(function(results)
            {
                $('body').append(results);
            })
 
            .fail(function()
            {
                ajax_enviando[ajax_file_used] = false;
            })
        }
    }
</script>
 

ajax/ajax_colour_a.php

<!-- ajax_colour_a.php -->
<?php
echo "<br>ejecutando...<br>";
 
?>
<script type="text/javascript">
document.getElementById('box_a').style.background = 'red';
</script>
 

ajax/ajax_colour_b.php

<!-- ajax_colour_b.php -->
<?php
echo "<br>ejecutando...<br>";
 
?>
<script type="text/javascript">
document.getElementById('box_b').style.background = 'blue';
</script>
 

La verdad no puedo entender que es lo que está mal con el código porque todo debería de funcionar de 10, estuve todo el día de el porque de esto pero no se entiende.