OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

I can not use JQUERY Steps in dynamic forms

  • Thread starter Thread starter Maryam12 forex
  • Start date Start date
M

Maryam12 forex

Guest
I want to use my script and want if use some methods ,I had to return to custom step in my steps form for control of my step form, I have 4 steps, and in step 3 I want use of my C# method

Code:
(function ($) {
    "use strict"

    var form = $("#step-form-horizontal");
    form.children('div').steps({
        headerTag: "h4",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onStepChanging: function (event, currentIndex, newIndex) {
            // Check if the user is moving to the second step
            if (newIndex === 1) {
                // Scroll to the top of the page
                $('html, body').animate({ scrollTop: 0 }, 'fast');
            }
            // Validate the form on each step change
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        }
    });

    var form2 = $("#step-form-tab");
    form2.children('div').steps({
        headerTag: "h4",
        bodyTag: "section",
        enableFinishButton: false,
        enablePagination: false,
        enableAllSteps: true,
        titleTemplate: "#title#"
    });

    var form3 = $('#step-form-vertical');
    form3.children('div').steps({
        headerTag: "h4",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical"
    });

    $(document).ready(function () {
        $('#deliveryPaymentForm').submit(function (event) {
            event.preventDefault(); // Prevent default form submission

            // Serialize form data
            var formData = $(this).serialize();

            // Send AJAX request to save data
            $.ajax({
                url: '/UserPanel/Home/SaveDeliveryAndPaymentDetails',
                method: 'POST',
                data: formData,
                success: function (response) {
                    if (response.success) {
                        console.log('Successfully saved delivery and payment details.');
                        ShowMessage('Delivery and payment details saved successfully.');
                         $('#step-form-vertical').steps('setStep', 2);
                        // Move to step 3 in the vertical form
                        window.location.href = '/UserPanel/CheckOut';
                       
                    } else {
                        ShowMessage('Error saving details: ' + response.message);
                    }
                },
                error: function () {
                    alert('Error saving details.');
                }
            });
        });
    });

})(jQuery);

But I see this error and I can not do future level: I want do first method , then goes to Checkout method and return to step2 in step form

Code:
RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at F (jquery.min.js:2:36225)
    at B.get (jquery.min.js:2:36831)
    at Object.trigger (jquery.min.js:2:84556)
    at HTMLFormElement.<anonymous> (jquery.min.js:2:85338)
    at Function.each (jquery.min.js:2:3777)
    at e.fn.init.each (jquery.min.js:2:1903)
    at e.fn.init.trigger (jquery.min.js:2:85310)
    at e.fn.<computed> [as submit] (jquery-migrate-3.0.1.min.js:154:131)
    at HTMLFormElement.<anonymous> (jquery-steps-init.js:48:21)

<p>I want to use my script and want if use some methods ,I had to return to custom step in my steps form for control of my step form, I have 4 steps, and in step 3 I want use of my C# method</p>
<pre><code>
(function ($) {
"use strict"

var form = $("#step-form-horizontal");
form.children('div').steps({
headerTag: "h4",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
onStepChanging: function (event, currentIndex, newIndex) {
// Check if the user is moving to the second step
if (newIndex === 1) {
// Scroll to the top of the page
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
// Validate the form on each step change
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
}
});

var form2 = $("#step-form-tab");
form2.children('div').steps({
headerTag: "h4",
bodyTag: "section",
enableFinishButton: false,
enablePagination: false,
enableAllSteps: true,
titleTemplate: "#title#"
});

var form3 = $('#step-form-vertical');
form3.children('div').steps({
headerTag: "h4",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});

$(document).ready(function () {
$('#deliveryPaymentForm').submit(function (event) {
event.preventDefault(); // Prevent default form submission

// Serialize form data
var formData = $(this).serialize();

// Send AJAX request to save data
$.ajax({
url: '/UserPanel/Home/SaveDeliveryAndPaymentDetails',
method: 'POST',
data: formData,
success: function (response) {
if (response.success) {
console.log('Successfully saved delivery and payment details.');
ShowMessage('Delivery and payment details saved successfully.');
$('#step-form-vertical').steps('setStep', 2);
// Move to step 3 in the vertical form
window.location.href = '/UserPanel/CheckOut';

} else {
ShowMessage('Error saving details: ' + response.message);
}
},
error: function () {
alert('Error saving details.');
}
});
});
});

})(jQuery);
</code></pre>
<p>But I see this error and I can not do future level: I want do first method , then goes to Checkout method and return to step2 in step form</p>
<pre><code>RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at F (jquery.min.js:2:36225)
at B.get (jquery.min.js:2:36831)
at Object.trigger (jquery.min.js:2:84556)
at HTMLFormElement.<anonymous> (jquery.min.js:2:85338)
at Function.each (jquery.min.js:2:3777)
at e.fn.init.each (jquery.min.js:2:1903)
at e.fn.init.trigger (jquery.min.js:2:85310)
at e.fn.<computed> [as submit] (jquery-migrate-3.0.1.min.js:154:131)
at HTMLFormElement.<anonymous> (jquery-steps-init.js:48:21)
</code></pre>
 

Latest posts

Top