Uncaught TypeError: Cannot set property 'onclick' of null while target in another file

89 Views Asked by At

I am making an API program, where after writing the name of a company you should get all the companies where the name is similar to one you wrote. After hitting enter, a modal popup window will show up with the list of all companies, then you choose one and click on the button below it, then the modal will close and all the data will be in the form.

I am stuck on a problem and I cant find solution anywhere or lack skills to implement it.

The buttons in the popup window wont work, the reason is that that button, which I need to define in javascript, is not yet loaded and after it is, I don't know how to define it again. I think I need to make some onload event, but have no idea how.

So if somebody has an answer I would appreciate, if you would share it with me.

index.php:

div>
<h2>HTML Forms</h2>
ICO:
  <tr>
    <td>Firma:</td>
    <td><input class="prvek_fakturacni_firma" type="text" name="firma" id="firma"/></td>
  </tr>


  <tr>
    <td>Adresa: </td>
    <td><input  type="text" name="firma-adresa" id="firma-adresa"/></td>
  </tr> 
  <!-- Trigger/Open The Modal -->
  <input type="submit" id="myBtn" value="Search"/>
</div>
  
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <div id="firma_pass"></div>
    
    <?php include_once 'data.php'; ?>
    
  </div>

</div>

data.php:

$q = $_REQUEST['id'];
$q = str_replace(" ", "%20", $q);


$ares_ico = "";
$ares_firma = "";
$ares_adresa    = "";



//$file = @file_get_contents("http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_bas.cgi?ico=70994226");
$httpString = "http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_std.cgi?obchodni_firma=$q";

$file = @file_get_contents( $httpString );

if($file)
{
  $xml = @simplexml_load_string($file);
}

if($xml) 
{
  echo $xml;
  $ns = $xml->getDocNamespaces();
  $data = $xml->children($ns['are']);
  $ss = $xml->children($ns['are'])->Odpoved;
  $el = $data->children($ns['are'])->Zaznam;
}

foreach( $el as $x) {
?>
<div class="obal_radku_ares">

  <div class="radek_udaju_z_ares">
    <h5>ICO:</h5>
    <div id="div_fakturacni_ico" class="polozka_udaje_z_ares"><?php $ares_ico = $x->ICO; echo $ares_ico  ?></div>
  </div>

  <div class="radek_udaju_z_ares">
    <h5>Firma:</h5>
    <div id="div_fakturacni_firma" class="polozka_udaje_z_ares"><?php  $ares_firma = $x->Obchodni_firma; echo $ares_firma; ?></div>
  </div>

  <button type="button" id="tl_ares_vlozit" name="tl_ares_vlozit">Vložit do formuláře</button>
</div>



 <?php
  }
 ?>

handler.js:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");



// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";

var firma = $("#firma").val();
ajaxStranka(firma);

}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
 }
}



function ajaxStranka(something) {

var xmlhttp = new XMLHttpRequest();


console.log( "sending " + something );
xmlhttp.open('GET', "data.php?id=" + something, true);
xmlhttp.send();

xmlhttp.onreadystatechange = function() {

  if (this.readyState == 4 && this.status == 200) {
    dataResponse = this.responseText;
    console.log( "given back " + dataResponse );

    $("#firma_pass").html(dataResponse);
  } 
 };




 }

 btn.onload = function() {

 var insertSome = document.getElementById("tl_ares_vlozit");

  insertSome.onclick = function() 
    {
      console.log( "button pressed " );
      //vloz nactene hodnoty z ARES do formulare
        var hodnota_firma = $("#div_fakturacni_firma").text();
        var hodnota_ico = $("#div_fakturacni_ico").text();

        $(".prvek_fakturacni_firma").val(hodnota_firma);
        $(".prvek_fakturacni_ico").val(hodnota_ico);
      

        modal.style.display = "none";
    }

   }
0

There are 0 best solutions below