looping through each class gets thorugh validation
I am checking if each text field that has the class tyre_data check if the value is larger than 4 characters, if so, don't go to next stage and it does???!: here is my code: $('.tyre_data').each( function(){ // Tyre Tread if($(this).val().length >= 4) { console.log('in here'); $(this).closest(".check-option").find(".error-message").show(); $("html, body").animate({ scrollTop: $(".container").offset().top }, 500); return false; } });
Doing something with jQuery after form successfully submitted
I have a form modal on a Bootstrap 4 page and want to display a success message in the modal after the form is successfully submitted, but my function is firing before validation is completed. Is it possible to plug in my post-validation jQuery in here somewhere? (function() { 'use strict'; window.addEventListener('load', function() { var forms = document.getElementsByClassName('needs-validation'); var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit',
XMLHttpRequest: Network Error 0x2ee2, Could not complete the operation due to error 00002ee2
We have a piece of code which uploads multiple files to the server, interestingly this code is working fine on Chrome & Mozilla, but it's failing in Internet Explorer, receiving the following error XMLHttpRequest: Network Error 0x2ee2, Could not complete the operation due to error 00002ee2 We tried solutions mentioned in SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, Could not complete the operation due to error 00002ef3 but still getting a similar issue We changed timeout value for Internet Explorer
ajax success div with same name problem
I have a while loop writing rows from the database as separate forms on a page. Works fine. It writes a hidden div just before each closing form tag. They all have same div id. I call a success function that fills in this hidden div with a success messages. Problem is no matter what form I choose the output always gets written to the first form on the page. I have to somehow determine what form was clicked and then tell the success function to use that div name. Not sure how to go about that.
Choose 1 form to submit with multiple forms on page
I have a page with multiple forms on it. Each form as different id but same name and consist of only radio buttons. I want to perform a submit via ajax but U am having a hard time only choosing the correct form in my code. What do I need to only submit the form where the radio button is selected. I have it working fine with only one form on the page. <form id="1" name="myForm"> <input type="radio" name="contract" value="0" class="custom-switch-input" checked> <input type="radio" name="contract"
File Drag and Drop
Has anyone come across a way of dragging and dropping files then uploading them when the form is sent. I have got it to work for one file but now I have found out that the client wants to do it for multiple files and remove any if there was a mistake before uploading them. Thanks
How To Select a Specific Option Based on a Condition
I have a table with many rows. Each row contains a select drop down with only 2 options, "Active" and "Deactivated". I wish to offer the user an alert message based on which option they select. The code I have can not distinguish one select from another select. And so returns "true" no matter which option I have selected. I have spent days hunting through SO and nothing works. Here is the HTML Snippet: <td class="category_select"><select class="edit_cat" name="category_value[]"><option value="active"
Pass html table in POST using jQuery
i want to get all data in table and post using ajax the problem is inside td there is an <input> before i put a condition result like this : -->{"table":[{"row0":[]},{"row1":[{"cell0":"01509"},{"cell1":"HVS BOLA DUNIA 70 GSM A4"},{"cell2":""},{"cell3":"RIM"},{"cell4":""},{"cell5":"320,000"},{"cell6":""}]}]} cell2 and 4 are empty <table id="so_data" class="table table-bordered table-hover"> <thead> <tr class="kop"> <th class="text-center" style="width:50px;">Code</th> <th class="text-center">Description</th>
Javascript Audio Player Sync Progress Bar Background Color or Image to currentTime
I have a javascript audio player that is able to track the timing or stay in sync while the song is playing and when the user clicks on the progress bar, the slider handle will set the value of the "audio.currentTime". Here is the actual audio player that I'm currently testing. Please take a quick look: http://newsletters.aaronestebancoaching.com/test1/1.html But what I'm trying to do is create either a background color or background image that will also move along the progress bar to sync up with
Event delegation for dynamic table with button
<input type=button> column is created in each row. Id attribute is assumed to be okay to use. Documentation has said that in a handler the selector ':button' will work for both <input type=button> and <button>. The table with INPUT tags having values of record number is created. But clicking on a choice does not respond using these dynamically created columns and it appears that event delegation is being thwarted somewhere. $(document).ready(function() { $('#studentlist').on('change','#selectstudents',function()
Refreshing a page implicitly without the user noticing
I was wondering if there is a jquery way to implicitly refresh a page without the page blinking, i know the common way is like this below. Regards <script> $(document).ready(function(){ $("#divid").click(function(){ location.reload(true); }); }); </script>
When user click on close tab, display error if form is not validate
Would you please give a solution for this: When user click on the close tab of the browser, display error if the form is not validated.
column not directly summing
i have dynamic table i want to update total, but total only summing old row ( not include new row ) <table id="so_data" class="table table-bordered table-hover"> <thead> <tr class="kop"> <th class="text-center" style="width:50px;">Code</th> <th class="text-center">Description</th> <th class="text-center" style="width:100px;">Qty</th> <th class="text-center" style="width:30px;">Unit</th> <th class="text-center" style="width:100px;">Price</th> <th class="text-center">Total</th> <th class="text-center"
strange jquery behavior
I use jquery http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js Also use this https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js I try to use ctrl+click but it not work debugger show that first run pjax, then jquery line 4291 here code return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
undefined;
I replace line jQuery.event.dispatch.apply( eventHandle.elem,
toggleClass Fade effect not working with display:none/block.
$('.item a').click(function() { $('.mydiv').toggleClass('displayit', 5000); }); So I've created div with display: none, and jquery that adds display:block (.displayit) when I click on .item a (link). Now, I want to add fadein and out to toggleClass but it's not working. I added jquery-ui.js and it still does not work.
showing data in modal on click button not working
<!-- Main content --> <section class="content"> <div class="row"> <!-- Left col --> <section class="col-lg-12 connectedSortable"> <table class="table table-striped table-bordered data display nowrap" style="width:100%" id="data"> <thead> <tr> <th>Code</th> <th>Description</th> <th>Category</th> <th>Merk</th> <th>Qty</th> <th>Price</th> </tr> </thead> <tbody> <?php foreach($stock as $s) { ?> <tr> <td><?php echo $s->code ?></td> <td><?php echo $s->description ?></td> <td><?php echo $s->Typename ?></td>
Highlighting the cell on character (.) input only
I have this jquery code to highlight the table cell when a number is entered. I need highlighting only when a dot (.) is entered in the cell only. So when a dot (.) is entered in the cell, the highlight will take place, other times not. here is a fiddle example. http://jsfiddle.net/k6p3ecL5/ thank you for your help. html: <table> <tr> <td> <input type="text" class="number" /> </td> <td> <input type="text" class="number" /> </td> </tr>
conflict between two javascript
<script> window.onscroll = function() {myFunction()}; var header = document.getElementById("nav-main-container"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } </script> <script> var parallax = document.querySelectorAll(".parallax"); var speed = -0.25; window.onscroll = function() { [].slice.call(parallax).forEach(function(el, i) { var windowYOffset = window.pageYOffset,
showing total in table
please help, cannot sum table column. this is my code : <div class="content-wrapper" > <!-- Content Header (Page header) --> <section class="content-header"> <h1> Customer List </h1> <ol class="breadcrumb"> <li><a href="home_admin"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active">Vendor - Customer</li> </ol> </section> <!-- Main content --> <section class="content"> <!-- Small boxes (Stat box) --> <!-- /.row --> <!-- Main row --> <div class="row"> <!-- Left col --> <section class="col-lg-12
on load img hide div
may i know how other div hide when feature image load
jQuery Audio Time Duration Change on Slider Click
I noticed that the following code runs fine on desktop & laptops, but not on my Android mobile or other mobile devices, to change the duration of the song when user clicks on the slider: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="timeline-box"> <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br> </div> **//jQuery to detect when user changes the timeline with the seekslider $(document).ready(function(){ $("#seekslider").mouseup(function(e){
Qunit testcase I want run through build.xml
Hello, I am new in qunit. I have setup initial setup for the qunit testcase. which are run fine when I open the browser. But I want to same test case while I deploy the code in specific env. I have build.xml file where I have setup other java UNIT test case to run as part of the deployment. does anybody have setup to run test case from build file. One more question, I have install qunit in my system. I have try to run through cli. I am getting the error. which I have attached the screen shot. Thanks,
Refer to nested text pattern not working? Problem ::after tag
Assume I have (simplified) the following code: <div ...> other text to keep <div ...> <p> <em> <a ....> .....foobar.... </a> </em> </p> ::after </div> </div> How do I remove all (ONLY !) innermost <div> which contain the pattern "foobar"? Since ::after comes after the target elements it should not be relevant. correct? $("div:contains('foobar')").eq(($("div:contains('foobar')").length) - 1).css("display", "none"); does not work
how to add a child node?
hi all based on this sample: http://jsfiddle.net/jamiguel77/Lfy2bc7t/34/ how to add : 1) Final Node? 2) Right Node? 3) a Node? my Root Node is (+) here the start code: http://jsfiddle.net/jamiguel77/9vmugf5r/12/ thanks
Displaying an Image Link for a Limited Time
I'm trying to get an image link to display for 24 hours on my site. This is what I have so Far, what am I doing wrong? <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> window.setInterval(function(){ var current = new Date(); var linkOneStartDate = new Date("March 6, 2019 12:57:15") var linkOneExpirationDate = new Date("March 7, 2019 12:58:00") if (current.getTime() > linkOneStartDate.getTime()) && current.getTime() < linkOneExpirationDate.getTime())
rounding to 2 decimal places
i have a little script that counts the total of a column in a table $(function () { var TotalCoreProd = 0; $("[id*=col01]").each(function () { TotalCoreProd = TotalCoreProd + parseFloat($(this).html()); }); $("[id*=TotalCoreProd]").html(TotalCoreProd.toString()); }); problem is, it's outputing the value with about 20 decimal places. i need to round this to 2 decimal places. i believe ".tofixed(2)" should be used, but no matter where i try and place it, it ends up causing the code the fail completely.
Ajax POST not successful
I'm trying to create ajax script where the user clicks a button e.g. Product Type Alpha Product Type Beta It then sends that response via ajax to a new page and remembers what the user selected but now asks more questions. I'm trying to do the first stage, but having no luck; jQuery(document).ready( function($) { jQuery('.sectors .sector_btn').click(function() { var myVar = jQuery(this).attr('name'); jQuery.ajax({ type: 'POST', url: location.origin + '/filter-page/?product_type='
check each LI has a class "selected"
Hi, I have a UL LI <ul class="selections"> <li class="check-option ok selected"> <div class="selections-text">Ok</div> <div class="selections-icon"><img src="/img/icons/check-tick.png" class="check-icon"></div> </li> <li class="check-option"> <div class="selections-text">Advisory</div> <div class="selections-icon"><img src="/img/icons/check-circle.png" class="check-icon"></div> </li> <li class="check-option"> <div class="selections-text">Defect</div>
jQuery ajax, a bit confused
I'm using jQuery 3.3.1. Reading through the page on .ajax() I was a bit confused on some things. Currently I'm using code like this. I stripped out some code to make it more readable. $.ajax({ method: "POST", dataType: "json", url: "includes/contactAjax.php", data: { action: "getCompanyContacts", companyid: $('#project_company').val() }, success: function (data) { }, error: function (jqXHR, textStatus, errorThrown) { console.log(textStatus + ' - ' +
Why won't this ajax post work
I'm not getting any errors.. I get Start and End in my console log. $(document).on("click","#submitrfp",function(e){ console.log('Start'); var P = $( "#apurchase" ).val(); var L = $( "#alease" ).val(); $.ajax({ method: "POST", url: "scripts/order-aircraft.php", data: { Purchase: P, Lease: L} }) .done(function(result) { console.log('>>' ); }) console.log('End'); });
button only activates after second click
I am not sure why that when I click my button it only opens the next page by double clicking, I need this to be a single click HTML <div class="button mover" id="contact" data-href="{{ contact_link }}" data-toggle="tooltip" data-placement="top" title="go to our contact form" id="contact_ultra">CONTACT ULTRA</div> JQUERY var touch_contact_start = false; $("#contact").on("click touchend", function(){ {% if app.config.mode == 'dev' %} console && console.log("touchstart on contact
Set a cookie for addClass and removeClass
$(".div1").click(function (e) { e.stopPropagation(); $(".div2").removeClass("active"); }); How I can set a cookie so I don't have to remove class all the time? I want it to be hidden even after reload.
Background color won't reset after mouseOut
Hello, I've my portfolio online here http://mircofragomena.com As you can see every time you hover on a menu item the background changes, but on mouse out the background won't go back to the original one, but keeps the color of the last hovered item. It's the only bug so far and I'd like to fix this as I'm jobless and I've to share my portfolio with clients and companies :D This is the JS that changes the background color, and should bring it back to its initial one on mouse out: $(function() { //
How to add a localstorage for checkbox?
<input type="checkbox" id="test" name="" value="" checked> $('#test').change(function(){ if($(this).is(":checked")) { $('.sb').removeClass("dis"); } else { $('.sb').addClass("dis"); } }); So I have a checkbox with toggle function. If checkbox is checked it removes .dis class. Could you help me with making a localstorage for this function? And also, can I make SAVE and RESET buttons? So it works only after saving the options.
datepicker months and years does not popup
When trying to fill out event form, the date and month does not popup. Even if you manually type the month and date within the form, it will not work still.Here is a link below to the form. What seems to be the problem? http://theminorityeye.com/tmecommunitycalendar/submit-your-event/
JSON.parse: unexpected character at line 1 column 2 of the JSON data
This seems to be a common "problem" but i could not find a solution somewhere else, so im asking here. I get this with ajax from an flask app, which seems to be valid json (at least to me). {
"payload": {
"data": [
10,
267,
34,
376
],
"labels": [
"NEW LPARS",
"ACTIVE LPARS",
"DISABLED LPARS",
"ALL LPARS"
]
}
} The jquery part which is meant to draw a simple Chart.js Bar Chart. // top bar chart begin $(document).ready(function(){
Unable to get handleIndex of jQuery Slider on change
Hi, I have slider with 2 handles. I want to get which handle was changed. I see in jQuery documentation that we can use change event and then ui object to get handleIndex. I have seen the examples. They work fine. But with my slider, it is not. Here is my slider: var slider = $("#slider").slider( { id: "slider1", min: 0, max: 40000, step: 100, value: [${val1}, ${val2}] } ).on('slide', function ( event, ui ) { //some work here. }).on('change', function ( event, ui ) { // This
Adding the total sum different id's and display it in a label
Hello, I am a beginner in jQuery and I try to implement the following idea. I have the following image... As you can see I have these 3 columns where based on the number of users choosed by the user at the bottom of the column a total is displayed. So what I am trying to implement is I need to add the sum of these columns (which have 3 different IDs) and to display the sum in the label called "Total" at the bottom right corner of the image. The code I have: Vanilla JS is being used to determine the
"Cannot read property 'toLowerCase' of undefined" in checkbox related script
I have a set of checkboxes that are intended to toggle the visibility of corresponding form groups. <div class="form-group" id="backgrounds_picker"> <label class="col-md-4 control-label" for="checkboxes"> Select any desired backgrounds:</label> <div class="col-md-4"> <label class="checkbox-inline" for="checkboxes-0"> <input name="checkboxes" id="checkboxes-0" type="checkbox" value="blank"> Blanks </label> <label class="checkbox-inline" for="checkboxes-1">
jquery unbind doesn't work
Hi, I'm having trouble getting a button to unlink for a text field. I have a small form with a "textarea" which I would like to close when I click on a button controlled by classe. Any idea what can i do?
Next Page