Possible to load data into a javascript file?

Question

I have a fly out javascript menu that is initialized using the onload event. All of the data inside the menu right now is hard coded but needs to be dynamic and will come from my database. Is there a way to build this javascript file with my database values? Is this possible? I'm a total noob to JS so please spell things out for me.

Maybe an example of what I'm thinking will help. This is part of my JQuery file after I have my serialized array. How do I get the array into the menu from here?

      if(data.success == 0) {
        // error
      } else {
        // my array that needs to be exported into the JS file.
      }

This is the other file that I'm talking about that needs to be built with the data from the database.

function create_menu()
{
  document.write(
    '<table cellpadding="0" cellspaceing="0" border="0" style="width:98%"><tr>' +
    '<td class="td" valign="top">' +

    '<h3>Test</h3>' +
    '<ul>' +
      '<li>afd</li>' +
      '<li>fsg</li>' +
      '<li>sfg</li>' +
      '<li>fsg</li>' +
    '</ul>' +
    '</td></tr></table>');
}

Justin Niessner · Accepted Answer · 2010-11-01 13:01:03Z

3

One option would be to build the JavaScript file dynamically on the server when a request comes in from the browser using one of the various server-side scripting languages. The downside to this method is that that browsers may cache the file and, therefore, may operate with stale data.

The other option is to use a static JavaScript file and use an AJAX call to get the latest menu options and then render them into the page's DOM. This would be better than the first option since you wouldn't have the caching concerns.

The third method is to dynamically generate the markup for the page and not worry about requesting a menu via JavaScript. This is the best option in my book. I wouldn't want to wait for the navigational elements of a page to be requested via JavaScript when it's something simple that should already be part of the page.

answered Nov 1, 2010 at 13:01

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jim Over a year ago

Hi Justin, The menu's data must be dynamic. We are using a fly out menu to show links and they will change every hour. Maybe #2 would be the best?

Justin Niessner Over a year ago

@Jim - If that's the requirement then #2 is best. I would be interested to know how you're going to set the refresh interval so the menu data gets updated when needed though.

Jim Over a year ago

I was thinking to use setTimeout. Is this not a good option? I guess I could use a cron for this but it's not the best solution. Can you recommend something else?

Justin Niessner Over a year ago

@Jim - You could use setTimeout easily enough. Are you going to let each page sit for a full hour before refreshing though? And what happens if the menu gets updated in that hour? I was thinking the users would refresh their pages frequently enough to make the third option viable even though the data changes.

Jim Over a year ago

Hmm.. Maybe I'm not understanding what you're explaining in option #3. What I understood was to dynamically build the links but make them pert of the page. I guess I'm confused. Maybe #3 is the best option. How do you see that working? It was the plan, yes, to refresh the page after an hour or so. I don't like that idea though.

Shamim Hafiz - MSFT · Accepted Answer · 2010-11-01 12:58:29Z

0

You need to use AJAX.

You can load the contents from back-end into a JavaScript array and use that. This is how dynamic data is fetched from the server without a page refresh. Hope this helps.

answered Nov 1, 2010 at 12:58

Shamim Hafiz - MSFT

22.2k44 gold badges122 silver badges183 bronze badges

8 Comments

Jim Over a year ago

OK, I'm using JQuery. Is there an example that you can show me or point me to?

Jim Over a year ago

Thanks for the link. I'm already a little familiar with JSON and have used a little but in the past. I can build the JS array but I'm lost after that. How would I get the data array into the menu?

Jim Over a year ago

The menu is a JS function that surrently uses document.write for the static content.

Shamim Hafiz - MSFT Over a year ago

You have to modify the code such a way that, prior to calling the document.write, the content that is being written should be placed inside a variable and then document.write needs to be called with it. You would need to know a bit on how to modify the codes. I hope you are comfortable with it.

Jim Over a year ago

Thanks Gunner. I'm great with server side code but not with JS. Please stick with me on this and tell me if I'm on the right track. I can build a JSON array with my data from the database. Once I have that data, I can use JQuery to export the data into the javascript file where I have the hard coded links. I'm lost after that however. Am I on the right track so far?

|

Gareth Davidson · Accepted Answer · 2010-11-01 16:45:05Z

0

JSON is a data format which can be executed using eval(). Create some JSON which represents whatever format you've hard-coded and evaluate it like in Wikipedia's example

This is only okay if you trust the source of the JSON, in this case you're generating it yourself so it should be okay.

example, json_menu.php returns the text:

create_menu( { "menus" : ["afd", "fsg", "sfg", "fsg"] } );

And you execute it like this by evaluating it:

function create_menu(JSONData)
{
    var s = '<table cellpadding="0" cellspaceing="0" border="0" style="width:98%"><tr>' +
'<td class="td" valign="top">'

    // loop through each one
    for(var menu in JSONData.menus)
        s = s + '<li>' + menu + '</li>';
    s = s + '</ul></td></tr></table>';

    // write it out
    document.write(s);
}

// this gets called somewhere in your OnLoad
function yourOnLoader()
{
    var ajaxRequest = new ajaxObject('http://your-site.com/json_menu.php');
        ajaxRequest.callback = function (responseText) { eval(responseText); }
    ajaxRequest.update();
}

edited Nov 1, 2010 at 16:45

answered Nov 1, 2010 at 13:01

Gareth Davidson

4,9572 gold badges28 silver badges45 bronze badges

4 Comments

Jim Over a year ago

Hi Gaz, so I would build a JS array and then how would I render that data into the menu?

Gareth Davidson Over a year ago

@Jim, how is it currently hard coded? Are you already using an array or some other structured data, just express the same data format in JSON

Jim Over a year ago

no, the links in the menu are hard coded in the javascript file and pushed out to the browser via document.write. Currently, there is no array but I can get a JSON array easy enough with all of my data from the database. My issue is how to get that data into the javascript file so as to render it to the user. U;m using JQuery but really am stuck at this point forward.

Gareth Davidson Over a year ago

@Jim, I've revised my answer to include an example.

Collectives™ on Stack Overflow

Possible to load data into a javascript file?

3 Answers 3

5 Comments

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related