Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have two aspx Web form List.aspx & Link.aspx in a ASP.net C# Web App.
The first one is for listing all blog articles.

The second one is for linking all unlinked articles in the article index. This article index is a place where I maintain article hierarchy which gets displayed via a treeview control on a different page.

These article are getting listed on the form by using an DataList control in ASP.net. These articles are stored in SQL Server 2012 database table.

HTML
<div class="list_result_small shadow" data-aid="1">
  <div class="list_logo">
    <a title="Click to view details" href="../ViewDetails.aspx?aid=1" target="_blank"><img class="logo" alt="" src="../css/images/logo-192x192.png"></a>
  </div>
  <div class="list_detail_small">
    <span class="list_field">Article Title : Test</span><br>
    <span class="list_field">Article Author : </span><span class="black-text">Author Names as CSV</span><br>
    <span class="list_field">Article Category : </span><span class="black-text">Category Names as CSV</span><br>
    <span class="list_field">Article Tag : </span><span class="black-text">Tag Names as CSV</span><br>
    <span class="list_field">Created Date : 21 Nov 2015 13:07:22</span><br>
    <span class="list_field">Updated Date : 21 Nov 2015 13:08:11</span><br>
    <span class="list_field">Article Status : </span><span class="astatus span-yes">Published</span><br>
    <span class="list_field">Version : 1</span><br>
    <span class="list_field">Is Article Linked to Index : </span><span class="alinked span-no">No</span><br>
    <span class="list_field">Is Subscribable : </span><span class="suballow span-yes">Yes</span><br>
    <span class="list_field">Is Active : Yes</span><br>
    <span class="list_field">Is Subscribed : </span><span class="allow span-yes">Yes</span><br>
    <span class="list_field">Description : Test</span>
  </div>
  <div class="list-buttons">
    <div class="list-action shadow pub-button unpublish">
      <a id="id-1" href="java<!-- no -->script:void(0);" class="list-action-all pub-link unpublish-link">Unpublish</a>
    </div>
    <div class="list-action shadow subscribe-button unsubscribe">
      <a id="aid-1" href="java<!-- no -->script:void(0);" class="list-action-all unsubscribe-link">Unsubscribe</a>
    </div>
    <div class="list-action shadow">
      <a href="../CMS/Read.aspx?aid=1" class="fancybox list-action-all" data-fancybox-type="iframe">Read</a>
    </div>
    <div class="list-action shadow">
      <a href="../CMS/ViewDetails.aspx?aid=1" target="_blank" class="list-action-all">View</a>
    </div>
    <div class="list-action shadow">
      <a href="../CMS/Update.aspx?aid=1" target="_blank" class="list-action-all">Update</a>
    </div>
    <div class="list-action shadow unlink-button link">
      <a id="lid-1" href="../CMS/Link.aspx?aid=1" class="list-action-all unlink-link alink fancybox-link" data-fancybox-type="iframe">Link</a>
    </div>
  </div>
</div>


When I click on the fancybox-link anchor tag an fancybox iframe overlay opens up the second web form Link.aspx within it. In the Link.aspx web form users perform an ajax request to link article to appropriate article index.

What i want to achieve is that on ajax success in the Link.aspx web form I want to call the javascript function declared in the List.aspx page in the head section.

I completely assure you that there is no cross origin error as both pages are on the same domain.

The code that i tried is as follows.
JavaScript
$.ajax({......
.......the usual parameters
success: function(response){
    if(response.d == 'success'){
       parent.ParentFunction(boolVal,stringval);
    }
},
error:function(){
alert('Error occured while linking article');
}


This method is not working as it throws an error which says 'Uncaught TypeError parent.ParentFunction is not a function'

Note : The ParentFunction() is declared within the $(document).ready() function on the List.aspx page.

Kindly advise on how to call js function from within the iframe.

Thanks in advance.
Posted
Updated 23-Nov-15 7:17am
v2

Christopher Fernandes wrote:

The ParentFunction() is declared within the $(document).ready() function on the List.aspx page.

So you have something that looks like this?
JavaScript
$(document).ready(function(){
    
    function ParentFunction(){
        ...
    }
    
});

If that's the case, the ParentFunction is only available to other code in the same scope. Anything outside of that $(document).ready(...) block won't be able to call the function.

If you need the function to be available from the global scope, then you need to either move the declaration outside of the $(document).ready(...) block, or explicitly declare it in the global scope:
JavaScript
$(document).ready(function(){
    
    window.ParentFunction = function ParentFunction(){
        ...
    }
    
});
 
Share this answer
 
Comments
Christopher Fernandes 23-Nov-15 14:19pm    
will this work for js functions with parameters?
Richard Deeming 23-Nov-15 14:22pm    
Yes, this will work for functions with parameters.
window.ParentFunction = function ParentFunction(foo, bar, ...) { ... }
Christopher Fernandes 23-Nov-15 14:20pm    
does parent.ParentFunction(); work or is there another way?
Richard Deeming 23-Nov-15 14:22pm    
Try it and see.
Christopher Fernandes 23-Nov-15 14:55pm    
Same error even on moving the ParentFunction outside dom.ready() and inside dom.ready()
In the parent document do this
JavaScript
$(document).ready(function(){ 
    window.ParentFunction = function ParentFunction(boolVal,stringval){
        ...
    } 
});


In the Iframe do this in ajax
JavaScript
$.ajax({......
.......the usual parameters
success: function(response){
    if(response.d == 'success'){
       window.parent.ParentFunction(boolVal,stringval);
    }
},
error:function(){
alert('Error occured while linking article');
}


Thanks a lot Richard Deeming for all your help. Cheers :)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900