Category select problem PHP/MYSQL/JQUERY

Hy Guys!

I have a problem in my code which is probably a jQuery issue but I can’t figure out what it is. When I upload a product and try to select the parent category my browser freezes (like it’s consuming a lot of memory). Also the child select menu is showing the parent titles. When I edit a product the parent and the child is showing correctly and in the child select option menu I can make changes but when I try this with the parent select it freezes my browser again…

This is the product upload section where the user can select the category:

  <p class="admin-estate-add-section-input">
   Parent category
 </p>
 <select class="admin-estate" name="parent" id="parent">
 <option value=""<?=(($parent == '')?' selected':'')?>></option>
 <?php while($p = mysqli_fetch_assoc($parentQuery)): ?>
 <option value="<?=$p['id'];?>"<?=(($parent == $p['id'])?' selected':'')?>><?=$p['category'];?></option>
 <?php endwhile; ?>
 </select>
 <br>
 <br>
 <p class="admin-estate-add-section-input">
    Child category
 </p>
 <select class="admin-estate" name="child" id="child"></select>
 <br>
 <br>

This is the jQuery function that calls the child_categories.php file

<script>
 function get_child_options(selected){
 if(typeof selected === 'undefined'){
 var selected = '';
 }
 var parentID = jQuery('#parent').val();
 jQuery.ajax({
 url: '/tartalomkezelo/admin/parsers/child_categories.php',
 type: 'POST',
 data: {parentID : parentID, selected: selected},
 success: function(data){
 jQuery('#child').html(data);
 },
 error: function(){alert("Something went wrong! Can't select category.")},
 });

 }

 jQuery('select[name="parent"]').change(get_child_options);

 </script>
</body>
</html>

This is the child_categories.php file:

<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/tartalomkezelo/core/init.php';
$parentID = (int)$_POST['parentID'];
$selected = sanitize($_POST['selected']);
$childQuery = $db->query("SELECT * FROM categories WHERE parent = '$parentID' ORDER BY category");
ob_start(); ?>
<option value=""></option>
 <?php while($child = mysqli_fetch_assoc($childQuery)): ?>
 <option value="<?=$child['id'];?>"<?=(($selected == $child['id'])?' selected':'');?>><?=$child['category'];?></option>
 <?php endwhile; ?>
<?php echo ob_get_clean(); ?>

And the other jQuery

<script>
 jQuery('document').ready(function(){
 get_child_options('<?=$category;?>');
 });
</script>

Can you narrow it down to where in the code is causing the freeze, using something like console.log() for example? I don’t do a lot of JS and there may be more elegant ways to debug.

Yeah, I was able to narrow it down.

Where the problem lies is here. If I remove selected : selected
from here
data: {parentID : parentID, selected : selected},

then it does not freezes but when I modify a product, the saved child category is missing.

<script>
   function get_child_options(selected){
     if(typeof selected === 'undefined'){
       var selected = '';
     }
    var parentID = jQuery('#parent').val();
    jQuery.ajax({
     url: '/tartalomkezelo/admin/parsers/child_categories.php',
     type: 'POST',
     data: {parentID : parentID, selected : selected},
     success: function(data){
      jQuery('#child').html(data);
     },
     error: function(){alert("Hiba történt a kiválasztás során!")},
    });

   }

   jQuery('select[name="parent"]').change(get_child_options);
  </script>

I wonder if it’s just because, if the parameter is not passed, you set it to an empty string. Could you set it to something else that definitely won’t be in the ID field instead of an empty string?

ETA: Not sure if this is related, but it seems from here that jQuery won’t send empty objects, so maybe it won’t send empty strings either, hence your PHP would have an error when you try to process the now-missing $_POST variable: https://stackoverflow.com/questions/14999897/jquery-ajax-omits-empty-object-attributes

Well, I don’t know. Set to what for example? I feel kinda lost now :smiley:

Okay, I’ve tried this but it still freezes…

if(typeof selected === 'undefined'){
  selected = $("#child").val();
}

Well, I meant any value that will not match an id in your PHP code, so won’t set a selection when there should not be one. So, if “*” isn’t a valid ID, then that would do it.

Alternatively you could modify the PHP code to check whether there’s a $_POST['selected'] before you use it, which would probably be a good idea in any case.

What happens if you call your PHP code from a short html form and bypass the Ajax, just to see if it’s doing anything unexpected, or giving an error message?

I’ve never seen an Ajax call combined with ob_start() and ob_get_clean(), does it work any better if you drop those?

There is no error message, I’ve tested it. If I remove the ob_start, everything remains the same.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.