JQuery: Master Detail Table/SubTable
I have a table with 4 columns: GL ID# GL Entry Date Description 3137 06/26/2017 Invoice #18319: Date: 06/26/2017 GL ID# Debit Account Credit Account Debit Amount Credit Amount 3137 105 185 3137 415 185 The first 3 columns are id, date, and description. The forth column is the detail subtable. I used JQuery to Move the subtable to a new row and added a toggle. My problem is that after applying my code only every other detail toggle works and shows the details subtable. Row 1 won't expand. Row 2 acts
Best practices for event handlers/events.
What are few best practices one should follow while writing event handlers so that the jQuery code is optimized and easily maintainable? You can also respond to my question if there are a few best practices you think one should follow while using jQuery events?
Scroll to Top Button with JQuery
How can I create a button that sends a user to the top of the page? I would prefer it bring them to the top smoothly. I have a link (using <a></a>) that has the ID of #scrollUp. I also have a DIV that is at the top of the page and has the ID of #top in case I need to use it. I really could use some help with this. Many tutorials use JQuery but I can't seem to figure out how to get them to work on my website. Please help. Is it possible for the link to be linked to the DIV that is at the top of the
force new object
if i have something like this myObject{ settings{ target: "#someID", destination : 0, mode: "a" } start : function(){ //blah blah blah } } Is there any way to force instantiation of a new instance of this object if it is to be used. so this will work var newInstance = new myObject(); newInstance.start(); but this will not work myObject.start();
How can i check a radio button while selecting another element ?
Hello everyone , i'm new to this forum and i'm a foreigner so please be patient with me , i started to developp a webpage and i'm stuck with jquery , what i want to do is to check a radio button if a select is "changed" , it works once , but when i start to use the radio button it freezes , here is the code i need your help ! <INPUT id="emailchoix" name="choix" type="radio" value="email"> <SELECT id="destinataires" name="contact" size="1"> <option value="etienne">Étienne</option> <option
Not use "Id" and "Class" selectors.
I have been working on a project which has a lot of jQuery code. Multiple developers work on the project and everyone who gets a chance to implement something new using jQuery, they follow the easiest approach, they allocate an "Id" to the DOM element, using the Id selector they select the element in jQuery and attach a callback to it to achieve whatever they are looking to implement. This has lead to a lot "Ids" and "classes" in the project, the code has become hard to understand and looks bad.
Attach event handler to the DOM element without using selector.
Is it possible to attach an event handler to a DOM element without using the selector? Can I utilize the event object target property to attach a DOM element to the listener? I don't want to use a selector.
Use "OR" with the attribute selector
jQuery('body').find('input[type=checkbox]:checked').each (function(){ });
I want to apply each to all those elements whose checkboxes and radio buttons are checked.
I have used similar code on many pages. I want to add an "OR" condition in the above code.
want to apply each function to 'input[type=radio]:checked' and 'input[type=checkbox]:checked'
symultaneously. Is it possible to use both the attribute selectors in "OR" condition.
what is the best way to do it.?
Jquery "this" overriding my objects "this"
I have the following code //Vanilla version for(;i>=0; i--){ squezeTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}), this.curve.getRatio(i/b.length) * 0.4); } //Jquery version $(b.get().reverse()).each(function(index){ squezeTimeLine.add( TweenLite.to(this, myClass.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}), myClass.curve.getRatio(index/b.length) * 10); }) Both
Same variable in multiple tabs
Hi everyone, I am using the tabs ui widget and have 6 tabs made. In my index.html, I have a variable that gets loaded with a particular value according to the tab that I am in. Whenever the user clicks on a particular tab, I first clear all fields to let the new values get populated. The problem I am having is that where I clear the field, it is having a problem or I am not specifying correctly where to clear the field. Here is a picture showing what is happening: The one I would like to clear
How to wrap span tag
Hi, Please could you help me out to wrap arrow ">" inside span tag using jquery. below is the html structure <div class="pos"> <span class="pos_bc" property="itemListElement" typeof="ListItem" style="background-color: rgb(255, 255, 170);"> > <span class="pos_bc" property="itemListElement" typeof="ListItem" style="background-color: rgb(255, 255, 170);"> > <span class="pos_bc" property="itemListElement" typeof="ListItem" style="background-color: rgb(255, 255, 170);"> --> </div> I want the output
$.getJSON with json's dataType and formData
Hi, I'd like to ask how can I use $.getJSON together with dataType: "json" and pass a formData to it's data like similar to the ajax's way: var formData = new FormData(); formData.append("savanna_account", 1000); Thanks, Jassim
Upating jquery-common.js
I am using jquery-common.js in my code and it has been working fine till now,my company decided to Install windows 10 and I need to update my Scripts. Can some one help me to find the latest jquery-common.js and how to update it?
Change CSS after button is clicked
Hey guys! So I have this assignment I am working on, and what I am trying to do is after the buttons I have are clicked I want the css to change. For example I have a button called Format Table, and when clicked it changes the background color of the first row. Im not looking for code...more of a like a push in the right direction. I have done some research and looking online, and to me the easiest thing or more neat thing would be to use the addClass? If not what would be more practical? Anyway
How to have jquery mobile css only affect one web page?
I made a page using jquery mobile css but I don't want the css to carry over to the next page. It messes up the next page until a manual refresh is done. I hope there's a way. Up until now I didn't think css from one page ever carried over into the next page. Learn something new every... so often.
Jquery Ajax with Asp.Net
I am using asp.net and I want to call a web method using jquery ajax when a page_load event occurs. Thanks for any suggestions.
Attempting to follow http://demos.jquerymobile.com/1.4.0/collapsible/ article
This is my code. Something is missing because the icon with the + sign does not appear. Also the content is shown by default, rather than closed as specified in the text. Is there anything else I need to add to this code: <!DOCTYPE html> <html> <head> <link rel='stylesheet' href='jquery/mobile/jquery-mobile-1.4.5.css' type='text/css'> </head> <body> <div data-role="collapsible"> <h4>Heading</h4> <p>I'm the collapsible content. By default I'm closed, but you can click the header to open
JQery Transition
Hello Everyone What i want is , on clicking on a link which is situated at last of paragraph: 1 .Content should fades out in 1.5 seconds. 2.Red Block should fades in that 1.5 seconds at same position . Process should be completley parallel. Here are Images of how transition is taking place Main Key point here is Paragraph text disappear and red color block appear at same position and at same time. Thanks
How to hide temporarily scrollbars with jquery during css3 animations?
Hello to all of you I'm using bootstrap modal with animate.css in a page and when a form slides up, I get this bad behavior: clicking one button, a modal with a form is called. The form is a bootstrap form with modal and instead is animated with animate.css. While it scrolls from bottom for the fadeInUp effect, the vertical scrollbar is displayed and its slider is animated according to the form position. So, once the animation is over, the form is in the viewport and as consequence, the scrollbar
Using Event Object without actually passing it to the handler.
In the code below I was able to use the event object 'e' in the handler function as I have passed the Event Object reference to the callback function, $("#somediv").bind('mousemove', function(e){ //event object reference passed //the event object here is 'e' pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; }); Is it possible to use the event object in the callback without passing the event object reference to the callback like this, $("#somediv").bind('mousemove', function(){ //no event
How to hide scroll bar if an animation exceeds the browser window?
Hey, I'm new to jQuery and i'm learning it from w3schools.com. I have problem is animate() function. I want an animation where a clouds enters and exits in window but when i write the code i.e //Cloud two for(var i=0;i<=1000;i++){ $("#cld-2").animate({left:'1400'},1000); $("#cld-2").animate({left:'-500'},1); } the browser shows the horizontal scroll bar when it touches the right border of window. I've also also tried using css overflow attribute but that was
jQuery Countdown and User's Local Time
I wish to use a jQuery countdown timer; but want the time-keeping to be in sync with the UTC time; and not the user's system time. I'm using http://hilios.github.io/jQuery.countdown/ and got the countdown to work as expected; but with one big problem: The countdown takes into account user's local time as current time. I'd however want the plugin to make use of UTC time ( seconds ) for the timer to be precise. I'm looking for a jQuery countdown snippet that'd achieve this. Perhaps, I need to modify
$.post not reach the server
I have a simple code. $.post("/Country/AddLanguage", { id: countryId, languageName: languageName, message: message }, function (data) { }); But it can't reach the server. Because I have the asp.net controller method. It can't reach it. [HttpPost] public ActionResult AddLanguage(int id, string languageName, string message) {
jQuery Mobile 1.4 API inaccessible
As the title says, you can no longer reach 1.4 API documentation. These links do not contain content such as widget api info: http://api.jquerymobile.com/1.4/ http://api.jquerymobile.com/1.4/category/all There's nothing, or is it hidden? signed, Crippled dev
Loop through stacked element continiously
I am trying to look the trough the display of a bunch of absolutely stacked elements, but it stops when it gets to the last one. My code looks like below: Any ideas on how I can get it to work? $(".box").each(function () { $(".box").click(function () { $(this).removeClass("retain").removeClass("back"); $(this).addClass("back").delay(1000).queue(function(){ $(this).removeClass("back").dequeue().addClass("retain"); }); }); }); See complete working code on jsFiddle.
jQuery UI datepicker Debug version different from Release Visual Studio 2015
I have a MVC 5 C# application when I run it in Visual Studio 2015 and the debug mode has all its graphics available. When I publish it in Release mode its graphics have disappeared but the datepicker still works. TIA, Bruce
want to slide header photos and show menu on clicking toggle button
Hello. I want to slide header photos and show menu on clicking toggle button. The sliding header photos work, but the menu dose not show on clicking toggle button. Please tell me what is wrong. Here is the script I write; <script> $(function(){ $("#menubtn").click(function(){ $("#menu").slideToggle(); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery/jquery.bxslider.min.js"></script> <link href="jquery/jquery.bxslider.css"
Set as active next or previous submenu
I'm working with this jSFiddle: https://jsfiddle.net/vkuz8ra3/ And i need function which active next or previous link after click to div prev or div next. I tried something like this but it does not work jQuery(document).ready(function($) { $('.prev').click(function() { $('#links').children().prev().addClass('active'); var index = $('#links').children().index('#links'); $('#linksobsah').children().hide(500).eq(index).show(500); $('#links').children().removeClass('active');
how to add two number using jquery its not working plz help me
<head> <title>Jq work</title> <script src="js/jquery-3.2.1.js" ></script> <script> $(document).ready(function(){ var a = $('#num1').val(); var b = $('#num2').val(); $('#submit').click(function() var c = parseInt(a) + parseInt(b); $('#num3').val(c); alert(c); }); }); </script> </head> <body> <table> <form name="myform" method="#" action="#" > <tr> <td><input type="text" name="num1" id="num1" /></td> </tr> <tr> <td> <input type="text" name="num2" id="num2" /> </td>
How to stop Galleriffic slider at the last thumb image?
I'd like to stop Galleriffic slider at the last thumbs image, but I don't know how. Here is the code: ;(function($) { // Globally keep track of all images by their unique hash. Each item is an image data object. var allImages = {}; var imageCounter = 0; // Galleriffic static class $.galleriffic = { version: '2.0.1', // Strips invalid characters and any leading # characters normalizeHash: function(hash) { return hash.replace(/^.*#/, '').replace(/\?.*$/, ''); }, getImage: function(hash)
ui-bg_flat_75_ffffff_40x100.png Issue
Hi Everyone, The opening homepage is showing the following: ui-bg_flat_75_ffffff_40x100.png Failed to load resource: the server responded with a status of 404 ui-bg_highlight-soft_75_cccccc_1x100.png Failed to load resource: the server responded with a status of 404 ui-bg_glass_75_e6e6e6_1x400.png Failed to load resource: the server responded with a status of 404 I have updated Chrome/w the latest 59.X.xxx.xxx version and here is my heading section: <link rel="stylesheet"
sending data with Ajax to PHP using forms with security tokens
Hi there, I have noticed that several PHP frameworks use hidden tokens inside forms to get some kind of protection (replay, csrf, tampering, ...). Due to that I cannot simply send a JSON via POST with Ajax, but I think I could do something like the following: 1) create a universal form with 2 text inputs named "action" and "params" 2) retrieve the universal form via GET inside the view with jQuery 3) add a unique id to the retrieved form and append it to HTML body with jQuery 4) create 2 string variables:
Google Distance Matrix API Does Not Work in HTML DOM
Hi all, my name is John and I'm new to this, I tried to make this work, but I think the JSON does not work at all. The API key is legit, but I'm not getting any response. Thx. <!DOCTYPE html> <html> <title> test distance </title> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <script> $(document).on('pageinit', function () { function findDistance() { var pointa='267 Reservation Rd, Marina, CA 93933'; var pointb='1 Old Fishermans Wharf, Monterey,
How to use different .ui classes?
Hello. I have used jquery-ui's accordion in my pages but I want to have 3 different type of that. I have styled .ui-widget-content , .ui-state-default and .ui-widget-header classes to build an accordion for my footer but actually it impresses other ui elements. Now I want to have another accordion with a different style and want to give another properties and values to those classes . How should I do that? Thanks in advance.
Dragging Panel Reveals Gray Background on iOS
If you open the jQuery Mobile demo page on iOS and then go to the bottom of the page and press and drag the panel, the entire panel moves up revealing a gray background. If you let go it then springs back. This of course happens in jquery mobile apps too and frustrates users. Is there a way to prevent this from happening? Note this does not do this in Android devices.
css and jquery not working after ajax call
index.php <aside id="left-sidebar-nav"> <ul id="slide-out" class="side-nav fixed leftside-navigetion custom_scrollbar shadow fetch_data_menu"> </ul> </aside> --------------------------------------------------------------------- function fetch_menu(){ $.ajax({ url:"select_menu.php", method:"POST", success:function(res) { $('.fetch_data_menu').html(res); } });
Missing GET parameter data
The main program has: <a id="polyclick" href="PolyDraw1.asp" target="_blank" style="display:inline;"> <b> Geographical Selection</b></a> When the href is clicked: $("#polyclick").click(function(e) { var ylist = "2014,2015,2016"; // The value of ylist is computed but is a hard coded string here $.ajax({ type: "GET", url: $(this).attr('href'), data: { 'ChkBoxYears': ylist }, success: function(response) {;
Radio grid finding the highest value non-disabled button.
Hi, what is the best way of return the highest value non-disabled radio button in a grid, checking each row and return the correct column? I have included a fiddle - https://jsfiddle.net/gb3f7v8k/161/ Thanks in advance.
Select option group selecting entire row
Hello Guys, I need some help with a select box and choosing the entire row. So I'm using option group inside a select box like this( see below). I'm creating rows. <optgroup><option value="1">1</option></optgroup> <optgroup><option value="2">1</option></optgroup> <optgroup><option value="3">1</option></optgroup> The select box will look like this 1 2 3 1 2 3 1 2 3 I want to be able to kind of bind the entire
Find a child control
Hey there I am new in this Forum and pretty new to jQuery. In my ASP.NET MVC View I have a construction, where I have a DIV which Id = "PrintOrder" Under that DIV, I have one more DIV, that has no Id, and within that DIV I have a Control, which id is generated during the creation of the site. The only Thing I "know" is, that this tag start with prefix: "printOutDropDown" So, now I need a corespoding JQuery, what would find the printOutDropDownXXXXXXXXXX I came up with this: var locReportDiv = $('div[id="PrintOrder"]').children('[id^="printOutDropDown"]:first');
Next Page