stop .resizable() inner divs from being deleted
I wanted to implement: https://jqueryui.com/resizable/ into my project but finding some issues with it for what I want to do. https://jsfiddle.net/kzud925q/2/ - if you insert a table in there, (expand it a bit) the first issue I had was you can't select a cell to enter content. It selects one of the divs the function adds to the table cell so I had to make the content editable false for it to not select. Not sure if this is the best method? Next problem I had was when you go to type in some content
Detect Clicks on Iframe
Hello Is it possible to detect when a user clicks on Iframe using jquery? I want to track clicks on Adsense Link Units and send them as a goal to Google Analytics Thanks
jQuery accordion menu: scroll to active menu item
I have made an accordion menu intended to serve as an efficient mobile phone menu. I have used the jQuery 2.1.1 library for this purpose. The part that does not work as I want it to is that concerning the body tag animation. I want the document to scroll to the active menu item. This is what I came up with: The HTML: <nav id="menu"> <ul> <li><a href="#" class="menu-item">Software</a> <ul class="sub-menu"> <li><a href="#">Operating systems</a></li>
Change content of div - jQuery
planning to replace the coordinate values with an address and placing between the <div>. But cannot understand the code in red line. $(this).html("<div class='Address_" + coords[0].replace('.', '_') + "_" + coords[1].replace('.', '_') + "'> </div>") it shows in browser inspect <div class='Address_47_0000_8_0000'></div>
How to auto-remove wrapping tags?
Assume I have multiple occurrencies of the following elements <small><code><b>xxx</b>aaa</code></small> How can I remove all <b>...</b> tags but leave the content? Afterwards the following should appear: <small><code>xxx aaa</code></small>After xxx a blank should be inserted
window.onbeforeload() event is not working ?
Hello, I am able to open the event dialog only while inspecting it (F12 key) and not able to fire the event directly while clicking on the browser/tab close button Please assist me on this. Thanks
How to make global totaltime , or fix this?
var f1 = function() { if ( $( this ).is( ":first-child" ) ) { $( ".workbox" ).empty(); var ajaxTime= new Date().getTime(); var totalTime = 0; $.ajax({ type: 'GET', url: '<?php echo admin_url('admin-ajax.php');?>', data: { action : 'codepen' }, success: function(data) { $( '.workbox' ).append( data ); }, }).done(function() { totalTime = new Date().getTime()-ajaxTime;
find and replace img with a content and its parent attribute change
I want to change from <span id="DeltaPlaceHolderPageTitleInTitleArea"> <span> <span> <span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;"><img /> </span> </span> </span> to the below using JQuery <span id="DeltaPlaceHolderPageTitleInTitleArea"> <span> <span> <span style="height:16px;width:26px;position:relative;display:inline-block;overflow:hidden;"> <i class="fa fa-angle-right GetSomeSpace" style="font-size:20px;" aria-hidden="true"></i> </span> </span> </span>
Scrollto function no longer working in Chrome
Hello there, I'm quite new to jquery and can't fix this problem by self and it's a little bit urgent :-) Hope you guys can help me.. Since very recently we noticed that the scrollto function stopped working in Chrome (Windows; it does work in Chrome on Mac though!!) for our one-page website, i.e. the menu is not working (clicking on a menu item is not bringing you to the appropriate place on the page). Would you know how to fix this? Here's the website: http://www.greekfilmfestival.ie/ We want to
colorize svg
Hey there, for my smart home i use a piece of open source software (iobroker). There is a function to colorize svgs depending on the state (e.g. an open door). For sadness, the jquery function is obviously not correct implemented - the coloring does not work. my goal is, that the stroke attribs of the svg (embedded through img-tag) could be replaced by an given color. Code, that is not working: setSvgColor: function (el, color) { setTimeout(function () {
About append funciton of template
Hi: I try to develop an template to add table automatically, and meeting an problem, my code snippet is as following: <div style="margin: 20px auto; width: 500px;"> <table id="jsonTable2" border="1" style="border-collapse: collapse;" cellpadding="5" class="table"> </table> </div> <script type="text/x-template" class="myTemplate"> <thead> <tr> <th>Model</th> <th>Name</th> <th>Share</th>
Jquery conflict with SharePoint People/Group field Address Book
I have an aspx from a custom list app that was converted from SP2010 to SP2013/SP2016 and the pop-up box for the People/Group field address book when clicked does nothing... If my jquery references are removed then it works???
Is This a Library Problem?
Hello. I am running a website that I am responsible from. I was using a library from http://code.jquery.com/. Because of the tests I did on my webpage, there is excessive traffic and my site does not work functionally. Is there any chance of being temporarily blocked due to traffic abuse? The link ı receive error (404) : http://code.jquery.com/jquery-1.11.1.min.js:3:5139 Thank you!
Scroll an element to the top on click
I have a basic form I made that people will complete on a tablet device. When clicking the first input field, the keyboard comes into view and takes up the bottom third of the screen, hiding the further fields. If I could make the form scroll to the very top of the page, the other fields can be visible amking it obvious for the user which fields they have to fill in. So my question, how do I make the input field scroll to the very top of the page on click? <header>Some bumph in here, such as logo
Create a new table with rows of only checked checkboxes
Hello! I have an HTML table with a checkbox in each row. I want to loop over the table and if there are any checkboxes that are checked. I need to create a new table with rows of only checked checkboxes. Any advice will be appreciated! I know how to go through the table. But how to store HTML code of that row in the variable? What I am trying to do is to send new table to a new page. function toView(){ var newWindow = window.open(); var newHTML = '<html><head></head><body><table>'; var endHtml =
How to keep elements hide() show() states on page load?
Hello, I have a CRUD in PHP where the user selects 2 options in a dropdown menu, based on the select 1 field or another shows up where the user input a number. My problem is this: If the user choose choice 2 which shows input 2 and send the information to my databasem on the next page load the php will show the choice 2 but the input will not show up until I click again on the dropdown menu... How to get jquery to load automatically based on the dropdown selection please? Here is my code: $j(document).ready(function(){
It is possible to trigger a keyboard shortcut or action with a click?
The spacebar key currently scrolls any browser page down if you hit it. It is possible to bind or trigger the spacebar on a click? $("body").on("click", function(){ var e = jQuery.Event("keydown"); e.which = 32; $(this).trigger(e); });
Animation failing to play on initial load
Hi, I have a slider on my front page. I'm using CSS animation to trigger a slow pan in effect on the background image. The animation only starts to work on the second slide. Is there a way that I can force it to trigger on the first slide? At the moment CSS looks for the following class name, which is applied to the first slide on page load. Perhaps it's because the CSS is loading before the Javascript? Or vice versa? Here is the code I'm using and the website in question: http://www.glowdigital.net
jQuery not working on WordPress mobile menu
Hi, I'm trying to use a jQuery function on the mobile menu but everything I try fails to work. I've done a test using a simple hover alert message. When in desktop mode and rolling over 'Home' the alert message displays. However, when I reduce the window down to mobile and rollover 'Home' the alert message fails to show. If I move the jQuery selector tag to say the Logo, burger menu or search icon it shows on both the desktop and mobile. For some reason anything inside the 'mobile menu container'
<audio> A-B repeat. Function not defined error
I am trying to add an A-B repeat function to my audio player, but I am getting: setA is not defined error. This is the html for the buttons: <div id="repeatControl"> <button onclick="setA()" id="btnAtime">A</button> <button onclick="setB()" id="btnBtime">B</button> <button onclick="clearAb()">X</button> </div> This is the full script to control the playlist and the A-B repeat function: $(function(next) { // Setup the player to autoplay the next track var a = audiojs.createAll({
truncate text in specific class
Hi. I'm using a WordPress plugin that returns date/time information like this, multiple times on a page: <div class="eventsdate"> <span class="events-date-start">September 25 @ 9:30 am</span> <span class="events-date-end">September 28 @ 4:30 pm</span> </div> But I only want the date part. how can Jquery shorten the two spans to just say September 25 and September 28? Thanks in advance for the help.
Huge chars data is not going through ajax call to server
huge chars data is not going through ajax call and I can able to see the chars in request body in browsers debug tools. If I send few chars I can able to receive it in server side!! ajax call : jQuery.ajax({ url : "/RegisterServlet_2/servlet/Register", type : "POST", data: "img="+compressed, cache : false, async : false, success : function() { }, error : function() { } }); Fyi, I don't want to send as json
Pass List in data attribute and access using jquery
Im currently having a User bean and a Role bean. Role{ private String roleName; private boolean readOnly; } User{ private String name; private int id; private List<Role> roles; } From the controller i pass the list of users as: List<User> userList = daoFactory.listUsers(); request.setAttribute("userList ", userList); In the jsp i have set the options based on the userList <select id="approvedUserList" class="selectUser" size="5"> <c:forEach items="${userList}" var="i" varStatus="loopStatus">
Row identifier in jQuery
Can we access a row of a table only if it's updated by jQuery? A table is rendered to JSP UI. The table has data and approved combo box with yes/No values at each row. So each row in the table may or may not be updated. Only if a row is updated then that particular row is identified and will be sent to update to database through a hibernate session. Can we access each row of a table in jQuery in any way ?
beforeSend not working with async
Hi, I am using below ajax with async = false but my issue is it is not showing the loading panel in beforeSend. However, if I change async to true then beforeSend will show the loading panel. How can I overcome this issue? // Savanna.ShowLoading(true, "Please wait.."); var formData = new FormData(); formData.append("customer_id", customer_id); $.ajax({ type: "POST", url: "https://www.domain.com/get_customer_by_id.php", async: false, data: formData, dataType: "json", processData:
Jquery Widget - where to put code for 2nd link to remote javascript...
I have written a widget and it works great, but right now I am giving my users a link to a remote script, a link to my script and a div to place on their page. I would like to reduce this to just a link to my script and the div. The remote link I want to include in my code below is <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> Can anyone please educate me on how and where to add this link to jquery-ui.js link in my code? I already link to a remote jquery and a remote stylesheet,
Using multiple elements with variables
Hi, I know that I can apply multiple elements like this: $('.element-1', '.element-2').show(); But if I put those elements in variables like this: var $elem-1 = $('.element-1'), $elem-2 = $('.element-2'); How should I change this: $('.element-1', '.element-2').show(); to use with those variables? Thanks
Trying to trigger an ajax call
Hi Folks, I'm trying to call a controller with an Ajax request though the url user/MyAjaxCall. console.log() prints some irrelevant url as and call not biked. Please give me a clue to proceed and I'm struck. Below is the code. I'm trying package net.practice; @Controller @RequestMapping(value = "/user") public class UserController { @RequestMapping( value = "/MyAjaxCall", method = RequestMethod.POST) @ResponseBody public String MyAjaxCall(@RequestBody User usrObject, @ModelAttribute("model")
Jquery Tab Widget Losing Formatting
I built this same tabbed system using PHP and it works great, now I am trying to get it to work as Jquery and am *almost* there! I am trying to load my well-formatted JSON data into a tabbed structure. So far the data is in and showing up where it should. My problem is that the style is being dropped from the li element and I believe it is because of how I set up my javascript in the JQuery.each section. Does anyone have any idea how I can fix this? Here is the function I use to callback the data:
Jquery, JSON and tabs
I am new to JQuery and need some help understanding how to structure my code... I have a working JSON page and have been able to get my code to display the intended results. Now I want to put those results in a tabbed format. Basically the title of my article is in the tab and the body of the article underneath. My code right now shows all of the titles in the tabbed area up top, which is correct, now I need to get the body in the main part. The final structure should look like this: <div id="tabs">
Display inside tag correctly
I have seen a lot about parent tags, and I really do not understand the reason for not returning the result correctly within the id informed. In my test I have two columns with class `.col`, one column has the form, and the other column contains the table list. Form And table list All page content displayed within the id = "ajaxList". The screen looks like this after the first click, and clicking on the other links ajax continues to load the correct contents of each number. Jquery $(".page-link").click(function
Start one animation after the other is finished (infinitive)
Hi, Looking at this Pen: Animation I like to achieve that the animation of the second element starts only after the animation of the first element is finished. When the animation of the second element is finished, the animation of the third element should start and so on (infinitive). Please feel free to change the code as you wish. Thanks
textarea and/or its div parent not responding to mouse events
Click, mouse up, etc do not seem to be working correctly. Kind of at a loss as to why jQuery is not attaching the events correctly, and/or firing them upon the events. Keyboard navigation seems to work just fine; handling the tab keys, arrow keys, and so on, works just fine; I am able to select the container div and drill into the textarea within to give it focus. No problems there. However, how come the mouse events not work properly, not firing on the elements for which I've attached them? Apparently
Update Jquery version form 1.8.3 to 3.2.1,All ajax calll fails
Hello, I have updated Version of Jquery from 1.8.3 to 3.2.1.My project fully developed and all Ajax works fine in 1.8.3.But after upgrade version all Ajax call fails.it says 401 Unauthorized in response. I have no authentication process. So whats problem? Sample Ajax looks like...(which was works fine in 1.8.3,but same code not works after upgrade) jQuery.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', dataType: 'JSON', url:
Target escaped div string
Trying to target a div that may have some special characters in it & then change it's srcset. Everything is coming in correctly, so it's just the targeting part that I need help with. I broke it down into parts to be able to concatenate & then target it: var smdiv = 'mydiv_rowset_'+rowset+'_'+mydata[rowset].fieldNames[k]; var smesc = smdiv.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\\\$&"); var smimgsrc = ' source\\\\.img2xsm'; var small = '\\\\#'+smesc+smimgsrc; console.log('SmImg-small:
Issue with two submit buttons
HTML FORM looks like below: <form id="biz" name="biz" action="CGI.script" method="post" onSubmit="console.log('submit button, not save button, clicked'); if (document.getElementById('field1').value=='$'){alert('Liability is required');return false} else if (document.getElementById('field2').value=='$'){alert('Fee is required'); return false};"> form field 1 form field 2 form field n ... lots of fields... <input type="submit" id="save-and-continue"
Automatic data saving issue
Where's no problem using an event to call an ajax call for a data saving function (saveData), but timed, automatic data saving by calling this function at different interval failed without error. See code below. Know why? Thanks in advance. /* auto data saving; */ // try 60 seconds first setTimeout("saveData()",60000); var saveData = function() { // use jQuery to send form $(document).ready(function() { $("#myform").submit(sendForm); return false; }); console.log("after form submission
IE 11 issue: d.addEventListener("DOMContentLoaded",S) with jquery 3.2.1
Trying to use jquery 3.2.1 on ie11, i get an error on console d.addEventListener("DOMContentLoaded",S) object does not support property or method 'addEventListener' Thanks for help
Object Equality in jQuery3+
Comparing same objects from the two different array and it return false in jQuery. I can't able to find where it is differ. To illustrate this, I have fiddle links for these Sample Why we have to use the JSON.stringify to compare the object .if an object contain array of object it return circular reference issue. so how could i compare the object in jquery without JSON.stringify.
JavaScript and/or jQuery custom events
Hello, I am developing a Controller for an MVC style custom object and I'd like to connect some sort of event handling mechanism. It's not important what the controller is, but let's say I have a couple of events such as "happening" and "happened". Something like this: $(".happeningCtrl").happening(function(args) { /* something is about to happen */ }); $(".happeningCtrl").happened(function(args) { /* something just happened */ }); Along these lines, with them being raised something like this: $(".happeningCtrl").happening();
Next Page