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"
Strange question mark icons in navbar
I see strange question mark icons in navbar: Here is my full source code: <!DOCTYPE html> <html> <head> <title>Test Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div
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)
load website with in a website and remove all but links and layout.
so im trying to host a webpage (i can us html Javascript or ccs) to load a website like https://cnn.com while removing all images and background color keeping the layout of the page and allowing clickable links (when link is clicked must do the same thing) and also stripping headers and fancy fonts to basic text level fonts. ive been trying to do this for days without any luck. please help!
Jquery UI - date range and month/year selector behave strange in Safari
Hello, I have a datepicker restricted to some of dates in date range of July to August 2018. This works perfectly in Chrome and Mozilla, and almost in Safari. In Chrome and Mozilla datepicker month/year selector, I have only "Jul, Aug" / "2018" selected, while in Safari there are all months and years in here. My client would love to have this one look same in all browsers. Is it possible to accomplish? Thanks in advance! Here is my code for showing this datepicker: $(this).datepicker({ minDate:
jQuery v3.2.1: Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load
I had made a plugin a while ago, it used jQuery v2.1.1. It worked fine. Since using the modern 3.2.1, the console shows this error: Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load I have a piece of code like this: function responsiveSlides() { var percentageSlidesWidth = (1 / slidesLen) * 100 + '%'; $slides.width(percentageSlidesWidth); } $(window).on('load',responsiveSlides()); The last line above seems to cause the error. But what is the fix? Thank you!
Query slider plugin: CSS bezier transitions make it show the last slide on page load
I have made a very light and feature rich jQuery slider plugin. It has a slide left/right transition from one image to the next or previous. You can see the plugin in action HERE. It worked very well/as intended until I added bezier transitions to ul.slider for smoothness. Since then, on page load it shows the last image instead of the first. How can I avoid that? Also, even though the slider should loop (and it does, in the absence of the bezier transitions), it does not loop.
Jquery UI 1.12.1 does not support split() method
Hi All, As I was working with a list for sorting order and used sortable method. but when I was using split() method for slicing the string of item id, It is giving error that type not defined. Please help! Thanks
Trying to extract an element attribute value that is part of an object
I have an input field coded as the following: <input type="radio" name="03794" class=" js-sourcing-option" data-sourcingoption="{"hasBackOrder":true,"isPartial":false,"unsourcedQty":0,"warehouseSequences":[1],"shipments":{"2017-10-12T17:00:00":{"warehouseNumber":101,"deliverByTime":"2017-10-12T17:00:00","numShipments":0,"warehouseQty":0,"backorderQty":1,"qtyByWarehouseInStock":{},"qtyByWarehouseBackorder":{"101":1}}},"sourcedQty":1,"shouldDisplay":true}"> Using jQuery, I cannot figure out how to
Add empty cell to HTML table when column missing from XML
I have a XML file and I'm populating a HTML table with the data in the XML using jQuery. The XML file has the following format: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <Row> <Patologia>Alzheimer</Patologia> <Molecula>Galantamina</Molecula> <Nombre_Comercial>RAZADYNE®</Nombre_Comercial> <Fecha_Exp>2017-06</Fecha_Exp> <Propietario>JANSSEN PHARMS</Propietario> </Row> <Row> <Patologia>Alzheimer</Patologia>
How to Hide a tr after checking two condition
Below is my html code and I have to hide this row after meting below condition using jquery Condition h3 tag should containing 'lblInformation9' and td contains text "Broadcast Tech" HTML <tr><td width="190px" valign="top" class="ms-formlabel"><h3 class="ms-standardheader"><nobr>lblInformation9</nobr></h3></td><td width="400px" valign="top" class="ms-formbody lblInfo" colspan="2">Broadcast Tech</td></tr>
About the usage of jquery data() in treetable
Hi: I recently try to read source codes in jquery treetable in deep, and found some problems I don't know. here is the problem about the usage of jquery data, and the code snippet is following: init: function(options, force) { var settings; settings = $.extend({ branchAttr: "ttBranch", clickableNodeNames: false, column: 0, columnElType: "td", // i.e. 'td', 'th' or 'td,th' expandable: false, expanderTemplate: "<a href='#'> </a>",
GET Status 0 on local page load with Cordova
I am using jqm with Cordova. When a local page loads jqm uses GET but returns the content along with a status of 0. This is seen in the logging app I am using as an error (it was expecting a status = 200 for a GET). I saw this item in the docs but it did not make any difference: $.ajaxPrefilter( function(options, originalOptions, jqXHR) { if ( applicationCache && applicationCache.status != applicationCache.UNCACHED && applicationCache.status != applicationCache.OBSOLETE ) { // the important bit options.isLocal
Jquery multi accordion collapse all
Hi, I can't find option to collapse all multi accordion. I am using http://www.jqueryscript.net/accordion/Smooth-Nested-Accordion-Plugin-with-jQuery-jQuery-UI-multiAccordion.html I have tried active, collapsible and initialState properties. my code is below <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"
Creating a Theader
Hello, I'm creating a table dynamically from a xml using the following code function showData() { $.ajax({ type:"GET", url:"test1.xml", dataType:"xml", success: function(xml){ var fila = $(xml).find("Row"); var tabla = $("<table />"); tabla[0].border = "1"; var row = $(tabla[0].insertRow(-1)); fila.eq(0).children().each(function() { var headerCell = $("<th />"); headerCell.html(this.nodeName); row.append(headerCell); }); $(fila).each(function() { row = $(tabla[0].insertRow(-1)); $(this).children().each(function()
position() in Wordpress
I'm trying to implement this simple code in WordPress: jQuery(document).ready(function ($) { ... $("#menu-secondmenu").position({ "my": "top left", "at": "left bottom", "of": $("#menu-custom-menu-scomparsa") }); ... }) The rest of the function works fine, and I don't see any error message in the console, thus I believe JQuery UI is correctly recognized, but nothing happens to the two elements in question, or to any other couple of elements I'm trying to apply the position() to. How can I debug the
Select 2 Customisation
Hi All, I want select 2 dropdown to dynamically adjust its length to show content in single line(should take width of the longest option possible) when drop down is clicked. Thanks in advance:) Regards Naseer
Upgrading jquery 1.8.3 to jquery 3.2.1
Hi, We are planning to upgrade jquery from 1.8.1 to jquery 3.2.1 The following are currently in use jquery-1.8.3.js, jquery-ui-1.9.0, jQWidgets v3.1.0 We upgraded as follows, jquery 3.2.1.js, jquery-ui-1.12.1, jQWidgets v5.1 After upgrade the entire look and feel of application is changed especially modal dialog stacking is completely changed. I read in a blog that z-index values are reduced from 1000s to 100s in jquery-ui-1.12.1.css. Is there a way to updrage jquery without changing the look and
swipe event select is not updated / refreshed; css bug
I have a problem with the update of a select-box <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TimeControl</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </script> </head> <body> <select id="id1Auswahl4" name="auswahl4">
jQuery ajax to plain JavaScript
I'm using Rails framework and I need to hit a controller URL through AJAX. The controller view should execute some JS(For testing I have given `alert();`) I have jQuery code like: jQuery.ajax({ url: url // Some URL }); The above code worked perfectly and displayed `alert()`. But, I have a requirement to convert this code to pure JS. So, I did: var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, true); xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhttp.send(); The above code
best way to encrypt or hide jQuery code
Hi, What's the best way or tool to hide jQuery code from the browser so when I deploy my application on host others won't be able to see the code? Kindly advise... Thanks, Jassim
Set accordion contents heights
Hi, Could you please guide how to setup accordion controls height. I am frustrated with autoheight property. please see code below. thanks <script type="text/javascript"> $(function () { $("#accordion").accordion({ collapsible: true, autoHeight: false, active: false }); }); </script>
about choosing a technology
I have completely developed my website with jquery and we decided to choose angular for business logic but there was confict angular over jquery ,so we have stucked. whether moving to jquery to write business logic is advisable?
Clone a page and change new the new page ID?
Hi, I have a page that I want to clone. The page has the id: id="page_0_Result_0" When the confirm button is used I want to clone this page and change the id to: id="page_0_Result_1" https://jsfiddle.net/vs2jfqaa/147/ Thanks in advance.
JqueryMobile Grid not showing my 250 records
Hi , I'm loading JQM grid data from a method which is returning 250 records, its properly coming to ko viewmodel. When bindings completes we can see only 25 records in grid. Where are the rest records? How can i show the full records in grid? Thanks!
Reset/remove validation error messages on modal form
I am using bootstrap 4.0 beta and validator 1.17. I have a form in a bootstrap modal. If I enter invalid data into a field (and validation error is displayed), then close the modal, then reopen the modal the error message is still there. Man, I've searched to the end of the internet and tried so many things (mostly old versions), but nothing works. I am using aspnet core which automatically loads and sets up the validator. Any idea how I can clear the validation errors when the modal is first
Next Page