I am submit a form which is present in 5th accordion and after submitting the form the page is getting reload and default first accordion is getting .active after reload.
I want the last active accordion to be active after page reload.
var query = $('#isOtherOptions').val();
if(query=='true')
{
$(tabPanelNav).find('li').last().addClass('active');
$('.configTab').addClass('active').show();
}else{
$(tabPanelNav).find('li').first().addClass('active');
$(container).find('dd').first().addClass('active').show();
$(tabPanelNav).addClass('full');
});
$('.panel-tab-list nav a').not('.active').on('click touchstart', function(e){
e.preventDefault();
var contentContainer = $('#' + $(this).attr('rel'));
$(this).closest('nav').find('.active').removeClass('active').end().end().closest('li').addClass('active').closest('.panel-tab-list').find('dd.active').hide();
$(contentContainer).show().addClass('active');
});
Related
I'm helping with a Squarespace site and it has a custom form added in code on a particular page. The form collects the payer's info, then can enter any amount in the "Total to charge" field, then it is supposed to display the 2.7% fee. However, I can ONLY get the fee to display if I refresh the page (chrome, safari, either one). Click here to see the page...let me know
here is a snippet of code:
<script>
$(document).ready(function () {
var $amount = $('input[name="amount_1"]');
var $fee = $("#fee");
var $total = $("#total");
var $amount_2 = $("input[name='amount_2']");
var processing_fee = .027;
var isCurrency = function (inval) {
var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;
if (regex.test(inval)) {
return true;
}
return false;
};
$amount.on('input propertychange', function () {
if (isCurrency($amount.val())) {
var fee = ($amount.val() * processing_fee).toFixed(2);
var total = (Number(fee) + Number($amount.val())).toFixed(2);
$fee.text('$' + fee);
$amount_2.val(fee);
$total.text('$' + total);
}
});
$amount.on('blur', function () {
$amount.val($amount.val().replace("$", ""));
$amount.val(Number($amount.val()).toFixed(2));
if (!isCurrency($amount.val())) {
$amount.val("");
}
});
$("#paymentform").validate({
submitHandler: function (form) {
form.submit();
}
});
});
</script>
When a custom script only runs on page refresh, the cause is likely to be Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
Disabling AJAX is often a simple solution:
You can disable Ajax in the Style Editor, with some exceptions:
Ajax can't be disabled in Skye, Foundry, or Tudor.
Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they
will still use Ajax to load the Blog Page.
To enable or disable Ajax:
In the Home Menu, click Design, and then click Style Editor.
Scroll down to Site: Loading.
Check or uncheck Enable Ajax Loading.
If you do not want to disable AJAX, then see "Option 2" here for how to write your code so that it will work on initial page load and on AJAX page loads.
CODEIGNITER
I want to submit two forms with one button. if a radio button is not checked i only submit the first form, but when i check the radio button appear more information (second form). I want to submit the 2 forms when the radio button is selected.
The problem is that it´s only submiting form 1 even when the radio button is checked.
<script>
submitForms = function(){
if(document.getElementById('tipo').checked) {
document.getElementById("form2").submit();
document.getElementById("form1").submit();
}else{
document.getElementById("form1").submit();
}
}
</script>
This is a native JavaScript solution:
<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.getElementById("myButton").addEventListener("click", function () {
console.log(document.getElementById("form1").value);
if (document.getElementById("tipo").checked) {
console.log(document.getElementById("form2").value);
}
});
});
</script>
You might also take a look at javascript Submit multiple forms with one button
I found the script I wanted (I am a beginner with JS) : https://stackoverflow.com/a/25060114/4857932
Link HTML
Open Modal
Modal JavaScript
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
});
But I would like to know how to open to modal without using the link. Only using JS. Is that possible ?
I tried this code but it's not working :$('#myModal').modal('show');
Can you help me ?
Thanks for your help ! :)
First of all you have to say that you are using the Twitter Bootstrap framework.
You have to use the .modal - method on the modal content::
$('#my_modal_content').modal('show');
$('#my_modal_content').on('shown.bs.modal', function() {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
})
I have a form in a jQuery popup on a webpage. The jQuery popup is a div named .vote-form and the form inside it has the name "#form".
When the form is submitted, the content inside the jQuery popup changes to a success message. I need to make it so that when the jQuery popup is closed, the success message is removed and the form is refreshed back to the original form, so that when the jQuery popup is opened again, the form is showing again and NOT the success message.
My feeble attempt to get this result involved refreshing the ENTIRE page when the jQuery popup is closed. This PARTLY has the desired result, but when the page is refreshed, most browsers get a popup asking if the user wants to resubmit the form content. I need to avoid this.
This was my code handling the closing of the .vote-form:
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
window.location.reload();
});
I suspect that its possible to refresh ONLY the div, and not the entire page, but I do not know how to accomplish it.
Can someone assist me?
EDIT: Based on one of the answers below, I modified my code. I also wanted to show the code used to open the form up too:
$('.vote').click(function() {
$(this).parent().find(".vote-form").fadeIn("normal");
$("#the-lights").css({'display' : 'block'});
$("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
$(".vote-form").load(window.location.href + " .vote-form-container");
});
Here is the problem - I have 3 forms on the page. When "vote-form-container" is loaded, its loading ALL THREE forms into the .vote-form box - how do I modify the code to only load the .vote-form-container that is part of the specific .vote-form - I suspect I have to use $(this) but I tried modifying the code to this and it didnt work:
$(".vote-form")(this).load(window.location.href + " .vote-form-container");
I am thinking I did it wrong.
EDIT 2: Now the "Close" button dosen't work after the form is reloaded the first time:
$('.vote').click(function() {
$(this).parent().find(".vote-form").fadeIn("normal");
$("#the-lights").css({'display' : 'block'});
$("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
event.stopPropagation();
$(".vote-form").fadeOut("normal");
$("#the-lights").fadeTo("slow",0);
$("#the-lights").css({'display' : 'none'});
var current_form = $(this).closest('.vote-form'),
index = $('.vote-form').index(current_form)
current_form.load(window.location.href + " .vote-form-container:eq(" + index + ")");
});
Don't reload the page but redirect your user:
window.location.href = window.location.href.toString()
Or load the new form with ajax:
$(".vote-form").load(window.location.href + " .vote-form");
For more information on the ajax approach see api.jquery.com/load/#loading-page-fragments
Update:
Using jQuery the index function you are able to replace only the current form.
// I asume your button is in the form
var current_form = $(this).closest('.vote-form'),
index = $('.vote-form').index(current_form)
current_form.load(window.location.href + " .vote-form:eq(" + index + ")");
... I need to make it so that when the jQuery popup is closed, the success message is removed and the form is refreshed back to the original form...
So, if I well understood:
$('.vote-form-close').click(function(event) {
event.stopPropagation();
var vf = $(".vote-form");
/* fadeout and remove inner content of the popup */
vf.fadeOut("normal", function() { vf.empty(); });
/* reset the form */
document.getElementById('form').reset();
...
});
I am getting re-execution of imported js files upon a hitting a form button which calls a function to insert a DOM element into page ( in simulation to exe of an ajx callback function). The DOM insertion causes a page refresh which re-requests all files from server.
Nothing big on the function call:
var addFashionVideo = function() {
var nodeContainer = document.getElementById('vidList');
var mytitle = document.forms.addVideo.newVidName.value;
var addTextNode = document.createTextNode(mytitle);
var newLI = document.createElement('LI');
newLI.appendChild(addTextNode);
nodeContainer.appendChild(newLI);
return this;
};
TARGET DIV for DOM update code is :
<div id="ajParent" class="aj" style="width:325px;background-color:blue;color:white;">
<ul id="vidList">
<li>Watch Fashion Paris Video</li>
</ul>
</div>
I place an alert on this page and after the function attempts to insert the new LI
[ oddly the LI appears for a split second then disappears ] a page refresh is triggered
and my alert on the page re-executes.
// Perhaps Maybe I have a browser issue on this computer or I am just to new of a scripter
// to not see the problem...any comment appreciated.
The minute you hit submit on a form, the page will reload since you have made a GET request with the form. In order to stop the form from submitting you would have to make it return false on submit. e.g.
document.getElementById('formname').onsubmit = function {
return false;
};
You would have to make sure to disable form submission so the page doesn't reload, then you could run your ajax request on submission and do what you must on success in the ajax function.
I really doubt your dom insertion is causing the reload.