SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 98
  1. #26
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hey Norbert,

    Will do!
    I need to give my blog a bit of love soon and I'll be sure to incorporate an updated tutorial

  2. #27
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo, please tell me how many pizza`s or beers, i weel need to send to Germany for your patience and your kindness if i bother you with two rooky questions?

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Five pizzas and three crates (should do for a weekend)

    Just kidding

    What are your questions?

  4. #29
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it is possible to make the rows or a specific table cell to be links? For example when i click on Samsung Galaxy SIII to redirect me to specific a specific page.
    I know how to do this with a simple php script where i display the result in an HTML Table

    Example:
    Code:
    while($row = mysqli_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['name'] . "</td>";
      echo "</tr>";
      }
    but this AJAX script is to much for me

    Code:
          function makeTable(data){
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                  tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";                 
              })
     
            return tbl_body;
          }

  5. #30
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Where are you getting the link address from.
    Is it stored in the database?

  6. #31
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to implement the awesome code into my search form but I encounter some problems. My goals is to have multiple checkboxes with values and that the script searches in the database. I tried it with one checkbox but when it is checked nothing happens. If I uncheck the checkbox it retreives all the stored information from the database so that's fine. I hope someone can help me further.


    index.php
    HTML Code:
    <html>
      <head>
        <meta charset="utf-8">
        <title>AJAX filter demo</title>
        <style>
          body {
            padding: 10px;
          }
     
          h1 {
              margin: 0 0 0.5em 0;
              color: #343434;
              font-weight: normal;
              font-family: 'Ultra', sans-serif;   
              font-size: 36px;
              line-height: 42px;
              text-transform: uppercase;
              text-shadow: 0 2px white, 0 3px #777;
          }
     
          h2 {
              margin: 1em 0 0.3em 0;
              color: #343434;
              font-weight: normal;
              font-size: 30px;
              line-height: 40px;
              font-family: 'Orienta', sans-serif;
          }
     
          #employees {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            background: #fff;
            margin: 15px 25px 0 0;
            border-collapse: collapse;
            text-align: center;
            float: left;
            width: 700px;
          }
     
          #employees th {
            font-size: 14px;
            font-weight: normal;
            color: #039;
            padding: 10px 8px;
            border-bottom: 2px solid #6678b1;
          }
     
          #employees td {
            border-bottom: 1px solid #ccc;
            color: #669;
            padding: 8px 10px;
          }
     
          #employees tbody tr:hover td {
            color: #009;
          }
     
          #filter {
            float:left;
          }
        </style>
      </head>
      <body> 
        <h1>Temporary worker database</h1>
     
        <table id="employees">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
              <th>profuomo</th>
              <th>Language</th>
              <th>Nights</th>
              <th>Student</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
     
        <div id="filter">
          <h2>Filter options</h2>
          <div>
            <input type="checkbox" id="profuomo" name="profuomo">
            <label for="profuomo">Has own car</label>
          </div>
          
        </div>
     
        <script src="http://code.jquery.com/jquery-latest.js"></script> 
        <script>
          function makeTable(data){
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                  tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";                 
              })
     
            return tbl_body;
          }
     
          function getEmployeeFilterOptions(){
            var opts = [];
            $checkboxes.each(function(){
              if(this.checked){
                opts.push(this.name);
              }
            });
     
            return opts;
          }
     
          function updateEmployees(opts){
            $.ajax({
              type: "POST",
              url: "submit.php",
              dataType : 'json',
              cache: false,
              data: {filterOpts: opts},
              success: function(records){
                $('#employees tbody').html(makeTable(records));
              }
            });
          }
     
          var $checkboxes = $("input:checkbox");
          $checkboxes.on("change", function(){
            var opts = getEmployeeFilterOptions();
            updateEmployees(opts);
          });
     
          updateEmployees();
        </script> 
      </body> 
    </html>
    submit.php
    PHP Code:
    <?php 
      $pdo 
    = new PDO('');
      
    $select 'SELECT *';
      
    $from ' FROM dfm_products';
      
    $opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
      
      if (
    in_array("profuomo"$opts)){
        
    $zoek .= " AND name LIKE '%profuomo%'";
      }
      
    $sql $select $from $zoek;
      
    $statement $pdo->prepare($sql);
      
    $statement->execute();
      
    $results $statement->fetchAll(PDO::FETCH_ASSOC);
      
    $json json_encode($results);
      echo(
    $json);
    ?>

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Could you post a dump of your "dfm_products" table.
    That would make reproducing your problem considerably easier.

  8. #33
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo,

    sorry for my late post, but this few days was very busy for me and i didn`t had time to work anymore on my personal project.

    Anyway, I made ​​significant progress, after i rent some PHP books from the library , but i got stuck in one point.

    At this moment i made some changes to the script, to have the possibility to make dynamic links from the name of the mobile phones.

    Here is my code:

    Code:
    <?php
    $con=mysqli_connect("localhost","root","","");
    // Check connection
    
    
    
    if (mysqli_connect_errno())
      {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }
    
    $result = mysqli_query($con,"SELECT * FROM mobile_phones ");
    
    echo "<table id='tablesorter-demo' class='tablesorter' border='0' cellpadding='0' cellspacing='1'>
    		<thead>
    			<tr>
    				<th>Id</th>
    				<th>Price</th>
    				<th>Phone name</th>
    			</tr>
    		</thead>";
    
    
    while($row = mysqli_fetch_array($result))
      {
      $name			=	$row['name'];
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['price'] . "</td>";
      echo "<td><a  href='content.php?id=" . $row['id'] . "'>$name </a></td>";  
      echo "</tr>";
      }
    echo "</table>";
    
    mysqli_close($con);
    ?>
    On content.php ... i have a GET variable " $id = $_GET['id']; " and after this i build the page with different kind of variables.

    And now is coming the part where i got stuck. If a select a checkbox, will start function your filter script, what i love the most by the way
    But here i don`t know how to include the <a href="#"> in the table, to make the links to function normally.

    Here is the part of your code:

    Code:
          function makeTable(data){
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                  tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";                 
              })
     
            return tbl_body;
          }
    And this is what i try:

    Code:
          function makeTable(data){
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                 tbl_row += "<td><a href='content.php?id=<?php echo $row['id']; ?>'>"+v+"</td></a>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";                 
              })
     
            return tbl_body;
          }
    But in this way all my links have /content.php?id=1 instead of id=1...id=2...etc

  9. #34
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Yeah, the above is not going to work.
    You want to be returning the link address with the other data pulled out of your database to your success callback and using JS to implement the rest.

    Presuming that all links go to content.php, with a query string which is equal to their id in the database, then you could do this:

    Code:
    function makeTable(data){
     var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "",
              currRecord = this;
    
          $.each(this, function(k , v) {
            if(k==='model'){
              v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
            }
            tbl_row += "<td>"+v+"</td>";
          })
          tbl_body += "<tr>"+tbl_row+"</tr>";
        })
    
      return tbl_body;
    }
    I updated my demo to show you how this might work.

    HTH

  10. #35
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo, i don`t know how to say this but you my friend ... you are amazing ...tomorrow in the morning go and quit your job, because google or yahoo, etc need smart people like you

  11. #36
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thanks.

    I think I'm a little way off working for Google or Yahoo, but if anyone wants to give me a job writing JavaScript, I'm all ears

  12. #37
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think i will hit you with my last question Pullo, and after then i will work a few days with the stylings ....and then i will show you my "final product", wich was not possible without your help.

    I think this question is a little bit complicated.

    First of all i will explain what i try to achive, after then i will show you what i have untill now.

    In my mobile_phones table ... a have a column called "price", now here is the fun part ... i want to have a box (div) with a checkbox, with 2 text inputs called Subvention1 and Subvention2... where i can type different kind of values.

    Subvention1 + Subvention2 = Total Subventions

    My checkbox from this div, will be called ...."use subvention"

    If i press the checkbox i want to substract this "Total subvention" value from the "price" column


    Basicly if i have a list with 100 mobile phones with different kind of prices, if i press the "Use subvention" checkbox, to show up the final price in the table (price - total subvention=final price )


    This is what i have:

    Code:
    <div id="subventie"> 
    
        <h2>Subvention1:</h2>
    	<input class="subvention"  type="text"  placeholder="0 $"  />
    	
    	<h2>Subvention2:</h2>
    	<input class="subvention" type="text"  placeholder="0 $" />
    
    	<h2>TOTAL SUBVENTION:</h2>
    	<div id="total_subvention">0 $</div>
    
    </div>
    
    	<div class="use">
    	     
    		 <div><input type="checkbox" id="use_subvention">	<label for="use_subvention">Use subvention</label></div>
    
    	</div>
    using the following jquery link in the <head> section
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    and the following script to make the sum of Subvention1 + Subvention2

    Code:
    <script>
    ****$(document).ready(function(){
    *
    ********//iterate through each textboxes and add keyup
    ********//handler to trigger sum event
    ********$(".subvention").each(function() {
    *
    ************$(this).keyup(function(){
    ****************calculateSum();
    ************});
    ********});
    *
    ****});
    *
    ****function calculateSum() {
    *
    ********var sum = 0;
    ********//iterate through each textboxes and add the values
    ********$(".subvention").each(function() {
    *
    ************//add only if the value is number
    ************if(!isNaN(this.value) && this.value.length!=0) {
    ****************sum += parseFloat(this.value);
    ************}
    *
    ********});
    ********//.toFixed() method will roundoff the final sum to 2 decimal places
    ********$("#total_subvention").html(sum.toFixed(0));
    ****}
    </script>

  13. #38
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So let me summarize to make sure I got this:

    You have a price column in your DB containing the price of each model of phone.
    The value of this column is output to your web page (as in our example) so that users can see the price of each model.

    You have also added a checkbox and two text input fields to the filter options.
    When the checkbox is checked you want to add the values in the two input fields together and display the total.
    You also want to subtract this total, from the value of every phone.

    E.g. the Samsung Galaxy S4 costs $450.
    If you enter 50 and 60 in the text inputs you want a total of $110 to display in the total.
    You then want to subtract $110 from the value of each phone, making the S$, for example, $340.

    Did I get that right?

  14. #39
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Exactly, you got it right

  15. #40
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Cool.

    Do you have any thoughts about how you want to enforce / validate numerical input - i.e. what if the user entered "100.99" (note the point) or "1,000" (note the comma) or "hello" (just plain wrong).

    Also, should this additional filter persist or be reset if the user then selects/deselects further brand names?

  16. #41
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    At this momment if the user typre "100.99" ... the number is rounded to 101 ... because i only want to work with rounded numbers and no decimals. If the user type a comma for example "100,99" ... at this momment nothing happens, but i think i know how to figure it out to force the user to type only rounded numbers.

    And if is possible i would like this subvention filter to persist , if i select or deselect futher brand names.

  17. #42
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Norbert,

    It took a while to think about the best way to do this.

    Here's my suggestion DEMO

    What do you think?

    index.php

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>AJAX filter demo</title>
        <style>
          body {
            padding: 10px;
          }
     
          h1 {
              margin: 0 0 0.5em 0;
              color: #343434;
              font-weight: normal;
              font-family: 'Ultra', sans-serif;   
              font-size: 36px;
              line-height: 42px;
              text-transform: uppercase;
              text-shadow: 0 2px white, 0 3px #777;
          }
     
          h2 {
              margin: 1em 0 0.3em 0;
              color: #343434;
              font-weight: normal;
              font-size: 30px;
              line-height: 40px;
              font-family: 'Orienta', sans-serif;
          }
     
          #phones {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            background: #fff;
            margin: 15px 25px 0 0;
            border-collapse: collapse;
            text-align: center;
            float: left;
          }
     
          #phones th {
            font-size: 14px;
            font-weight: normal;
            color: #039;
            padding: 10px 8px;
            border-bottom: 2px solid #6678b1;
          }
     
          #phones td {
            border-bottom: 1px solid #ccc;
            color: #669;
            padding: 8px 10px;
          }
     
          #phones tbody tr:hover td {
            color: #009;
          }
     
          #filter {
            float:left;
          }
    
          fieldset{
            margin-top: 15px;
          }
    
          fieldset div{
            padding:0 0 5px 0;
          }
    
          .amount{
            width:50px;
          }
        </style>
      </head>
      <body> 
        <h1>Phones database</h1>
     
        <table id="phones">
          <thead>
            <tr>
              <th width="15">ID</th>
              <th>Brand</th>
              <th>Model</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
     
    <div id="filter">
      <h2>Filter options</h2>
      <div>
        <input type="checkbox" id="Samsung" checked>
        <label for="Samsung">Samsung</label>
      </div>
      <div>
        <input type="checkbox" id="iPhone" checked>
        <label for="iPhone">iPhone</label>
      </div>
      <div>
        <input type="checkbox" id="HTC" checked>
        <label for="HTC">HTC</label>
      </div>
      <div>
        <input type="checkbox" id="LG" checked>
        <label for="LG">LG</label>
      </div>
      <div>
        <input type="checkbox" id="Nokia" checked>
        <label for="Nokia">Nokia</label>
      </div>
    
      <fieldset>
        <legend>Subsidy</legend>
        <div>
          <label for="amount1">Amount 1:</label>
          <input type="text" class="amount" id="amount1" />
        </div>
    
        <div>
          <label for="amount2">Amount 2:</label>
          <input type="text" class="amount" id="amount2" />
        </div>
    
        <div>Total: $<span id="total">0</span></div>
        
        <button id="apply">Apply</button>
        <button id="remove" disabled>Remove</button>
      </fieldset>
    </div>
    
        <script src="http://code.jquery.com/jquery-latest.js"></script> 
        <script>
          function makeTable(data){
            var tbl_body = "";
            $.each(data, function() {
              var tbl_row = "",
                  currRecord = this;
    
              $.each(this, function(k , v) {
                if(k==='model'){
                  v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
                } else if (k==='price'){
                  v = "<span class='price'>" + v + "</span>";
                }
                tbl_row += "<td>"+v+"</td>";
              })
              tbl_body += "<tr>"+tbl_row+"</tr>";
            })
    
            return tbl_body;
          }
     
          function getPhoneFilterOptions(){
            var opts = [];
            $checkboxes.each(function(){
              if(this.checked){
                opts.push(this.id);
              }
            });
     
            return opts;
          }
     
          function updatePhones(opts){
            $.ajax({
              type: "POST",
              url: "submit.php",
              dataType : 'json',
              cache: false,
              data: {filterOpts: opts},
              success: function(records){
                $('#phones tbody').html(makeTable(records));
                updatePrices();
              }
            });
          }
          
          function subsidyIsValid(){
            var amount1 = $("#amount1").val(),
                amount2 = $("#amount2").val(),
                regex = /^\d+$/,
                inputValid = false;
    
            if(regex.test(amount1) && regex.test(amount2)){
              var newTotal = Number(amount1) + Number(amount2)
              $("#total").text(newTotal);
              inputValid = true;
            }
    
            return inputValid
          }
    
          function updatePrices(){
            var subsidyTotal = Number($("#total").text());
    
            $(".price").each(function(){
              var origVal = Number($(this).text())
              $(this).text(origVal - subsidyTotal)
            })
          }
    
          var $checkboxes = $("input:checkbox");
          $checkboxes.on("change", function(){
            var opts = getPhoneFilterOptions();
            updatePhones(opts);
          });
          
          $("#apply").on("click", function(){
            if(subsidyIsValid()){
              $(this).prop("disabled", true);
              $(this).next().prop("disabled", false);
              updatePrices();
            } else {
              alert("Subsidy invalid!")
            }
          });
    
          $("#remove").on("click", function(){
            $("#amount1").val("");
            $("#amount2").val("");
            $("#total").text("0");
            $(this).prop("disabled", true);
            $(this).prev().prop("disabled", false);
    
            $checkboxes.trigger("change");
          });
    
          $checkboxes.trigger("change");
          updatePrices();
        </script> 
      </body> 
    </html>
    submit.php

    Code:
    <?php 
      $pdo = new PDO('mysql:host=localhost;dbname=sitepoint', 'root', '****');
      $opts = $_POST['filterOpts'];
      $qMarks = str_repeat('?,', count($opts) - 1) . '?';
      $statement = $pdo->prepare("SELECT mobile_phone.id, name, model, price FROM mobile_phone INNER JOIN brand ON brand_id = brand.id WHERE name IN ($qMarks)");
      $statement -> execute($opts);
      $results = $statement -> fetchAll(PDO::FETCH_ASSOC);
      $json = json_encode($results);
      echo($json);
    ?>
    If you have any questions about what I have done, just let me know.

  18. #43
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Only one word Pullo,
    Wowww

    Thank you!!!

  19. #44
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Glad you like it, it was fun to make

    and then i will show you my "final product", wich was not possible without your help.
    Don't forget this

  20. #45
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It`s working

    I made a quick test in the test database...

    One question... at the begining when I've found your post on your blog, in the first example the table show all the records as default, and only if the user click some checkboxes will filter the database, like here.

    After then, on oddz suggestion you made some changes, to store the records in two tables using INNER JOIN to query the database, but after this as default the records show up in the table with all checkboxes selected, and filter them only when the user deselect, one of them or more.

    Isn`t more convenient and user friendly the first example? when as default the table show up with all the records from the database, and only if the user want to filter them to use the checkboxes?

    I ask this because in my personal project, i used your first example where as default no checkbox is checked ...and this subvention code works perfectly, but only if one checkbox from filters is checked.

    But anyway, this is pure gold Pullo, i still can`t believe how can you sacrifice your own time to help others ...

  21. #46
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Glad it's working

    I found the second example more intuitive (where unchecking the boxes removed the results from the list).
    I don't think there was any reason (programatically speaking) that I did it that way round in the second example, as I coded the thing more or less from scratch.
    It shouldn't be too hard to adapt if need be.

  22. #47
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i will try to make some changes to make it to work without any checkbox

  23. #48
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I made some custom changes because i have multiple columns with prices...for example market_price, 1year_contract_price, 2year_contract_price for different telecomunication operators , but after a long night can figure it out to work without any checkbox checked .... but i`am amazed how good this work ...on one click my hole table price change

    This are my changes if somebody will use multiple prices or values:




    Code:
        <script>
          function makeTable(data){
            var tbl_body = "";
            $.each(data, function() {
              var tbl_row = "",
                  currRecord = this;
    
              $.each(this, function(k , v) {
                if(k==='nume'){
                  v = "<a href='content.php?cod=" + currRecord['cod'] +"'>" + v + "</a>";
                } else if (k==='price'){
                  v = "<span class='price'>" + v + "</span>";
                }else if (k==='1year_contract_price'){
                  v = "<span class='1year_contract_price'>" + v + "</span>";
                }else if (k==='2year_contract_price'){
                  v = "<span class='2year_contract_price'>" + v + "</span>";
                }
                tbl_row += "<td>"+v+"</td>";
              })
              tbl_body += "<tr>"+tbl_row+"</tr>";
            })
    
            return tbl_body;
          }
     
          function getPhoneFilterOptions(){
            var opts = [];
            $checkboxes.each(function(){
              if(this.checked){
                opts.push(this.id);
              }
            });
     
            return opts;
          }
     
          function updatePhones(opts){
            $.ajax({
              type: "POST",
              url: "submit.php",
              dataType : 'json',
              cache: false,
              data: {filterOpts: opts},
              success: function(records){
                $('#tablesorter-demo tbody').html(makeTable(records));
                updatePrices();
              }
            });
          }
          
          function subsidyIsValid(){
            var amount1 = $("#amount1").val(),
                amount2 = $("#amount2").val(),
                regex = /^\d+$/,
                inputValid = false;
    
            if(regex.test(amount1) && regex.test(amount2)){
              var newTotal = Number(amount1) + Number(amount2)
              $("#total").text(newTotal);
              inputValid = true;
            }
    
            return inputValid
          }
    
          function updatePrices(){
            var subsidyTotal = Number($("#total").text());
    
            $(".price,  .1year_contract_price, .2year_contract_price").each(function(){
              var origVal = Number($(this).text())
              $(this).text(origVal - subsidyTotal)
            })
          }
    
          var $checkboxes = $("input:checkbox");
          $checkboxes.on("change", function(){
            var opts = getPhoneFilterOptions();
            updatePhones(opts);
          });
          
          $("#apply").on("click", function(){
            if(subsidyIsValid()){
              $(this).prop("disabled", true);
              $(this).next().prop("disabled", false);
              updatePrices();
            } else {
              alert("Subsidy invalid!")
            }
          });
    
          $("#remove").on("click", function(){
            $("#amount1").val("");
            $("#amount2").val("");
            $("#total").text("0");
            $(this).prop("disabled", true);
            $(this).prev().prop("disabled", false);
    
            $checkboxes.trigger("change");
          });
    
          $checkboxes.trigger("change");
          updatePrices();
        </script>
    Pullo, you need a special award for this threat because this will help a lot of people if they will try to make an e-commerce web page or something...as i said this is pure gold

  24. #49
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    If you can't get it to work as you desire, just let me know and I'll have a look.

  25. #50
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo,

    I can`t get it to work, any help is very wellcome...tell me if you need some part of my code to see it


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •