ajax загрузка и отображение формы

85

Yuriy1983

19 августа 2013, 19:28

1306

сейчас имею на сайте(движок вордпресс) следующий код




<a id="iphorm_fancybox_520f1d89585e4" class="iphorm-fancybox-link iphorm-fancybox-link-4" href="#"><img class="com" src="/0.gif" title="Добавить отзыв"/></a>

<script type="text/javascript">

<!--

    jQuery(document).ready(function ($) {

        var $link = $('#iphorm_fancybox_520f1d89585e4');

        if ($.isFunction($.fn.fancybox) && !$link.data('iphorm-initialised')) {

            $link.fancybox($.extend({

                inline: true,

                href: '#iphorm-outer-520f1d8957779',

                onStart: function () {

                    $('#fancybox-outer').css('opacity', 0);

                },

                onComplete: function () {

                    $('#fancybox-wrap, #fancybox-content').css({width: 'auto'});

                    $.fancybox.center(0);

                    setTimeout(function () {

                        $('#fancybox-outer').animate({opacity: 1}, 400);

                        $('#fancybox-overlay').css({height: $(document).height()});

                    }, 1);

                }

            }, {"title":"topik 1"})).data('iphorm-initialised', true);

        }

    });

//-->

</script>

<div style="display: none;">

<div id="iphorm-outer-520f1d8957779" class="iphorm-outer iphorm-outer-4 iphorm-uniform-theme-default iphorm-theme-light-rounded" >

    <script type="text/javascript">

	<!--

		    jQuery(document).ready(function($) {

			

        	$('#iphorm-520f1d8957779').iPhorm({"id":4,"uniqueId":"520f1d8957779","PHPSESSID":"b4dd418539e52603c34000f17136a167","useAjax":true,"successMessageTimeout":10,"clElementIds":[],"clDependentElementIds":[],"centerFancybox":true,"centerFancyboxSpeed":true});



	        	        if ($.isFunction($.fn.qtip)) {

	            $('.iphorm-tooltip-hover', iPhorm.instance.$form).qtip({

	                style: {

	                    classes: 'ui-tooltip-plain ui-tooltip-shadow'

	                },

	                position: {

	                    my: 'left center',

	                    at: 'right center'

	                }

	            });

	            $('.iphorm-tooltip-click', iPhorm.instance.$form).qtip({

	                style: {

	                    classes: 'ui-tooltip-plain ui-tooltip-shadow'

	                },

	                position: {

	                    my: 'left center',

	                    at: 'right center'

	                },

	                show: {

	                    event: 'focus'

	                },

	                hide: {

	                    event: 'unfocus'

	                }

	            });

	            $('.iphorm-tooltip-icon-hover', iPhorm.instance.$form).qtip({

	                style: {

	                    classes: 'ui-tooltip-plain ui-tooltip-shadow'

	                },

	                position: {

	                    my: 'left center',

	                    at: 'right center'

	                },

	                content: {

	                    text: function (api) {

	                        return $(this).find('.iphorm-tooltip-icon-content').html();

	                    }

	                }

	            });

	            $('.iphorm-tooltip-icon-click', iPhorm.instance.$form).qtip({

	                style: {

	                    classes: 'ui-tooltip-plain ui-tooltip-shadow'

	                },

	                position: {

	                    my: 'left center',

	                    at: 'right center'

	                },

	                show: {

	                    event: 'click'

	                },

	                hide: {

	                    event: 'unfocus'

	                },

	                content: {

	                    text: function (api) {

	                        return $(this).find('.iphorm-tooltip-icon-content').html();

	                    }

	                }

	            });

	            $('.iphorm-labels-inside > .iphorm-element-spacer > label').hover(function () {

	                $(this).siblings('.iphorm-input-wrap').find('.iphorm-tooltip-hover').qtip('show');

	            }, function () {

	            	$(this).siblings('.iphorm-input-wrap').find('.iphorm-tooltip-hover').qtip('hide');

	            });

	        }

	        

	        	        if ($.isFunction($.fn.uniform)) {

	            $('select, input:checkbox, input:radio', iPhorm.instance.$form).uniform({context: iPhorm.instance.$form});

	        }

	        

	        if ($.isFunction($.fn.inFieldLabels)) {

	            $('.iphorm-labels-inside:not(.iphorm-element-wrap-recaptcha) > .iphorm-element-spacer > label', iPhorm.instance.$form).inFieldLabels();

	        }



	        

	        $('.iphorm-group-row > div:last-child:not(:first-child)', iPhorm.instance.$form).add('.iphorm-group-row:last-child', iPhorm.instance.$form).addClass('last-child');



	        	    }); // end document.ready()

	//-->

	</script>

    <form id="iphorm-520f1d8957779" class="iphorm iphorm-form-4" action="/#iphorm-520f1d8957779" method="post" enctype="multipart/form-data">

        <div class="iphorm-inner iphorm-inner-4" >

            <input type="hidden" name="iphorm_id" value="4" />

            <input type="hidden" name="iphorm_uid" value="520f1d8957779" />

            <input type="hidden" name="form_url" value="http://brokergid.ru/" />

            <input type="hidden" name="referring_url" value="" />

            <input type="hidden" name="post_id" value="7" />

            <input type="hidden" name="post_title" value="Форекс брокеры" />

                            <h3 class="iphorm-title" >Добавить отзыв</h3>

                                                	            		

          

                    <label for="iphorm_4_6_520f1d8957779" >

                Ваш отзыв                                    <span class="iphorm-required">(*) </span>

                                            </label>

                <div class="iphorm-input-wrap iphorm-input-wrap-textarea iphorm_4_6-input-wrap" >

            <textarea class="iphorm-element-textarea  iphorm_4_6" id="iphorm_4_6_520f1d8957779" name="iphorm_4_6"  style='width: 100%;' rows="5" cols="25"></textarea>

                <p class="iphorm-description" >Пожалуйста постарайтесь описать все плюсы и минусы работы с данным брокером</p>

        </div>

        <div class="iphorm-errors-wrap iphorm-hidden" >

    </div>    </div>

    </div><div class="iphorm-element-wrap iphorm-element-wrap-captcha iphorm_4_4-element-wrap iphorm-clearfix iphorm-labels-inside iphorm-element-required" >

    <div class="iphorm-element-spacer iphorm-element-spacer-captcha iphorm_4_4-element-spacer">

                    <label for="iphorm_4_4_520f1d8957779" >

                Введите символы                                    <span class="iphorm-required">(*) </span>

                                            </label>

                <div class="iphorm-input-wrap iphorm-input-wrap-captcha iphorm_4_4-input-wrap" >

            <input class="iphorm-element-captcha  iphorm_4_4" id="iphorm_4_4_520f1d8957779" type="text" name="iphorm_4_4"  value=""  />

                    </div>

        <div class="iphorm-captcha-image-wrap iphorm-clearfix iphorm_4_4-captcha-image-wrap" >

            <div class="ifb-captcha-image-inner">

                <img id="iphorm-captcha-image-iphorm_4_4_520f1d8957779" class="iphorm-captcha-image" src="http://brokergid.ru/wp-content/plugins/iphorm-form-builder/includes/captcha.php?c=eyJ1bmlxSWQiOiI1MjBmM;t=1376722313.38" alt="" />

            </div>

        </div>



        <script type="text/javascript">

        <!--

        jQuery(document).ready(function ($) {

            $('#iphorm-captcha-image-iphorm_4_4_520f1d8957779').hover(function () {

                $(this).stop().fadeTo('slow', '0.3');

            }, function () {

                $(this).stop().fadeTo('slow', '1.0');

            }).click(function () {

                var newSrc = $(this).attr('src').replace(/&t=.+/, '&t=' + new Date().getTime());

                $(this).attr('src', newSrc);

            });

        });

        //-->

        </script>

        <div class="iphorm-errors-wrap iphorm-hidden" >

    </div>    </div>

</div><div class="iphorm-hidden">

    <label>Это поле должно быть пустым<input type="text" name="iphorm_4_0" /></label>

</div>                <div class="iphorm-submit-wrap iphorm-submit-wrap-4 iphorm-clearfix" >

                	<div class="iphorm-submit-input-wrap iphorm-submit-input-wrap-4" >

                        <button class="iphorm-submit-element" type="submit" name="iphorm_submit" ><span ><em >Добавить отзыв</em></span></button>

                    </div>

                    <div class="iphorm-loading-wrap"><span class="iphorm-loading">Пожалуйста подождите</span></div>

                </div>

            </div>

                           

                                            </div>

                <div class="iphorm-edit-form-wrap">

            <a class="iphorm-edit-form" href="http://brokergid.ru/wp-admin/admin.php?page=iphorm_form_builder&amp;id=4">Редактировать эту форму</a>

        </div>

            </form>

    <script type="text/javascript">

	<!--

	jQuery('#iphorm-outer-520f1d8957779 script').remove();

	//-->

	</script>

</div></div>

данный код отображает папап форму добавления комментария к посту. проблема в том что на одной странице получается много таких форм и хочется оптимизировать.

Отображение формы происходит по событию ссылки

<a id="iphorm_fancybox_520f1d89585e4" class="iphorm-fancybox-link iphorm-fancybox-link-4" href="#"><img class="com" src="/0.gif" title="Добавить отзыв"/></a>

хотелось бы сделать так, чтобы предварительно данный код загружался из внешнего файла используя ajax. а затем отображалась сама форма. Подскажите решение.

если есть другие мысли по поводу оптимизации тоже буду рад выслушать

M

57

mByte

20 августа 2013, 07:59

#1

Можно один раз написать форму и по клику подменять id поста для укладки комментария.

Y1

85

Yuriy1983

20 августа 2013, 08:20

#2

id содержится в самой форме <form></form> еще будет отличаться названием, а оно забито в js

таким образом надо каждый раз получать новый js и код формы. Получить новый код не проблема но как сделать чтобы потом этот новый код заработал?

Google добавил в AMP LinkedIn позволила добавлять в Настройка целей в Google

M

57

mByte

20 августа 2013, 08:52

#3

id поста содержится в <input type="hidden" name="post_id" value="7" />

Меняется очень просто

в ссылку на открытие попапа дописываем rel='$post->ID'

потом выдираем это значение при click (судя по вашему скрипту в onComplete):

var pid = parseInt(jQuery(this).attr("rel"));

jQuery("form.iphorm input[name='post_id']").val(pid);

Настройка событий Google Analytics Идеальная модель атрибуции для Google расширяет значение тега

Y1

85

Yuriy1983

20 августа 2013, 09:12

#4

var pid = parseInt(jQuery(this).attr("rel"));
jQuery("form.iphorm input[name='post_id']").val(pid);

Спасибо, с подменой id понятно. Но как быть с заголовком формы

заголовок задается в скрипте - jQuery(document).ready(function ($) {...{"title":"topik 1"})).data('iphorm-initialised', true);} можно ли его тоже подменить?

M

57

mByte

20 августа 2013, 09:57

#5

таким же макаром, добавляете в ссылку title, потом его считываете и подменяете заголовок формы

Y1

85

Yuriy1983

21 августа 2013, 07:19

#6

Сделал как вы сказали. Работает но частично: title отрабатывает хорошо, но в post_id устанавливается значение NAN

вот что получилось

<a id="iphorm_fancybox_62145f67cdb4b" class="iphorm-fancybox-link iphorm-fancybox-link-4" href="#" rel="444" title="this is ttile"><img class="com" src="/0.gif" title="Добавить отзыв"/></a>
<script type="text/javascript">
<!--
    jQuery(document).ready(function ($) {
        var $link = $('#iphorm_fancybox_62145f67cdb4b');
        if ($.isFunction($.fn.fancybox) && !$link.data('iphorm-initialised')) {
			var tl = parseInt(jQuery(this).attr("title"));
			
			
            $link.fancybox($.extend({
                inline: true,
                href: '#iphorm-outer-52145f67cd387',
                onStart: function () {
				
                    $('#fancybox-outer').css('opacity', 0);
                },
                onComplete: function () {					
					var pi = parseInt(jQuery(this).attr("rel"));
					jQuery("form.iphorm input[name='post_id']").val(pi);
					
                    $('#fancybox-wrap, #fancybox-content').css({width: 'auto'});
                    $.fancybox.center(0);
					
                    setTimeout(function () {
                        $('#fancybox-outer').animate({opacity: 1}, 400);
                        $('#fancybox-overlay').css({height: $(document).height()});
                    }, 1);
					
                }
            }, {"title":tl})).data('iphorm-initialised', true);
        }
    });

Что еще не понятно :

если заменить var tl = parseInt(jQuery(this).attr("title")); на var tl = jQuery(this).attr("title"); то есть убрать parseInt (которая как вроде ля преобразования строки в число) то в title записывается заголовок страницы)

Оптимизируем видео из YouTube Основные ошибки в настройке Google по-прежнему использует исходные

Q

1

Qunn

22 августа 2013, 11:58

#7

NaN - означает Not a Number

я так понимаю айдишник это обычное число??? есть ли смысл ставить Number(pi) - где n переменная числа...

или вообще

вместо

var pi = parseInt(jQuery(this).attr("rel"));

написать

var pi = jQuery(this).attr("rel").val();

хотя может глупо)) но стоит попробовать))) все достигается методом проб и ошибок....я вообще обычно пользуюсь аттрибутом data....и проблем невозникало

Оптимизируем видео из YouTube Настройка событий Google Analytics Google: запуск Disavow Links

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

Google: E-E-A-T не является фактором ранжирования