Возможно ли иметь две функции обратного вызова с помощью jQuery.post()?

Question

Возможно ли это?

Как только мой jQuery.post будет успешным, а не только с одним обратным вызовом, у меня есть два.

Например

После того, как моя форма успешно отправил данные пустой DIV называется «#msg» дается стиль и содержание И пустой DIV называется «цвет-блок» дается стиль.

код до сих пор

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 
$('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 

    } 
    }); 
}); 

Любая помощь или указатели больш были бы оценены.

Вещи, которые я пробовал и не работал!

Добавление другого обратного вызова

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 


$('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax</div>"); 

$("#colour-block").html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>bla bla</div>"); 
    } 
    }); 
}); 

Используя интерфейс Promise

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
    var ajax = $.ajax({ 
     type : 'POST', 
     url : 'indextest1.php', 
     data : $("#form1").serialize() 
    }).done(function(response) { 

$("#msg").html('<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk</div>'); 

$("#colour-block").html('<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk</div>'); 
    }); 
    }); 
}); 

Answer 1

Просто сделай так:

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 
     $('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 
     $('.colour-block').css({/*css styles here*/}); 
    } 
    }); 
}); 

Answer 2

Если вы используете обещание и done, fail и always, вы можете добавить столько, сколько вы хотите, и вы можете делать столько, сколько хотите внутри каждого из них

$('#form1').submit(function(e) { 
    e.preventDefault(); 
    var ajax = $.ajax({ 
     type : 'POST', 
     url : 'indextest1.php', 
     data : $("#form1").serialize() 
    }).done(function(response) { 
      $('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 
      $('#msg2').text('something else'); 
      $('#msg3').css('color', 'red'); 
    }).done(function() { 
      $('.class').text('another callback') 
      $('.class').append('<p>Not sure why you would need it ?</p>') 
    }); 

    ajax.done(function() { 
     $('.class2').txt('This is the same') 
     $('.class3').txt('you can store it in a variable') 
    }); 

    ajax.fail(function() { 
     // this fires if something goes wrong 
    }); 

    ajax.always(function() { 
     // this always fires, both on success and failure 
    }); 
}); 

Answer 3

Вы можете обновить свой второй DIV в одной и той же функции.

Вы также можете попытаться экстернализации вашего CSS, и дать вашей внутренней DIVS некоторые ID (или класс, как вы хотите), чтобы их стиль:

success: function(response) { 
    //Create the inner div with the appropriate id, for css styling 
    var msg_inner = $('<div>',{id:'msg-inner', html:'Now sit back and relax...'}); 
    //Same thing for your colour-block div 
    var colour_block_inner = $('<div>',{id:'colour_block-inner', html:'Blah'});  

    $('#msg').append(msg_inner); 
    $('#colour-inner').append(colour_block_inner);  
} 

Со следующим CSS экстернализованный:

#msg-inner{ 
    border: 1px solid black; 
    padding:15px 50px 15px 20px; 
    width:437px; 
    border-radius: 8px; 
    background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center; 
} 

#colour-block-inner{ 
    /* Your future style here */ 
}