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
source to share
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>");
}
source to share