0

Tengo una función ajax que ejecuta una consulta y asigna un id a un botón, ahora quiero enviar ese id dinámico como parámetro a otra función para ejecutar una consulta diferente que me cargará unos datos en un mapa. Al no ser un formulario por medio del cual pueda pasar el parámetro, por ejemplo de un select, no tengo muy claro como pasarlo, de hecho no me lo recibe la consulta que quiero ejecutar. Recibo el id que asigno al botón de esta manera:

<div class="btnmapa" id="btnMapa"></div>
function mapa(id_elemento){
    var dato = ("'"+id_elemento+"'");
    var dataString = 'elemento='+dato;
    $.ajax({
        type: "POST",
        url: "reparto.php",
        data: dataString,
        success:( function( info ){
            var datos = JSON.parse( info );
            var html = "";
            for(var i in datos.data){
                if(datos.data[i].id_observation_font === 3){
                    document.getElementById("btnMapa").innerHTML = "<a href='#' id =" + datos.data[i].id +" onclick='miMapa(this.id)'><img src='images/btn_mapa.png'>";
                }else{
                    document.getElementById("btnMapa").innerHTML = '';
                }
            }
        })
    });
}   

El resultado es por ejemplo:

<div class="btnmapa" id="btnMapa"><a href="#" id='55' onclick="miMapa(this.id)"><img src="btn_mapa.png"></a></div>

Ya tengo el id dinámico en el botón, ahora quiero enviar el valor almacenado en ese id a la otra consulta. Con un formulario con parámetros lo hago de esta manera

function miMapa(){
    var elemento = document.getElementById("formEsp");
    obje = document.getElementById('cbx_esp');
    var txt='';
    txt = "'"+obje.value+"'";
    url_obje = 'presencia='+txt;
    drawPresencia(obje.value);
}
//pinta el mapa
function drawPresencia(cbx_espId){
    var vectorPresencia = new ol.source.Vector({
        format: new  ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            var proj = projection.getCode();
            var url = "Presencia.php"
            var xhr = new XMLHttpRequest();
            var params = {
                abunda: cbx_espId,
            }
            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            var onError = function() {
               vectorPresencia.removeLoadedExtent(extent);
            }
            xhr.onerror = onError;
            xhr.onload = function() {
                xhr.responseText;
                console.log(xhr.responseText);
                if (xhr.status == 200) {
                    vectorPresencia.addFeatures(
                        vectorPresencia.getFormat().readFeatures(xhr.responseText)
                    );
               } else {
                 onError();
               }
             }
             xhr.send(JSON.stringify(params));
        },
    });
    vectorlayer.setSource(vectorPresencia);
}

En la consulta Presencia.php normalmente recibiría el parámetro enviado por post en formato JSON de esta manera

$params = json_decode(file_get_contents('php://input'), true);

$abunda = $params["abunda"];
...

Pero al no tener claro como pasar ese valor...

2 respuestas 2

1

Para obtener un parámetro de la URL con jQuery podés probar de la siguiente manera.

let searchParams = new URLSearchParams(window.location.search)
let param = searchParams.get('abunda')

console.log(param);

Documentación: https://api.jquery.com/jquery.param/

Espero te sirva...

0

Lo solucioné recogiendo el id_elemento metiéndolo en la función miMapa y pasándolo después como parámetro para recogerlo en el PHP.

function miMapa(id_elemento){
    var dato = "'"+id_elemento+"'";
    var dataString = 'abunda='+dato;
    drawMapa(id_elemento);
}
//pinta el mapa
function drawMapa(id_elementoId){
    var vectorPresencia = new ol.source.Vector({
        format: new  ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            var proj = projection.getCode();
            var url = "Presencia.php"
            var xhr = new XMLHttpRequest();
            var params = {
                abunda: id_elementoId,
            }
            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            var onError = function() {
               vectorPresencia.removeLoadedExtent(extent);
            }
            xhr.onerror = onError;
            xhr.onload = function() {
                xhr.responseText;
                console.log(xhr.responseText);
                if (xhr.status == 200) {
                    vectorPresencia.addFeatures(
                        vectorPresencia.getFormat().readFeatures(xhr.responseText)
                    );
               } else {
                 onError();
               }
             }
             xhr.send(JSON.stringify(params));
        },
    });
    vectorlayer.setSource(vectorPresencia);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.