Access jqgrid inside an iframe

Question

I have a jsp that contains an iframe and a button. The iframe contains a jqgrid. I need to alert the record count of jqgrid inside that iframe when the button is pressed.

I tried

var grid = jQuery("#myFrame").contents().find("#myGrid");
var count = grid.jqGrid('getGridParam', 'reccount');
alert(count); //alerts undefined

How can I access jqgrid from an iframe?

UPDATE:

HTML fragments

    <body>
        <iframe 
            frameborder="0" name="myFrame" id="myFrame" width="100%"
            height="290px" scrolling="no"
            src="myFrameContent.jsp">
        </iframe>
       <form action="frameAction" method="post" target="myFrame">
           <button>refresh table</button> 
       </form>
    </body>

When the button is pressed the form will be submitted then the iframe will be reloaded with the json string (response) as the jqgrid's data. as per Olga's answer I tried putting

$(function(){
        $("#myFrame").load(function(){         
            var grid = $("#myFrame").contents().find("#myGrid");           
            var count = grid.jqGrid('getGridParam', 'reccount');          
            alert("count=" + count);     
        });
    });

in the parent jsp, it still alerts undefined. what am I missing?

Is the iframe displaying content from the same domain as your web page? — codebox, Sep 10 '12 at 07:01
var grid = jQuery("#myGrid"); try this way no need to get influence from iframe.... — Jigar Pandya, Sep 10 '12 at 07:04

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

Probably you have the same origin problem at the accessing to the iframe content. Look at here and here.

UPDATED: Probably the problem is that you try to access the content of the iframe before it will be loaded.

On the demo which works

$(function () {
    $("#myFrame").load(function() {
        var $grid = $(this).contents().find("#list"),
            count = $grid.jqGrid('getGridParam', 'reccount');

        alert("count=" + count);
    });
});

(I used #list instead of #myGrid which you use because of another id of grid in the iframe which I loaded) I use jQuery.load to be sure that I access grid from the iframe only after the iframe is loaded. The corresponding HTML is below:

<body>
    <iframe id="myFrame" src="textareaedit.htm"></iframe>
</body>

edited May 23 '17 at 10:34

Community

1
1

answered Sep 10 '12 at 08:40

Oleg

220,925
34
403
798

the parent and the iframe content are coming from the same protocol://domain:port so same origin policy is not the problem. – Jemp Sep 10 '12 at 09:19
@Bnrdo: Could you include HTML fragments which describes the problem more details. Do you have static IFRAME or create it dynamically? Do you sure that you try to access the content of IFRAME *after* it is loaded? – Oleg Sep 10 '12 at 09:30
@Bnrdo: I posted [the demo](http://www.ok-soft-gmbh.com/jqGrid/iframe.htm) inside the **UPDATED** part of my answer. – Oleg Sep 10 '12 at 09:42
Yours is working. I don't know why mine isn't. I did the same. Still returning 'undefined' `$(function(){$("#myFrame").load(function(){` `var grid = $("#myFrame").contents().find("#myGrid");` `var count = grid.jqGrid('getGridParam', 'reccount');` `alert("count=" + count);` `});` `});` – Jemp Sep 10 '12 at 09:53
@Bnrdo: I am not sure. Probably you use wrong DOCTYPE which not allows `iframe`? Look at [another demo](http://www.ok-soft-gmbh.com/jqGrid/iframe1.htm) which uses XHTML 1.0 Transitional instead of XHTML5. In any way you should compare my demo with your more detailed. You can also post the demo which reproduce the problem. You can prepare the demo in http://jsfiddle.net/ if you have problem with publishing your demo. – Oleg Sep 10 '12 at 10:13
@Bnrdo: You should use `$("#cposFrameSearchTable").load` instead of `$("#myFrame").load` because the `"cposFrameSearchTable"` is the ìd of the `` in your demo. – Oleg Sep 10 '12 at 10:17
I think I can't show the full demo since I'm using server response to form the jqgrid (data). I'm not actually used to client side scripting. Maybe I'm just missing something. Thank u for ur time. – Jemp Sep 10 '12 at 10:23
i changed my update. ID is not my problem. I just forgot to change it in my update. – Jemp Sep 10 '12 at 10:34
@Bnrdo: every time you post one more bit of important information. How you can see I used *local* grid in my demo. If you would use the grid in the frame which loads the data from the server you could have 0 as the result. Additionally it could be one more problem: `$("#myFrame").contents().find("#myGrid")` could returns pure `` element which **not yet converted to grid** by javascript from the frame `myFrameContent.jsp`...
– Oleg Sep 10 '12 at 11:30
@Bnrdo: ... So the call of `grid.jqGrid('getGridParam', 'reccount')` can return `undefined` because of validation in [the line](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.base.js#L655) – Oleg Sep 10 '12 at 11:30

score 0 · Answer 2 · answered Sep 10 '12 at 07:39

0

If you are using iframe with same domain then it may be useful but if you are using cross domain then you can't access inner html / content.

var $frame = document.getElementById("myFrame");
var $frameContent = frm.contentWindow || frm.contentDocument;

alert($frameContent.document.getElementById("myGrid"));
console.log($frameContent.document.getElementById("myGrid"));

answered Sep 10 '12 at 07:39

Krishna Kumar

2,101
1
23
34

gives me an error when im doing `var s = grid.jqGrid('getGridParam', 'reccount');` where `grid = $frameContent.document.getElementById("myGrid");` 'null' is null or not an object – Jemp Sep 10 '12 at 08:04
are you using cross domain iframe? – Krishna Kumar Sep 10 '12 at 08:38
the parent and the iframe content are in the same folder. – Jemp Sep 10 '12 at 09:12
make sure that you have an element with id="myGrid" inside iframe, because it's working for me. and you are writing this code in parent page. – Krishna Kumar Sep 10 '12 at 09:18
I have a table with id "myGrid" inside my iframe. Maybe the problem is the page doesn't know that what I'm getting is a 'jqgridized' table that's why when I'm doing `var s = grid.jqGrid('getGridParam', 'reccount');` it returns an error? PS: I included jqgrid plugin in both of my jsp. – Jemp Sep 10 '12 at 09:23

Access jqgrid inside an iframe

2 Answers2