Question

i want to make an edit page, when the user go to a question (i have a question website) he will have a choice to edit that question , and when the user click to edit question , i want to get all the information about that question from database and put it in an edit page , i did that and it works good with all information , but i have a problems and it is :

on my edit page i have many drop down lists and each drop down get its options from database using ajax with jquery

my problem is in the last 4 drop down lists

the first drop down list is what the question about
,it has 3 options place , cell ,general
the second drop down list is what the city that question about , it has 14 values
the third drop down list is what the cell the question about and its options comes depends on the second drop down list options , i mean if the user set a city on the second drop down list , the cell drop down list will have many options , but if he changed the city , the user will have new options in the cell drop down list
,the forth drop down is what the place that the question about
so when i open the edit page i have to fill those drop down list with its value , each one according to the previous drop down list,
,i did that , but my problems is the page works good after 4 or 5 refresh , not from the beginning ,i mean i have to refresh the page 4 or 5 times to get the good results , because on the first refresh the drop down list still empty , but i alert the results each refresh and i got the expected results

SOME OF HTML

<?php
  $questionInfo = $this->questionInfo->fetch();
  $questionPlaceCountry = $this->questionPlaceCountry->fetch();
  $questionCell = $this->questionCell;
?>

<script type="text/javascript">
  var typeName= '<?php echo $questionInfo["typeName"]; ?>';
  var place = '<?php echo $questionPlaceCountry["placeName"]; ?>';
  var country = '<?php echo $questionPlaceCountry["countryName"]; ?>';
  var cell = '<?php echo $questionCell; ?>';
</script>

<li>
  <label>About</label>
  <select name="about"id="aqAboutQuestion"></select>
  <span class="errorMessage"></span>
  <p id="aqCoutryAboutQuestion">
    <label>Select City</label>
    <select name="city"class="CountrySelector1"></select>
  </p>
  <p id="aqCellAboutQuestion">
    <label>Select Cell</label>
    <select name="cell"></select>
    <span class="errorMessage"></span>
  </p>
  <p id="aqPlaceAboutQuestion">
    <label>Select Place</label>
    <select name="place"></select>
    <span class="errorMessage"></span>
  </p>
</li>

SOME OF JQUERY CODE

$.getJSON(
  "http://localhost/Mar7ba/Type/getAllTypes/TRUE",
  function(data){

    var options = '';
    options+="<option>Select Type</option>";

    for(var i=0;i<data.length;i++){
      options += "<option value='"+data[i]+"'>"+data[i]+"</option>";
    }

    if($("#addPlace #apTypeSelect").length){
      $("#addPlace #apTypeSelect").html(options);
    }

    if($('.TypeSelector').length){

      $('.TypeSelector').html(options);
      if("#editOneQuestion"){

        $('.TypeSelector').val(typeName);
        if(place!=null){

          $("#aqCoutryAboutQuestion").css("display","block");
          $("#aqCellAboutQuestion").css("display","block");
          $("#aqPlaceAboutQuestion").css("display","block");
          $("#aqAboutQuestion").val("Place");

          $("#aqCoutryAboutQuestion select").val(country);

          $.getJSON(
            "http://localhost/Mar7ba/Cell/getCellsInCity/"+country+"/TRUE",
            function(data1) {

              var optoins1 = '';
                  optoins1+="<option>Select Cell</option>";

              for(var i=0;i<data1.length;i++){
                optoins1+="<option value='"+data1[i]+"'>"+data1[i]+"</option>";
              }

              $("#aqCellAboutQuestion select").html(optoins1);
              $("#aqCellAboutQuestion select").val(cell);
          });

          $.getJSON(
            "http://localhost/Mar7ba/Place/givePlacesInCell/"+cell+"/TRUE",
            function(data2){

              var options2 ='';
              options2+="<option>Select Place</option>";
              for(var i = 0 ; i < data.length;i++){
                options2+="<option value='"+data2[i]+"'>"+data2[i]+"</option>";
              }
              $("#aqPlaceAboutQuestion select").html(options2);
              $("#aqPlaceAboutQuestion select").val(place);
          });
        }
      }
    }
});

would you help me and tell me what am i doing wrong ?

Answer 1

the problem is that because probably you are using

$(document).ready()

but you have to use:

$(windows).load()