Combine two jQuery AJAX scripts

Question

I dont know if this is possible because I'm pretty new to JSON and jQuery. These are my two scripts:

$.getJSON('http://shop.com/test/?format=json', function(data){
  $.each(data.textpage, function(index, text){
    $('<div></div>').html('' + text + '').appendTo('.verzendkosten');
  });
});

and

$.getJSON('http://shop.com/vraag/?format=json', function(data){
  $.each(data.textpage, function(index, text){
    $('<div></div>').html('' + text + '').appendTo('.eigenschappen');
  });
});

Is it possible to combine these two? Both scripts work but I'm curious how or if these can be combined.

What exactly do you mean by "combine"? You are making two requests to two different URLs. You cannot make one request out of this. And JSON does not seem to be of any relevance here. — Felix Kling
– Felix Kling, Commented May 28, 2012 at 2:21

Shyju · Accepted Answer · 2012-05-28 15:42:47Z

1

Not sure what you mean by combining. I am assuming you would like to get rid of the duplcate code in both the snippets.

Wrap this into a generic re-usable function and pass the page name and class name as parameter

function DoSomethingGreat(page,targetClass)
{
   $.getJSON('http://shop.com/'+page+'/?format=json', function(data){
     $.each(data.textpage, function(index, text){
       $('<div></div>').html('' + text + '').appendTo(targetClass);
     });
   });
}

and Call it like

DoSomethingGreat('test','.verzendkosten')

and

DoSomethingGreat('vraag','.eigenschappen')

wherever applicable

EDIT : As per the comment,

If you want to execute these when some page loads, Use the jQuery dom ready function.

Put this in the page where you want to call it

$(function(){
   DoSomethingGreat('vraag','.eigenschappen')
});

edited May 28, 2012 at 15:42

answered May 28, 2012 at 2:23

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

11 Comments

Meules Over a year ago

What I mean with combining is indeed the duplicate code! I was wondering that when both functions "look" the same it should be possible to combine those.

Meules Over a year ago

@ Shyju: I'm trying this one out and looks like the best working solution provided. But how do I call the function on the specific page? Probably a silly question :( I've places the code in a "main.js" file. But how do I fire the function on different pages?

Shyju Over a year ago

bind it to your controls. When do you want to invoke this function ? On a button click ? dropdown option change ?

Meules Over a year ago

No just when the page is opened! For example when I open a product page then DoSomethingGreat('test','.verzendkosten') should be placed in a tabpage called shipping costs. When I open eg. a FAQ page then DoSomethingGreat('vraag','.eigenschappen') should be displayed. And so on... What exactly do you mean with "bind it to your controls"? Do you have an example maybe? Anyway thanks for helping me out, you already gave me lots of interesting information!

Shyju Over a year ago

@JaapVermoolen: Use Dom ready event. Check my updated answer.

|

cranz · Accepted Answer · 2012-05-28 02:23:08Z

0

Have a look at http://api.jquery.com/jQuery.when/

You will be able to use their example to achieve this, something like:

$.when(
    $.getJSON('http://shop.com/test/?format=json'),
    $.getJSON('http://shop.com/vraag/?format=json')
).then(function () {
    // Do stuff with data
});

the function defined with .then() will execute once both the getJSON calls have completed.

This is assuming you want to 'combine' the data returned from both

answered May 28, 2012 at 2:23

cranz

1262 bronze badges

1 Comment

Meules Over a year ago

I will give this a try! Thanks for your answer and I will let you know if this worked

Ja͢ck · Accepted Answer · 2012-05-28 02:23:21Z

0

If your server can combine both responses into one, then yes. Otherwise, you would need to use the Deferred feature in jQuery.

The response could be like this:

{"data": {
    "kosten": "whatever you would have returned from /test/",
    "eigenschappen": "whatever you would have returned from /vraag/"
}}

Then your JavaScript can access those:

$.each(data.kosten.textpage, ...)

$.each(data.eigenschappen.textpage, ...)

answered May 28, 2012 at 2:23

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Comments

Digitalis · Accepted Answer · 2012-05-28 02:23:57Z

0

Okay, combining the scripts may be done in a number of different ways. The most simply solution being to make the variable part of the request url really variable in the script.

It does, however depend on what you're looking for as a result.

answered May 28, 2012 at 2:23

Digitalis

5702 silver badges12 bronze badges

1 Comment

Digitalis Over a year ago

The solution I was going to suggest is the one Shyju pasted below. Saves me some time anyway ;) Good luck mate.

Collectives™ on Stack Overflow

Combine two jQuery AJAX scripts

4 Answers 4

11 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related