CODEWITHSUNDEEP
ajax
Dadu
Dadu

Reputation: 109

Ajax html response to div

Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working

Jquery script:

$(document).ready(function()
{  
    $('#upload').ajaxForm({
        beforeSubmit: function() {
            $('#Analysis').show();
            $('#Content_column').hide();
            $('#file_list').show();
            $('#trait').show();
            $('#trait').html('Submitting...');
        },
        success: function(data) {
            var $out = $('#file_list');
            $out.html('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFile list:');
            $out.append('<div id="list">');
            $('#list').html(data); 
            $out.append('</div>');
        }
    });
});

The output of this script is

<ul class="php-file-tree"><li class="pft-directory"><a href="#">Genotypic</a><ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory"><a href="#">Other</a></li><li class="pft-directory"><a href="#">Penotypic</a><ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>

Jquery script:

$('#Penotypic').click(function() {
   var $out1 = $('#trait');
   $('#trait').show();
   $out1.append('Submitted...');
});

this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this. Thanku

Upvotes: 0

Views: 377

Answers (1)

ZZ-bb
ZZ-bb

Reputation: 2167

You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.

I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name

Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().

Upvotes: 1

Related Questions