CODEWITHSUNDEEP
javascriptphpjqueryhtml
user3006683
user3006683

Reputation: 783

display different divs from php in different place using jquery

I am sending a form using jquery and I would like to display the html response from the php page in different places. What I mean is like I am echoing different div's and I would like to display one div on one place and the other on another.

html

 <div id="error"></div>

js

   success: function(response) 
        {   

    $("#error").fadeIn('slow').html(response);//this displays both divs on same place
        }

php 

 if(){
    echo "<div id='alert_one'>Hi there</div>"; 
    echo "<div id='alert_two'>Something</div>";
    }

can I do something like

    success: function(response) 
        {   

         $("#div_1").fadeIn('slow').html('div_id_from_php');
       $("#div_2").fadeIn('slow').html('div_id_from_php');
        }

    <div id="div_1"></div>
    <div id="div_2"></div>

Upvotes: 0

Views: 100

Answers (3)

AyB
AyB

Reputation: 11665

You can also do so this way:

on your PHP:

if(){
    $resp['div1']=  "<div id='alert_one'>Hi there</div>"; 
    $resp['div2']=  "<div id='alert_two'>Something</div>";
    }
echo json_encode($resp);

jQuery:

success: function(response) 
        {   
           data = jQuery.parseJSON(response);
           $("#div_1").fadeIn('slow').html(data.div1);
           $("#div_2").fadeIn('slow').html(data.div2);
        }

Upvotes: 0

ArC
ArC

Reputation: 11

Surely you can. Just position the divs according to your need. Try to add jquery css() method for positioning. eg :

$("#div_1").css("padding-top","20px");

for details please see: http://api.jquery.com/css/

Upvotes: 1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Yes, with this:

success: function(response)    
{   
   var $divs = $("<div>" + response + "</div>");    
   $("#div_1").fadeIn('slow').html($divs.find("#alert_one").html());
   $("#div_2").fadeIn('slow').html($divs.find("#alert_two").html());
}

Or like this (probably cleaner):

success: function(response)    
{   
   var $divs = $("<div>" + response + "</div>");    
   $("#div_1").fadeIn('slow').empty().append($divs.find("#alert_one"));
   $("#div_2").fadeIn('slow').empty().append($divs.find("#alert_two"));
}

Cheers

Upvotes: 2

Related Questions