0

Estoy adaptando un método para convertir un fichero JSON en CSV. El caso es que en una página HTML/PHP me funciona sin problema, pero cuando lo meto dentro de una modal, no se ejecuta el botón que hace la transformación de JSON a CSV. Esta es la función con la que cargo el fichero JSON en el primer textArea

<script type="text/javascript">
$(function(){
	$("#uno").click( function(){
		var TXT_URL = "data/observa.json";
		$.ajax({
			url : TXT_URL,
			dataType: "text",
			success : function (data){
				$("#txt1").html(data);
			}
		});
	});
});
</script>
Definición de la Modal

<div class="modal" id="modal-name">
<div class="modal-sandbox"></div>
<div class="modal-box">
    <div class="modal-header">
        <div class="close-modal">&#10006;</div> 
        <h1>Simple modal box</h1>
    </div>
    <div class="modal-body">
        <div class = "tableJSON">
            <div style="float:left;height:auto;width:100%;"><button id="uno" class="buttom">Generate File</button></div>
            <div class="tabJS01">
                <div class = "tabJS02">
                    <textarea class="textArea" id="txt1" rows="10"></textarea>
                </div>
                <div class = "tabJS02">
                    <textarea class="textArea" id="txta" rows="10" wrap="off"></textarea>
                </div>
            </div>
            <div class = "tabJS03">
                <div class = "tabJS02">
                    <input type="button" class="btn buttom" value="Convert GeoJson To CSV" title="Convert GeoJson To CSV" onclick="runit(document.getElementById('txt1').value)">
                        <br><form class="formCSV">
                            Output Separator:
                            <label><input type="radio" name="outsep" id="outSepComma" value="," checked="checked"> ,</label> &nbsp;
                            <label><input type="radio" name="outsep" id="outSepSemicolon" value=";"> ;</label> &nbsp;
                            <label><input type="radio" name="outsep" id="outSepSemicolon" value=":"> :</label> &nbsp;
                            <label><input type="radio" name="outsep" id="outSepPipe" value="|"> |</label> &nbsp;
                            <label><input type="radio" name="outsep" id="outSepTab" value=" " onclick="this.value='\t'"> Tab</label> &nbsp;
                            <br />
                            <label><input id="chkCsvQuotes" type="checkbox" /> Wrap values</label>
                            <label><input type="checkbox" id="chkNoBreaks" value="Y"> Suppress Line Breaks</label>
                            <label><input id="chkCsvHeader" type="checkbox" checked="checked" /> Include header</label>

                        </form><br>
                </div>
                <div class = "tabJS02">
                    <div class="tabJS04">
                            <input type="text" size="15" id="fn" placeholder="nameFile" class="form-control" title="Enter filename without extension" /> .csv
                    </div>
                    <div>
                        <input type="button" value="Save to Disk" class="btn buttom" onclick="saveFile(document.getElementById('txta').value,'csv')" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ese es la función que llama el botón

<script type="text/javascript">
function assignText(s) {
   document.getElementById('txt1').value = s;
};
function runit(s) {
   var delimiter = radiovalue(document.forms[0].outsep);
   var nobreaks = document.getElementById('chkNoBreaks').checked;
   if (delimiter == "o") delimiter = document.getElementById("outSepOtherVal").value;
   if(s.trim()!="") {
       try{
       document.getElementById('txta').value = geoJsonToCsv(s, delimiter, (document.getElementById('chkCsvHeader')).checked,(document.getElementById('chkCsvQuotes')).checked, nobreaks);
       } catch(e) {
           alert("Your GeoJson input is not valid");
       }
       CSV.isFirstRowHeader = (document.getElementById('chkCsvHeader')).checked;
       CSV.parse(document.getElementById('txta').value);
       //document.getElementById('diva').innerHTML = csvToTable(CSV, (document.getElementById('chkCsvHeader')).checked, false,false);

   }

};

Despúes hay una serie de librerías externas, pero que puedo obviar. Como decía si monto esto en una página aparte, funciona sin problema, el problema es al ejecutar el botón con el que transforma el JSON en CSV.

Una ayudita, por favor! gracias


he hecho los cambios que me proponías en la función que llama al JSON, pero sigue sin funcionar la conversión a CSV, la llamada a la función runit en el botón:

<input type="button" class="btn buttom" value="Convert GeoJson To CSV" title="Convert GeoJson To CSV" onclick="runit(document.getElementById('txt1').value)">
1
  • hola! el problema realmente me lo está dando la función runit que ejecuta el botón de la conversión, he puesto el cambio que me propusiste y sigue cargando bien el fichero JSON pero lo que falla es el <input type="button" class="btn buttom" value="Convert GeoJson To CSV" title="Convert GeoJson To CSV" onclick="runit(document.getElementById('txt1').value)">
    – user68481
    Commented el 4 dic. 2017 a las 8:54

1 respuesta 1

0

cómo estás?

Probablemente el error sea porque la función que le asignas al click en #uno sea procesada por el navegador antes de que el elemento exista realmente.

Intenta cambiar lo siguiente:

$("#uno").click( function(){

por

$(document).on("click", "#uno", function(){
// Aquí tu función.
})

Con este método se atachará la función al elemento aunque el mismo no exista en el DOM.

Saludos y suerte!

1
  • hola! el problema realmente esta en la función que llama el boton para ejecutar la conversión. El fichero JSON lo genera bien, tanto con
    – user68481
    Commented el 4 dic. 2017 a las 8:50

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.