CODEWITHSUNDEEP
jqueryajax
Rajasekhar
Rajasekhar

Reputation: 2455

How to call ajax with in another ajax call using jquery?

Here once we enter a tag in text box, the images,titles and tags will be displayed,that should be fine.Once we enter any hyper link,that tag associated images,titles and tags should be displayed.Can any once help me how we can call ajax with in another ajax call. Here is my code.

$('#idSubmit').click(function(){  
  $('#image-container').html("");  
   var txtVal = $('#idText').val(); 
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {
                $.each(data.items, function(i, item) {      
                    if (item.media.m){
                        var container = $("<div/>");                        
                        var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                        var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                        var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);                                                                             
                        var imgTags1 = item.tags;
                        var imgTags1 = imgTags1.split(' ');                     
                        $.each(imgTags1, function( index, value ) {                                             
                           $('<span style="padding-left:4px;"/>').html($("<a>"+imgTags1[index]+"</a>").attr("href", imgTags1[index])).appendTo(container).click(function(data){
                              alert($(this).text());
                              displayTagImages(data);
                           });                                               
                        });                 
                        $("#image-container").append( container);                        
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });

function displayTagImages(data){
 var txtVal = data; 
 $('#idSubmit').click(function(){  
  $('#image-container').html("");    
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {
                $.each(data.items, function(i, item) {      
                    if (item.media.m){
                        var container = $("<div/>");                        
                        var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                        var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                        var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);                                                                                 
                        var imgTags1 = item.tags;
                        var imgTags1 = imgTags1.split(' ');                     
                        $.each(imgTags1, function( index, value ) {                                             
                           $('<span style="padding-left:4px;"/>').html($("<a>"+imgTags1[index]+"</a>").attr("href", imgTags1[index])).appendTo(container);                                           
                        });                 
                        $("#image-container").append( container);                        
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });
}

Here is jsfiddle

Upvotes: 0

Views: 114

Answers (1)

Andrew
Andrew

Reputation: 5340

I'm not sure I understand your point, but try this:

$('#idSubmit').click(function() {

    displayTagImages($('#idText').val());
});

function displayTagImages(data) {

    var txtVal = data;
    $('#idText').val(data);
    $('#image-container').html("");
    $.ajax({
        type : 'GET',
        url : "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + txtVal,
        data : "&lang=en-us&format=json&jsoncallback=?",
        success : function(data) {

            $.each(data.items, function(i, item) {

                if (item.media.m) {
                    var container = $("<div/>");
                    var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                    var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                    var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);
                    var imgTags1 = item.tags;
                    var imgTags1 = imgTags1.split(' ');
                    $.each(imgTags1, function(index, value) {

                        var txt =  imgTags1[index] ;
                        $('<span style="padding-left:4px;"/>').html($("<a>" + imgTags1[index] + "</a>").attr("href", imgTags1[index])).appendTo(
                                container).click(function(data) {

                            displayTagImages(txt);
                            return false;
                        });

                    });
                    $("#image-container").append(container);
                    if (i == 9)
                        return false;
                }
            });
        },
        dataType : 'jsonp'
    });
}

http://jsfiddle.net/rooseve/r3vYW/4/

Upvotes: 1

Related Questions