jQuery:Colorbox +表单 - 访问发布的数据 +一些杂项问题

发布于 2024-10-07 06:24:08 字数 1427 浏览 7 评论 0原文

我的目标是通过 ajax 以 Colorbox 模式提交表单(该部分已完成),然后采取一个提交的值(称为“百分比”)并更新表中的值。

我的代码如下(无表格)。您可以看到包含我的表单 (#Form_PlayerSave) 的 Div 打开了一个链接,并且该表单通过令人敬畏的 ajaxified jQuery 表单插件。表单已正确提交,现在我只想更新表格的“百分比”部分。

脚本中包含 php,因为我每页需要 25 个表单(表格的每一行一个),因此每个 $x 只是计算不同的表单。

那么,我该怎么办?我下面的返回未定义,并且我尝试了很多不同的解决方案。

我还注意到,当再次单击表中打开 Colorbox 模式的链接时,它会显示表单通常会提交到的页面(如果它没有全部使用 ajaxy)。关于如何解决此问题的任何想法,以便用户可以将值更新为他们的小心脏内容?

$(document).ready(function(){

   function prepform(){



       $('#Form_PlayerSave<?= $x ?>').ajaxForm({
           // target identifies the element(s) to update with the server response
           target: '#customPlanDiv<?= $x; ?>',

           // success identifies the function to invoke when the server response
           // has been received; here we apply a fade-in effect to the new content
           success: function() {
                 $.fn.colorbox({html:"Custom Plan Saved", open:true});
                 var x = $('#Form_PlayerSave<?= $x ?> :percentage').fieldValue();
                 $('#custom_plan_text<?= $x ?>').val(x[0]);
           }

       });
   }

   $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform);

});

非常感谢大家的帮助!谢谢 * 10!

My goal is to submit a form in a Colorbox modal via ajax (that part is complete), and then take one of the submitted values (called 'percentage') and update a value in a table.

I've got my code below (sans form). You can see that a link is opened with the Div containing my form (#Form_PlayerSave) and that form is ajaxified through the awesome jQuery Form Plugin. The form is submitting correctly, now I just want to update the 'percentage' part of a table.

There is php included in the script because I need 25 forms per page (one for each row of the table), so each $x just counts off the different forms.

So, what do I do? What I have below returns undefined, and I've tried quite a few varied solutions.

I also have noticed that when the link in the table to open the Colorbox modal is clicked again, it displays the page that the form would normally submit to had it not gone all ajaxy. Any ideas on how to fix this so user can update the value to their little heart's content?

$(document).ready(function(){

   function prepform(){



       $('#Form_PlayerSave<?= $x ?>').ajaxForm({
           // target identifies the element(s) to update with the server response
           target: '#customPlanDiv<?= $x; ?>',

           // success identifies the function to invoke when the server response
           // has been received; here we apply a fade-in effect to the new content
           success: function() {
                 $.fn.colorbox({html:"Custom Plan Saved", open:true});
                 var x = $('#Form_PlayerSave<?= $x ?> :percentage').fieldValue();
                 $('#custom_plan_text<?= $x ?>').val(x[0]);
           }

       });
   }

   $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform);

});

I really appreciate everyone's help! Thanks * 10!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

久伴你 2024-10-14 06:24:08

我得到了它!

  $(document).ready(function(){

               function prepform(){

                    $('#Form_PlayerSave<?= $x ?>').ajaxForm({
                               // target identifies the element(s) to update with the server response

                               beforeSubmit:  CPshowRequest<?= $x ?>,
                               // success identifies the function to invoke when the server response
                               // has been received; here we apply a fade-in effect to the new content
                               success: CPshowResponse<?= $x ?>,
                               resetForm: true

                   });

               }

               $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform);

         });

            // pre-submit callback
            function CPshowRequest<?= $x ?>(formData, jqForm) {
                var x = $('#percentage<?= $x ?>').fieldValue();
                $('#custom_plan_text<?= $x ?>').html(x[0]);
                return true;
            }
            function CPshowResponse<?= $x ?>(responseText, statusText, xhr, $form)  {
                $.fn.colorbox({html:"Custom Plan Saved", open:true});
            }

为什么这有效,但它确实有效。 :)

另外,对于未来的旁观者,要确保 div 不会在提交时被替换,只需确保目标没有指向您原始表单的 div(对我来说是愚蠢的愚蠢)。

I got it!

  $(document).ready(function(){

               function prepform(){

                    $('#Form_PlayerSave<?= $x ?>').ajaxForm({
                               // target identifies the element(s) to update with the server response

                               beforeSubmit:  CPshowRequest<?= $x ?>,
                               // success identifies the function to invoke when the server response
                               // has been received; here we apply a fade-in effect to the new content
                               success: CPshowResponse<?= $x ?>,
                               resetForm: true

                   });

               }

               $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform);

         });

            // pre-submit callback
            function CPshowRequest<?= $x ?>(formData, jqForm) {
                var x = $('#percentage<?= $x ?>').fieldValue();
                $('#custom_plan_text<?= $x ?>').html(x[0]);
                return true;
            }
            function CPshowResponse<?= $x ?>(responseText, statusText, xhr, $form)  {
                $.fn.colorbox({html:"Custom Plan Saved", open:true});
            }

Why this works beats me, but it does. :)

Also, for future onlookers, to make sure the div doesn't get replaced onsubmit simply make sure target doesn't point to your original form's div (dumb dumb dumb on my part).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文