Using jquery from parent in a child iframe

Question

i want to use jquery library in a child iframe. Parent window has included jquery library. This is the script that included in iframe

$p=parent.window.$;
$p(document).ready(function (){
        console.log($p('#bla').val()); 
        console.log($p('#searchedCity').val());
    }
);

$p('#bla').val() - this I'm trying to get value of input text field that is located in iframe. Now it returns undefined

$p('#searchedCity').val() - this is value of input text field from parent window. and it returns the right value

when I'm including jquery library directly to the iframe - $('#bla').val() works fine.

what am I missing? Can you help me?

Answer 1

I don't know if it does the same but try this :

console.log($('#bla', p).val()); 
console.log($('#searchedCity', p).val());

Answer 2

that is because your searching for elements $p('#bla') #bla in parent container. which is not present there..load jquery in current iframe and use $ ..

$p=parent.window.$;
$p(document).ready(function (){
    console.log($('#bla').val()); 
    console.log($p('#searchedCity').val());
   }
);

and yes you are calling these function when parent's document is ready which may not work as it should..

$(document).ready(function (){
    console.log($('#bla').val()); 
     $p=parent.window.$;
    console.log($p('#searchedCity').val());
   }
);

Answer 3

Try this:

$p=parent.window.$;
    $p(document).ready(function (){
        console.log($('#bla').val()); 
        console.log($p('#searchedCity').val());
    }
);