JQuery database connection

Question

0.00/5 (No votes)

See more:

The product codes are in an array of jQuery. Now I want to do was read the data from the database?

JavaScript

// start user setings
        var maxColumn = 4;    // max cells in a row  
        var range = 3;    // range of num links to show
        // end user setings

        var rowsPerPage = 0;
        var currentpage = 0;
        var maxPrice = 0;
        var minPrice = 0;
        var sortBy = '';
        var sortOrder = 0;

        // the products information array                            
        var products =[
                      { "id": "1", "category": "Apple", "price": 2860, "image": "images/sample5.jpg", "title": "Apple iPhone 4"  }
                      , { "id": "2", "category": "BlackBerry", "price": 450, "image": "images/BlackBerry-9780-Bold.gif", "title": "BlackBerry 9780 Bold" }
                      , { "id": "12", "category": "BlackBerry", "price": 520, "image": "images/BlackBerry-Torch-9800.gif", "title": "BlackBerry Torch 9800" }
                      , { "id": "26", "category": "HTC", "price": 1850, "image": "images/HTC-Desire-S.gif", "title": "HTC Desire S" }
                      , { "id": "50", "category": "HTC", "price": 600, "image": "images/HTC-HD7.gif", "title": "HTC HD7" }
                      , { "id": "21", "category": "HTC", "price": 2400, "image": "images/HTC-Incredible-S.gif", "title": "HTC Incredible S" }
                      , { "id": "11", "category": "HTC", "price": 2500, "image": "images/HTC-Sensation.gif", "title": "HTC Sensation" }
                      , { "id": "3", "category": "HTC", "price": 100, "image": "images/HTC-Wildfire.gif", "title": "HTC Wildfire" }
                      , { "id": "6", "category": "Motorola", "price": 2460, "image": "images/Motorola-Atrix-4G.gif", "title": "Motorola Atrix 4G" }
                      , { "id": "14", "category": "Motorola", "price": 100, "image": "images/Motorola-DEFY.gif", "title": "Motorola DEFY" }
                      , { "id": "15", "category": "Nokia", "price": 1200, "image": "images/Nokia-C7.gif", "title": "Nokia C7" }
                      , { "id": "60", "category": "Nokia", "price": 1700, "image": "images/Nokia-N8.gif", "title": "Nokia N8" }
                      , { "id": "70", "category": "Nokia", "price": 2000, "image": "images/Nokia-X6.gif", "title": "Nokia X6" }
                      , { "id": "45", "category": "Samsung", "price": 1800, "image": "images/Samsung-I9000-Galaxy-S.gif", "title": "Samsung I9000 Galaxy S" }
                      , { "id": "23", "category": "Samsung", "price": 2900, "image": "images/samsung-I9100-galaxy-S2.gif", "title": "samsung I9100 galaxy S2" }
                      , { "id": "17", "category": "Samsung", "price": 1300, "image": "images/Samsung-S5830-Galaxy-Ace.gif", "title": "Samsung S5830 Galaxy Ace" }
                      , { "id": "99", "category": "Sony-Ericsson", "price": 1400, "image": "images/Sony-Ericsson-XPERIA-X10.gif", "title": "Sony Ericsson XPERIA X10" }
        ];


        function setProducts() {
            sortBy = sortBy ? sortBy : $('#product_sort').val();
            rowsPerPage = rowsPerPage ? rowsPerPage : $('.product_pages button:first').html();
            desc = sortOrder > 0 ? true : false;
            currentpage = currentpage > 0 ? currentpage : 1; // if current page is less than first page...
            var totalLoop = rowsPerPage;
            var loop = 0;
            var countCellData = 0;
            var offset = 0;
            // empty content  
            $('#product_show').html(' ');
            // set select boxes to there selected as the var value
            $('#product_order').val(sortOrder);
            $('#product_sort').val(sortBy);

            var filterdProducts = [];  // displayed products array
            var key = 0;
            // if needed price range filter
            if (!minPrice && !maxPrice) {
                filterdProducts = products;
            } else {
                $.each(products, function (i, object) {
                    var curentPrice = parseFloat(object.price);
                    var priceMinOk = true;
                    var priceMaxOk = true;
                    // filter results match the price range
                    if (maxPrice || minPrice) {
                        if (maxPrice && maxPrice < curentPrice) {
                            priceMaxOk = false;
                        }
                        if (minPrice && minPrice > curentPrice) {
                            priceMinOk = false;
                        }
                    }
                    //  loop over list and get only related to new array
                    if (priceMinOk && priceMaxOk) {
                        filterdProducts[key] = object;
                        key++;

                    }

                });
            }

            // get the amount of results
            var totalResults = filterdProducts.length;
            if (totalResults > 0) {
                // if there are results - set selected order
                filterdProducts.sort(function (a, b) {
                    var a1 = a[sortBy], b1 = b[sortBy];
                    if (a1 == b1) { return 0; }
                    if (desc) {
                        return (a1 > b1) ? -1 : (a1 < b1) ? 1 : 0;
                    } else {
                        return a1 > b1 ? 1 : -1;
                    }
                });
            }
            // show the amount of results 
            $('.product_results').html(totalResults);
            /****** start build pagination links ******/
            var totalpages = Math.ceil(totalResults / rowsPerPage); // calculate the total pages 

            if (totalpages > 1) {
                // fix displayed page number if its biger then exist
                if (currentpage > totalpages) {
                    // set current page to last page
                    currentpage = totalpages;
                }
                // set the offset of the list, based on current page 
                offset = (currentpage - 1) * rowsPerPage;

                var pagination = '';
                var lastPage = 0;
                // set the min page of the list, based on the range 
                var minPage = parseFloat(currentpage) - parseFloat(range);
                minPage = minPage > 0 ? minPage : 1;
                // if not page 1, don't show back links
                if (currentpage > 1) {
                    // get previous page num  
                    pagination += '<button type="button" name="' + (currentpage - 1) + '" class="product_button" title="◄Previous" >◄Previous<\/button>';
                    // show page 1 only if the min page isn`t page 1 (prevent page 1 to show twice)  
                    if (minPage > 1) {
                        pagination += '<button type="button" name="1" class="product_button" title="1" >1<\/button>';
                    }
                }

                // loop to show links to range of pages around current page
                for (var x = minPage; x <= (currentpage + range) ; x++) {
                    // validate page number 
                    if (x <= totalpages) {
                        lastPage = x;
                        // if this is current page set its value to 0 (prevent click) and set class as selected
                        if (x == currentpage) {
                            pagination += '<button type="button" name="0" class="product_button_selected" title="' + x + '" >' + x + '<\/button>';
                        } else {
                            pagination += '<button type="button" name="' + x + '" class="product_button" title="' + x + '" >' + x + '<\/button>';
                        }
                    }
                }

                // if not on last page, show forward and last page links        
                if (currentpage != totalpages) {
                    // get next page 
                    var nextPage = parseFloat(currentpage) + 1;
                    if (lastPage < totalpages) {
                        // show page last page only if the min page isn`t last page (prevent page 1 to show twice)  
                        pagination += '<button type="button" name="' + totalpages + '" class="product_button" title="' + totalpages + '" >' + totalpages + '<\/button>';
                    }
                    pagination += '<button type="button" name="' + nextPage + '" class="product_button" title="Next►" >Next►<\/button>';
                }
                // update the html
                $('.product_pagination').html(pagination);
            } else {
                // if no pages or just one page dont show pagination
                $('.product_pagination').html('<button type="button" name="0" class="product_button_selected" title="1" >1<\/button>');
            }
            var offsetEnd = parseFloat(rowsPerPage) + parseFloat(offset);
            /****** end build pagination links ******/

            // build cells content
            var cell = '<table border="0" cellpadding="2" cellspacing="0" width="100%" id="product_table">';
            cell = '<section class="main-content col-lg-9 col-md-9 col-sm-9">';
            cell = '<div class="row">';
            cell += '<tr>';

            // get the keys is in the display pagination range
            var pageProducts = filterdProducts.slice(offset, offsetEnd);
            // loop over the query list 
            $.each(pageProducts, function (i, object) {
                // get min and max price range for price range filter slider   
                setPriceRange(parseFloat(object.price));
                countCellData++; // flug to know if there is content                
               
                
                
                cell += '<div class="col-lg-4-right col-md-4-right col-sm-4 product">';
                cell += '<div class="product-image"><img src="' + object.image + '" alt="' + object.title + '" title="' + object.title + '" longdesc="' + object.id + '" border="0" ><\/div>';
                cell += '<div class="product-info"><h5>' + object.title + '<\/h5><span class="price">' + object.price + '<\/span><\/div>';
                cell += '<div class="product-actions">';
                cell += '<span class="add-to-compare">';
                cell += '<span class="action-wrapper">';
                cell += '';
                cell += '<\/i>';
                cell += '<span class="action-name">مقایسه<\/span>';
                cell += '<\/span>';
                cell += '<\/span>';
                cell += '<\/div>';
                cell += '<\/div>';
                
                
                //cell += '<div><img src="'+object.image+'" alt="'+object.title+'" title="'+object.title+'" longdesc="'+object.id+'" border="0" ><\/div>';
                //cell += '<div>'+object.title+'<\/div>';
                //cell += '<div>'+object.price+'<\/div>';
                //cell += '<div>'+object.category+'<\/div>';
                

                totalLoop--;
                loop++;
                // if the row ended but the table as unmach cells  number

                if (!totalLoop && loop) {
                    for (var i = 0; i < (maxColumn - loop) ; i++) {
                        // add empty cell     
                        cell += '<td> <\/td>';
                    }
                }
                // determine if the row ended  

                if (loop == maxColumn) {
                    cell += '<\/tr>';
                    loop = 0;
                    if (totalLoop) {
                        cell += '<tr>';
                    }
                }
            });
            cell += '<\/tr>';
            cell += '<\/div>';
            cell += '<\/section>';
            cell += '<\/table>';
            if (countCellData > 0) {
                // if exist content
                $('#product_show').html(cell);
                // set image onclick event
                $('#product_show img').click(function () {
                    alert('Product ID = ' + $(this).attr('longdesc'));
                });

            }
            setPagination();
        }

Posted 5-Dec-14 8:20am

Member 10418736

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Answer 1 · 2014-12-05T08:46:00

Solution 1

You have asked 3 times now. Already answered.

Read data from the database in jQuery[^]

Posted 5-Dec-14 8:46am

ZurdoDev

Afzaal Ahmad Zeeshan · Answer 2 · 2014-12-05T08:57:00

You can however connect to a database using JavaScript, but that is a broad concept. Since you're saying jQuery, I would assume you're talking about an ajax request, because jQuery from a client cannot connect to a database (see my first sentence).

Following is an example request,

JavaScript

$(document).ready(function () {
   $.ajax({
      url: 'Getdata',
      success: function (data) {
         // this data is the exact list that we are going to return 
         // from the server sie page, using that JSON serializer.
         var list = data;
         // your other tasks...
      }
   });
});

Create a seperate page in your ASP.NET application name it Getdata.cshtml, write the ASP.NET code to get the data from the database. http://www.asp.net/web-pages/overview/data/5-working-with-data[^]. You should be able to understand working with SQL and other classes used to get data from database.

Once done, parse that data to a JSON format, you can however use the Newtonsoft.Json package to serialize the data of the object into a Json string. Like this,

C#

var data = Newtonsoft.Json.JsonConvert.SerializeObject(yourArrayVariable);

.. this would return an array (depending on the object and its properties etc). Newtonsoft.Json[^] package.

Once done, return the data object. This can be added to the jQuery response, you can create a variable in jQuery for that or so on and so forth.

You should atleast first check into the APIs for these problems, before writing a question once write the question's title into Google's search box and usually the answers come from CodeProject too, in the form of articles. Which are self-explainatory and good for beginners.