modifying main view from inside partial view

Question

I have a main view that let's say has the following:

<div id='test'>Some Text</div>

<div id='placeholder'></div>

then using ajax I'm replacing the contents of 'placeholder' with a partial view that looks like this:

<div id='ajaxContent'>
 // new content
</div>

<script>
 $(document).ready(function() {
  console.log($('#test').text());
  $('#test').css('color','red');
 });
</script>

so in my script I'm trying to change the color of the text in div 'test' to red, but I keep getting 'undefined' in the console. How do I access the test div in the main view from the partial view coming into the main view through ajax?

If they're ending up on the same page, shouldn't the html elements be able to see each other?

Run your script in the complete or success callback of the AJAX call that puts content into main view. — marekful, Dec 11 '14 at 16:21
@MarcellFülöp I don't want to do that, I have my reasons, I need to do it inside the partial — Abdul Ahmad, Dec 11 '14 at 16:22
Using document.ready() may be the issue - I'm not sure if that fires when you add new content after the main document is already ready. You should be able to simply include the script without wrapping it in document.ready() at that point. — Alan, Dec 11 '14 at 16:23
@Alan it does fire, I have other test logs which are working that are inside the document ready function and firing when the partial view loads — Abdul Ahmad, Dec 11 '14 at 16:24
OK, guess it's not that then. You definitely don't have another element with the ID 'test'? The fragment you've posted certainly looks like it should work. — Alan, Dec 11 '14 at 16:28
nope, its just one div with that ID, its really strange that it's not working — Abdul Ahmad, Dec 11 '14 at 16:29
@Alan I take that back, those logs were actually on click handlers, not directly inside the document.ready, you're right, document.ready doesn't fire, but I put the same log inside of the click handlers that I have and they're still logging 'undefined' to the console — Abdul Ahmad, Dec 11 '14 at 16:38
The problem must be somewhere else. Could you try, before you make the Ajax call to fetch the partial, adding in: console.log($('#test').length); , and see what result you get? - Edit: looks like the answer was jQuery messing with script tags. nm :) — Alan, Dec 11 '14 at 16:46

score 2 · Accepted Answer · edited May 23 '17 at 12:20

Your JavaScript fragment is simply removed by jQuery on html(...) call. A similar issue can be found here: jQuery .load() / .ajax() not executing javascript in returned HTML after appended

Thus, you have to insert partial data in this manner (assuming you have your partial respone in result variable):

$(result).find('#ajaxContent').appendTo('#placeholder');
$(result).find('script').appendTo('#placeholder');

Also, as @RolandBertolom said before, you don't need ready() in your partial response in JavaScript.

score 1 · Answer 2 · answered Dec 11 '14 at 16:36

You actually do not need to use $(document).ready. It's just useless. But it shouldn't break anything. As well as you can access any element on the page from script inserted anywhere in the same document. So problem is somewhere out your question's scope.

Try:

run $('#test').text() from console.
replace $('#test').text() with $('body') or something else in your script.
...

Be deductive when you debugging! ;-)

score 0 · Answer 3 · answered Dec 11 '14 at 16:47

you should not be using $(document).ready again because you document will already loaded with main page so again using it wont help. try like this: suppose this is your test.php:

<script>
jQuery(document).ready(function() {

     $.ajax({
            type:'post',
             url:'submit.php',
             success:function(data) {
                 $('#placeholder').append(data);
             }
     });

    });

</script>


        <div id='test'>Some Text</div>

    <div id='placeholder'></div>

//this is your submit.php the content to replace

<?php
echo "<div id='ajaxContent'>

</div>

<script>
$(function(){
    console.log($('#test').text());
    $('#test').css('color','red');
});
</script>";
 ?>

NOTE: what i exactly mean here is use:

 $(function(){
        console.log($('#test').text());
        $('#test').css('color','red');
    });

in script.

modifying main view from inside partial view

3 Answers3