CODEWITHSUNDEEP
javascriptjquery
publicRavi
publicRavi

Reputation: 2763

Get jQuery slider values from DB

I have a database with these tables

company
==========
id | name |
==========
 1 | C1   |
 2 | C2   |
 3 | C3   |

 position
 =================
id | level | name |
==================
 1 |  1    | SE   |
 2 |  2    | SE1  | 
 3 |  3    | SE2  |
 4 |  1    | SA   |
 5 |  2    | SA1  |
 3 |  3    | SA2  |

 company_position
 ==========
 cid | pid |
 ==========
  1  |  1  |
  1  |  2  |
  1  |  3  |
  2  |  1  |
  2  |  2  |
  2  |  3  |
  3  |  1  |
  3  |  2  |
  3  |  3  |

In the UI, I have a <select> for displaying Company names. There is a corresponsding slider that should display Position range. onChange on the <select>, I would like the slider the receive new values for range (min, max, name of Position instead of value). How do I go about solving this? jQuery getJSON? I am not looking for code, rather an approach!

UPDATE I realized that my problem is that I am unable to imagine the structure of JSON callback data.

Upvotes: 1

Views: 882

Answers (3)

Michel Ayres
Michel Ayres

Reputation: 5985

I posted an answer a couple of minutes ago. Maybe this will help, maybe not.

Why don't you use something like this:

jQuery

$(".menu_item").mouseover(function(){   
    var id = $(".selected").attr("id");
    var qst = "?id="+id;
    var html = '';
    $.getJSON('ajax/get_sub_cats.php'+qst, function(data){
        var len = data.length;
        for (var i = 0; i< len; i++) {
            html += '<a id="subCatLink'+data[i].Sub_Cat_ID+'" href="products.php?id='+data[i].Sub_Cat_ID+'">'+data[i].Sub_Cat_Name+'</a>';
        }
        $(".sub_menu[id="+id+"]").html(html);
    });
});

PHP

 require('../_req/base.php');
    $return = array();

    $id = $_REQUEST['id'];
    $sql = "select * from sub_cats where Main_Cat_ID = '$id'";
    $result = mysql_query($sql);

    while($ln = mysql_fetch_array($result)){
        $return[] = $ln;
    }

    echo json_encode($return);

As shown in the sample (PHP, but you can do some other like serialization on asp.net) I use json_encode.

Upvotes: 0

Linus Thiel
Linus Thiel

Reputation: 39261

Let's say you do a $.post to your server, with the selected company. Let's say the user selected company 1. Then, on the server, you want to a query like:

SELECT position.level, position.name FROM position
JOIN company_position ON position.id = company_position.pid
JOIN company ON company.id = company_position.cid
WHERE company.id = ?

Now, you should have a result set with (1, SE), (2, SE1), (3, SE2) given your data above. I would send this back as a JSON object (I don't know what server environment you have, so building this structure is up to you):

{
  "min": 1,
  "max": 3,
  "positions": {
    "1": "SE",
    "2": "SE1",
    "3": "SE2"
  }
}

Alternately, if there are few positions, you could let the client calculate max and min, just sending JSON:

{
  "1": "SE",
  "2": "SE1",
  "3": "SE2"
}

And calculating max, min with javascript:

var max = Math.max.apply(null, Object.keys(response))
  , min = Math.min.apply(null, Object.keys(response));

In your javascript, given the object

var result = {
  "min": 1,
  "max": 3,
  "positions": {
    "1": "SE",
    "2": "SE1",
    "3": "SE2"
  }
};

You can query that object like this: positions["1"] == "SE". So, if you want to show the labels for min and max, you would find the values for min and max like so:

var min = result.min, max = result.max

And you find their labels like this:

var minLabel = result.positions[result.min]
  , maxLabel = result.positions[result.max];

Upvotes: 1

Eloi Navarro
Eloi Navarro

Reputation: 1445

I would go the AJAX way, just have your onChange call a jQuery POST function that passes the <select> value (so you can filter properly), and anything else you need. And then on callback, you'll recieve the desired values properly encoded (json_encode is an option) for reading or just in plain text. But remember the data from the callback function is just one variable, if you need more (e.g. minium and maxium values), encode the desired data so you can access it later

Hope this helps you!

Upvotes: 2

Related Questions