CodingForums.com - jQuery combine results from sql query and javascript to calculate a field

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - jQuery combine results from sql query and javascript to calculate a field (http://www.codingforums.com/showthread.php?t=274923)

combine results from sql query and javascript to calculate a field

I am very new to JavaScript, Have a problem regarding arrays within javascript. Straight to the point: I have HTML code:

Code:

<input type="text" name="conPrice" id="conPrice" size="16" maxlength="128"/>

<input type="text" name="OverP" id="OverP" size="16" maxlength="128"  />

<div id="slider"></div> //Slider

First field for quantity, that is pulled from slider. Second field for price from SQL table

SQL is based on a condition that there is four fields:

Code:

| ID | MIN | MAX | PRICE |

I am trying to get a price column prices in field OverP depending on what my sliders value is. so, if for example I have number 6 on a slider and it is between 1-7 as MIN and MAX, so the price would be 10.

I have this SQL:

PHP Code:


		
			
<?php

$x = mysql_query("SELECT p_max AS max FROM dsd_price");

$y = mysql_query("SELECT p_min AS min FROM dsd_price");

$z = mysql_query("SELECT p_price AS price FROM dsd_price");

while ($x_array = mysql_fetch_array($x)){$max[] = $x_array;}

while ($y_array = mysql_fetch_array($y)){$min[] = $y_array;}

while ($z_array = mysql_fetch_array($z)){$price[] = $z_array;}

?>

And finally my JS:

Code:

<script>

$(document).ready(function slider() {

$( "#slider" ).slider({

    value:1,

    min: 0,

    max: 201,

    step: 1,

    slide: function( event, ui ) {

//Its setting the slider value to the element with id "conPrice" 

$("#conPrice" ).val(ui.value);

    }

});

});



$(document).ready(function calcul() {

var frm = document.dsd_form;

var quant = frm.conPrice;

var overp = ['<?php echo implode("','", $price); ?>'];

var mini = ['<?php echo implode("','", $min); ?>'];

var maxi = ['<?php echo implode("','", $max); ?>'];

for(index = 0; quant > mini[index], quant < maxi[index]; index++){

    $( "#OverP" ).val( overp[index] );

})

}   

</script>

I am not getting a result I wish, I know that the problem is with my JS. Hope for some suggestions to my topic as soon as possible.

You should only have one $(document).ready() statement. This may or may not correct your problem, but this is how to combine your jquery stuff. If still not working we can go from there:

Code:

<script type='text/javascript' src='javascript/jquery.js'></script> // where mine is located.. Yours is probably in different location

<script type="text/javascript">

$(document).ready(function() {

        $("#slider" ).slider({

            value:1,

            min: 0,

            max: 201,

            step: 1,

            slide: function( event, ui ) {

        //Its setting the slider value to the element with id "conPrice" 

        $("#conPrice" ).val(ui.value);

            }

        });

        

        function calcul(){

                var frm = document.dsd_form;

                var quant = frm.conPrice;

                var overp = ['<?php echo implode("','", $price); ?>'];

                var mini = ['<?php echo implode("','", $min); ?>'];

                var maxi = ['<?php echo implode("','", $max); ?>'];

                for(index = 0; quant > mini[index], quant < maxi[index]; index++)

                {

                    $( "#OverP" ).val( overp[index] );

                }

        }        

        

});

</script>

Hi again, taking off

Code:

$(document).ready

had some positive effects, now I can actually see my slider and a value of conPrice is changing according to slider, although second function seems not to work completely.

Putting in whole code of the test page so far. slider does slide, the slider value is being processed to conPrice, but calculation does not work...

Code:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<!-- For slider -->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>



<!-- Slider JS -->

<?php

$x = mysql_query("SELECT p_max AS max FROM dsd_price");

$y = mysql_query("SELECT p_min AS min FROM dsd_price");

$z = mysql_query("SELECT p_price AS price FROM dsd_price");

while ($x_array = mysql_fetch_array($x)){$max[] = $x_array['max'];}

while ($y_array = mysql_fetch_array($y)){$min[] = $y_array['min'];}

while ($z_array = mysql_fetch_array($z)){$price[] = $z_array['price'];}

?>

<script>

$(document).ready(function slider() {

$( "#slider" ).slider({

    value:1,

    min: 0,

    max: 201,

    step: 1,

    slide: function( event, ui ) {

  //Its setting the slider value to the element with id "conPrice" 

  $("#conPrice" ).val(ui.value);

    }

 });

    function price(){

    var frm = document.dsd_form;

    var quant = frm.conPrice;

    var overp = ['<?php echo implode("','", $price); ?>'];

    var mini = ['<?php echo implode("','", $min); ?>'];

    var maxi = ['<?php echo implode("','", $max); ?>'];

    for(var index = 0; quant > mini[index], quant < maxi[index]; index++){

        $( "#OverP" ).val( overp[index] );

    }

}

});

</script>

</head>

<body>

<form id="dsd_form" name="dsd_form" action="db_create_sql.php" method="post" class="niceform">

<fieldset>

       <dl>

            <dt><label for="conPrice">Price:</label></dt>

            <dd><input type="text" name="conPrice" id="conPrice" size="16" maxlength="128" />

            <input type="text" name="OverP" id="OverP" size="16" maxlength="128" />

            <div id="slider" ></div>

            </dd>

        </dl>

</fieldset>

</form>

</body>

</html>

Having SQL database:

Code:

 p_id | p_min | p_max | p_price

  1        1      1       11

  2        2      5       13

Code:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<!-- For slider -->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

You are loading two (possibly three) versions of the jquery library and two versions of the jquery-ui library; you should only have one of each.

even though I cut out most of them, it still appears not working...more suggestions?

Code:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<!-- For slider -->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>