0

In a situation where I have something like this code:

    $(document).on('change', '.color_select', function() {
    var id = $(this).val(); //get the current value's option
    
    $.ajax({
        type:'POST',
     url: "functions/getSize.php",
        data:{'id':id},
        success:function(data){
            
              var size = $(".size_select");
            
            $(".size_select").html(data); // i need to define this with a dynamic way

        }
    });
});

Is there any way to define $(".size_select").html(data); in dynamic way like this

$(document).on('change', '.color_select', function() {
var id = $(this).val(); //get the current value's option

????

Mohammad
  • 36
  • 7
  • What is `.size_select`? – Musa Aug 22 '21 at 00:19
  • what does `data` look like? is it JSON? html? – mr rogers Aug 22 '21 at 00:20
  • `` – Mohammad Aug 22 '21 at 00:39
  • the data is html `تحديد المقاس'; if(isset($id)){ $result = $conn->query("SELECT * FROM patron_sizes WHERE color_id='$id'"); while ($row=$result->fetch_assoc()){ echo ''; } }` – Mohammad Aug 22 '21 at 00:42
  • If that's the actual value of `data` after that Ajax call comes back, it's going to be a problem. You need html, not php. – mr rogers Aug 22 '21 at 00:49
  • yes the data is html @mr-rogers the php is to retrieve variable data from Database `` – Mohammad Aug 22 '21 at 00:54
  • [link]https://stackoverflow.com/questions/68869182/how-to-get-a-select-box-value-and-make-this-value-unique – Mohammad Aug 22 '21 at 00:57
  • Right - but when it gets back to the browser, it needs to be html. You need the server to evaluate $row['size_count'] etc before it come back to the javascript. If you get that figured out, the rest of your code should work as expected. When you inject that php/html into the browser with `$('.select').html(...)`, the php will *not* re-evaluate the injected code. – mr rogers Aug 22 '21 at 00:58
  • @mrrogers Got it , is there any idea to solve it ? simply the 2 selected elements is repeated based on a variable number every one have a deferent options , and the options of the second select box changed when the user select another option from the first select box the code getting the data , but when the user choose to two select boxes and select the options for the first one then go to the second one to select their custom options , the first one also changed maybe this video help to understand me https://youtu.be/-fSASgZcMTw – Mohammad Aug 22 '21 at 01:19
  • What do you mean by "with a dynamic way"? Are there multiple `.size_select` elements, and you need the one next to the `.color_select` that triggered the AJAX request? – Barmar Aug 22 '21 at 01:21
  • @Barmar exactly that is what I need , this video can explain youtu.be/-fSASgZcMTw – Mohammad Aug 22 '21 at 01:32
  • Use DOM traversal relative to `$(this)` to find the related `.size_select`. But also see https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback – Barmar Aug 22 '21 at 01:37
  • how can i use `$(this)` in this case ` $.ajax({ type:'POST', url: "functions/getSize.php", data:{'id':id}, success:function(data){ $mainContEl = $(this).parents('div.sizetickets-fields'), $size = $mainContEl.children().find("input.size_select"), $(".size_select").html(data); // i need to define this with a dynamic way } });` – Mohammad Aug 22 '21 at 01:54

0 Answers0