0

what I want to achieve is that multiple divs in my view get fill up with different content using ajax at the same time when a button is clicked, let's say something like this:

view:

<div id="one">
</div>

<div id="two">
</div>

<div id="three">
</div>

div one, two and three should be refreshed with different content each one.

my script is:

$("input[type='button']").click(function(){
        var mail= $("#mail").val();
        var password = $("#password").val();

        $.ajax({
              url: '<?php echo base_url()?>index.php/login/theLogin',
              type: 'POST',
              data: {'mail':mail, 'password':password},
              success: function(data) {
                $('div#one').html(data);
                $('div#two').html(data);
                $('div#three').html(data);
            }
          });
      });

controller:

public function theLogin()
{

  $this->load->view("ajax/newContent");
}

newContent.php:

<div id="ajax-one">
one
</div>

<div id="ajax-two">
two
</div>

<div id="ajax-three">
three
</div>

and the result is obviously the three divs in my view get refreshed with three divs (9 divs in total), but I don't want that, I want that div one gets refreshed only with the content of div ajax-one and so on.

I used something like this in my ajax method but no success:

    success: function(data) {

                    $('#one').html($('#ajax-one' , data).html());
                    $('#two').html($('#ajax-two' , data).html());
                    $('#three').html($('#ajax-three' , data).html());

                }

What possible solution could exists to solve this? thanks.

0

2 Answers 2

2

I would replace the DIVs with the new DIVs. So if you have a parent DIV you can replace the whole thing with the new data.

Consider this being your initial view:

<div id="myWrapperDiv">
  <div id="one">
  </div>

  <div id="two">
  </div>

  <div id="three">
  </div>
</div>

When your data is returned do this:

$("#myWrapperDiv").html(data);

UPDATE:

Since that was not a good option for you I have come up with another possible solution. Personally I would return a JSON array that separated the DIVs, however, I will offer a suggestion to work with your current code. I would split the return into an array and process it from there.

Let me show you. In the below we split the data on the closing div tags with a limit of 3. Without the limit you will get an empty string at the end of your array. Then we replace the contents of your DIVs with the ajax DIVs. We have to add back the closing div tags since it was removed when we split the data. I hope this helps :).

var myArray = data.split("</div>",3);
$("#one").html(myArray[0] + "</div>");
$("#two").html(myArray[1] + "</div>");
$("#three").html(myArray[2] + "</div>");
4
  • No, I need it in that way for some other reasons, but thanks. Any idea? Nov 17, 2015 at 22:32
  • @user2580401 I have updated my answer. I hope it helps. Nov 18, 2015 at 14:17
  • What will happen if there are nested DIV in ajax response? Nov 18, 2015 at 14:22
  • @DeepakBiswal that would break the logic of course and is why I would use a JSON array return form the server. His example didn't have this situation. Nov 18, 2015 at 14:25
2

Here is a working fiddle. Change you response data to jQuery object. Hope this is what you need.

$("input[type='button']").click(function(){
    var data = '<div id="ajax-one"><span>one</span></div><div id="ajax-two">two</div><div id="ajax-three">three</div>';
    var $dataObj = $(data);
    $('#one').html($dataObj[0]);
    $('#two').html($dataObj[1]);
    $('#three').html($dataObj[2]);    
 });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.