How to Add Dynamic Filter Using PHP MySQL Ajax

How to add Dynamic filter using PHP MySQL AJAX

You can use empty method beforeSend ajax

function fetch_project_data_filtered() {
  $("#user_ids").change(function(){ 
      var assign_to = $(this).val(); 
      var dataString = "assign_to="+assign_to; 
      //alert(assign_to);

      $.ajax({ 
        type: "POST", 
        url: "x-fetch.php",
        data: dataString, 
        dataType:"json",
        beforeSend: $('#project_data').empty(),
        success: function(data)
            {
            for(var count=0; count<data.length; count++)
            {
             var html_data = '<tr><td>'+data[count].project_id+'</td>';
             html_data += '<td data-name="project_name" class="project_name" data-type="text" data-pk="'+data[count].project_id+'">'+data[count].project_name+'</td>';
             html_data += '<td data-name="created_on" class="created_on" data-type="text" data-pk="'+data[count].project_id+'">'+data[count].created_on+'</td>';
             html_data += '<td data-name="target_date" class="target_date" data-type="date" data-pk="'+data[count].project_id+'">'+data[count].target_date+'</td>';
             html_data += '<td data-name="assign_to" class="assign_to" data-type="text" data-pk="'+data[count].project_id+'">'+data[count].assign_to+'</td>';
             html_data += '<td data-name="current_status" class="current_status" data-type="textarea" data-pk="'+data[count].project_id+'">'+data[count].current_status+'</td>';
             html_data += '<td data-name="previous_status" class="previous_status" data-type="textarea" data-pk="'+data[count].project_id+'">'+data[count].previous_status+'</td>';
             html_data += '<td data-name="cito_comment" class="cito_comment" data-type="textarea" data-pk="'+data[count].project_id+'">'+data[count].cito_comment+'</td>';


             $('#project_data').append(html_data);
            }
           }
      });

    });
}

Multiple Dropdowns Dynamic Query AJAX PHP MySQL

Put your "WHERE" clause conditions in one array. I would do like this:

// filter out invalid values is important
$valid_class = array('a', 'b', 'c');
$valid_category = array('math', 'science', 'history');

// initialize array for WHERE clause conditions
$where = array('TRUE');

if (in_array($_POST['class'], $valid_class))
{
    $where[] = 'class = "' . $_POST['class'] . '"';
}

if (in_array($_POST['category'], $valid_category))
{
    $where[] = 'category = "' . $_POST['category'] . '"';
}

// use the array with the "implode" function to join its parts
$sql = 'SELECT * FROM table WHERE ' . implode(' AND ', $where);

You may want to initialize the $where array with something more interesting than "TRUE" (which is there in case the user does not filter by class neither category, because we don't want an empty $where array reaching the last line). For example:

$where = array();
$where[] = 'name = "' . mysql_real_escape_string($_POST['name']) . '"';

Dynamic select option with Ajax, json and PHP keep option selected after submit

Option 1:

Use AJAX for the submit as well, in this way there will be NO page (re)load and the select will keep the previous value as desired.

$("#links").change(function(){
    var $f = $(this).parent('form');

    $.post(
        'yourServerScript.php',
        $f.serialize(), //+ "&a=you-can-attach-extra-params-if-you-like",
        function(data, tStatus, xhr){
            // do whatever the server response is ...

            if (data.success) {
                // do whatever you want if you pass success from the server (in result JSON)
            } else {
                // here you've stated an error, deal with it ...
            }
        },
        'json'
    )
})

Your response from the server 'yourServerScript.php' which consumes your post data, should return something like:

{"success":true or false, ... other data that you want to send after processing the form post ...}

Option 2:

You can still send the post normally and the page will (re)load from the server the process result of the form data, and in this case, to keep selected the value(s) previously selected you have again multiple options, but I will present to you only an elegant one:

From your PHP script, which seems to be the same for processing the post and the page render, you can add a data attribute on the <select> which specifies the default selected value(s)

<form id="getsrc" method="post">
    <select name="links" id="links"<?php if(!empty($_POST['links'])) echo 'data-selected="' . $_POST['links'] . '"'; ?>></select>
</form>

Then, in your AJAX script which loads the JSON and populates the select with options, you check for this data-selected attribute

$.ajax({
    url: 'links.json',
    dataType:'JSON',
    success:function(data){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option
        $select.append('<option value="">Please select...</option>');
        $.each(data.link, function(key, val){
            $select.append('<option value="' + val.name + '"' + (val.name == $select.data('selected') ? ' selected' : '') + '>' + val.name + '</option>');
        })
    },
    error:function(){
        //if there is an error append a 'none available' option
        $select.html('<option id="-1">none available</option>');
    }
});

PS: I see that you put the name from the JSON to the <option> value, there should be the ID, and then check the ID against the data-selected value (the one sent to the server using POST)

Filter Dynamic Table using Multiple dropdown

ANSWERED! I try inserting what i found here and there and I finally SOLVED it.

$(document).ready(function() {
                $("#month").change(function(){

                    var selected_month=$(this).val();
                    reloadMonth(selected_month);
                });
                $("#stock_code").change(function(){
                    if($("#month").val()==''){
                        alert('SELECT MONTH!');
                        $("#stock_code").val('');
                    }else{
                        var selected_stock=$(this).val();
                        var month = $("#month").val();
                        reloadStock(selected_stock,month);}
                });
            });
            function reloadMonth(month){
                //console.log(month);
                location.href = "view.php?month="+month;
            }
            function reloadStock(selected_stock,month){
                //console.log(obj);
                location.href = "view.php?month="+month+"&stock_code="+selected_stock;
            }

Search with PHP/MySQL and dynamically update with jQuery

Yes, this is absolutely the right direction. Use

$(document).ready(function() {  

    $('#ID_OF_YOUR_ELEMENT_TO_LOAD_INTO').load("load.php?parameter1=<?php echo $parameter1; ?>¶meter2=<?php echo $parameter2; ?>");

});

to get the results when the user gets on the page for the first time, to get the results according to your city and your dates.

Check in the load.php which parameters are set and use the ones that are set to build your query. Then, when the form (or forms, depending) are updated, you have to use .load again, like this:

$('#ID_OF_YOUR_FORM_BEING_UPDATED').change(function() {

    $('#ID_OF_YOUR_ELEMENT_TO_LOAD_INTO').load("load.php?parameter1=<?php echo $parameter1; ?>¶meter2=<?php echo $parameter2; ?>¶meter3=<?php echo $parameter3; ?>");

});

---

Related Topics