How to identify form elements in an IFRAME

StackOverflow https://stackoverflow.com//questions/9611881

Question

I am trying to determine if the value in a <input type="text"> and the value in a <textarea> changes so I can launch an AJAX call to the server. The script simply loops through and shows me every id and not just the ones in the current IFRAME.

I know how to do the AJAX call and the backend scripting, I just can't figure out how to capture if the value of the form elements change in any given prettyPhoto IFRAME. My prettyPhoto frames are created dynamically and there are over 800 elements in the FORM.

I have the following jQuery:

jQuery.support.cors = true; // Needed for AJAX to work in certain older browsers and versions

$(document).ready(function(){

    // load each PP Frame
    $('a[rel^="prettyPhoto"]').prettyPhoto({
        social_tools: false,
        changepicturecallback: function() {
            var abc = $('input.inputText').val();
            alert(abc);
        }
    });

}); // end .ready()

Any thoughts or help is tremendously appreciated.

<form id="my-form" name="my-form"><div class="rowhighlight" style="clear:both">

<div style="clear:both">
    <p style="float:left;width:40px;text-align:right;background-color:inherit;margin:0;padding:0;margin-left:60px;padding-right:10px;"><a href="#n0076-1" rel="prettyPhoto[n0076]" title="App Title<br />2012">76</a></p>
    <div style="display:none;">
        <a href="#n0076-2" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
        <a href="#n0076-3" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
        <a href="#n0076-4" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
    </div>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 76</p>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 76-A<span style="font-size:0.8125em;padding-left:8px;">(Type)</span></p>
    <p style="float:left;width:180px;background-color:inherit;margin:0;padding:0;color:inherit;">3/1/12 at 10:22am (Thu)</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;">0</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;padding-right:10px;">0.00</p>
</div>

<div id="n0076-1" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>

<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 1-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_1" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_1" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 1-->
<div style="clear:both;"></div></div> <!-- end 0076-1 -->
<div id="n0076-2" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 2-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_2" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_2" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 2-->

<div style="clear:both;"></div></div> <!-- end 0076-2 -->
<div id="n0076-3" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 3-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_3" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_3" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 3-->
<div style="clear:both;"></div></div> <!-- end 0076-3 -->
<div id="n0076-4" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>

<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>

</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px"><span class="ltOrange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</span></div><div style="clear:both;border-bottom:1px solid #ccc;padding-top:20px;"></div></div> <!-- end 0076-4 -->
<div class="rowhighlight" style="clear:both">

    <p style="float:left;width:40px;text-align:right;background-color:inherit;margin:0;padding:0;margin-left:60px;padding-right:10px;"><a href="#n0108-1" rel="prettyPhoto[n0108]" title="App Title<br />2012">108</a></p>
    <div style="display:none;">
        <a href="#n0108-2" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
        <a href="#n0108-3" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
        <a href="#n0108-4" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
    </div>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 108</p>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 108-A<span style="font-size:0.8125em;padding-left:8px;">(Type)</span></p>
    <p style="float:left;width:180px;background-color:inherit;margin:0;padding:0;color:inherit;">3/2/12 at 11:12pm (Fri)</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;">0</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;padding-right:10px;">0.00</p>
</div>

<div id="n0108-1" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 1-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_1" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_1" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 1-->

<div style="clear:both;"></div></div> <!-- end 0108-1 -->
<div id="n0108-2" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 2-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_2" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_2" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 2-->
<div style="clear:both;"></div></div> <!-- end 0108-2 -->
<div id="n0108-3" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>

<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>

</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 3-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_3" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_3" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 3-->
<div style="clear:both;"></div></div> <!-- end 0108-3 -->
<div id="n0108-4" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 4-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_4" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_4" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 4-->

<div style="clear:both;"></div></div> <!-- end 0108-4 -->

</div></form>

P.S. I know how to use style sheets and will move all styles into a sheet once I finish developing. I have a knack (bad habit maybe) of inline styling during development because things change too often and I prefer to work on 1 doc at a time.

Next attempt using [at]JF's answer

<script>

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

/*
    // load scores and notes in each PP Frame
    $('a[rel^="prettyPhoto"]').prettyPhoto({
        social_tools: false,
        changepicturecallback: function() {
            var abc = $('input.inputText').val();
            //alert(abc);
        }
    });
*/

    var $pps = $("a[rel^=prettyPhoto]"),
        $inputs = $('input.textInput'),
        $textinputscls = $('.textInput'),
        $textinputs = $('input.textInput');

    var ppcallback = function(){
        $textinputs = $('input.textInput');

        //console.log($textinputs); // don't need
        //console.log($textinputs.val()); // don't need
        console.log('id: ' + $textinputs.attr('id')); // very close...returns 1st ID only
    };

    $pps.prettyPhoto({
        social_tools: false,
        changepicturecallback: ppcallback
    });

    //console.log($pps); // don't need

    // post scores and notes each time they change -- THIS WORKS
    $(this).change(function(e) {
        var elemId = e.target.id;
        var elemValue = e.target.value;
        $.ajax({
            url: "http://mydomain.com/dir/ajax/updateMySQL.php?actionString=" + elemId + '_' + elemValue
        });
    });

}); // end .ready()

//  window.parent.closePP();

</script>
Was it helpful?

Solution

Ok, using the following code, I was able to what I believe you are wanting to be able to do, which is access elements which are within the prettyPhoto displays. I'll have to provide a more detailed answer later, so feel free to leave some comments if you have any questions.

Note as well that you need to have the console open to see the code "work"; it output to console.log().

<script>
jQuery(document).ready(function($){
    var $pps = $("a[rel^=prettyPhoto]"),
        $inputs = $('input.textInput'),
        $textinputscls = $('.textInput'),
        $textinputs = $('input.textInput');

    var ppcallback = function(){
        $textinputs = $('input.textInput');

        console.log($textinputs);
        console.log($textinputs.val());
    };

    $pps.prettyPhoto({
        social_tools: false,
        changepicturecallback: ppcallback
    });

    console.log($pps);
});
</script>

http://jfcoder.com/test/prettyphotoiframe.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top