I have a working project with a form but in some cases a during a form submit, the request body params are not being passed onto params in the controller
This is what i am seeing when i put a binding.pry inside the application controller as a before_action
[1] pry(#<App::Agent::V2::VerificationsController>)> request.url
=> "http://localhost:4567/app/agent/v2/verifications/sg_bug_bash/submit"
[2] pry(#<App::Agent::V2::VerificationsController>)> request.body.read
=> "utf8=%E2%9C%93&authenticity_token=2myJbSTptXGEGn8a14T3zj7cgMSc%2F8zsLI27%2BirR6ZplQotMkTDfGWgKes3k9OSIfnL5wKyFvazn7tvNS9zuHQ%3D%3D&obs_application%5Boperation_name%5D=sg_bug_bash&obs_application%5Bapplication_id%5D=1&commit=Submit%2FDone&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Bid%5D=e4c987fb-a875-420e-81db-45a8482d36eb&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Baccount_number%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Bbank_code%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Bid%5D=4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5Bvehicle_plate_number%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleBrand%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleType%5D="
[3] pry(#<App::Agent::V2::VerificationsController>)> params
=> {"controller"=>"app/agent/v2/verifications", "action"=>"submit", "id"=>"sg_bug_bash"}
It is a dynamically generated form, so the HTML looks like this:
<form id="verification-form" class="edit_obs_application" action="/app/agent/v2/verifications/sg_bug_bash/submit" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="j1rCDid+EAiODQijn+TNTml/MTwikobF2Tg63ssZ+EtAAH/ebLimZd8C5D1oXhLYHr9EohRvmnSfnmE7ikrSdw==">
<input value="sg_bug_bash" type="hidden" name="obs_application[operation_name]" id="obs_application_operation_name">
<input value="220" type="hidden" name="obs_application[application_id]" id="obs_application_application_id">
<div class="panel">
<div class="panel-heading">
<div class="label">Surat Tanda Nomor Kendaraan: STNK</div>
</div>
<div class="panel-body">
<div class="container">
<input value="4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][id]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> Vehicle type*: </div>
<div class="verification-value">166</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="vehicleType">
<input type="hidden" value="vehicleType" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleType]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleType">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> vehicle brand: </div>
<div class="verification-value">Alfa Romeo</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicleBrand">
<input type="hidden" value="vehicleBrand" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleBrand]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleBrand">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> No Polisi: </div>
<div class="verification-value">sj111k</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicle_plate_number">
<input type="hidden" value="vehicle_plate_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicle_plate_number]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicle_plate_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Vehicle Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="https://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<div class="label">Bank</div>
</div>
<div class="panel-body">
<div class="container">
<input value="e4c987fb-a875-420e-81db-45a8482d36eb" type="hidden" name="obs_application[panels][documents][sg_bank_statement][id]" id="obs_application_panels_documents_sg_bank_statement_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> bank code*: </div>
<div class="verification-value">700003</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="bank_code">
<input type="hidden" value="bank_code" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][bank_code]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_bank_code">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> account number*: </div>
<div class="verification-value">5367683475661</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="account_number">
<input type="hidden" value="account_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][account_number]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_account_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> account holder name: </div>
<div class="verification-value">Testing</div>
</div>
<div class="col-md-6 mandatory-action-false}">
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Bank Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="http://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="submit-btn-verification">
<input type="submit" name="commit" value="Submit/Done" class="submit_btn btn btn-valid disabled" disabled="disabled" style="cursor: not-allowed">
</div>
</form>
This is the form in erb:
<% if (!#application_completed.nil? && !#application_completed) %>
<%= form_for #application, url: retry_application_completion_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form', class: 'col-md-6 text-center' } do |f| %>
<%= f.hidden_field :id, value: #application.id %>
<%= f.submit 'Retry', formaction: retry_application_completion_app_agent_v2_verification_path, class: 'btn btn-valid pull-right' %>
<% end %>
<% else %>
<% panels = #layout.panels %>
<%= form_for #application, url: submit_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form' } do |f| %>
<%= f.hidden_field :operation_name, value: #layout.name %>
<%= f.hidden_field :application_id, value: #application.id %>
<% if #application.resubmit? %>
<div class="resubmit-header">RESUBMITTED APPLICATION</div>
<% end %>
<%= f.fields_for :panels do |form| %>
<% panels.each do |panel| %>
<%= render partial: 'partials/agent/v2/verifications/panels/' + panel.type.underscore, locals: { panel: panel, form: form } %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
with this as _submit_panel erb partial:
<% sections = panel.sections %>
<div class="submit-btn-verification">
<%= form.submit sections.first.properties['label'], class: 'submit_btn btn btn-valid disabled', disabled: 'disabled', style: 'cursor: not-allowed' %>
</div>
Related
Bootstrap navbar collapse is not working. The issue is that it shows a collapsing menu but on click, it is not collapsed.
I have provided my full code so that it can help you to suggest or help me to sort out the issue
<header class="head-image">
<nav id="nav-top" class="navbar hidden-xs hidden-sm" style="margin-bottom: 0px;">
<div class="container text-center">
<div class="col-md-4 col-md-offset-8">
<div class="search-box">
<?php echo do_shortcode('[smart_search id="1"]'); ?>
</div>
</div>
</div>
</nav>
<section id="main-header">
<div class="container">
<div class="pull-left">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
<img src="<?php header_image(); ?>" width="213" height="117" alt="">
</a>
</div>
<div class="pull-right hidden-xs hidden-sm">
<div class="row text-right">
<div class="col-xs-12">
<span class="text-white">Order hotline</span>
</div>
<div class="col-xs-12">
<span class="nav-phone">
<i class="fa fa-phone" aria-hidden="true"></i>
<a class="text-white nav-phone" href="tel:+"></a>
</span>
</div>
</div>
<div class="row n-m hidden-xs hidden-sm">
<div class="col-sm-6 col-xs-12 border-brown relative">
<div class="col-xs-3">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="col-xs-9">
<div class="row">
Login/Register </div>
<div class="row ">
<span class="text-white">
My Account
</span>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-12 border-brown relative">
<div class="col-xs-3">
<a href="<?php echo wc_get_cart_url(); ?>">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-9">
<div class="row">
Shopping bag
</div>
<div class="row">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class="price">(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar" id="main-menu">
<div class="container">
<div class="navbar-header hidden-md hidden-lg">
<div class="col-xs-6">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="text-white hidden-lg hidden-md" data-toggle="collapse" data-target="#main-menu-collapse">Menu</span>
</div>
<div class="col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative">
<div class="row">
<div class="col-xs-4">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</div>
<div class="col-xs-8 text-white">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items
<span class="text-white">
(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
<div id="main-menu-collapse" class="collapse navbar-collapse">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Contact
</div>
<div class="col-xs-9">
<a href="tel:">
<i class="fa fa-phone" aria-hidden="true"></i>
<span class="text-white"></span>
</a>
</div>
</div>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Login/ register
</div>
<div class="col-xs-9">
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="text-white">My account</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar" id="menu-shortcut">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav col-lg-12 text-center">
<li class="col-lg-4 col-md-4 text-left">text</li>
<li class="col-lg-4 col-md-4">text</li>
<li class="col-lg-4 col-md-4 text-right"><a class="toggle-modal" href="javascript:void(0);">Sign up </a></li>
</ul>
</div>
</div>
</nav>
</header>
I am also using Jquery the code is below, there is no jquery conflict in my code everything working perfectly only getting the issue when I am browsing form iPad
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button').click(function()
{
if($(this).children('button').attr('class') == "navbar-toggle collapsed")
{
$(this).parents('.container').children('#main-menu-collapse').addClass('in');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).children('button').html("");
$(this).children('button').css({
'min-width' : '44px',
'min-height' : '34px'
});
$(this).children('button').attr('aria-expanded', 'true');
$(this).children('button').removeClass('collapsed');
}else
{
$(this).children('button').addClass('collapsed');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).parents('.container').children('#main-menu-collapse').css('display', 'none');
$(this).children('button').attr('aria-expanded', 'false');
$(this).parents('.container').children('#main-menu-collapse').removeClass('in');
$(this).children('button').css({
"margin-top" : "11px",
'background' : 'none'
});
$(this).children('button').html('<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>');
}
});
.click() does not happen in Safari unless the element it is bound on is a legitimate click event receiver (target) in Apple's own implementation of web standard (which differs from current web standard).
The simplest way to make any element become a "legitimate" click event target is to add
cursor: pointer;
to it.
Other workarounds include using different events, such as touchstart, tap or input, depending on case.
So, in your case, a fix would be to add this to your CSS:
#main-menu .navbar-header .col-xs-6:first-child,
#main-menu .navbar-header button {
cursor: pointer;
}
Or to change the wrapper to:
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button')
.on('click touchstart', function(){
// your code here
})
In my opinion, you should remove wordpress, wordpress-theming and wp-nav-walker from the question as they are irrelevant to the bug and perhaps add safari, ios and/or ipad to it.
The dropdown on the image below do not display properly. I want the dropdown to cover the length of the Modal Popup. The Button on the page fire properly I have no issue with my Controller. Any help to resolve this issue will be appreciated
View Code
<a class="btn w-xs btn-primary" data-toggle="modal" data-target=".bootstrapmodal"><i class="fa fa-book" aria-hidden="true"></i><span id="#ViewBag.Group"> Add New Member</span></a>
<div class="modal fade bootstrapmodal ">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class=" modal-title"><h3>Add User to Active Directory Group #ViewBag.Group </h3></div>
</div>
<div class="modal-body">
<div class="content">
#using (Html.BeginForm("AddNewUser", "ActiveDirectoryMember", FormMethod.Post, new { enctype = "multipart/form-data", id = "addUser" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div class="panel ">
<div class="panel-body ">
<div class="form-horizontal">
<input type="hidden" name="groupName" value="#ViewBag.Group" />
<div class="form-group">
#Html.Label("Technician", new { #class = "control-label col-md-2 required" })
<div class="input-group">
<div class="col-md-8">
<select id="userId" name="userId" class="form-control s2-search-box2">
<option value="">Click search for a staff member</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="addUser">
<i class="fa fa-plus-circle"></i>
Add New User
</button>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">
<i class="fa fa-ban"></i>
Cancel
</button>
</div>
</div>
</div>
</div>
I have a multistep form wizard that go through seven(7) steps.
image
Controllers:
private RegistrationEntities db = new RegistrationEntities();
public ActionResult Index()
{
return View();
}
View:
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Contractors <small>Pre-Registration</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>
Settings 1
</li>
<li>
Settings 2
</li>
</ul>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p>Kindly Follow the Procedures for the Pre-Registration Process.</p>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>Step 1: Ownership Confirmation</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Step 2: RC Number</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Step 3: Company Name</small>
</span>
</a>
</li>
<li>
<a href="#step-4">
<span class="step_no">4</span>
<span class="step_descr">
Step 4<br />
<small>Step 4: TIN Number/Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-5">
<span class="step_no">5</span>
<span class="step_descr">
Step 5<br />
<small>Step 5: Company's Email</small>
</span>
</a>
</li>
<li>
<a href="#step-6">
<span class="step_no">6</span>
<span class="step_descr">
Step 6<br />
<small>Step 6: Other Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-7">
<span class="step_no">7</span>
<span class="step_descr">
Step 7<br />
<small>Step 7: Captcha</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 1, new { #class = "DoPopup", id = "Foreign Company", value = "" }) Foreign Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 2, new { #class = "DoPopup", id = "Foreign Owned Nigerian Company", value = "" }) Foreign Owned Nigerian Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 3, new { #class = "DoPopup", id = "Nigerian Company", value = "" }) Nigerian Company
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-2">
#*<h2 class="StepTitle">Step 2 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.RC_NUMBER, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.RC_NUMBER, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RC_NUMBER)
</div>
</div>
</div>
</form>
</div>
<div id="step-3">
#*<h2 class="StepTitle">Step 3 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_NAME, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_NAME, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_NAME)
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-5">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_EMAIL)
</div>
</div>
</div>
</form>
</div>
<div id="step-6">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Alternative E-mail
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL)
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Website
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.WEBSITE, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WEBSITE)
</div>
</div>
</div>
<h3>Login Details</h3>
<hr />
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Username
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE0" id="email" type="email" placeholder="Email address" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Password
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE1" id="password" type="password" placeholder="Password" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
<div id="step-7">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-10">
#Html.MathCaptcha()
#* #Html.Captcha(3)*#
<br />
<p class="Error"> #ViewBag.ErrMessage </p>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function () {
$('#wizard').smartWizard();
$('#wizard_verticle').smartWizard({
transitionEffect: 'slide'
});
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
The questions are:
How I I validate each step to make sure values are entered befor going to the next step
After completing the 7 steps, how do I valid that the values are entered properly before it saves.
After completing the 7th step, I clicked on the Finish button, no record was saved into the CONTRACTORS table
In step2, when RC_NUMBER is entered, it should check if it already exists. It should use it to populate COMPANY_NAME in step3, but if it doesnt exist, it should allow the user to enter COMPANY_NAME in step3
After completing the whole steps and Finish button is clicked, it should redirect to welcome model using ActionResult Welcome
Please check the answers to your questions below:
1.) jQuery SmartWizard allows us to add onLeaveStep:leaveAStepCallback field while declaring. leaveAStepCallback is the function that will be called when you click on the next button. You can implement your validation logic in this function. Please go through this URL to get the complete idea.
2.) jQuery SmartWizard also allows us to add onFinish:onFinishCallback field while declaring. In this case onFinishCallback function will be called after all the steps are completed. You can check here if all the inputs are valid and then submit the form. You must have got the idea if you had gone through the link in answer 1.
3.) You need to further elaborate why the details were not saved in DB? Is your controller action getting called? If yes, check your DB save logic to further find the issue as this is not the issue of SmartWizard.
4.) As I mentioned in the step 1 that bind a callback function to be called when next button is clicked. In this function, you can get the step number by using context.fromStep. After that you can make an ajax call to server to check if the value already exist. Implement your custom logic as required.
5.) If you are submitting form using $('form').submit(), you can redirect custom view from the controller after succesful operation. If you are making an ajax call, redirect to another controller in sucess function of ajax call.
I am a new coder and using Devise sign up authentication gem on RAILS. I am trying to customize the input columns for the sign up form. I would like to shorten the column width as they look too wide on the page.(from left to right)
See image. enter image description here
What can I add to my code to achieve this please.
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: "form-control" %>
</div>
<div class="form-group">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
You need to wrap your form into some container, that doesn't span all available width. Read about Bootstrap's grid system. Bootstrap uses 12-column grid, so, if you, for example, want your form to take 1/3 of your page width, you need to wrap it into a <div class="col-md-4"></div> (since 12 / 3 = 4).
Sure, I believe something like this should work: http://codepen.io/anon/pen/vNRxGd
<div class="col-md-4">
<h2>Signup</h2>
<form class="form-signup">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</form>
</div>
Here's an example of two different ways you could do this: one just limits the size (width) of the form itself and the other uses columns (which you can adjust in many ways, this is just one.)
See Grid Options and Forms
Working examples below.
.form-signup {
max-width: 500px;
padding: 15px;
margin: 0 auto;
}
.form-signup .form-signup-heading {
margin-bottom: 20px;
}
.form-signup .form-control {
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="form-signup-heading text-center">
<h2>Sign up if you don't have an account:</h2>
</div>
<form class="form-signup">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</form>
</div>
<hr>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h2 class="text-center">Sign up if you don't have an account:</h2>
<form class="form-signup2">
<div class="col-sm-4">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-sm-4 col-sm-offset-4 text-center">
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
Bootstrap, especially v4 and above, spans form fields. you need to place your code in a container, usually a column so that it does not fill the whole page.
Examples and recommendations from #Chris Dormani and #Alexei Shein are correct.
I am using grails 2.1.1 and trying to sign up a new user with modal window. My signup modal window's .gsp code is as follows...
....
<!--Start of Registration Modal Page-->
<div id="register" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="icon-remove"></i>
</button>
<h3 id="modalLabel">
Register
</h3>
</div>
<div class="modal-body">
<g:form method="POST">
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span2" placeholder="Full Name" value="${user?.profile?.fullName}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Email" value="${user?.profile?.email}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Username" value="${user?.username}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="password" class="span3" placeholder="Password" value="${user?.password}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Bio" value="${user?.profile?.bio}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<button type="submit" class="span3 btn btn-warning">Create Account</button>
<div class="span1"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel
</button>
<button class="btn btn-success" type="submit">Register
</button>
</div>
</div>
</div>
</g:form><!--End of Form-->
<!--End of Registration Modal Page-->
My corresponding controller is "user" and I have a customized "register" action there as well. All I want is that when I click Create Account button, the user is registered behind in the database. Is there any way to make it up through modal window form directly?