Using JQuery.Ajax to change content in another file

I am using an iFrame in my application that allows the user to upload a CSV file that contains information about new countries that will be added to the database. I want that once the CSV file has been processed in the database, the existing select box that shows the current countries from the database should be updated with the newly added CSV files.

I am making an 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 the content of this file from the file that is in the iFrame (upload.php). If not, what might be the best solution

+3


source to share


1 answer


If you want to access the parent window inside the iframe you must 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 want to change 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>");
    }

      

+1


source







All Articles