How to loop through form elements created with the append function
Hello, How to loop through form elements created with the append function ? var html = '<tr>' +'<td><input type="text" name="label[]" class="label width400" value="" required /></td>' +'<td class="formElem"></td>' +'<td><input type="text" name="name_column[]" class="name_column" value="" class="width400" required /></td>' +'<td><button type="button" class="removeColumn">-</button></td></tr>'; var numColumn = $('#numColumn').val(); for (i = 0; i < numColumn; i++) { console.log('i : ' + i); $('#table_create').append(html);
Don't work animate
Hi Using jQuery full version 3.3.0. My code: html: <div></div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.0.js" ></script> js: $( document ).ready(function(){ $(document).on("click", "div", function(){ $("div").animate({"background-color": "rgb(100,100,100)"}, 500); // don't work!!! $("div").animate({backgroundColor: "rgb(100,100,100)"}, 500); // don't work!!! $("div").animate({width: "+=200px"}, 500); //$("div").css({"background-color":"#f00"}); });
Not work method hide() of present element
Hi Using jQuery lib by version 3.3.0. Not work next sample. When click on img tag, his don't hide. Img element is present on the page. For run: click on the map and paste URI to prompt window, then click OK. Click on image, after it was added. Example, https://jsfiddle.net/xte8sam3/3/
Zoom elements inside dialog window
When I want to zoom out elements on a web page I then Scroll the mouse wheel up or forward while holding down the "Ctrl" key. Is it possible to set a default zoom out on a div? I use a dialog window to show the div and I want the elements inside to be about 50% smaller then full size.
SHowing all menus when page loads
I've got this ( https://0422f88.netsolhost.com/ ) website menu coded. Every time each page loads all menu levels show. Is there something I can do to change this? I don't want any menus to show until the user hovers over the word in the main menu.
jquery function .post working on Chrome & IE but not in Firefox
I am using a jquery function with .post for logging in. This function works in Chrome & IE but not firefox. With firefox I have to try login more than once. The username & password are cache so I am not typing them each time. $('#submit_login').click(function(e){ $userLogin = $('#user_login_name').val(); $userPassword = $('#user_password').val(); //alert("in submit login" + $userLogin ); $.post("login_ldap.php", {userLogin: $userLogin, userPassword: $userPassword})
JavaScript function collision?
I have an Adobe Animate CC project that I have changed to make it better. It is problematic because Adobe has not done a good job of generating code that can run simultaneously on a page. I manipulated the code to be able to do this. Understanding a good amount of JavaScript but not everything I can get this to work. The Adobe Animate CC program generates code that is native Create JS. The local script connects to Create JS to make things animate. When I run the code without a JavaScript timer I
jQuery 12.4.1 and Validate.js 1.17.0
Hello - I have a strange issue where I have jquery 1.12.4 (have tried 1.11.1 as well) with validate and if I load jquery.js then validate.js - it does not work (it continues the form against rules and no error message is displayed). If I load validate.js then jquery.js it does work but jquery errors and no other jquery functions are working. This is very strange. I have removed all other .js includes. Thanks in advance for your help!
Need help with Swipe and panel in one page
Hi I am trying to use both swipe and panel in one page. this works fine with panel: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.4.min.css"> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="panel" id="overlayPanel" data-display="overlay"> <h2>Overlay Panel</h2> <p>You can close
hide selected value in other select
hi , is there a way to hide the value selected in other select ? http://jsfiddle.net/buekd25s/11/
Moment.js multiple entries problem/
Hello, I have the following problem. I use "moment.js" for displaing "posted {x} minutes ago" text in my project, but my main problem is that it does not load each timestamp individually. This is how i "messed" it.. hm hm.. i mean made up so far! I created only two columns but imagine much more entries. https://codepen.io/HarrysR/pen/ZqXWxJ Any ideas?!
innerHTML does not work!
Why does this not work: $(document).ready(function(){ navigationHandler(); headerHandler(); }); function headerHandler() { var titleName = getCurrentSiteName(); console.log(titleName); $('#title_name').ready(function(){ this.innerHTML = titleName; }); } function getCurrentSiteName() { return 'Name'; }
JQuery Mobile Textbox inside a iframe is malfunction in UIWebView
Hi All When I use UIWebView to browse a html having iframe to include another jquery mobile form, the textbox inside the form is malfunction. Please find my attached code Test1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
Accordion activate
Hello everybody, I have an accordion with three panels. In the third panel, I want a button to select the first panel. I tried those instructions : $("#accordion").activate(1); $("#accordion").activate($("#accordion").children[0]); $("#accordion").activate("Volet2"); Volet2 is the id of the div in the second panel. In each case the accordion stayed with panel 3 opened. I could get panel 1 from the browser console with $("#accordion").change(1); but because there was a syntax error, that resulted
when we move the cursor to particular button (hover), box need to open next to that using jquery
when we move the cursor to particular button (hover), box need to open next to that using jquery. Any examples are there related to that?
What is .resize() at the end of this function?
Hi, I'm trying to understand the following function: function resizeVideofn() { var $allVideos = $( "iframe[src^='//player.vimeo.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://www.youtube.com'], object, embed" ), $fluidEl = $(".video-container"); $allVideos.each(function () { $(this) // jQuery .data does not work on object/embed elements .attr("data-aspectRatio", this.height / this.width) .removeAttr("height") .removeAttr("width"); }); $(window).resize(function () { var newWidth
How to add data to an existing empty table cell
I have code that does a $.get(urlstring, function(data){ which builds a table. Then I add data from another $.get from another table to add to the div: $('#sampleDiv .testClass').each(function(index){ for each match to the key. This works great for the display on the page, but I have added the tablesorter library to the table, and all of the columns will sort, except for the columns that have been added from the second .get. I'm assuming it's because they are in the div, and not in the table?
Problems with getting class name with hyphens
I have class names like this: <div id="divFirst" class="firstname second-name"></div> And also: <div id="divSecond" class="first-name second-name"></div> This is the result: alert($('#divFirst').attr('class').split(' ')[1]); Output ==> second-name alert($('#divSecond').attr('class').split(' ')[1]); Output ==> Undefined So if the first class name has hyphens then the second class name can't be found. How come this happens? Is there a way to get the second class name if the first one has hyphens?
How can I make this Youtube iframe responsive with jQuery/JS
Hi, Looking for a solution to make a Youtube video iframe responsive I found this page: Fluid Width Video Now I'm trying for hours to apply it on my code example here: Trying to make it responsive but it's not working and I don't understand why it's not. Could you please help me with this? I'm not looking for a CSS solution. I'm looking for a jQuery/JS solution. Thanks
jQueryMobile multi select issue after bundling
Hello, I am using jquery mobile custom selects menu with multiple options. (http://demos.jquerymobile.com/1.4.3/selectmenu-custom/ ) Below are my mvc partial view code: <label class="clsLabel" for="fruits">Select Fruits</label> <div class="ui-select CustomSelectClass"> @Html.DropDownList("fruits", Model.GetFruits, new { id = "fruits", @multiple = "multiple", @data_native_menu = "false", @class = "fruitClass" }) </div> Above code generates below
PreLoader wont run on Page Refresh
Hi all, I have implemented a preloader for my site, it uses GSAP and a timeout function to ensure that the animation runs, even if the page has loaded (quickly). However, upon uploading to the server (www.ainsleyclark.com), I have encountered that the preloader doesn't run on page refresh, I can only assume that this has something to do with the set timeout function but cant figure it out. Many thanks in advance. /* PreLoader */ $("#preloader svg").removeClass("hidden");
Trying to use jquery.post
I have a chrome extension that uses appendGrid which uses jquery. For that reason I already have jquery included in my popup html. It is an older version of jquery but it works so I don't want to break it. I have been having issues with using XMLhttp to do CORs so I want to try using jquery's $.post. But I am getting $ is not defined. Now realize that you can't mix html and js in a single module in an extension. And the includes for the jquery (can't be from a CDN). The include for the background.js
Enable button after all radio button lists have a selection
Hello, I'm new to jquery and I'm not sure how to approach this issue i'm having. I have a web page that has 2 radio button lists on the main page and 4 more radio button lists on a modal popup when a user checks a checkbox the popup appears. On the initial page loads the save button on the popup needs to be disabled. I need to use jquery to enable the save button only when all 4 radio button lists have a selection. If the clear button on the popup is clicked the radio button lists on the popup
using a ES6 plugin , thats not been compiled to ES5 in the browser.
Hey Guys , Good day , have a question about a vanilla JS plugin written in ES6 . This one here. Can't i just import the index.js from the /src directory and work with it ?
Jquery How to send HTTP request after form control ?
Hello How to send a HTTP request with Ajax after checking if the inputs ".name_column" and ".taille" are not empty. Both inputs are create dinamycally with the append function. Than you in adavance. Joce. $(".btn_validate").click(function () { //alert('btn_validate'); //--------------------------- //FORM CONTROL //--------------------------- $('.name_column').each(function(){ $(this).change(function(){ $(this).css({"border" : "", "background-color" : ""}); }); if( !$(this).val() ){ $(this).css({"border"
I'm creating a monster
I am an amateur jQuery user and I'm replicating a spreadsheet from excel into jQuery drop down choices. At this point I've got 3300 lines of code and 214,000 characters. I'm just looking for feedback from others to see is this normal? Most of my code is for placing data into arrays and then I seem to be repeating a lot of commands when I show the data in my drop down list.
Get Target of on click
I have a subclass element (.myclass) that is added after the DOM is initially loaded and there may be several on the page. I have an on-click to detect the clicking of the class like this: <div id="wrapper"> <span class="myclass">Click Here</span> </div> The jQuery: $('#wrapper').on('click', '.myclass', function() { console.log('Inside'); var target = $(this).find('#wrapper .myclass'); console.log('TargetThis: ' , target); }); How do you target the class element that was just clicked. Currently
Flyout child menu extends off-screen
I have a menu that pops off a toolbar button. One of the menu items has child items, resulting in a flyout. It's pretty long and extends off the screen (causes the scroll length to increase). I have position() on the parent menu object, but it's having no effect on the flyout. What I want is for the top of the flyout to be above the parent menu item such that the bottom of the flyout goes to the bottom of the page but not below. My HTML is identical to the sample on the Menu Widget page. Here is
How to access global variable inside jquery mouseout event?
// access variable ttt inside the function var ttt="123"; $("#records_table tbody").bind('mouseout',{param : ttt}, highlighselecteddates); function highlighselecteddates(event){ var data = event.data.param; // throws ref error console.log(data);/ throws ref error console.log(event.data.param); // this logs properly. }
How do i load jquery?
<html> <head> <title>My Now Amazing Webpage</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/> </head> <body> <div class="fade"> <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div> <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div> <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div> </div> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
How to resolve Error: No label found for checkboxradio widget
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script> $( function() { alert("First"); $( "#radio-1" ).checkboxradio(); $( "#radio-2" ).checkboxradio(); $("input[type='radio']").checkboxradio(); } ); <div class="sign" id="showSignDiv"> <s:iterator
Get data attribute value of targeted element.
I am using a Jquery extension which is used like this $('.target_input_box').datetimepicker({ //properties declared here }) .target_input_box elements have a range of data attributes which need to be used in the datetimepicker properties something like this <input class="target_input_box" data_mindate="01/01/2000"> <input class="target_input_box" data_mindate="01/01/2010"> $('.target_input_box').datetimepicker({ mindate : // data_mindate of current .target_input_box }) How can i get this?
Migration From jquery-1.11.1.js To jquery-1.12.4.js
Please Can You guide me Migration From jquery-1.11.1.js To jquery-1.12.4.js And Whats are the related Changes,ajax method is comparable in jquery-1.12.4.js
Prevent onclick being attached to all items.
Hey all. I am having this problem. I have added a button to a select2 input field. The problem seems to be that the click event is being bound to each item in the a.$results. I want the click to be only on the button. I have a jsFiddle set up with the problem https://jsfiddle.net/sm1fo5d0/10/ Thanks in advance. let a = $(this).data('select2'); if (!$('.select2-link').length) { a.$results.parents('.select2-results') .append('<div class="select2-link select2-close"><a>Close</a></div>')
Form submit tracking
I have this for link click tracking... $(document).ready(function() { $('a').click(function (event) { var id = $(this).attr("id");What would be the equivalent for track form submissions? We use jQuery Validate and would trigger the form click tracking function with the submitHandler. submitHandler: function(form) { formClickTracking(); } ;
Youtube Api multiple videos not firing events
I have a page with 10 buttons linked to Youtube videos using the Youtube api. When the page loads I don't want any videos to be shown until one of the buttons is clicked. This bit is working well. I am trying to get the video to play when the button is clicked and remove the video when it ends (this is the bit I'm having trouble with). The video ids will be variables from a json response. I have hard coded them here just for testing. This is the code I'm using just to test: <html> <head> <script
filter a list by the class name
I want to filter a list by the class name in searchDIV . The $("#searchDIV *").filter works for searching everything but I want just the class name or really the name of <?php echo $partno ?> Thanks for the help! Travis <input id="searchInput" type="text" placeholder="Search.."> <script> $(document).ready(function () { $("#searchInput").on("keyup", function () { var value = $(this).val().toLowerCase();
Stop date from being selected after postback
I have a page which allows you to select a date from Multi date picker (http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI) and add the selected date to another control. Heres some of the code $(document).ready(function () { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler(sender, args) { $('#mdp-demo').multiDatesPicker({ dateFormat: "y-m-d" });
trying to work out why this code doesn't work
When I debug it, I get something on the click even and get the correct ID for the clicked element, however, the LINK doesn't change to Unblock and the CSS doesn't change $(document).on('click', '.block-news-row', function () { var ID = $(this).attr("ID"); $.ajax({url: "block-news.php?ID=" + ID, success: function(result){ $(this).html('Unblock'); $(this).toggleClass('block-news-row', 'unblock-news-row'); }}); });
Get this value from span
So now I have multiple prices and when I click button I only get first price in the list. This line always return first price in the list no matter which price I click. var itemPrice = $(this).closest("div.row").find("#price").text(); <div class="row"> {{#each items}} <div class="col-md-3"> <ul style="list-style: none;"> <li class="text-center"> <div class="popup" onclick="itemPopup('myPopup{{this._id}}')"> <img class="item" id="itemImg" src="{{this.img}}"><br> <span class="popuptext" id="myPopup{{this._id}}">
Next Page