Results 1 to 7 of 7

Thread: Dynamic search and pagination

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    19

    Default Dynamic search and pagination

    I have a search that allows a users to pick a search type and a search value. These are then passed to an ajax call that will make the request to the server and grab the results. The thing to note here is that the backend server needs those parameters passed each time, so it gets the proper results.

    I have created a pagination bar that successfully sees the amount of results, pages, etc, but I can't seem to get it to pass the original search type and value when hitting the next page button. The json store assumes the proxy or url I use is not going to take dynamic variables (or at least it seems that way).

    I feel like I have tried everything:
    • global variable that get set
    • jsonstore metadata generated serverside
    • httpproxy passing parameters
    • baseparams in the json store that get updated


    Any ideas or suggestions would be great. I have spent hours on this and feel like it has been a complete waste of time.

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    19

    Default

    Solved my own problem. I neglected to see the add baseparam method for the JSOn store. Called that after my store load and all worked well.

  3. #3

    Default

    Hi x0ner can u pls post the code for me ............


    Thanx in advance

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    19

    Default Here ya go

    Code:
    function process_search(type, value) {
        Ext.Ajax.request({
            url: 'controls/actions/search_by_type.php',
            method: 'POST',
            waitTitle: 'Connecting',
            waitMsg: 'Getting data...',
            params: {
                'search_type': type,
                'search_value': value
            },
    
            success: function(request) {
                var obj = Ext.util.JSON.decode(request.responseText);
                if (obj.results == null) {
                    Ext.Msg.alert('Results', 'No search results found!');
                    search_result_count = "0";
                    Ext.getCmp('search_results_bar').setText("Search results: " + search_result_count);
                }
                search_result_count = obj.total;
                Ext.getCmp('search_results_bar').setText("Search results: " + search_result_count);
                store.loadData(obj);
                store.setBaseParam("search_type", type);
                store.setBaseParam("search_value", value);
            },
        });
    }
    

  5. #5

    Default

    Hi x0ner Thank u very much for ur reply , but i am unable to use ur code because ....please find out my code and help me to perform pagination
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Automatic Searchfield Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type='text/javascript' src='jquery.autocomplete.js'></script>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
    <script type="text/javascript">
    $(function() {
    function formatForDisplay(doc) {
    var name;
    if (doc.threadid=doc.threadid)
    {
    name=doc.title;
    }
    else{
    name=doc.name;
    }
    return name+" - "+doc.keywords;
    }
    $("#search").autocomplete( 'http://localhost:8983/solr/db/select/?wt=json&json.wrf=?&rows=200&df=keywords', {
    dataType: "jsonp",
    width: 200,
    minChars: 1,
    parse: function(data) {
    return $.map(data.response.docs, function(doc) {
    return {
    data: doc,
    result:doc.keywords
    }
    });
    },
    formatItem: function(doc) {
    return formatForDisplay(doc);
    }
    }).result(function(e, doc) {
    var mySelect = document.getElementById("type_of_search");
    dropdown=mySelect.options[mySelect.selectedIndex].value;
    if(dropdown==""){
    dropdown="keywords";
    }
    $.getJSON("http://localhost:8983/solr/db/select/?q="+doc.keywords+"&wt=json&json.wrf=?&rows=200&df="+dropdown,function(data)
    {
    document.getElementById('content1').innerHTML="";
    $.each(data.response.docs, function(i,data)
    {
    if (data.title=data.title)
    {
    data.name=data.title;
    }
    else{
    data.name=data.name;
    }
    $("#content1").append("<hr>"
    +"<a href="+data.url+">"+"<h4>"+"<B>"+data.name+"</B>"+"</h4>"+"</a><br/>"+data.description);
    $('a').hover(function(){
    $(this).addClass('linkstyle');
    },
    function(){
    $(this).removeClass('linkstyle');
    });


    });
    });
    });
    });
    function getSearchResults(){
    var mySelect = document.getElementById("type_of_search");
    dropdown=mySelect.options[mySelect.selectedIndex].value;
    if(dropdown==""){
    dropdown="keywords";
    }
    $.getJSON("http://localhost:8983/solr/db/select/?q="+$("#search").val()+"&wt=json&json.wrf=?&rows=200&df="+dropdown,function(data)
    {
    document.getElementById('content1').innerHTML="";
    $.each(data.response.docs, function(i,data)
    {
    if (data.title=data.title)
    {
    data.name=data.title;
    }
    else{
    data.name=data.name;
    }
    $("#content1").append("<hr>"
    +"<a href="+data.url+">"+"<h4>"+"<B>"+data.name+"</B>"+"</h4>"+"</a><br/>"+data.description);
    $('a').hover(function(){
    $(this).addClass('linkstyle');
    },
    function(){
    $(this).removeClass('linkstyle');
    });
    });
    });
    }
    </script>
    <style>
    .padding
    {
    color:grey;
    font-size:13pt;
    margin-top:20px;
    padding-top:20px;
    padding-left:100px;
    padding-bottom:20px;
    padding-right:100px;
    alignment: left;
    }
    .linkstyle{
    font-weight:bold;
    color:black;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <h1 id="banner">Automatic Searchfield Demo</h1>
    <div id="content">
    <form autocomplete="off">
    <p>
    <label>Enter Search Term Here:</label>
    <input type="text" id="search" size="50"/>
    <select name="type_of_search" id="type_of_search">
    <option value="">SelectHere</option>
    <option value="forums">Forums</option>
    <option value="groups">Groups</option>
    </select>
    <input type="button" value="search" onClick="getSearchResults();"/>
    </p>
    </form>
    </div>
    <div id="content1" class="padding">
    </div>
    <script>
    </script>
    </body>
    </html>
    ---------------------------------------------------------------------------------------------------------
    this is how i am getting search results from my solr server and now i would like to perform pagination which will give 10 results in one page like that please help me....

    Thank u in advance

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Posts
    19

    Default Re-Post just the JS with the code tags

    Can you repost the main portion of the code that you need help with and within the code tags? Makes it much easier to troubleshoot. At first glance it looks like the reason my code didn't work is because you are using a different front-end library. You are using jQuery and this is an ExtJS forum. Head over to http://forum.jquery.com/ and post your question.
    Last edited by x0ner; 4 Sep 2011 at 8:26 PM. Reason: reviewing of posted code sample.

  7. #7

    Default

    k x0ner here it is

    Code:
    <script type="text/javascript">
    $(function() { 
    function formatForDisplay(doc) {
    return name+" - "+doc.keywords;
    } 
    $("#search").autocomplete( 'localhost:8983/solr/db/select/?wt=json&json.wrf=?&rows=200&df=keywords', {
    dataType: "jsonp",
    width: 200,
    minChars: 1,
    parse: function(data) {
    return $.map(data.response.docs, function(doc) {
    return {
    data: doc,
    result:doc.keywords
    }
    });
    },
    formatItem: function(doc) {
    return formatForDisplay(doc);
    }
    }).result(function(e, doc) {
    $.getJSON("localhost:8983/solr/db/select/?q="+doc.keywords+"&wt=json&json.wrf=?&rows=200&df="+dropdown,function(data)
    {
    document.getElementById('content1').innerHTML="";
    $.each(data.response.docs, function(i,data)
    {
    if (data.title=data.title)
    {
    data.name=data.title;
    }
    else{
    data.name=data.name;
    }
    $("#content1").append("<hr>"
    +"<a href="+data.url+">"+"<h4>"+"<B>"+data.name+"</B>"+"</h4>"+"</a><br/>"+data.description);
    
    });
    });
    });
    });
    function getSearchResults(){
    var mySelect = document.getElementById("type_of_search"); 
    dropdown=mySelect.options[mySelect.selectedIndex].value;
    if(dropdown==""){
    dropdown="keywords";
    }
    $.getJSON("localhost:8983/solr/db/select/?q="+$("#search").val()+"&wt=json&json.wrf=?&rows=200&df="+dropdown,function(data)
    {
    document.getElementById('content1').innerHTML="";
    $.each(data.response.docs, function(i,data)
    {
    if (data.title=data.title)
    {
    data.name=data.title;
    }
    else{
    data.name=data.name;
    }
    $("#content1").append("<hr>"
    +"<a href="+data.url+">"+"<h4>"+"<B>"+data.name+"</B>"+"</h4>"+"</a><br/>"+data.description);
    });
    });
    }
    </script> 
    </head>
    <body>
    <div id="content">
    <form autocomplete="off">
    <p>
    <label>Enter Search Term Here:</label>
    <input type="text" id="search" size="50"/>
    <select name="type_of_search" id="type_of_search">
    <option value="">SelectHere</option>
    <option value="forums">Forums</option>
    <option value="groups">Groups</option>
    </select>
    <input type="button" value="search" onClick="getSearchResults();"/>
    </p> 
    </form>
    </div>
    <div id="content1" class="padding"> 
    </div>
    <script> 
    </script>
    </body>
    </html>
    i just developed an autocomplete search field and it is working fine ....when i enter any keyword which is in my database i will get the details related to tht keyword...the results may be more than 10 ....what i need to do is i should arrange 10 per page and for the remaing i need to go for otherpage

Similar Threads

  1. Grid + Search Plugin + Pagination + Servlet
    By blizzard182 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Jun 2010, 5:31 PM
  2. Search entire store on client pagination
    By blessan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Jun 2010, 10:18 PM
  3. Dynamic Grid pagination problem
    By veerai2i in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 Jan 2010, 9:53 PM
  4. advanced search / dynamic query form
    By mdissel in forum Community Discussion
    Replies: 0
    Last Post: 27 Sep 2008, 7:39 AM
  5. Pagination in dynamic grid
    By misra123 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Sep 2008, 3:32 AM

Tags for this Thread

Posting Permissions

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