jQuery on 2 clicks

[MasterACE14]

I have a PHP/MySQL/jQuery(AJAX) search script which is working fine, but now I want to add pagination to switch to page results dynamically.

 

I have added my PHP pagination code and it displays all the links fine, but I'm having no luck with getting my jQuery to execute when you click one of the pagination links.

 

This is my current working search jQuery without the edits for pagination:

    // Search
    $(function() {
        $(".search_button").click(function() {
            // getting the value that user typed
            var searchString    = $("#search_box").val();
            // forming the queryString
            var data            = 'search='+ searchString;

            // if searchString is not empty
            if(searchString) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "applications/cg/controllers/backend/do_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results").html('');
                        $("#searchresults").show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results").show();
                        $("#results").append(html);
                  }
                });
            }
            return false;
        });
    });

 

that works fine, but I want to execute this function when either .search_button (shown above) is clicked, or if .search_spg is clicked.

Here's what I have with the pagination edits, which doesn't do anything when a link is clicked:

$(function() {
        $(".search_button, .search_spg").click(function() {
            // getting the value that user typed
            var searchString    = $("#search_box").val();
            var link = $('a').attr('href');
            var equalPosition = link.indexOf('#'); //Get the position of '#'
            var number = link.substring(equalPosition + 1); //Split the string and get the number.
            // forming the queryString
            var data            = 'search='+ searchString+ '&spg='+ number;

            // if searchString is not empty
            if(searchString && number) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "applications/cg/controllers/backend/do_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results").html('');
                        $("#searchresults").show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results").show();
                        $("#results").append(html);
                  }
                });
            }
            return false;
        });
    });

 

Also here's one of my links:

<a href="#2" class="search_spg">2</a>

 

I'm unsure of what I'm doing wrong.

 

Any help is greatly appreciated.

 

Regards, Ace

[Zane]

Whenever you load data, edit and element or add an element through jQuery.. it becomes something out of scope.  In order to access the new links you have AJAXed in, you need to use the live() function.

 

For example

$(".search_button, .search_spg").live('click', (function()

[MasterACE14]

Ok I have it sending requests now when I click the links. But it seems to be losing track of what page it is on.

 

so for example I have links: 1 | 2 | 3 | 4

 

And I'm currently on page 1, then if I click 2, it goes to page 2 no problems, but if I click 3, it goes back to 1. Same problem if I click 4, goes back to page 1. However from page 2, I can go back to page 1 no problem.

 

Not sure if maybe I'm overwriting the 'spg' var in the PHP side maybe?

 

here's my current jQuery:

$(function() {
        $(".search_button, .search_spg").live('click', function() {
            // getting the value that user typed
            var searchString    = $("#search_box").val();
            
            // get the page number
            var number = $('.search_spg').attr('title');

            // forming the queryString
            var data            = 'search='+ searchString+ '&spg='+ number;

            // if searchString is not empty
            if(searchString) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "applications/cg/controllers/backend/do_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results").html('');
                        $("#searchresults").show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results").show();
                        $("#results").append(html);
                  }
                });
            }
            return false;
        });
    });

 

and here's do_search.php:

<?php
require_once('../libraries/ajax.php');

//if we got something through $_POST
if (isset($_POST['search'])) {
    // here you would normally include some database connection
    $db = new MySQL('localhost', DB_USER, DB_PASS, DB_NAME);
    // never trust what user wrote! We must ALWAYS sanitize user input
    $word = $db->escape_value($_POST['search']);
    // build your search query to the database
    $sql = "SELECT `cg_accounts`.`username`, `cg_accounts`.`id`
            FROM `cg_accounts`
            WHERE `cg_accounts`.`username`
            LIKE '%" . $word . "%'
            ORDER BY `cg_accounts`.`username`";

    if(isset($_POST['spg']) && $_POST['spg'] != '')
        $_POST['spg'] = $db->escape_value($_POST['spg']);
    else
        $_POST['spg'] = 1; // Possibly overwriting the value here?
    $search = new pagination($_POST['spg'], $sql);
    $search->results_per_page = 1;
    $search->padding(5);
    $search->link_prefix = '#';
    $search->link_style = 'class="search_spg"';
    $slinks = $search->paginate();
    $searchCount = $search->total_results;

    // get results
    if($searchCount > 0) {
        $end_result = '';
        while($r = $db->fetch_assoc($search->resource())) {
            // we will use this to bold the search word in result
            $bold           = '<span class="found">' . $word . '</span>';
            $end_result     .= '<li class="result"><a href="index.php?cgs=cg&page=profile&id='.$r['id'].'">' . str_ireplace($word, $bold, $r['username']) . '</a></li>';
        }
        echo $end_result;
        echo '<div style="text-align: center; margin-top: 20px;">';
        echo $slinks;
        echo '</div>';
    } else {
        echo '<li>No results found</li>';
    }
    $db->close_connection();
}
?>

 

Other than it oddly reverting $_POST['spg'] back to 1(confirmed with firebug in firefox), despite the 'title' attribute being correct for each link, it is all working fine.

 

Thanks

[MasterACE14]

could I possibly use a $_SESSION var to store the current page?

[uday8486]

Are you loading the paginations i mean the number 1234 also after along with the data? If yes then you will need to rebind the click event for the page numbers, Google for jquery rebind events.

[MasterACE14]

Are you loading the paginations i mean the number 1234 also after along with the data? If yes then you will need to rebind the click event for the page numbers, Google for jquery rebind events.

 

I got it working!

    $(function() {
        $(".search_button, .search_spg").live('click', function() {
var number = $(this).attr('title');
var searchString = $("#search_box").val();
var data = 'search='+ searchString+ '&spg='+ number;

            // if searchString is not empty
            if(data) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "applications/cg/controllers/backend/do_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results").html('');
                        $("#searchresults").show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results").show();
                        $("#results").append(html);
                  }
                });
            }
            return false;
        });
    });

 

Very helpful, thankyou kindly.

 

Regards, Ace