How to click on a data in paging?

hi
i am doing a project and now i am try to work on paging, however i am stuck. I want to put in a list of links of website in the itemfilereadstore. So when show, i want to be able to click on any one of the link in the page, which will bring you to the selected website

reference guide:
http://dojotoolkit.org/reference-gui...agination.html

Your link didn’t work, so here’s one to the documentation for pagination

Here’s some documentation about itemfilereadstore
It interprets and stores JSON data, that you might have retrieved from an Ajax request.

ya is the same link as i provide but the problem is that i want to put in link instead of text and i want it able for me to click on the link…what other code should i add in to put in as link and enable click on the link to bring to the website??
P.s reply asps

Hang on, I don’t know what asps is short for. Hmm … Acronym Finder says that [url=“http://www.acronymfinder.com/ASPS.html”]asps is short for [url=“http://encyclopedia.thefreedictionary.com/Advanced+Sleep+Phase+Syndrome”]Advanced Sleep Phase Syndrome which is where people go to bed early, and get up really early between 1am and 3am. I know that I was complaining about it being 2:30am in [url=“http://www.sitepoint.com/forums/javascript-15/javascript-post-757497.html#post4878111”]another post, so thank you for your concern, even though it’s something of which I am not suffering from.

I don’t think that you meant Albino Squirrel Preservation Society, unless perhaps that is something that your web site is for that has not been stated yet.

Never the less, dojo is one of those libraries that I haven’t dealt with before. Perhaps you could instead try one of the options from the dojo support section of their site?

nono…sry is my fault…i want to type asap…as soon as possible…really sorry that i type wrongly

so what should i do…cause i also got the link that you have regarding paging, but the problem is i not able to click on the link…like what i say earlier, i want to put link and able to click on them, so you know what kind of code i should put???
thanks!!!and sincerely sorry about typing wrongly

Perhaps you could try one of the options from the dojo free support section of their site?

but i not sure which can work for what i want, cause i try the grid, i cannot work out the paging and the work with selection cannot bring to the link website

Do you have a link to a test page where you can show us the trouble?

If not, what is the onComplete function that you use to process the list of items that is retrieved from the store?

okay i use javascript and this is my code

var foodStore = new dojo.data.ItemFileReadStore({ data:{
identifier: ‘name’,
items: [{
name: ‘Adobo’,
aisle: ‘Mexican’,
price: 3.01
},
{
name: ‘Balsamic vinegar’,
aisle: ‘Condiments’,
price: 4.01
},
{
name: ‘Basil’,
aisle: ‘Spices’,
price: 3.59
},
{
name: ‘Bay leaf’,
aisle: ‘Spices’,
price: 2.01
},
{
name: ‘Beef Bouillon Granules’,
aisle: ‘Soup’,
price: 5.01
},
{
name: ‘Vinegar’,
aisle: ‘Condiments’,
price: 1.99
},
{
name: ‘White cooking wine’,
aisle: ‘Condiments’,
price: 2.01
},
{
name: ‘Worcestershire Sauce’,
aisle: ‘Condiments’,
price: 3.99
},
{
name: ‘pepper’,
aisle: ‘Spices’,
price: 1.01
}]
} });
var totalItems = 0; //How many total items should we expect.
var request = null; //Our request object we’re using to hold the positions and the callbacks.
var currentStart = 0; //Current index into the pages.
currentCount = 4; //Current size of the page.
//Callback to perform an action when the data items are starting to be returned:
function clearOldList(size, request) {
var list = dojo.byId(“list”);
if (list) {
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
//Save off the total size. We need it to determine when to ignore the buttons.
totalItems = size;
}

            //Callback for processing a returned list of items.
            function gotItems(items, request) {
                //Save off the current page info being displayed.
                currentStart = request.start;
                currentCount = request.count;
                var list = dojo.byId("list");
                if (list) {
                    var i;
                    for (i = 0; i < items.length; i++) {
                        var item = items[i];
                           var img  =document.createElement("img") ;
                         img.src = "images/link.png";
                         //img.setAttribute('height', '2px');             
                         //img.setAttribute('width', '2px');
                         img.width = "19";
                         img.height ="20";
                         list.appendChild(img);
                         var link = document.createTextNode(foodStore.getValue(item, "name"));
                      
                         list.appendChild(link);
                         
                        
                        list.appendChild(document.createElement("br"));
                    
                       
                    }
                }
            }

            //Callback for if the lookup fails.
            function fetchFailed(error, request) {
                alert("lookup failed.");
            }

            //Button event to page forward.
            function nextPage() {
                //If we haven't hit the end of the pages yet, allow for requesting another.
                if ((currentStart + currentCount) < totalItems) {
                    request.start += currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Button event to page back;
            function previousPage() {
                //If we haven't hit the beginning of the pages yet, allow for another shift backwards.
                if (currentStart > 0) {
                    request.start -= currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Fetch the data.
            request = foodStore.fetch({
                onBegin: clearOldList,
                onComplete: gotItems,
                onError: fetchFailed,
                start: currentStart,
                count: currentCount
            });

            //Link the click event of the button to driving the fetch.
            dojo.connect(back, "onClick", previousPage);
            dojo.connect(forward, "onClick", nextPage);

how am i going to have a link(any link, like example yahoo website) and display there and the user are able to click on them

This is the part here:


var link = document.createTextNode(foodStore.getValue(item, "name"));
list.appendChild(link);

A text node is not a link. To create a link you would need to create an anchor element, set the href value, and append the text.

You’ll need to add a link to the name in your data store too, but after you do that you can do the following.


link = document.createElement('a');
link.href = foodStore.getValue(item, 'link');
text = document.createTextNode(foodStore.getValue(item, "name"));
link.appendChild(text);

You could also move all of the variable declarations to the start of the function.
The currentStart and currentCount are global variables required by dojo (from post #28) so those should remain at the start.

Also, appending separately does impose a performance penalty, so we can instead append to a document fragment, which can then be appended right at the end of things.

Here’s what the gotItems() function looks like after the adjustments.


function gotItems(items, request) {
    currentStart = request.start;
    currentCount = request.count;

    var list = dojo.byId("list"),
        i,
        item,
        itemsToAdd = document.createDocumentFragment(),
        img,
        text,
        link;
    if (!list) {
        return;
    }
    for (i = 0; i < items.length; i++) {
        item = items[i];
        img = document.createElement("img") ;
        img.src = "http://www.sitepoint.com/forums/images/link.png";
        img.width = "19";
        img.height ="20";
        itemsToAdd.appendChild(img);
        
        link = document.createElement('a');
        text = document.createTextNode(foodStore.getValue(item, "name"));
        link.href = foodStore.getValue(item, 'link');
        link.appendChild(text);
        
        itemsToAdd.appendChild(link);
        itemsToAdd.appendChild(document.createElement("br"));
    }
    list.appendChild(itemsToAdd);
}

If you want to split up the function, here’s one way that it could easily be done:


function linkedItem(link, name) {
    var row = document.createDocumentFragment(),
        img = document.createElement("img"),
        a = document.createElement('a'),
        text;
    
    img.src = "http://www.sitepoint.com/forums/images/link.png";
    img.width = "19";
    img.height ="20";
    
    a.href = href;
    a.appendChild(document.createTextNode(name));
    
    row.appendChild(img);
    row.appendChild(a);
    row.appendChild(document.createElement("br"));
    return row;
}
function gotItems(items, request) {
    var list = dojo.byId("list"),
        i,
        item,
        row,
        itemsToAdd = document.createDocumentFragment();

    if (!list) {
        return;
    }
    for (i = 0; i < items.length; i++) {
        item = items[i];
        row = linkedItem(
            foodStore.getValue(item, "link"),
            foodStore.getValue(item, "name")
        );
        itemsToAdd.appendChild(row);
    }
    list.appendChild(itemsToAdd);
}

hihi
are u able to gt a output?
cause i try it the code le…then nothing appear
can help me see what wrong? why no outpit

var forward = new dijit.form.Button({
       style: "border:0px;background:red;",
       label: "NEXT"
  
   });
   var back = new dijit.form.Button({
       label: "BACK"
   });

   
   c.addChild(back);
   c.addChild(forward);
var foodStore = new dojo.data.ItemFileReadStore({ data:{
            identifier: 'name',
            items: [{
                name: 'http://www.yahoo.com.sg',
                aisle: 'Mexican',
                price: 3.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 4.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Spices',
                price: 3.59
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Spices',
                price: 2.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Soup',
                price: 5.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 1.99
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 2.01
            },
            {
                name: 'Worcestershire Sauce',
                aisle: 'Condiments',
                price: 3.99
            },
            {
                name: 'pepper',
                aisle: 'Spices',
                price: 1.01
            }]
        } });
    var totalItems = 0; //How many total items should we expect.
            var request = null; //Our request object we're using to hold the positions and the callbacks.
           
            function clearOldList(size, request) {
                var list = dojo.byId("list");
                if (list) {
                    while (list.firstChild) {
                        list.removeChild(list.firstChild);
                    }
                }
                //Save off the total size. We need it to determine when to ignore the buttons.
                totalItems = size;
            }

            //Callback for processing a returned list of items.
           function gotItems(items, request) {
             var list = dojo.byId("list"),    
                 i,        
                 item,   
                docFragment = document.createDocumentFragment(),       
                 img,     
                    text,       
                     link;   
                      if (!list) { 
                             return;   
                              }   
                     for (i = 0; i &lt; items.length; i++) {      
              item = items[i];    
              img = document.createElement("img") ;        
              img.src = "http://www.sitepoint.com/forums/images/link.png";
                      img.width = "19";
                              img.height ="20";
                                      docFragment.appendChild(img);
      link = document.createElement('a');
              text = document.createTextNode(foodStore.getValue(item, "name"));        a.href = foodStore.getValue(item, 'link');
                      a.appendChild(text);          
                      docFragment.appendChild(link);    
                          docFragment.appendChild(document.createElement("br"));   
                           }    list.appendChild(docFragment);}

            //Callback for if the lookup fails.
            function fetchFailed(error, request) {
                alert("lookup failed.");
            }

            //Button event to page forward.
            function nextPage() {
                //If we haven't hit the end of the pages yet, allow for requesting another.
                if ((currentStart + currentCount) &lt; totalItems) {
                    request.start += currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Button event to page back;
            function previousPage() {
                //If we haven't hit the beginning of the pages yet, allow for another shift backwards.
                if (currentStart &gt; 0) {
                    request.start -= currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Fetch the data.
            request = foodStore.fetch({
                onBegin: clearOldList,
                onComplete: gotItems,
                onError: fetchFailed
            });

            //Link the click event of the button to driving the fetch.
            dojo.connect(back, "onClick", previousPage);
            dojo.connect(forward, "onClick", nextPage);

Whoops, these parts:


a.href = foodStore.getValue(item, 'link');
a.appendChild(text); 

should be link instead of a


link.href = foodStore.getValue(item, 'link');
link.appendChild(text); 

The previous post has been updated to reflect this too.

the callback function promot me lookup failed, so what wrong? i already amend on those code
and also where does the paging work?

I’m coding blind on this. What is that promot function?

Do you have a sample test page with that code, so that more useful help can be given to you?

If not, we might be able to help you to use your web browser to find out more info on what is happening.

is the function fetchfailed which promt me the lookup failed meaning the itemfilereadstore data is not obtain…
i previous show the code, but it alright, the below is my sample test code, i cant send a attachment so i will have to put the code here

<html >
<head>
<title></title>
<style type=“text/css”>
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js
djConfig=“parseOnLoad: true”>
</script>
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/tests/enhanced/support/test_write_store_music.js”>
</script>
<script language=“JavaScript” type=“text/JavaScript”>

dojo.require(“dojo.data.ItemFileReadStore”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“dijit.layout.BorderContainer”);
dojo.require(“dijit.form.Button”);

</script>
<script type = “text/javascript”>
function trys(){
var c = new dijit.layout.BorderContainer({});
var p = new dijit.layout.ContentPane({
content: “<table><tr><td><font color = ‘#000000’ size = ‘2’><u><b>LINKS</b></u></td></tr><br/><tr><td><span id=\“list\”></span></td></tr></table>”
});
var forward = new dijit.form.Button({
style: “border:0px;background:red;”,
label: “NEXT”

   });
   var back = new dijit.form.Button({
       label: "BACK"
   });

   
   c.addChild(back);
   c.addChild(forward);
var foodStore = new dojo.data.ItemFileReadStore({ data:{
            identifier: 'name',
            items: [{
                name: 'http://www.yahoo.com.sg',
                aisle: 'Mexican',
                price: 3.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 4.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Spices',
                price: 3.59
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Spices',
                price: 2.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Soup',
                price: 5.01
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 1.99
            },
            {
                name: 'http://www.yahoo.com.sg',
                aisle: 'Condiments',
                price: 2.01
            },
            {
                name: 'Worcestershire Sauce',
                aisle: 'Condiments',
                price: 3.99
            },
            {
                name: 'pepper',
                aisle: 'Spices',
                price: 1.01
            }]
        } });
    var totalItems = 0; //How many total items should we expect.
            var request = null; //Our request object we're using to hold the positions and the callbacks.
           
            function clearOldList(size, request) {
                var list = dojo.byId("list");
                if (list) {
                    while (list.firstChild) {
                        list.removeChild(list.firstChild);
                    }
                }
                //Save off the total size. We need it to determine when to ignore the buttons.
                totalItems = size;
            }

            //Callback for processing a returned list of items.
           function gotItems(items, request) {
             var list = dojo.byId("list"),    
                 i,        
                 item,   
                docFragment = document.createDocumentFragment(),       
                 img,     
                    text,       
                     link;   
                      if (!list) { 
                             return;   
                              }   
                     for (i = 0; i &lt; items.length; i++) {      
              item = items[i];    
              img = document.createElement("img") ;        
              img.src = "http://www.sitepoint.com/forums/images/link.png";
                      img.width = "19";
                              img.height ="20";
                                      docFragment.appendChild(img);
      link = document.createElement('a');
              text = document.createTextNode(foodStore.getValue(item, "name"));        link.href = foodStore.getValue(item, 'link');
                      link.appendChild(text);          
                      docFragment.appendChild(link);    
                          docFragment.appendChild(document.createElement("br"));   
                           }    
                           list.appendChild(docFragment);
                           }

            //Callback for if the lookup fails.
            function fetchFailed(error, request) {
                alert("lookup failed.");
            }

            //Button event to page forward.
            function nextPage() {
                //If we haven't hit the end of the pages yet, allow for requesting another.
                if ((currentStart + currentCount) &lt; totalItems) {
                    request.start += currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Button event to page back;
            function previousPage() {
                //If we haven't hit the beginning of the pages yet, allow for another shift backwards.
                if (currentStart &gt; 0) {
                    request.start -= currentCount;
                    request = foodStore.fetch(request);
                }
            }

            //Fetch the data.
            request = foodStore.fetch({
                onBegin: clearOldList,
                onComplete: gotItems,
                onError: fetchFailed
            });

            //Link the click event of the button to driving the fetch.
            dojo.connect(back, "onClick", previousPage);
            dojo.connect(forward, "onClick", nextPage);
                      return c.domNode;
                      }
                        
                           dojo.addOnLoad(trys);
&lt;/script&gt;                           
&lt;/head&gt;

&lt;body&gt;
 
&lt;/body&gt;

</html>

Did the code ever work before my suggested changes?

yes, it work, it show the link as a text

Okay, I would need to start from that version of the code, so that I can then add on the linked text part in a way continues to keep it working.

So, what was your code that resulted in a working example?

i want to show a list of links (website links) with paging if there is more than 4 link page and the user are able to click on those links that they see in the page
thanks