Execute form in modal window

0

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>
Definition of 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>

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)">
    
asked by user68481 01.12.2017 в 10:35
source

1 answer

0

how are you?

Probably the error is because the function you assign to the click in #one is processed by the browser before the element actually exists.

Try changing the following:

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

for

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

With this method the function will be attached to the element even though it does not exist in the DOM.

Greetings and luck!

    
answered by 01.12.2017 в 15:34