How to click on a data in paging?

I can help you to show a list of links once you provide the code for a list without links, that works.

oh okay thanks, i already have the code at #9

this is it again, this code can work, it only show as text and i am able to page it

function setContent() {
var c = new dijit.layout.BorderContainer({style:“border:0px”});

   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: '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);
            
            return c.domNode;

    
    }

That’s just the script. Is there HTML code that allows the script to be run in a working manner?

is it this is the one you askin?

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Testing the ThumbnailPicker + Lightbox</title>

<script type=‘text/JavaScript’ src=‘http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi’></script>
<!-- required: a default theme file –>
<link rel=“stylesheet” type=“text/css” href=“http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css”/>
<link rel=“stylesheet” type=“text/css” href=“http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/image/resources/image.css” />
<link rel=“stylesheet” type=“text/css” href=“http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/image/resources/ThumbnailPicker.css” />
<script type=“text/javascript” src=“http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2”></script>

<script type=“text/javascript”>
var djConfig = {
parseOnLoad: true
};
</script>
<script type=“text/javascript”>
dojo.require(“dijit.layout.BorderContainer”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“dijit.form.Button”);
dojo.require(“dojo.data.ItemFileReadStore”);
dojo.require(“dijit.Dialog”);

 function setContent() {

 var c = new dijit.layout.BorderContainer({style:"border:0px"});
   var p = new dijit.layout.ContentPane({
     content: "&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;font color = '#000000' size = '2'&gt;&lt;u&gt;&lt;b&gt;LINKS&lt;/b&gt;&lt;/u&gt;&lt;/td&gt;&lt;/tr&gt;&lt;br/&gt;&lt;tr&gt;&lt;td&gt;&lt;span id=\\"list\\"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"
 });
 c.addChild(p);
   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: '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 &lt; 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) &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,
                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);
       	  var dialog = new dijit.Dialog({});     
  dialog.attr("content", c.domNode);
  dialog.show();

    
    }

dojo.addOnLoad(setContent);
</script>
</head>
<body >

</body>
</html>

Only if it provides a working example as a starting point.

The body of that code is empty, so how can it be a working example?


<body >



</body>

cause the main thing it , it is run on the script there no body, that why i say that i use javascript language, so it work on script itself…basically is like i create a script

Thank you. Now that we have a known working example, it seem now that my updated code from post #10 does work after all.

All you need to do from there is to add the link path to your data list, which was also mentioned in the same post.

Oh great, they must be global variables that dojo uses. That’s one of the dangers that I face when trying to help with something that I’m not familiar with.

Yes, leave those in, but don’t define them as variables. Just leave them at the top of the function, as in the working example.

The code in post #10 has been updated to reflect this change.

hey can u show me how your data is change cause after i change and i click on the link, it promot me this error…
Server Error in ‘/’ Application.

The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

the data shld change to this
identifier: ‘name’,
items: [{
name: ‘www.google.com.sg’,
aisle: ‘Mexican’,
price: 3.01
},
identifier: ‘name’,
items: [{
name: ‘www.google.com.sg’,
aisle: ‘Mexican’,
price: 3.01
},
or this
identifier: ‘name’,
items: [{
name: ‘http://www.google.com.sg’,
aisle: ‘Mexican’,
price: 3.01
},

so you can work it out right, can you click on the link , is there any error?
can show me how your code is like, cause i change the data but it give me this error above

There should be no need to make things as complex as in your sample.

This is the list of items from before the link change:


items: [{
    name: 'Adobo',
    aisle: 'Mexican',
    price: 3.01
},
{
    name: 'Balsamic vinegar',
    aisle: 'Condiments',
    price: 4.01
},
...

and this is the list of items with the added link:


items: [{
    name: 'Adobo',
    link: 'http://www.adobo.com/',
    aisle: 'Mexican',
    price: 3.01
},
{
    name: 'Balsamic vinegar',
    link: 'http://www.balsalmic-vinegar.com/',
    aisle: 'Condiments',
    price: 4.01
},
...

thanks alot!!!done it…really appreciate your help
can i ask you a question regarding create dummy html page using the json format
i am wondering how can i put the json format data in the dummy html page?do you know?

You could display it on the HTML page in <pre> tags, if you wish to retain its formatting.

meaning that like this:

<pre>[ note
{
“id”: “1”,
“title”: “Family Dinner”,
“desc”: “Get together for family dinner!”
}
]</pre>

then how will be output look like?
cause this is the first time i have to use this way to retrieve the data
this counted as javascript?

The output will retain the spaces that perform the indent.

Nope, that is just HTML text. You may need to be more explicit about what you require.

so the json is html is somethin like this to show out the output …
<pre>[ note
{
“id”: “1”,
“title”: “Family Dinner”,
“desc”: “Get together for family dinner!”
}
]</pre>
if i want the output
1
Family Dinner
Get together for family dinner!

Are you wanting a pretty way to display the JSON content?

kind of…so how shld i put the json format into html?can show me an example

I don’t know of an easy way to do that. JSON data is a data interchange format, designed for passing data between different sub-systems, rather than for being displayed as visual content.

so if i put as what you teach using <pre>
something like this
<pre>[ note
{
“id”: “1”,
“title”: “Family Dinner”,
“desc”: “Get together for family dinner!”
}
]</pre>
so will the data still out?

The data will be displayed on the page.