Focusout repeats
I have this code that I use for every textbox I have: $("textarea").focusout(function () { //saveComments(); alert("Hello"); }); So if if I leave textbox 1 and click anywhere outside besides clicking any other textbox this code fires once. But if I click textbox 1 and then textbox 2 the focusout goes on repeatedly: "Hello", "Hello", "Hello"...etc. Why does it gets triggered several times when I enter another textbox? How can this be solved?
How do I access nested elements inside a list
I have this code: <li> <div class="wrapper"> <table> <body> <tr> <td></td> <td>Access this text</td> <td></td> </tr> </body> </table> </div> </li> How do I access the text inside tables first row and second cell?
jquery: API JSON example.
I have written the following code (as below) for an API JSON example but I cannot seem to output any information on screen? Moreover, if I use https://jsonplaceholder.typicode.com/posts/1 in my code it will function and output an answer? html: <h1>JSON Example</h1> <span id="output"></span> Jquery: $.getJSON('https://jsonplaceholder.typicode.com/albums', function(data) { $('#output").text(data.title); });
Fetch previous and next element with a certain condition
Lets start with a sample source: <hr> <p>....foobar...</p> <hr> Now I want to delete all <hr> elements which are immediately a) BEFORE a <p> element which contain "foobar" b) AFTER a <p> element which contain "foobar" If I code for example $("p:contains('foobar')").prev().remove(); then elements might be delete which are NOT a <hr> element So how can I specify otherwise the delete statement of a sequence of elements with one condition? Peter
Y-m-d format subtracting when set as value
For the life of me I could not understand why when I was storing today's date and then setting it as a value it was coming up as 199* instead of 2018-07-0*. How do I set the value of a text input for today's date in the Y-m-d format without it subtracting? HTML <input type="text" id="delivery_date" name="delivery_date" placeholder="" data-mask="9999-99-99" class="form-control" size="4" required> JS document.getElementById('delivery_date').value = user[0].delivery_date;
jQuery contact form reply showing up on a bank white page not sure why
jQuery contact form and the for, is submitting but the reply showing that it was sent is showing up on a bank white page not sure why, want it in the place were the form is any ideas to help with code????? jQuery(function() { // Shorthand for jQuery(document).ready(function() { // if (jQuery('.comments-form,.contact-form').length > 0) { Modernizr.load([{ load: ['js/jquery.form.js', 'js/jquery.validate.js'], complete: function () { jQuery('.comments-form,.contact-form').validate({ //
hover working indepedently with identical containers
Hello! I have a .container containing .wrapperA (image) and .wrapperB (image). And use this code to make .wrapperA invisible and .wrapperB visible on hover: $(".container").hover( function() { $(".wrapperB").fadeIn(1000) $(".wrapperA").fadeOut(1000) }, function() { $(".wrapperB").fadeOut(1000) $(".wrapperA").fadeIn(1000) } );EDIT: The problem is that I would like to add
updating code from attr to prop
In the process of moving some jquery code to a site that uses a newer version of jquery, I had to change from using attr to prop as shown below. jquery-1.3.2.js if (!($("[name=jobs_ws]").attr("checked"))) { jquery-1.10.2.js if ($("[name=jobs_ws]").prop("checked")) { After reading up on attr vs prop I'm still unclear on which attr and removeAttr should be clanged to prop in the code below. Currently the only problem is that only in IE11 the checkbox for "phone_appointment" and "have_file" are not
jQuery multiple content sliders?
How can I change the jQuery code below to have multiple content sliders working? When I try and add additional sliders it doesn't work correctly. CodePen https://codepen.io/anon/pen/aKPReW Any help is much appreciated. Thanks in advance! jQuery var allSlides = $('.slide'); var activeSlide = 0; setInterval('autoSlide()', 4000); $(".slider-next").click(function() { if (activeSlide+1 >= allSlides.length) { allSlides.eq(activeSlide).removeClass("active"); activeSlide = 0; allSlides.eq(0).addClass("active");
parsing xml using jquery (malformed xml)
I have an XML that looks like this: <?xml version="1.0" encoding="utf-8"?> <export> <Article URL="test"> <DisplayName>test</DisplayName> <Summary>test</Summary> <ThumbNail ID="test" URL="test" /> </Article> </export> Which I'm looking to parse using jQuery. This works using the following code: $.ajax({ url: 'https://[fqdn]/[filename].xml' }) .done(function(xml) { $(xml).find('Article').each(function() { console.log($(this).attr('URL')); console.log($(this).find('DisplayName').text()); console.log($(this).find('Summary').text());
Finding the total of array between two indexes.
Hi, if I have an array like this: scores = new Array(5,2,4,6,8,9,10); How would I get the total value of the items from index 1 (2 in this case) and index 4 (8 in this case). So scores would return the value of 20. Thanks in advance.
Error $x is not defined in chorme console
When i use below code $x("//*[@id='popular-movies']/div[1]/ul/ul[1]/li[1]/a")[0].click() Its working, But when I use setTimeout function with this code $(function(){setTimeout(function(){$x("//*[@id='popular-movies']/div[1]/ul/ul[1]/li[1]/a")[0].click()}, 3000); }()); I got error, $x is not defined Can you help me to solve this?
Click problem
Charm Wiktionary Tiếng Việt Lily Maymac vốn nhỏ con thật chứ chẳng hề dùng ảnh ảo trên mạng đâu, chiếc chính là "hot girl môi tều" với chiêu chụp ảnh để khi nào cũng gợi cảm và sexy nên mới làm cho người ta bất thần lúc gặp ngoài đời. giả dụ chẳng may mang đôi môi xỉn màu, thâm bạn sở hữu thể áp dụng các bí quyết trong khoảng những nguyên liệu đột nhiên dễ kiếm đưới đây để tăng cường nhược điểm, tác động tích cực đến việc đôi môi tươi sáng, mềm mại, đỏ hồng lôi cuốn. 4. Khám phá Gành Dầu: Gành Dầu
using jquery with bootsrap4 and accordion
I am using an accordion menu, and at the moment the last level is the question, the two levels above it are sections and then categories at the top. Everything is fine, but what I want to do at this stage is detect if they go to the question level and open it, but then rather than close it they click another section instead. So if they do on clicking on any other button it closes the question accordion. This is how my question level is set up <div id="accordionQuestion@(Model.QuestionID)"> <div
getJSON and apostrophe/single quote as a parameter value in IE
I have a problem with the AJAX call on IE11 when parameter contains an apostrophe. AJAX call looks like: $.getJSON( "https://fqdn.to.server:8888/pdqm/endpoint", { firstName: self.firstName(), lastName: self.lastName() }, function (data) { //here is some stuff to do with UI } and when using is search for an example O'Connor it create call to https://fqdn.to.server:8888/pdqm/endpoint?firstName=*&lastName=O'Connor which works fine with Chrome and FireFox but when used with IE11 it doesn't encode apostrophe/single
Autosave form every X seconds
Hello All, I'm trying to add auto-save functionality to my form. While I figured out 90% of the things of the overall functionality, I'm stuck at the most crucial one - triggering the ajax call when - 1. Any of the form field is updated. 2. Ajax call is made every 10 second after the change is made. 3. No ajax call is made when the fields are empty I experimented with ``` $(":input").keypress(function() { setInterval(saveDraft(), 5000); });j function saveDraft() { ... } ``` However,
adding different classes when coming from different pages
Hello! On load of my index page, I have a js running: $(document).ready(function() { setTimeout(function(){ $("body").addClass("item1") I am leaving this page to page2 and returning to index. Now I want to add: $("body").addClass("item2") If I come from page3 I want item3 to add. How can I achieve this?
How to sanitize data sent from the server in ajax call ?
I have the following quiz component here. There are 10 questions and on click of the result of the final question , your performance of the over all quiz is shown, the response is fetched though a ajax request (in scripts.js) , like so: $.ajax({ type: "POST", url: $("#quizForm input#QuizResultPreview").val(), dataType: 'html', contentType: 'application/json', data:JSON.stringify(quizAttempt), success:
Highlight highest value in table cell
I have this metod to highlight highest value in table cell: var max = 0; var bg = 0; $(this).find('.my-table').each(function () { $this = parseInt($(this).find('tbody tr:eq(1) td:eq(0)').text()); if ($this > max) { max = $this; bg = $(this).find('tbody tr:eq(1) td:eq(0)'); } }); bg.addClass('highlight'); It kinda works but not as I would like.
How to NOT pass 'Other' option for SELECT
How can I NOT pass anything from a SELECT when "Other" is selected? Selecting "Other" opens a separate text field that'll pass the answer when the form is submitted? FORM CODE <div class="form-group"> <label for="fruit" class="control-label">If you were a fruit, you'd be a(n).../label> <select id="fruit" name="fruit" data-value="fruit" class="form-control"> <option value="" selected>-- Please Select --</option> <option value="Apple">Apple</option>
dialog relativity
Hi, I have aspx page that contain another aspx within <IFRAME > tag. When I use jQuery dialog it shows relative to the iframe document, what I want is the dialog to show relative to the parent aspx (the browser viewport). How can I make it happen ?
question about improper function ?
trying to make a dropdown menu clickable on and off... but also be able to turn it off with clicking outside of it. This works great (this is just for the turning it off part, getting the menu to drop down is working fine): $(document) .mouseup(function (e){ var ch = "#dropdownmenu"; if (!$(ch).is(e.target) // if the target of the click isn't the container... && $(ch).has(e.target).length === 0) // ... nor a descendant of the container { $(ch).hide(200);
Copy all form field values to Clipboard
I am developing a form, that once complete, will have a button that copies ALL form field values to the clipboard, to be pasted in an offline document I have figured out how to do this for one field, but get nowhere when trying to add multiple values. I have read about getElementsByClassName, and document.querySelector, but also, can get neither to work, Below is my working code for only one field: *********************************** <input type="text" value="" id="Field1"> <button onclick="myFunction()">Copy
HIde button if all fields are blank
Hello. I have a form that runs a script when the button is clicked. I would like to add a feature that hides the button if the fields values are blank, and show it once all the fields contain a value. I have this working script below, which fires an Alert on this condition, but don't know how to change it over to hide the button. <script> function formcheck() { var fields = $(".myForm") .find("select, textarea, input").serializeArray(); $.each(fields, function(i, field) { if (!field.value)
Adding jQuery to Blogger
I have posted a HTML code File in Blogger.com In that I have included jQuery codes. That jQuery file was in my PC now as I have posted it in the website the code is not working due to missing of jQuery file I added this tag in the <head> <script src='http://ajax.googleapis.com/…/jquery…/1.8.23/jquery-ui.min.js' type='text/javascript'></script> But still not working . ASAP help needed Plz......
Creating a mouse wheel navigation option for horizontal carousel of images
I have made a horizontal carousel of images (and captions) using Twitter Bootstrap 4 and the perfect-scrollbar plugin. I want users to be able to navigate by using the mouse wheel. The plugin dos have a handlers option that I did use. Here is a jsFiddle with what I did so far. But it does not work the expected way. Like THIS, for instance. Questions: Am I using it wrong, or does the plugin not have such an option? What alternatives do I have?
Jquery,ajax not working for me in chrome
in Using jQuery • 6 years ago Hi! Iäve up till now tested my site in explorer and it worked fine but when i tested it in google chrome it didn't work and i have no idea what the problem is. Please help me :( Chrome console Code Uncaught TypeError: Illegal invocation at i (jquery.min.js:2) at jt (jquery.min.js:2) at Function.w.param (jquery.min.js:2) at Function.ajax (jquery.min.js:2) at login (system-v2.js:7) at saveLocalStorage (system-v2.js:2) function saveLocalStorage(e)
Retrieving the Response from $.getJSON
Hi everyone, How do I get the response coming back from my $.getJSON function? I can see it here: Thank you, Neil
Set innerHTML using Json
Issue: first name is undefined. Json output from User.php [{"firstname":"John","lastname":"Doe","user_email":"john.doe@email.com","access_id":"1","role_id":"2","status":"enabled","company_name":"ABC Inc","mailing_address":"Earth","shipping_address":"Earth","email_address":"","phone":"(555) 555-0000","fax":"(555) 555-1111"}] User.js $(document).ready(function () { /* call the php that has the php array which is json_encoded */ $.getJSON('user.php', function (user) { document.getElementById("firstname").innerHTML
Cycle through different sized images on scroll
Hi all, I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like: - to be able to have images of different heights and widths, not all the same size (as it is now). - vertically/horizontally centered. Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/ Thanks! HTML: <div id="contentwrapper"> <div class="centreme"> <img src="https://picsum.photos/200/200?image=1" id="animation"
adding class only if scrolled down
Hi! I have my lightgallery opened and want before closing it my class only to be added when the main page is scrolled down a bit. $("#LGbest").on({ 'onBeforeOpen.lg': function(event) { $("body").removeClass("scrolled-down-top").addClass("scrolled-down-home"); console.log(event.name,event); }, 'onBeforeClose.lg': function(event) { $("body").removeClass("scrolled-down-home");//add class if scrolled down .addClass("scrolled-down-top");
I used ajax to load the content of a page from my database, but it can't just display on mobile phone
Please someone should help me out, i used ajax to load the content of a page from database, but am having an issue right now, its displaying fine on my laptop and infinix ZERO3 but cannot display any content on some mobile phones (like iphone4s), what can i do to solve this?
how can toggle the active class on sidebar menu when it's clicked and page reloads
i am trying the add and remove active class on sidebar menu, in such a way that when user select a particular link it should be active until another one selected HTML <ul class="sidebar-menu"> <li class="header">MAIN MENU</li> <li class="treeview"> <a href="../AdUserATTENDANCE/Welcome.aspx"> <i class="fa fa-dashboard"></i><span>MY DASHBOARD</span> <i class="fa fa-angle-left pull-right"></i> </a> </li> <li class="treeview">
Select2 Multiple Dropdown
How to get the newest selected value of select2 multiple dropdown
Cropping image
Can I save the cropped image at client side. If possible Plz suggest me what to do. Thankyou
Click element within list and change bg color on that element, and all the previous once
So I have a list <ul> with small tables inside <li>html code table...</li>. I need to click the table and change the backgound which would be pretty simple: $('.table-inside-li').on('click', function () { $(this).toggleClass('background-selected'); }); But the thing is that I also need to change the background of all tables that are within previous <li> as well. They are all lined up horizontally (well I guess it doesn't matter if it's vertical or horizontally as far as the solution
Linkify (plain url to link) based on windowSize
Hi all, this is what i would like to do 1. when window size is < 1000, change any plain text url to a clickable one 2. when window size is > 1000, change any plain text url to a clickable one, replaced by the word "Link". I had a go but it seems to be failing somewhere! Anyone can shed some light? Thanks <html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script>$(document).ready(function() { function checkWidth() { var windowSize = $(window).width();
link only on visible image
The 4 images are stacked and the appearing is controlled by css changing opacity. I try to get a link on only the last one of the images. Only if the one is shown, it should be clickable. A simple link to index.html... <div class="fixed-top container d-block w-50 nachvorn" data-pg-name="Augen" id="LGschliessen"> <div class="augenlogo"> <a href="#" > <img class="augen" src="images/navbar/augen.png" alt=""> <img
Add border to objekt while draging/reorder
I need to add a border while draging and reorder a table within a list: $(function () { $("#sortable").sortable({ start: function () { $(".my-table").css("border", "1 px solid #202020"); }, stop: function () { $(".my-table").css("border", "none"); } }).disableSelection(); }); This approach doesn't work. So how could this be done?
Need to force focus if there is an error
Hi, Can someone help me edit this code that instead of hiding the submit button ($("#submit_button").css("display" , "none");) when there is an error, rather to just show the error message ($('#tfa_4929-D').append("<div class='error' style='color:red;'>Invalid number. One can only submit this form if this field is blank or it contains a valid number.</div>");) and force focus to the correct field that has the error? Here is the snippet that I need edited. jQuery(document).ready(function($) {
Next Page