Fancybox Jquery Form

    Question by:
    On

    Topics:

    Hi

    I have a link to display a user form winthin a fancybox
    a perl script gets the data from a database and populates a simple user form Name Contact info etc

    on hiting update the same script updates the database & displays a Thank You message this works within a a seperate brouser window.
    In the Fancybox window all that happens is the box closes and the parent window refreses and the datbase table remains untouched so i'm unable to tell what is happing because i can't get any message back

    I'm using the example from http://fancybox.net/blog


    Javascript
    
    
    
    Attach FancyBox: 
    
    $("a#UsrFrm").fancybox({
    
    	'scrolling'		: 'no',
    
    	'titleShow'		: false,
    
    	'onClosed'		: function() {
    
    	    $("#login_error").hide();
    
    	}
    
    });
    
    Simple validation; submit data using Ajax and display response
    
    $("#login_form").bind("submit", function() {
    
    
    
    	if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
    
    	    $("#login_error").show();
    
    	    $.fancybox.resize();
    
    	    return false;
    
    	}
    
    
    
    	$.fancybox.showActivity();
    
    
    
    	$.ajax({
    
    		type		: "POST",
    
    		cache	: false,
    
    		url		: "UsrForm.pl",
    
    		data		: $(this).serializeArray(),
    
    		success: function(data) {
    
    			$.fancybox(data);
    
    		}
    
    	});
    
    
    
    	return false;
    
    });
    

    Open in new window

    Good Question?
    0
     

    ?

    The member who asked this question verified this comment provided the solution that solved their problem.

    Accepted Solution on 2010-05-20 at 00:38:39ID: 32806785

    I managed to fix this by calling the child perl script into an iframe
    The examle works when the pparent document is a html doc it dosn't work when it is a perl script

    verified

    answer

    Enjoy your free answer!

    Join now to get more tech resources.

    Become a member

    Comments

     
    StealthyDev

    Expert Comment

    2010-05-14 at 04:09:07ID: 32712196
    Try

            $.ajax({
                    type            : "POST",
                    cache   : false,
                    url             : "UsrForm.pl",
                    data            : $(this).serialize(),
                    success: function(data) {
                            $.fancybox(data);
                    }
            });
    Good Comment?
    0
     
    trevor1940

    Author Comment

    2010-05-14 at 06:09:42ID: 32713022
    senthurpandian:
    changing
     data: $(this).serializeArray(),
    to
          data      : $(this).serialize(),

    didn't have any effect
    Good Comment?
    0
     
    trevor1940

    Author Comment

    2010-05-14 at 08:47:12ID: 32714715
    It has occerd to me that the example loads the form within the parent Document and then hides it I'm trying to load the form from an external perl script which is failing

    To load the form i use UsrForm.pl?userid=1234&Switch=A

    this Queries the Database and populates the form
    within the form there is an hidden input box with Switch = B

    this then tells the same perl script to up date the Database

    Is there a better way of doing this

    Thank you
    Good Comment?
    0
      

    Accepted Solution

    2010-05-20 at 00:38:39ID: 32806785Best
    trevor1940 earned 0 total points
    I managed to fix this by calling the child perl script into an iframe
    The examle works when the pparent document is a html doc it dosn't work when it is a perl script
    Good Solution?
    0

    Featured Post

     Java Android Coding Bundle

    Whether you're an Apple user or Android addict, learning to code for the Android platform is an extremely valuable, in-demand skill. It all starts with Java, the language behind the apps and games that make Android the top platform it is today.

    Ask Your Tech Question. Get Expert Solutions.We will email you as soon as we have your answer.

    We will never share this with anyone.

    Select topics

    You may select up to five topics.

    Top Expert Contributor

    Essential articles and videos from the Experts

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    More valuable questions with Expert answers

    Question: Looking for solution to the situation below. 1. A form on the remote server accepts employee id (emp_id) and returns the employee details on submit. 2. In my application I have the textbox where user enters the emp_id and when clicks...

    Answer: fill their form which I decided to do programmatically with ajax.It will be easier if you use PHP. This is a research project, not a question with any succinct answer, and since we do not have the URL, we cannot see what you might need to do with...

    Question: I have several rows of twin radio buttons that are generated via a loop in ruby on rails. For each row, one of the button is already selected, how do i detect if the user accidentally click on a radio button that's already selected? Keep in mind...

    Answer: @mmingfeilam (CODE)

    Question: I found code that makes the mobile menu collapse the submenus until you click the parent of it that has a + sign after it. http://dev1.wpmate.net/ (You can see the mobile menu there just by making your browser skinny.) We'd like for the parent...

    Answer: Yes, I believe it can be done. But this forum is typically used to fix broken code. The code you've posted seems to be working as designed. I've given you some tips on where to begin changing the code if you want to tackle it yourself. You may...

    Question: If I have a beforeunload Function on my page and it asks if you want to stay or leave. Is there a way to detect that the user clicked on "Stay" and then run a function if they did?

    Answer: You can't capture the cancel event on the leave page dialog. What you can do is set a timeout in the function and if it fires then they are still on the page. Of course if the user has a moment and stares at the screen the timeout will fire -...

    201607-LO-Qu-086

    Extend your technology team with the Experts Exchange community.

    — trusted by —

    Who answers my questions?Our community has technology experts around the world.

    Scott Fell,  EE MVE

    1

    Articles

    3,698

    Solutions

    Expert in:

    • ASP
    • CSS
    • HTML
    • Web Development-Other
    • JavaScript

    Mrunal

    1

    Articles

    584

    Solutions

    Expert in:

    • ASP.NET
    • .NET Programming
    • JavaScript
    • AJAX
    • C#

    leakim971

    1

    Articles

    8,145

    Solutions

    Expert in:

    • JavaScript
    • jQuery
    • AJAX
    • ASP.NET
    • HTML

    Kim Walker

    1

    Articles

    499

    Solutions

    Expert in:

    • CSS
    • HTML
    • JavaScript
    • PHP
    • MySQL Server

    Julian Hansen

    4

    Articles

    2,802

    Solutions

    Expert in:

    • JavaScript
    • PHP
    • jQuery
    • CSS
    • HTML

    Miguel Oz

    2

    Articles

    1,523

    Solutions

    Expert in:

    • .NET Programming
    • ASP.NET
    • C#
    • Visual Basic.NET
    • MS Development-Other

    Ray Paseur

    47

    Articles

    14,546

    Solutions

    Expert in:

    • PHP
    • MySQL Server
    • Web Development-Other
    • HTML
    • JavaScript

    William Nettmann

    157

    Solutions

    Expert in:

    • WordPress
    • PHP
    • Web Development-Other

    esskayb2d

    384

    Solutions

    Expert in:

    • .NET Programming
    • ASP.NET
    • C#
    • Visual Basic.NET

    RELATED TOPICS view all topics

    1. JavaScript
      (118,111)
    2. AJAX
      (11,971)
    3. HTML
      (56,612)
    4. CSS
      (39,812)
    5. PHP
      (116,355)
    6. ASP.NET
      (122,582)
    7. Web Development-Other
      (72,539)
    8. JScript
      (6,806)
    9. Web Languages/Standards-Other
      (39,377)
    10. Scripting Languages
      (26,198)
    Receive Monthly Emails of Tech News and Trends from Experts Exchange