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

Question

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

Andrew · Accepted Answer · 2013-12-10 09:32:23Z

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/

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related