Passing variables to an IFRAME

[emma57573]

Im having trouble passing variables to PHP from an iframe.

 

The first URL variable is passed with no problem and the remainder are being ignored, any ideas?

 

 

 

<!-- Get MINI SHOP-->
<script src="http://www.mydomain.com/jquery.js"></script>
<span id="205" class="user_id"></span>
<span id="900" class="height"></span>
<span id="900" class="width"></span>
<span id="0" class="cid"></span>
<span id="0" class="ord"></span>
<script src="http://www.mydomain.com/widget.js"></script>
<div id="shop"></div>
<!-- END MINI SHOP-->






JS Code that opens the iframe

// JavaScript Document

$(document).ready(function(){

        var user_id = $(".user_id").attr("id");
        var width = $(".width").attr("id");
        var cid = $(".cid").attr("id");
        var ord = $(".ord").attr("id");
        var qty = $(".qty").attr("id");
        var height = $(".height").attr("id");
                


        var htmlStr = '<iframe src=http://www.mydomain.com/mini_shop.php?user_id='+user_id+'&width='+width+'&cid='+cid+'&ord='+ord+'" scrolling="no" frameborder="0" height="'+height+'" width="'+width+'"></iframe>';
        
        $("#shop").html(htmlStr);

});

 

 

 

[Kieran Menor]

That is a completely unacceptable use of the id attribute. May I suggest moving the value from the id attribute and into the tag? Why does it have to be done with span tags anyway?

[emma57573]

ah ok, Im not confident in Javascript. This is my first attempt at writing anything in Javascript thats not copy and paste! I will give that a go and see if it makes a difference.

 

Im still confused as to why it works for 'user_id' and none of the others when its passed in the same way.

[emma57573]

Ok so Ive rewritten this and its working and rendering at a much more acceptable level! yay!

 

HOWEVER although its working great. In some instances I may have users adding more than one widget to their blog/webpage however if I add more than one widget to a page only one will show!

 

I figured it was because the div's are named the same?

I have tried to rename the divs so that they are different for each widget but Im not getting the syntax correct:

 

I want to change $("#render").html(htmlStr);

 

To: $("#render'+user_id+'").html(htmlStr);

 

But that does not look or work correctly (sorry Javascript newbie!)

Im hoping thats the reason why it will not allow me to paste the widget more than once in the same document?? But im open to suggestions?

//HTML Snippit

<!-- START MY widget-->
<script src="http://www.mydomain.co.uk/jquery.js"></script>
<script type="text/javascript">
var user_id = 205;
var width = 238;
var cid = 0;
var text = 1;
var ord = 0;
var qty = 6;
    var thumbs = 0;
var FRAMEwidth = 245;
var FRAMEheight = 720;
</script>
<script src="http://www.mydomain.co.uk/widget.js"></script>
<div id="render"></div>
<!-- END MY widget-->








// JavaScript Document


$(document).ready(function(){

var htmlStr = '<iframe src="http://www.mydomain.co.uk/my_widget.php?user_id='+user_id+'&width='+width+'&qty='+qty+'&cid='+cid+'&ord='+ord+'&text='+text+'&thumbs='+thumbs+'" scrolling="no" frameborder="0" height="'+FRAMEheight+'" width="'+FRAMEwidth+'"></iframe>';


$("#render").html(htmlStr);

});

 

 

 

[emma57573]

Ok so Ive fixed that but it still will only allow me to display one widget per page. Any ideas how I can change change my sc ript to allow more than one widget to be shown?

 

 

Heres an update on how my code is looking:

Widgets:

<!-- START MY MISI-->
<script src="http://www.mydomain.co.uk/jquery.js"></script>
<script type="text/javascript">
        var user_id = 205;
        var width = 238;
        var cid = 0;
        var text = 1;
        var ord = 0;
        var qty = 6;
    var thumbs = 0;
        var FRAMEwidth = 245;
        var FRAMEheight = 720;
</script>
<script src="http://www.mydomain.co.uk/mini_misi.js"></script>
<div id="misi205"></div>
<!-- END MY MISI-->


<!-- START MY MISI-->
<script src="http://www.mydomain.co.uk/jquery.js"></script>
<script type="text/javascript">
        var user_id = 205;
        var width = 238;
        var cid = 0;
        var text = 1;
        var ord = 0;
        var qty = 6;
    var thumbs = 0;
        var FRAMEwidth = 245;
        var FRAMEheight = 720;
</script>
<script src="http://www.mydomain.co.uk/mini_misi.js"></script>
<div id="misi205"></div>
<!-- END MY MISI-->









/////////JAVASCRIPT FILE  mini_misi.js/////////////////




// JavaScript Document

$(document).ready(function(){

        var htmlStr = '<iframe src="http://www.mydomain.co.uk/mini_misi.php?user_id='+user_id+'&width='+width+'&qty='+qty+'&cid='+cid+'&ord='+ord+'&text='+text+'&thumbs='+thumbs+'" scrolling="no" frameborder="0" height="'+FRAMEheight+'" width="'+FRAMEwidth+'"></iframe>';
        
        
        $('#misi'+user_id+'').html(htmlStr);

});