Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    move search results to separate page

    I have a 4 level dependent dropdown populating from a sql db on a remote domain. The way it is designed right now, the dropdown populates a product datatables on the page directly below the dropdowns. I need it to push the results to a separate page called results. It works great as it is now, I am just not sure how and where to separate the code to have it push the datatable to a new page instead of the existing one. See my current example

    I realize i need to add some sort of Onclick="" to the form but am not sure what function to call and how to get it to load on another page. Also I figure the script at the bottom has to be separated somehow so it functions correctly on the dropdown page and trigger the datatable on the results page.

    Thanks in advance

    Here is my dropdown html:
    Code:
    <div id="productTable">
                        <div class="product_item">
                            <select class="select" id="year">
                                <option selected="selected" value="-1">-- Loading --</option>
                                </select>
                        </div>
                        <div class="product_item">
                            <select class="select" id="make">
                                <option selected="selected" value="-1">Select Make</option>
                            </select>
                        </div>
                        <div class="product_item">
                            <select class="select" id="model">
                                <option selected="selected" value="-1">Select Model</option>
                                </select>
                        </div>
                        <div class="product_item">
                            <select class="select" id="engine">
                                <option selected="selected" value="-1">Select Engine</option>
                            </select>
                        </div>
                        <div class="product_item">
                            <form action="results" name="tripleplay" target="_parent">
                                <input name="Submit" id="submit" value="Search" type="button" />
                            </form>
                        </div>
             </div>
    html for the datatable on results page
    Code:
    <div style="width:1000px">     
             <table id="catdata" class="display" cellspacing="0" align="center" width="100%">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>Engine</th>
                        <th>Notes</th>
                        <th>Part #</th>
                        <th>Pic</th>
                        <th>Url</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    the combined script
    Code:
     $(document).ready(function () {
    
                function select_dropdown(id) {
                    var data;
                    if (id == "make") {
                        data = "param=" + id + "&year=" + $("#year").val();
                    } else if (id == "model") {
                        data = "param=" + id + "&year=" + $("#year").val() + "&make=" + $("#make").val();
                    } else if (id == "engine") {
                        data = "param=" + id + "&year=" + $("#year").val() + "&make=" + $("#make").val() + "&model=" + $("#model").val();
                    } else {
                        data = "param=" + id;
                    }
    
                    $.ajax({
                        "url": "http://performverters.com/catscript5.php",
                        "dataType": 'jsonp',
                        "data": data,
                        "success": function (result) {
                            $("#" + id).html("<option selected='selected' value='-1'>Select " + id.toLowerCase().replace(/\b[a-z]/g, function (letter) {
                                return letter.toUpperCase();
                            }) + " </option>");
                            $.each(result, function (i, elem) {
                                $("#" + id).append("<option value='" + elem + "'>" + elem + "</option>");
                            });
                        }
                    });
                }
    
                select_dropdown("year");
    
                $("#year").change(function () {
                    $("#make").html('<option selected="selected" value="-1"> -- Loading -- </option>');
                    select_dropdown("make");
                    $("#model").html('<option selected="selected" value="-1">Select Model</option>');
                    $("#engine").html('<option selected="selected" value="-1">Select Engine</option>');
                });
    
                $("#make").change(function () {
                    $("#model").html('<option selected="selected" value="-1"> -- Loading -- </option>');
                    select_dropdown("model");
                    $("#engine").html('<option selected="selected" value="-1">Select Engine</option>');
                });
    
                $("#model").change(function () {
                    $("#engine").html('<option selected="selected" value="-1"> -- Loading -- </option>');
                    select_dropdown("engine");
                });
    
                var table;
    
                function createTable() {
                    table = $('#catdata').DataTable({
                        "retrieve": true,
                        "bFilter": false,
                        "processing": true,
                        "serverSide": true,
                        "sAjaxSource": "http://performverters.com/catscript4.php",
                        "fnServerData": function (sSource, aoData, fnCallback) {
    
                            aoData.push({
                                "name": "year",
                                "value": $("#year").val()
                            }, {
                                "name": "make",
                                "value": $("#make").val()
                            }, {
                                "name": "model",
                                "value": $("#model").val()
                            }, {
                                "name": "engine",
                                "value": $("#engine").val()
                            });
    
                            $.ajax({
                                "dataType": 'jsonp',
                                "url": sSource,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "columns": [{
                            "searchable": true
                        }, {
                            "searchable": true
                        }, {
                            "searchable": true
                        }, {
                            "searchable": true
                        }, {
                            "searchable": false
                        }, {
                            "searchable": true
                        }, {
                            "searchable": false
                        }, {
                            "searchable": false
                        }],
                        "order": [
                            [1, 'asc'],
                            [2, 'asc'],
                            [0, 'asc']
                        ],
                        "bSort": true,
                        "bPaginate": false,
                        "deferRender": true,
                        "bLengthChange": true,
                        "bInfo": false,
                        "bAutoWidth": true,
                        "iCookieDuration": 60 * 60 * 24, // 1 day
                    });
                }
    
                $("#submit").click(function () {
                    if ($.fn.dataTable.isDataTable('#catdata')) {
                        table.destroy();
                    }
                    createTable();
                });
            });

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    the first question might be does it have to go to another page? Because the "easy" way to do this would be to start off with the form showing and the table hidden (which looks kind of like what's going on at the moment) and then when the results come in, hide the form and show the table (along with whatever else you wanted to show on the second page)

    Otherwise, the options for passing data between pages in javascript are kind of limited: query strings, cookies and local storage. If there's only ever going to be one result, query strings would probably make the most sense.

  • #3
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I currently have this set up horizontally on the homepage and it works perfectly. I am thinking I am going to want to put the vertical version in the footer or something so a search option is always available regardless of the page the user is on and it will be there when on a mobile screen. Am not sure how I would push the results from the footer search into a results page.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I am guessing that vertical, horizontal and footer are somewhat irrelevant here - the options as far as javascript goes for passing data to other pages are few:
    - query string
    - cookie
    - local storage

    maybe you should display results in a modal window? that way you keep the original page and location (making passing data easier and not requiring extra navigation), but make the results display unmissable to the user

  • Users who have thanked xelawho for this post:

    jagsweb (07-20-2014)

  • #5
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks

    Modal window is a good idea.


  •  

    Posting Permissions

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