I am adapting a method to convert a JSON file to CSV. The fact is that in an HTML / PHP page it works for me without problem, but when I put it inside a modal, the button that does the transformation from JSON to CSV is not executed. This is the function with which I load the JSON file in the first 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>
<div class="modal" id="modal-name">
<div class="modal-sandbox"></div>
<div class="modal-box">
<div class="modal-header">
<div class="close-modal">✖</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>
<label><input type="radio" name="outsep" id="outSepSemicolon" value=";"> ;</label>
<label><input type="radio" name="outsep" id="outSepSemicolon" value=":"> :</label>
<label><input type="radio" name="outsep" id="outSepPipe" value="|"> |</label>
<label><input type="radio" name="outsep" id="outSepTab" value=" " onclick="this.value='\t'"> Tab</label>
<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>
That is the function that the button calls
<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);
}
};
Then there is a series of external libraries, but I can ignore them. As I said if I put this on a separate page, it works without problem, the problem is when you execute the button with which it transforms the JSON into CSV.
A little help, please! thanks
I have made the changes you proposed to me in the function that calls the JSON, but the conversion to CSV still does not work, the call to the function runit in the button:
<input type="button" class="btn buttom" value="Convert GeoJson To CSV" title="Convert GeoJson To CSV" onclick="runit(document.getElementById('txt1').value)">