Question

I am using an iFrame in my application that lets user to upload a CSV file which has information about the new countries to be added into database. What I want is as soon as the CSV file is processed into the database the existing select box that shows current countries from the database should get updated with newly added entries of CSV file.

I am the making ajax call like

    $(document).ready(function(){
    jQuery.ajax({
        type: "POST",
        url: "get_all_countries.php",
        data: '',
        cache: false,
        success: function(response)
        {
            $("#all_countries_select_box").html("<select name='all_countries' id='all_countries' MULTIPLE size='8' style='min-width:250px;'>"+response+"</select>");
        }
    });
});

My only problem is the id ‘all_countries_select_box’ is in another PHP file called ‘manage_countries.php’. Is there a way to change content of that file from the file that is in iFrame (upload.php). If not, what could be the best possible solution

Answer 1

If you want to access the parent window from inside an iframe you should use window.parent

 success: function(response)
    {
        var parentJQuery = window.parent.jQuery;
        parentJQuery("#all_countries_select_box").html("<select name='all_countries' id='all_countries' MULTIPLE size='8' style='min-width:250px;'>"+response+"</select>");
    }

if the file you wantr to modify instead is inside an iframe you should do

 success: function(response)
    {

        $('#idoftheiframe').contains().find("#all_countries_select_box").html("<select name='all_countries' id='all_countries' MULTIPLE size='8' style='min-width:250px;'>"+response+"</select>");
    }