1. дома
  2. Вопрос и ответ
  3. Как идентифицировать элементы формы в IFRAME

Как идентифицировать элементы формы в IFRAME

2012-03-08 6 views
0

Я пытаюсь определить, есть ли value в <input type="text">, а значение в <textarea> изменяется, поэтому я могу запустить вызов AJAX на сервер. Скрипт просто прокручивается и показывает мне каждые id, а не только те, которые находятся в текущем IFRAME.Как идентифицировать элементы формы в IFRAME

Я знаю, как сделать вызов AJAX и бэкэнда сценариев, я просто не могу понять, как захватить, если value элементов формы изменить в любой момент prettyPhotoIFRAME. Мои красивые фоторамки создаются динамически, и в FORM содержится более 800 элементов.

У меня есть следующие 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()

Любые мысли или помощь чрезвычайно ценится.

<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. Я знаю, как использовать таблицы стилей и перемещать все стили в лист, как только закончу разработку. У меня есть умение (возможно, плохая привычка) встроенного стиля во время разработки, потому что вещи меняются слишком часто, и я предпочитаю работать с одним документом за раз.

Следующая попытка использования [в] ответ компании JF

<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>

источник

2012-03-08 H. Ferrence

+0

JQuery предоставляет [ '$ .on()'] (http://api.jquery.com/on/) и [ '$ .delegate()'] (HTTP://api.jquery.com/delegate/) для мониторинга событий элементов, которые динамически добавляются/удаляются из DOM. Обратите внимание, игнорируйте ['$ .live()'] (http://api.jquery.com/live/), поскольку он устарел и будет удален в конечном итоге (не говоря уже о том, что он не очень эффективен). Если вам нужно следить за нетрадиционными событиями (например, когда элемент добавлен/удален), вы можете попробовать [Live Query] (http://brandonaaron.net/code/livequery/docs), который является jQuery плагин и довольно новый (er); производительность может отличаться. –

+0

Хорошо, спасибо @ JaredFarrish. У меня есть дилемма: мне нужно использовать что-то другое, кроме события. PP's changepicturecallback: 'отлично работает, чтобы привести меня в действие на любом PP iFrame. Мне нужно использовать значение в поле формы, которое находится в текущем iFrame, когда оно находится в фокусе. Пример: у меня около 100 динамически построенных элементов , которые появляются только один раз в любом заданном фрейме. Их идентификатор кодируется «2012_0001_1», «2012_0002_1», «2012_0003_1», «2012_0004_1», ..., «2012_0100_1». Итак, как мне использовать jQuery для обработки значения в «2012_0051_1», когда я в конечном итоге уделяю внимание 51-му кадру? –

+0

Вам нужно поставить класс на эти входы, чтобы вы могли получить их как группу (или класс), то есть '', а затем '$ (' input.myDynamicInput ') '. И на всякий случай вам нужно знать, как получить * в * iframe', вы можете использовать ['$ .contents()'] (http://api.jquery.com/contents/#example-1). –

ответ

1

Ok, используя следующий код, я был в состоянии, что я верю, что вы желаете, чтобы быть в состоянии сделать, что доступ к элементам, которые находятся в пределах prettyPhoto показывает. Я должен буду дать более подробный ответ позже, поэтому не стесняйтесь оставлять комментарии, если у вас есть какие-либо вопросы.

Обратите внимание, что вам нужно открыть консоль, чтобы увидеть код «работа»; он выводится на 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

источник

2012-03-09 15:12:25

+0

Спасибо @ JaredFarrish. Я постараюсь сделать это очень скоро. Я высоко ценю вашу помощь. –

+0

Ничего не произошло (см мой пересмотренный сценарий выше в моем оригинальный вопрос В моем IE консоли все, что я видел, был 'LOG:. [Объект Object] LOG: [объект Object] LOG: 0 LOG: [объект Object] LOG : 0' –

+0

Он работает правильно. «0» - это значение выбранного «ввода». Запустите его в Firefox или Chrome, а консольный вывод более описательный и полезный IMO. –

 Смежные вопросы

  • Нет связанных вопросов^_^