update a jquery plugin
Hi, on one of websites I included a "php-plugin". This plugin uses jquery and jquery uses the jquery-plugin "jqplot". Now the "php-plugin" no longer works flawlessly. I simply downloaded a new version "jqplot" (i.e. 1.0.9...) . I renamed the new jqplot1.0.9 .., resulting from extracting the newly downloaded folder, to jqplot.1.0.8r1250. Of course that does not work correctly. Can you get me started on how to update "jqplot"-lib. Many Thanks! Thor
Two scripts conflicting?
I have two scripts that work fine by themselves. If I try to use both scripts together the first one doesn't work, but the second one does. The first script is to control the playbackRate of myaudio element. The second script is for a vu or volume meter. This is both scripts in the order I'm using them: // Create a couple of global variables to use. var audioElement = document.getElementById("myaudio"); // Audio element var ratedisplay = document.getElementById("rate"); // Rate display
Like Dislike Increase in Wrong Order after Refreshing the Page
I am facing 3 Issues in Like/Dislike jquery plugin for comments. Table structure id - like - dislike - uid - comid Where (uid is session id) and (comid is comment's id from comments table) Like/Dislike Function is for logged in users, any user can like or dislike a comment. After liked or disliked user can unlike or remove disliked Now when i Click on Like/dislike button, it increases the number of likes or dislikes but 1 - If i click on like, it increase the number and update the database. but instead,
How to setup Qunit testing with webpack?
Hi, I could not see any document specific to setting up Qunit testing with Webpack. Could you please share necessary detail to setup Qunit with webpack? Thanks
When is the next release of jQuery UI due please?
I'm using 1.12.1 and bug #15078 is due for release in the next version. I can't see anywhere on the blog indicating the next planned release date. Thanks,
creating a popup or tooltip on a mouse enter
I have this function that came with a responsive image map program - I'm not at all proficient with jQuery, but learn as I pick it apart. I would like to run either a popup or a tooltip with a close button instead of an alert, and using mouse enter, (I guess?) so that it won't go away unless the close button is clicked. $('area#eastWin').on('mouseover', function() { alert($(this).attr('alt') + ' clicked'); }); Can some kind soul help me with this? Forever grateful, GN
tablesorter filter wont work
Hi, I am trying to tablesorter filter in a table where sorting (with reset button) is working as well as paging & zebra. When I type a character into the search field of a column, nothing happens. Ive added the css for .tablesorter-filter.disabled {display:none;} Ive also added "filter" to widgets Was hoping to get any other ideas where I might be going wrong? Thanks in advance Todd
JSON stringify vs object
Hi, I have a row set like this and added to the DOM var htmlRow = "<div id='GridRow_" + rowIndex + "' class='GridRow' data-player='" + JSON.stringify(player) + "'>\n</div>"; I get the row using JQuery 3.3.7 like this var row = $(this).closest('.GridRow'); var player = $(row).data('player'); This gives me the player as an object. PERFECT ! Now I take this same player modified and attach it again using JQuery this time like this : $(row).data('player', "'" + JSON.stringify(player) + "'"); Which looks
Find number of disabled images in a div.
Hi, if I have a div that contains four images and I disable one how would I find the number of disabled images? For example if I have: <div id="resutsBox"> <img src="gerrard.jpg" width="40" height="40" style="display:none" /> <img src="gerrard.jpg" width="40" height="40" /> <img src="gerrard.jpg" width="40" height="40" class="ui-disabled" /> <img src="gerrard.jpg" width="40" height="40" /> </div> How can I find out that I have one image disabled? Thanks.
TimePicker showing calendar instead of time sliders
Hello, everyone. I am not very familiar with JQuery, trying to debug some js that goes like this: ``` $( ".time" ).each(function(e){ $(this).timepicker({ timeOnlyTitle: 'Definir horário', timeFormat: 'HH:mm', timeText: 'Horário:', hourText: 'Hora', minuteText: 'Minuto', currentText: 'Agora', closeText: 'Escolher' }); }); ``` This timepicker function comes from here, but I believe it's not a bug
Multiple Tabs - Close All But One
Hello, I'd like to start with one tab that can be hidden but still remains there. I would then like to add tabs dynamically that have a 'X' on the right side of them that can be individually closed, and a way programmatically to close these tabs. The idea is it works just like tabs on a browser, typical IDE, etc. Making it 'collapsible' is NOT what I want. Would appreciate any insight. Thanks, -Gabe
Tab rotation along with url link consists of pdf file scrolling down
Hi, How can I run jquery cycle plugin script into my computer for slide show. Thank you Is it possible for link that consists of pdf file , to scroll down in that file and to move on another website which consists of multiple tabs. Regards,
Validate 2 Validation if any one is valid then proceed
Respected Person! I would like to know about the jQuery Validation Plugin, that i want to validate 2 type of validation at the same time, such as 12345-1234567-1 1234512345671 If any of one these match then proceed. How can i do this. Thank you, Regards, Muhammad Naveed Haroon
each on array of two objects results in three objects
I'm trying to iterate through an array and clone and append an element to a div element for each item in the array. Everything is working except that when it's more than one element I get som unexpected results. The array contains two element's and I've checked that the each loop only runs two times, but for some reason I get a third element in the result (as you can see from the image). The two first are correct, but why am I getting a third element? Am I using clone() and append() correctly? each:
Multi dropdowns populated from api's
Hi, I have a basic form that has a dropdown which is populated from an api with the following function <!-- get categories --> <script> var sel = $('#Categories'); var api_url = 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx; jQuery.get(api_url, function (data) { $(data).each(function (key, val) { console.log(key); sel.append($("<option>").attr('value', val[1]).text(val[1])); }); }, 'json'); The form
Convert from stringify to boolean
Hi, I am using below: Savanna.savanna_admin = JSON.stringify(data[0].savanna_admin); to get the bit value from MySQL and it returns: "\"1\"" How can I make this converted to true and when it's "\"0\"" then to be as false? Thanks, Jassim
datepicker function enhancement (like date range) not working
Dear Sir refer http://prajaktasoftware.com/adventchembio/rawmaterialenquirysearch.php click on Last Date Date picker is working but I am not getting result from setting $( "#lastdt" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });// not working// Minimum maximum Date <script> $( function() { $( ".datepicker" ).datepicker(); $( ".datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" ); $( "#lastdt" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });// not working// $( "#lastdt"
always return first row hiden field value problem
Hi, I have a rendered bootstrap html page as follows. i want to get the clicked row hidenfield values but now always return sumesh which is first row. How can i get clicked row hidenfield value? <div class="panel-body"> <div class="page-header"> <h4><span class="glyphicon glyphicon-user color"></span> Sumesh</h4> <input type="hidden" id="hdnTenantName" name="hdnTenantName" value="Sumesh" /> </div> <div class="page-header">
Context menu in Iframe
I am displaying fancybox in an iframe . The iframe contains a HTML video which is built in easypano. The problem is that the Full Screen option in context menu does not make the iframe go full screen. I want to make the iframe go full screen. I am using image maps. Here is my code $(document).ready(function () { $('map > area.fancybox').click(function (e) { $.fancybox({ 'autoScale': true, 'title': this.title, 'type': 'iframe', 'href': this.href, }); // fancybox return false; }); });
About the usage of jQuery bind function
I have a problem about the usage of bind function. Here is the example: // Parent class function Widget(width, height) { this.width = width || 50; this.height = height || 50; this.$elem = null; } Widget.prototype.render = function($where) { if (this.$elem) { this.$elem.css({ width: this.width + "px", height: this.height + "px" }).appendTo($where); } }; // Child class function Button(width, height, label) { // "super" constructor call Widget.call(this, width, height);
JSON encode not working with special characters
Hi , I am using pear's (http://pear.php.net/pepr/pepr-proposal-show.php?id=198) package as i have PHP 5.1.6 for JSON encode/decode purpose. But when i use special characters like &,*,[,+ ,'etc, my stuff from Handson table is not encoded properly and the text going in Mysql DB is not properly JSON encoded and is broken. So when i display this data on Webpage , it is not displayed at all as it is based on JSON format . What should i do so that the JSON format don't get break. I am using this to JSON
Chrome Developer Tools - Sources blank
I rely heavily on Chrome Developer Tools - Sources to debug javascript in my web pages. I have recently begun building my first jquery mobile webapp and have been alarmed to discover that the Sources window, for each page, is completely blank. I use Chrome in mobile simulation mode to build and test all my pages before testing on a physical phone device. No js or html appears at all, for any of my pages. I surmise this is because of JM's approach to loading content behind the scenes rather than the
About the usage of selector in jquery.dataTables.js
Hi: I meet a problem when reading the source codes in jquery.dataTables.js. I try to find out how this plugin add the pagination number and div to the table, and then I see something strange which rarely to see, the code snippet is as following: if ( btnDisplay !== null ) { node = $('<a>', { 'class': classes.sPageButton+' '+btnClass, 'aria-controls': settings.sTableId, 'aria-label': aria[ button ], 'data-dt-idx':
Replacing Close Icon with Button in Modal Window
Hi Guys. I'm using JQuery UI to open a Modal Windows. Right now the Modal Windows has and X Icon on the right side of the header to close the Modal Window. I would like to replace the X icon with a Button with label Close. I'm not sure how to accomplish this. Any help would be greatly appreciated. Thanks
activate_subpage events
I had earlier an app, where I used pagebeforeshow events to prepare ajax calls and put some data on page. But now I make an other one, wish to use subpages instead of pages (due to side slider menu, to have the same toolbar in the header. My searches dont bring results. Are they some events like pagebeforeshow for activate_subpages? $(document).on('pagebeforeshow', '#overview', function (event) { or $("#overview").on(...same nothing works. Working will be checked with alert or console.log. But the
Using jQuery Mobile with webpack
I have a cordova mobile app build with jquery-mobile. Instead of importing the js files through script tag I want to using a packager webpack. I have tried to simply do var $ = require('jquery-mobile'); but I bump into a bunch of errors. Does anybody know how can I require jquery-mobile using webpack. I am a complete newbie in using webpack.
jQuery UI slider Touch & Drag/Drop support on Mobile devices
Hi, I use this scripts below: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> I use on my website slider, button, accordeon jquery ui widgets but the slider doesn't work on mobile devices. I found this solution http://touchpunch.furf.com/ but it use 1.8.21 jquery ui version and not the 1.12.1 version and my slider, button, accordeon jquery ui widgets doesn't work with 1.8.21 jquery ui version. How to fix
detach and append resizing issue
I have the following scenario: <div> ... <div id="div1" style="width:50%;overflow:auto"> <div id="div2" style="width:100%;overflow:auto"> ... </div> <div> ... </div> I want to detach div2 from div1, create div3, append div2 to div3, and then append div3 to div 1, as follows: <div> ... <div id="div1" style="width:50%;overflow:auto"> <div id="div3" style="width:100%;overflow:auto;padding:10px"> <div id="div2" style="width:100%;overflow:auto"> ... </div>
Sortable item from list one to list two move not working
I drop ITEM from Dragable which is right side to Sortable ( Sortable List 1 and Sortable List 2 ). After droping when i try to move item from Sortable List 1 to Sortable List 2 then it's not moving. I have scroll on parent div and sortable specific height which is according to my need. Here is live Fiddle and below myy code is : HTML: <div class="main_container"> <p> Item move from List 1 to List 2 is not working. List two is downside scroll </p> <div
Referencing all ::before elements?
In the past I already asked on how to peek into a ::before CSS rules e.g. for example in <div> <soan> ::before </span> ... </div> with a CSS deklaration like span::before { content: "foobar"; } I learned that this is not possible resp. only with difficulties. Ok, now a simplified scenario: I don't want to peek into or modify such rules but find simply all <span> elements which have such a ::before clause. Afterwards I want to remove these elements. Therefore the following does not work $("div span::before").remove();
Please help with jquery.inview plugin with Ajax content
Jquery Inview plugin: https://github.com/zuk/jquery.inview/blob/master/jquery.inview.js When the link "Load more" is visible, the script should trigger this link that will call the file loadmore.php and more content will appear. It works. The problem is that dynamically loaded content also contains link "Load more" and the script doesn't trigger the new loaded link anymore. html <div id="cwall">content</div> <div id="more1" class="inview"><a class="morecom" id="1" href="#">Load more</a></div> script
Slide Down/Toggle Div
Hi, We have package boxes on our page and was wondering how to target and slidedown/toggle the ".p-more-info" on each div on button (".showmore") click? Any insights will be helpful. <div class="package-box"> <div class="package-wrap"> <h1>Package 1</h1> <div class="p-more-info" style="display: none"> <p class="p-features">FEATURES</p> Lorem ipsum dolor sit amet <a href="#" class="btn btn-orange">GET THIS PACKAGE</a> </div> </div>
Find the correct video selector
I have a client in the following URL http://rmfmm.com In the homepage center there is a video with a poster image. I want to define a jquery click event upon start playing by clicking on the video box but I can't set the right selector(like $("#video").click(...) Can someone help please? Thx
Why am I getting anerror due to Jquery?
I have created a mobile app and testing my app on real devices using www.pcloudy.com this tool and I am getting this error when trying to delete an application listing in my code. DELETE http://localhost:3000/apps/9 500 (Internal Server Error) jQuery.ajaxTransport.send @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:9660 jQuery.extend.ajax @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:9211 $.rails.rails.ajax @ jquery_ujs.self-ca5248a2fad13d6bd58ea121318d642f195f0b2dd818b30615f785ff365e8d1f.js?body=1:84
Merging Unmergin Table Cells
Hi Guys, Here is the issue I'm currently having. I have a HTML table with five columns and 50 rows. some of the cells in the columns have repeated text that I would like to have the option to merge or unmerge. Here is my merge function function mergeGridCells() { var dimension_col = null; dimension_col = 1; // first_instance holds the first instance of identical td var first_instance = null; var rowspan=1; var columnCount = $("#mainTable tr:first th").length; for (dimension_col = 1; dimension_col
Add button link after each excerpt
Hello, I need to add a button link to post after each excerpt, this is the html example: <div class="post-content"> <h2><a href="https://link1">link text1</a></h2> <div class="excerpt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus risus vel risus aliquet commodo. Nullam luctus blandit erat, non pellentesque felis tincidunt eget. [...]</p></div> </div> <div class="post-content"> <h2><a href="https://link2">link text2</a></h2> <div class="excerpt"><p>Lorem
Grouped collapsible with listviews - expanded by default
I have a series of Grouped collapsible with listviews which work well for what I need. But for one of these listviews I need it expanded by default. As it stands now, these are always collapsed by default. I have read through the listview docs and can't find how to do this. I want the other collapsible listviews collapsed by default, just as it is now, but for 1 of them, I need expanded by default. http://demos.jquerymobile.com/1.4.5/listview/ Here is mine: <div data-role="collapsibleset" data-theme="a"
Javascript array to JSON
Hey guys, I have a JavaScript array, which I want to convert to JSON. The thing is that I don't know what will be in the array, cause it's a calculator, that depends on the user. I saw some commands that parse js to json, but the thing is that I want to be able to use a VARIABLE instead of a fixed input. Let's take this as an example: var obj = { "name":"John", "age":30, "city":"New York"}; var myJSON = JSON.stringify(obj); I want to be able instead of "John", or "30", or "New York", to be able to
Questions about $.ajax url "'url' is undefined"
Hello, I'm fairly new to Jquery and javascript. I'm trying to perform an asynchronous HTTP (Ajax) request using this function: function updateProgressBar(){ $.ajax({ url: '../ExportImport/LakesideImportManager/MyProgressReporting', dataType: 'json' }).done(function(response){ $("#myProgressBar").val(response.completionPercent); if(response.completionPercent == 100){ clearInterval(myInterval); } }); } When I debug it using the F12
Image slider plugin: simulating a click on window load does not work after updating the jQuery library
I am building an image slider plugin with Next and Previous buttons and an auto advance feature. The auto advance happens by triggering clicks on the Next button at equal intervals: $(window).on('load', function() { autoAdvanceInterval = setInterval(function() { $('#next').trigger('click'); }, settings.pause); // When a control or dot is clicked by user // stop autoadvance by clearInterval method $('.controls a,.bullets li').click(function(event)
Next Page