DOM Multi Level Filtering based on Different Data Attributes
Can you please take a look at This Demo and let me know how I can enrich my code to have multi level filtering system based on different existing and potential upcomming data attributes? As you can see I am trying to filter the .box based on two data attributes shape and color but my code is filtering the DOM separately. Can you please let me know how I fix this? $('input:checkbox[name=shape]').on('change', function() { if ( $('input:checkbox[name=shape]:checked').length > 0) { $(".box").each(function(){
??? jquery $.ajax result is displayed in browser
I use by example but am not an expert using jquery. I have a jquery that does a uses a $.ajax and the remote programs runs as expected but its json encoded response is displayed on the browser instead of allowing the calling program to continue. My function looks like this: $('#file_upload').submit(function(e) { e.preventDefault(); var url = document.getElementById("url").value; var formData = new FormData($('#file_upload')[0]); $.ajax({ url: 'cd-file-uploaderX.php',
Why it doesn't return the value?
So basiclly I have a very simple function to get online players but it doesn't return to the value what I'm looking for. $(document).ready(function() { var ip = "mc.hypixel.net"; loadPlayerCount(ip); window.setInterval(function() { loadPlayerCount(ip); }, 60000); }); function loadPlayerCount(i) { $.get('https://eu.mc-api.net/v3/server/info/' + i, function(s) { if(s['status'] == false) { return -1; } else { return s['players']['online'];
How can i sort a list of elements/items based on specific text or numbers using jquery ?
Hello community. I 'm building a search function which is filtering the listed items by their names everytime a user is start typing into an input field and at the same time it counts the number of displayed items/results. I want to improve it more so i added 2 checkboxes that will allow users to sort the results by (eg best rated, or specific tags). In my current example there are 2 checkboxes (OPEN FIRST, BEST RATED) How can i make them so if someone click on them to sort the listed items ? MY
Issue on Binding jQuery UI Slider with Checkbox Event
Demo I am able to check and uncheck some checkboxes on jQuey ui slider stop() using following code. But this looks like is not adding any event to the check boxes!. As you can see the check boxes are re-acting against direct check in out by logging on console but doing nothing when slider change. Can you please let me know why this is happening and how I can fix this? $(function() { $("#slider-range").slider({ range: true, min: 50, max: 54, values: [50, 54], stop: function(event,
The price value dont appears with "$"
I have this code so when the user introduces for example "10" it appears 10,00 in the price field: document.getElementById("show_price").onblur = function () { var $price = document.getElementById("registration_type_price"); $price.value = this.value; this.value = parseFloat(this.value.replace(/,|\$/g, "")) .toFixed(2) .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, "."); } But I would like to show also the $, like 10,00$. Do you know how to achieve
Why does the Close button indent to the right?
/* The 'Add Apps' button is aligned to the Left. But for each toggle, the Close button indents the right. When it toggles back to the Add Apps, that is correctly aligns to the Left. */ $(".application_add").toggle(); $("#application_toggle").click(function() { $(".application_add").toggle(); if ($("#application_toggle").attr("value") == "Add Apps") { $("#application_toggle").prop('value', 'Close'); $(".application_add").find("input").prop('required',
how to find document.ready function in globalnamespace
hi, Any variable we create in the script(javascript) tag of HTML, it goes to the global namespace. which can be seen in the console tab of the developer window(f12). I wanted to find out where does document. ready function goes, and whether it goes to the global namespace or not. your sincerely
How to add a custom button in the insert menu?
Im using tinymce in a textarea and the content the tinymce code is like: tinymce.init({ selector: 'textarea', plugins: 'image code link lists textcolor wordcount ' + ' hr pagebreak colorpicker textpattern anchor table media', relative_urls: true, file_browser_callback: function (field_name, url, type, win) { // trigger file upload form if (type == 'image') $('#formUpload input').click(); } }); And its working. But I would like to include in the "Insert"
Better mechanics for this code?
Hello, I have the following code and even though it does what i want to do i think that i write too many lines of code for this function. In short, i have some modals in which i load forms dynamically with .html(). I want to add / remove in each modal opened the "modal-lg, modal-md" class etc.. in a better way. In my fiddle i use some if statements. Is there any other way to achieve this by using less lines of code? I've tried addClass, removeClass, toggleClass etc.. but it doesn't seem to work
ajax Why my code is all correct but its still not working?
$(document).ready(function(){ $('.trolley').click(function(){ $(this).find('i').toggleClass('open'); // call the icon class in h3 class and add .open $('.addbar').toggleClass('open'); }); $('.a1').click(function(){ var qunti = $('#itemnum1').val(); var id = $('#hidden1').val(); $.ajax({ url:"Promotionaddajax.php", method:"post", async: false, data:{ "cart": quanti, "item": id }, success:function(data) { $('#itemnum1').val(''); } });
Hold a keypress (Shift Key) in Javascript/Jquery
Here we are not checking that the shiftkey is pressed or not. What i need is to press shiftkey on a function call We have code where a key can be pressed on element keypress. e = jQuery.Event("keypress"); e.which = 13 //choose the one you want $("#test").keypress(function(){ alert('keypress triggered'); }).trigger(e); My requirement is Shift Key should be kept pressed on my function and released on another function called. function called(){ .. code .. // need shift key pressed } function called_another_func(){
How to get main image from wikipedia using jquery or php
I have an HTML page where I put city image. I want to load the main image of city from Wikipedia using jquery or php. I tried using jquery with ajax but it loads all images i just want to load main image $.ajax({ url: "https://en.wikipedia.org/w/api.php", data: { format: "json", action: "parse", page: "Mumbai", prop:"text", section:0, }, dataType: 'jsonp', success: function (data) { console.log(data) var markup = data.parse.text["*"]; var i = $('<div></div>').html(markup); $('#article').html($(i).find('img'));
Get values from multipy inputs for search field
Hi. Kindly asking for help. I have this code https://jsfiddle.net/advokatb/caj5ds2u/4/ There is one search field, several checkboxes and several inputs (they are for numbers). As result I need to make search query something like this: OperaName alto:1 bass:2 So the 1. "OperaName" i should type myself in search field. 2. alto (name of checkbox) should be pushed to search field with the number that I type in input with class qty. If qty field is set, than alto:1 should be appended to the main keyword
JQuery - JSON API Connection
Hi, I am using the following code trying to POST / add some property data through to an API using this code https://api.beds24.com/json/createProperties - I'm new to JSON and API's but have a fair understanding of programming, I am getting no errors and the console response looks ok (but I have very limited JSON API knowledge), will add the response to another post as too long for this post. Please could someone have a look and point me in the right direction to getting this working. Thanks for looking.
Add total number of Rows
I am dynamically appending data to a tr and want to add number of rows to the bottom of the table. Below is my code. Any ideas will be appreciated. $('#admin').change(function() { var select = $("#admin option:selected").val(); $.ajax({ cache: false, async: false, type: "GET", url: "@(Url.Action("Employees", "Details"))", dataType: 'json', data: { "id": select }, success: function(data) { $("#admin").val(select); var target = $("#LoadEmployees"); target.empty(); for (var i = 0; i < data.length;
Script loaded in header isn't recognized in Ajax, why?
This is kinda tough to explain, so bear with me. On mobile devices, I load a script named "mobile.js" in the header. This script has functions to detect a swipe and a taphold (which I believe were both recommended on here), and then I also include a function to hide a specific element when the user focuses on an input, textarea, or contenteditable: $(function() { if ($('#local_banner').css('display') != 'none') { $('input, textarea, [contenteditable]') .on('focus',
How can i filter items from a list which those items contain specific text by clicking in a checkbox using jquery?
I have a list that contains 6 items/divs. How can i filter the items that contain specific text by clicking/select a checkbox? For the following example i want to filter the items that contains the word "green" when i select the checkbox labeled "green" and so on. I want to make it work with jquery. Could you please help me? Thanks in advance. Here is a JSFIDDLE with my code.
Different dropdown boxes for items generated from db.
Hello, I have a page where it loads some items from db. I want each item to have a "settings" dropdown box in which there will be options like "edit, delete etc...". I made it to a point but the thing is that when i click an entry's settings button to open up the dropdown box, it collapses every item's dropdown box in page. This is my HTML and Jquery code so far... Html settings btn: <a href="#" class="settings-btn" id="entry-settings" data-entry-id="<?php echo $pet['pet_entry_id']; ?>" rel="nofollow"><i
Customer site breaking my plugin
Our plugin uses jquery, all functions are defined as jQuery. Works on all other customer sites without a problem. Works in the wordpress admin. On the home page or any page of the customers website where our plugin isn't called, chrome developer tools console shows jQuery works fine, however on the pages of the site where we load our plugin, jQuery no longer works and it now requires $ sign. I am at a loss. It's some kind of conflict, but looking through their JS files I haven't come up with a solution.
[SOLVED] Calling $.get() gives XML error message and I am not using XML
I am learning and experimenting with AJAX and $.get() in jquery. I have adapted a test case from tutorialspoiknt.com and changed the test case from using PHP to using JSP. I am running the test case using Firefox 61.0.2, Tomcat 8 and jquery-3.3.1.js. I'm calling $.get() as follows: console.log("xxxxxxxxxxxx get"); $.get("result.jsp",{ name: "Jim" }, function(data) { $('#stage').html(data); } ); console.log("yyyyyyyyyyyy get"); The script executes and I get the log messages:
why is my seat Charts only display the third map?
now I know that the map in seat charts can be store in an array form. But why I click on any of the linked image it will only show the third map?
GZIP Iisue with code.jquery.com CDN ?
Hello, Starting Wednesday, when doing an availability test of our site, there have been issues with the CDN. The file that's being loaded is https://code.jquery.com/jquery-3.1.0.min.js The file downloads and browsers are still able to load it, but we get this error: System.IO.InvalidDataException: The magic number in GZip header is not correct. Make sure you are passing in a GZip stream.
Wait cursor is not changing until mouse moves
Hi, I have simple code to display the busy cursor while I am waiting for the ajax call to be finished (callback done) and when the call is finished I restore the cursor to the default value (method always). I have noticed that if I don’t move the mouse the icon for the mouse does not change. The same happens the other way around – when the call is finished the cursor default icon is not restored until I move the mouse. Is there something wrong I am doing or this is genuine bug in Chrome (I am using
Targeting span w/ special characters & appended input classes inside
I have some forms and inputs that are appended to a span. I'm trying to target the span's id and it has special characters in it '~~' & then get all the appended inputs inside of it (var fileupload). Not sure if it's the characters or the appending causing the problem. How can I target the inputs? Here's a jsfiddle: https://jsfiddle.net/billparti/ex71hmoq/
Bootstrapvalidation and returned value
Hello For one of my HTML form, I have one field called password, first I want tot check if it is null or not, and then it would check in background using remote call using URL to know if that is valid or not. and from backend process it would return wheter does it exist or not and other field value to update the iframe content/src dynamically. I know using remote I could go to backend and check for validations however, I am not sure on I can assign value to existing field if it is succeed and returns
jQuery gets confused if used from a fragment loaded by jQuery itself
I have a problem with jQuery in a page which contains few divisions. Let us consider the following HTML code: <div id="a"><a href="javascript:/" onclick="LoadB();return false;">Load B</a></div> <div id="b"></div> <div id="c">TEST</div> where function LoadB( ) { $( "#b" ).load( 'b.html' ) ; } and b.html contains <a href="javascript:/" onclick="LoadC();return false;">Load C</a> where function LoadC( ) { $( "#c" ).load( 'c.html' ) ; } and c.html contains <p>Hello, world!</p> If I click on "Load B"
Pasting data, which option is faster / better?
Still working within a contenteditable, and I'm manipulating data that's being pasted in. It seems like I have two ways of doing this, and I would like your advice on which way is going to be faster or overall better... or if you have any other suggestions to make it faster or better. Option 1, lists "beforepaste" and "paste" separately: $('#comment') // this works for IE9, and probably earlier .on('beforepaste', function(e) { if (window.clipboardData) {
Show file preview of input
I'm trying to show a simple preview of a file, once it is selected in a form input. The image that I am trying to write a source to is appended after the page is loaded but before the image is displayed. <form> <div> <div> <input type="file"> </div> ... <img class="preview" src="#" alt="Preview Image" /> </div> </form> function myFiles(files) { // files is the selected file console.log('File: ' , files[0]); // has name, type, size, etc.
$.ajax data and sucess
I have recently gotten with the times and upped to the latest jQuery (yea me). I also have lost touch with my programmer (my bad). Can someone help with updating this code to work with my new jQuery v3.3.1. Much appreciated.. <script> $(function() { $(".pollradiovote").live("click", function() { var pid = $(this).attr('pid'); var vid = $(this).attr('value'); $.ajax({ url: '/includes/polls.cfc?method=vote', data: "pid=" + pid + "&vid=" + vid, success: function(data)
How to trigger a change on button click
I want to update a dropdownlist when another button is click by calling trigger but getting an error. Below is my code any help will be appreciated $("#btnReplace").click(function () { const oldPersonId = $('#OldbuttonId').val(); const newPersonId = $('#newPersonID').val(); var button = this; $.ajax({ method: "POST", url: "@Url.Action("Replaced", "NewReplacement")", data: { OldId: oldPersonId, NewId: newPersonId}, success: function (response) { $('#cdrl-load-text', button).html('Saved!'); if
Search page function
Hello. I manage an intranet site, that contains a very large amount of data (mostly hyperlinks). I would like to add a search box that indexes all content on one page, and displays the results on a separate page. It would require the ability to include, for instance, links within a dropdown menu. I understand this would be easier accomplished if the content was contained on one page (no iframes or ASP includes, etc.). I can manage that. I have created a Find on Page that works, but highlighting as
Problem submit data for php-Script via jquery-ajax
Hi I have a problem within a Jquery-Script using the get-method to transmit data to a PHP-Script. Here is the code function handleDragStop( event, ui ) { var offsetXPos = parseInt( ui.offset.left ); var offsetYPos = parseInt( ui.offset.top ); alert( "Drag von/nach!\n\nat: ("+ startXPos +"," + startYPos + "/" + offsetXPos + ", " + offsetYPos + ")\n"); $.ajax({ type: 'GET', //url: "ajax_div_wochenelement_drag_drop.php", url: "drag_drop_funktion_per_get_testen.php", data: 'startxpos='
Reorder elements in list nr 1 and have the changes to also be reflected in list nr 2.
I have two lists with the same order from start: List nr 1 1 2 3 List nr 2 1 2 3 Is it possible to reorder elements in list nr 1 and have the changes also reflected in list nr 2. So the purpose is to only touch the elements in list nr 1, and have the changes automatically reflected in list nr 2. Also list nr 2 can be reordered, but the changes would be isolated, and NOT be reflected in list nr 1. https://jsfiddle.net/zsoa1dve/89/
Changing height of an element to fit content
I have this script that makes the height of an element with an [data-resize] attribute grow and shrink so that it always fits the content: var maxHt = 100; $.each($('[data-resize]'), function(e) { var offset = this.offsetHeight - this.clientHeight; $(this).on('keyup', function() { if (this.scrollHeight < maxHt) $(this).css('height', 'auto') // not sure why I have to do it like this, but I do... .css('height', this.scrollHeight + offset); else $(this).css({
Submit for and data
Why does this form not submit data $(document).on("submit","#evaluateform",function(e){ e.preventDefault() //$('#evaluateform').serialize(); $.ajax({ method: "POST", url: "functions/getRouteEvaluation.php", data: $("#evaluateform").serialize() }) .done(function( result ) { $("#evaluate-results").html(result); }); }) my form is like this, it's also loaded via another ajax script so loaded dynamically <form id="evaluateform"> <input id="depCode" type="text" placeholder="Departure">
Using jQuery to pass hidden field based on SELECT box selection
Is there a jQuery way to using the "starts with" from the SELECT box to pass a variable to a hidden field? Here's what I have for the script to far, but I need it to only look for the first letter, really. For example, if the user selects "Keyboards - Acoustic Piano", we need "KeyboardMag" to pass through in the hidden field "referralCode". $( document ).ready(function() { var refcode={ Guitars : "GuitarsMag", Keyboards : "KeyboardMag", Drums : "DrumMag",
Submit form data to ldap
I'm trying to post back some form fields back to our ldap connector. I can get both groups and members from within each group, but I'm not getting any response when I try to post back a user. To clarify the steps a bit 1) The user clicks 'Load Groups'. That talks to our LDAP connector. That then populates all of our companies ldap croups. 2) When a user clicks the group, it loads all the users for that group. 3) I have button that when clicked opens the modal where a form lives. 4) I'm sure i'm
owl carousel does not show images
Hello Jake, I have a product_page.php, that displays an owl-carousel product image gallery on the left and product info section on the right: <div class="row mb-5"> <div class="col-lg-5 mb-5 mb-lg-0"> <div class="owl-carousel owl-theme manual dots-style-2 nav-style-2 nav-color-dark mb-3" id="thumbGalleryDetail"> <div> <img src="img/products/pr-gdesktop-1.jpg" class="img-fluid" alt=""> </div> <div> <img src="img/products/pr-gdesktop-2.jpg" class="img-fluid" alt=""> </div> <div> <img src="img/products/pr-gdesktop-3.jpg"
ajax/getJSON call fails with no error... help!
Hi I am trying to amend some legacy jquery code written by someone else - I'm not a jquery expert... :-( I have a call to getJSON that for some reason started to fail and I couldn't see why. I rewrote it to use $.ajax so I could see what was going on. I have added an error and complete function and also .done, always & .fail to try and see what is happening but neither these nor the original success function are being called. I have spent 3 days now trying to figurre out what is going wrong and
Next Page