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}}">
Need to append image to to div.
Okay so on click function I do this: var item_img = $('#itemImg').attr("src"); I get the src of the image. And then the problem is that I have more than one item but each item have the same class. So whether I click on second image or on third I still append first item image. I need to get somehow unique image when I click button. This is the code: <ul style="list-style: none;"> <li class="text-center"> <div class="popup"> <img class="item" id="itemImg" src="{{this.img}}"><br> <span class="popuptext"
scroll to Anchor - prevent animation on section
Hi all, Im new to the forum (and somewhat of a beginner to jQuery), and have stumbled onto a problem with a scroll to anchor function. At the moment, when the user clicks an element on the nav bar, the nav bar hides via a GSAP timeline, it scrolls down to the section, then the GSAP timeline reverses the nav animation so it re-appears. What I'm stuck on - is that I cant seem to prevent the navigation animation happening when the user is already at that particular part of the page. For example, if
How to handle jquery Ajax response if it binary large object data type.
hello all I am using $.ajax with GET method to fetch data from server. The data is some file and i am getting binary data. In xmlHTTPRequest, I am able to set responseType to blob, but while doing same in $.ajax, the error event executes even after response is 200 and readyState is 4. this is what i used. $.ajax({ type: "GET", url: fileUrl, success: function(data, jqXHR, response){ var blob = data; console.log(blob); console.log(jqXHR); console.log(response); console.log(((new Date().getTime())-startTime)/1000);
How can i handle synonyms in typeahead plugin?
I just created a search function using the typeahead jquery library. My problem is that when i select an item from the dropdown list it return all the synonyms inside the input field instead of the name of item: In my example if you try to type "Fruits" and select the item from the drop-down list it works ok. But if you try to type "Apple" or "Orange" and then select "Fruits" from the drop-down list, then it returns all the synonyms of "Fruits" in the input field eg "Apple, Orange, Banana". I just
Superfish JS conflicting with the Woocommerce
Hi, We have used Superfish JS in the Wordpress theme. Woocommerce is also installed. When we set the shop to show "Product Categories" from the Customize -> Woocommerce -> Product Catalog. It displays NAN along with the category name. If we remove the Superfish JS it works fine. Could you please check what is the issue? Thanks
How to set/unset active links
I have a set of links (same URL). I'd like to make the following changes to the "li" element when its associate link is clicked: 1) Add a class='active' to li element. 2) Remove the "a" anchor, and keep only the "span" element. **HTML before jQuery:** <ul class="navbar-list"> <li><a href='#' data-id="1" > <span>Link 1</span></a> </li> <li><a href='#' data-id="2" > <span>Link 2</span></a> </li> <li><a href='#' data-id="3" > <span>Link 3</span></a> </li> </ul> Using
re : ON OFF switch Button
hi i am using on/off switch inside table control but when try add new row in then second switch also pointing to first one only. http://jsfiddle.net/RahulKanheya/p89ka9jq/966/
AJAX to Classic ASP
Hi All, I would like to ask, How to use serializeArray from jquery going to classic asp, I am using AJAX. what would be the syntax to be in AJAX,, and what would be also use in classic asp? please help. Thanks
close modal by clicking outside modal
Need help, can not get it working..! Would like to close div by clickin outside this div. Example: https://next.plnkr.co/edit/eOYp60O8UvRgK6Bc?preview
get the position (y corodrinate) of anchor tag passeed in URL
Hi, I am trying to determine the position of the anchor tag in the URL. I tried var element= $('#gallery').find(hash); var loc = element.position(); alert("Pos = "+ loc.top); where #gallery is the id of the div contacting the gallery hash is anchor id passed in in the url When using Firefox's "Inspect Element" and in the console tab I'm getting TypeError: loc is undefined
popover event changing
Hi everybody, currently trying to figure out which event listener has “login” element. Please look here: loadbee.com -> navigation login. <a> has popover method, Login window appear/dissapear with onmouserover/hover(not sure) event, i would like to change this event to Click event, clicktoggle to be exact. Thanks in advance
animate executing immediately (jQuery v3.3.1)
Hi, I’m writing a site using jQuery 3.3.1. All the animations that I include are running immediately. For instance: $('#l_B').css({left: '10px'}); $('#l_B').animate({ left: 200 }, { duration: 2000, step: function ( now, fx ) { console.log('1 >> ' + fx.elem.id + " " + fx.prop + ": " + now); } }); The element l_B move immediately, in just one step. Going through the animate source (file effects,js), I
How to make jquery autocomplete accept the pasted text.
Hi Team, I'd like the jquery auto complete widget to accept the pasted text apart from the selected text. The pasted text is part of the suggestions from a URL.
Referencing the next div after the one clicked.
Hi, I have some html code to display summary log information inside a table inside a div. Each summary div is followed by a detailed information div that is hidden. The displayed result looks like hundreds of rows in a table. The idea is for someone to click on a div showing summary log data and to have the next hidden div to expand showing detailed log information. I have code that works to slideDown one hidden div if another is clicked but I have to use the id of both divs. What I would like is
Issue with autocomplete scroll bar arrow's in IE
Hi, I am facing the issue with Jquery autocomplete scroll bar arrow's. I am using the Lazy loading to load the data in drop down. It is working fine when doing scroll by mouse scroll or keyboard keys. But I try to click on arrow's of scroll bar it will get back to the top. I am not able to go to the bottom of the scroll bar. Thanks Irfan
how to add a class to button Edit, in tableedit plugin
hi all here my fiddle: http://jsfiddle.net/jamiguel77/xdo6czrh/ when user click on Edit button in any row.... i want go to Name column, and change Jhon Name to Mike... when user LostFocus(clicking the button Save Changes) i before want check before the value typed, send the value to ajax and return, if is OK, save the changes if not i want display an alert Thanks
jeditable - catching click event
Hello, I'm using jeditable in relation with dataTable as follow: var tableGrid = $('#grid').dataTable({ "dom": "frtip", "bStateSave": true, "paging": false, "fnDrawCallback" : function() { tableGrid.$('td:eq(6)').editable(function(value, settings) { var td = $('td#' + this.id); displayStuff(td, this.id, value); }, { type : 'text', cssclass
Next Page