0

I have a site with multiple Webparts. Some Webparts are linking on the same .html file. The HTML file reads data from a list and displays it in a table by using javascript. My problem is that there is displayd only one table, the other (same)Webparts aren't displayd.

How can I solve this problem?

    <html>
<head><title>test import list</title></head>
<body>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(mainFunction, "sp.js");
        var typeNumber = "1520";
        try {
            function mainFunction() {
                var clientContext = new SP.ClientContext.get_current();
                var oList = clientContext.get_web().get_lists().getByTitle('Projectstatus');
                //empty caml cause of some errors with lookup fields
                var emptyCamlQuery = new SP.CamlQuery();

                this.collListItem = oList.getItems(emptyCamlQuery);
                clientContext.load(this.collListItem);
                clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
            }

            function onQuerySucceeded() {
                var listItemInfo = '';
                var i = 0;
                var oListItem = "";
                var statusArray = new Array(3);
                var listItemEnumerator = collListItem.getEnumerator();

                while (listItemEnumerator.moveNext()) {
                    oListItem = listItemEnumerator.get_current();
                    if (oListItem.get_item('Title').match(typeNumber)) {
                        statusArray[i] = oListItem.get_item('Status');
                        i++;
                        //not nice! but it works, i'll fix it when everything is working fine
                        if (i > 2) {
                            break;
                        }
                    }
                }
                var tableOutput = "<table border=" + "'" + "1" + "'" + "><tr><th>Type</th><th>Status</th></tr>" +
                                "<tr><td>1</td><td>" + chooseColor(statusArray[2]) + "</td></tr>" +
                                "<tr><td>2</td><td>" + chooseColor(statusArray[1]) + "</td></tr>" +
                                "<tr><td>3</td><td>" + chooseColor(statusArray[0]) + "</td></tr>" +
                            "</table>";
                document.getElementById("testDiv").innerHTML = tableOutput;
            }

            function onQueryFailed() {
                alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }

            function chooseColor(color) {
                if (color == "Red") {
                    return "<img src=" + "images/red.png" + ">";
                }
                if (color == "Yellow") {
                    return "<img src=" + "images/yellow.png" + ">";
                }
                if (color == "Green") {
                    return "<img src=" + "images/green.png" + ">";
                }
            }
        } catch (e) {
            alert(e);
        }
    </script>
    //Problem could be here, cause both Webparts using the same id?
    <div id="testDiv" />
</body>
</html>
Improve this question
5
  • How are you creating the web parts? Are they custom ones or the Content Editor or HTML Form?
    – David Lozzi
    Commented Apr 22, 2013 at 13:00
  • these are Content Editor Webparts with a simple link to the Html file. the code of the file is below
    – mbauer
    Commented Apr 22, 2013 at 13:10
  • how are you selecting data to load into each web part? i.e., if you have 2 web parts, one loads customers, one loads products, how do you differentiate between the two within the same code file?
    – David Lozzi
    Commented Apr 22, 2013 at 13:21
  • the webparts are the same, only the typeNumber is different and the information is in dependence of the typeNumber.
    – mbauer
    Commented Apr 22, 2013 at 13:41
  • Ah so you have two separate files, one for each?
    – David Lozzi
    Commented Apr 22, 2013 at 13:51

2 Answers 2

Reset to default
1

As you noted in your code

//Problem could be here, cause both Webparts using the same id?
<div id="testDiv" />

You're right, the same ID is used twice. Change the ID, maybe match the typeNumber, and you should be good to go!

Improve this answer
2
  • Actually I want to use only one Html file. Is there a possibility to generate the id for each webpart individually?
    – mbauer
    Commented Apr 22, 2013 at 14:04
  • I dont think there is. You could look at it like grabbing all of your divs, then iterate through the collection, but there would be no easy way to know which is which without significant DOM traversal. I.e.: grab the divs, $("#testDiv"), then look through, ").each(function() {, and then traverse up to grab a property you can use to identify the data. HTH
    – David Lozzi
    Commented Apr 22, 2013 at 14:22
1

I must say is rather dificult to provide an exact resolution to such an issue as long as we do not know what's inside the HTML. On the other hand pasting the full HTML in here is not feasible either, but I would suggest you validate the logic within the source HTML and eventually either try to separate the logic into multiple functions which you would call via different parameters at least (basically move your logic in .js libraries to load from HTML and leave only the specific parts). Then create 3 similar HTML files with appropiate function parameters call.

Particulalry if you make use of jQuery and AJAX together, it might be the case that you need to use jquery.noConflict() calls to avoid overlapping calls.

document.getElementById("testDiv").innerHTML = tableOutput is actually replacing your output. you should create multiple DIVs with different IDs and maybe replicate the HTML or call the same function with the proper div ID differently.

Improve this answer
4
  • i started with javascript last week ;). the code is there: link
    – mbauer
    Commented Apr 22, 2013 at 13:07
  • sorry cannot access it - web washer restrictions!
    – Marius Constantinescu
    Commented Apr 22, 2013 at 13:14
  • I edited the question above.
    – mbauer
    Commented Apr 22, 2013 at 13:21
  • document.getElementById("testDiv").innerHTML is overriden always - i was suspecting right, see updated answer!
    – Marius Constantinescu
    Commented Apr 22, 2013 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.