Hi, I have the jquery dynamic append tag error

304
April 20, 2017, at 8:28 PM

This is my code,

I want to resize .modal-left or .modal-right But, function is not working. When i executed in the browser console, it worked.

I think this problem caused by dynamic append tag. What shoud i do?

Thanks for reading my problem.

 function getArtworkDetail(artwork_num){
    var modalMask = $('<div class="modalMask"></div>'); 
    var modalContent = $('<div class="modalContent"></div>');
    $.ajax({
        url : "/artwork/profile_portfolio?artwork_num="+artwork_num,
        type : 'get',
        success : function(data){
            $(modalContent).append(data);
        },error : function(e){
            console.log(e.responseText);
        }
    })
    $(modalMask).append(modalContent);
    $('.modal').append(modalMask);
    $('.modalMask').css('height',$('body').height()+38);
    console.log($('.detail-left'));
    if($('.detail-left').height() > $('.detail-right').height()){
        $('.detail-right').css('height',$('.detail-left').height()+'px');
    }else{
        $('.detail-left').css('height',$('.detail-right').height()+'px');
    }
}
Answer 1

Please keep in mind that Ajax Call is by default asynchronous call ... so in your case code which is out side success method will execute first after that your ajax call get response and it will run success method of your ajax call .

So solution is that ... you have to put your code into ajax success method as below.

Put your code into success method as below.

$.ajax({
    url : "/artwork/profile_portfolio?artwork_num="+artwork_num,
    type : 'get',
    success : function(data){
        $(modalContent).append(data);
        $(modalMask).append(modalContent);
        $('.modal').append(modalMask);
        $('.modalMask').css('height',$('body').height()+38);
        console.log($('.detail-left'));
        if($('.detail-left').height() > $('.detail-right').height()){
            $('.detail-right').css('height',$('.detail-left').height()+'px');
}
       else{
    $('.detail-left').css('height',$('.detail-right').height()+'px');
          }
        },error : function(e){
            console.log(e.responseText);
        }
});
Answer 2

Use as follows, remove extra '$'

$.ajax({
    url : "/artwork/profile_portfolio?artwork_num="+artwork_num,
    type : 'get',
    success : function(data){
        modalContent.append(data);
    },error : function(e){
        console.log(e.responseText);
    }
})
Rent Charter Buses Company
READ ALSO
Crop image to a fixed width and height ratio using html 5 canvas without uploading image to server before form submit

Crop image to a fixed width and height ratio using html 5 canvas without uploading image to server before form submit

I have a form that collects data from multiple text fields and also on the same form is a an input file field for selecting an image

296
How to load more data in datalist from array

How to load more data in datalist from array

I have an array of data which i have to show in datalistI want to load only limited data first and then load another limited data as scroll goes down

394
How to find and replace text in between two tags in HTML or XML document using jQuery?

How to find and replace text in between two tags in HTML or XML document using jQuery?

I want to find and replace text in a HTML document between, say inside the <title> tagsFor example,

436
Accordion issue in jquery

Accordion issue in jquery

when i open one slide it doesnot close second slide automaticallyhow can i solve it

297