Need help firing an event only once using .change()
Hey Guys. I have created a "Tip" selection drop down menu for a restaurant ordering website. When the user reaches the checkout page, it will automatically add the default tip of $2.00 to the subtotal amount. Here is the function will execute when on a document ready event function changeAmountsBasedOnTip(){ var $tip = $('#tip').val(); // Select the value of the tip var $subtotal_elm = $('#sub_total').text() Select the value inside the subtotal div element var $subtotal = returnAmount($subtotal_elm)
How do I know to which block the user is drag with Sortable Lists?
Hello, I have an example at http://www.familiekant.nl/toernooimaker/club/drag.php I have a few users which I want to divide into 2 (or more) poule. I can drag and drop these users with the plugin sortible-list but how can I make the change in the mysql database when a user is released in a poule? So when eg user Arie Thuis was released in poule 1, the record of Arie Thuis must have updated the number '1' in the column poule. I have a user table with a column poule and a poule table with the ID of
carasoul error
I found this really nice carasould in a Jsfiddle online JsfiddleLink , but i want to modify it a little bit i.e. 1. i want to to be paused and 2. i want it to slide to the next slide only when i click on the <li> associated with the slide , or when i click on the next or prev button on the carasoul . i acheived the 1st objective by tweaking the code a little bit . i.e. $(function () { $('#homeCarousel').carousel('pause'); });But now how do i add the complex part , By which i mean ,
Target an area with Jquery
Hello everyone! I've a button and this button opens a div. I've figured that when I target an area except this div it should be hide. This is my codes but it doesn't work perfectly (actually it works slightly). <!--show hide div--> $(function(){ $('.mybutton').click(function(){ $('.mydiv') .show() }); $('html').on('click', function(event){ var target = $(event.target); console.log(target); if (target.is('.mydiv')
How to create unique cell ids when creating dynamic tables in jquery
I have the below code which creates dynamic html table. The 4 rows get repeated based on user's choice. The current code crates unique id for tr but i am interested in giving unique id to td elements. Can someone please let me know how to achieve this. <table id="master_table" border="0"> <tr> <th>COL1</th> <th>COL2</th> <th>COL3</th> <th>COL4</th> <td> </td> </tr> <tr> <td> <input type="text" name="col1" class="col1"/> </td> <td> <input type="text" name="col2" class="col2"/> </td> <td> <input
Issue on Checking Check box State On click (Checked or Un Checked)
I am using a Bootstrap Switch component instead of core html check box and I am having issue on getting the state of the check box on click. Can you please take a look at This Demo and let me know how I can enable my code to get the state of the checkbox change and alert in different states? $(document).ready(function () { $("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch(); $('#test').click(function () { if ($('#chkSelect').attr('checked')) {
Generate jQuery element from HTML, and find from it
I wrote the code as follows, but it didn't work well. var f = jQuery('<h1>foo</h1>').find('h1'); console.log(f.size()); // expect 1, but actually 0 console.log(f.text()); // expect "foo", but actually "" What's wrong?
How to improve jqPlot parseOptions/jquery.extend performance
I have an app that uses jqPlot and I want to make it perform better - i.e. have it render the charts faster. Using the Firefox profiler, I'm able to drill down on the time being spent in the various parts of the code, and I've found that the call to jqplot takes ~85% of the time. Of that 85%, ~60% is spent in the jqplot.draw routine and ~20% is taken in the jqplot.parseOptions routine. In addition to the static configuration data (legend related stuff, grid related stuff, cursor and highlighter stuff,
Random play html5 video timer
Hi guys, Hoping for some help. I have a number of HTML5 videos on my page, and would like a random one to play for 5 seconds, then pause then a different random video play for 5 secs... and so on. Any advice would be greatly appreciated!
Bootstrap alert JS won't slide down
Using this JS: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); } And this html code: <div id="comment" class="alert alert-info" style="margin-top: 20px; display: none;"></div> <button type="button" class="btn btn-default btn-sm" id="route_update">Edit</button> it should, if successful, slide down with the message...But it doesn't, the blue bar won't go down(it's not displayed). Any suggestions? Any help will be appreciated The complete js can be seen following
Return not working fine
Hey there, I'm trying to make a function which calls a php script and then get the users password and return it. I use post for this. When i use return inside post or outside but i declared a variable inside post it doesnt work either. But if i return the username it works fine. This is my code --- JAVASCRIPT --- function getpass(username) { $.post("getpass.php", {Username: username}, function(response) { return response; // the php script works fine, i tested it. });
getJson won't retrieve me anu result
Hi, im developing a jsp page using the struts technology. The problem is that i need to invoke a java class retrieving a JSON object from it, but at the moment it won't work This is my jquery code $.getJSON( "checkData", {idp:idp},function( data ) { alert('json'); //some code }); struts.xml is correctly configured to call the checkData.java class using the space name "checkData" that i pass in getJSON method. The class is correctly invoked, because i see all details
ajaxError and ajaxComplete firing twice upon abort
I was aborting an ajax request inside ajaxSend function, and I noticed that the ajaxComplete and ajaxError global event handlers bound to document are being called twice, and in their second execution they throw TypeError: Cannot read property 'send' of undefined. When aborting ajax calls outside of ajaxSend, it behaves normally. Is it supposed to work like this? Tested using 1.9.1, 1.11.1, 2.1.1 JSFiddle $(document).ajaxSend(function( e, jqXHR ) { $("body").append('aborting ajax...<br>');
How to develop an Eraser Tool ?
Hello everyone, i am trying to develop an eraser tool that should erase the part of an image using mouse control. Image is uploaded by the users. Thanks
Ajax + PHP Save data form
Hi All guys, First of all, I don't understand why but I don't see the message (fade) for the success or failed saving. Thereafter, I need to implement the saving data without refreshing the page This is the controller <?php class Admin_Controller_Cms extends IV_View_Base { public function routesAction() { $this->assign( 'aRoutes', Default_Model_RouteEntity::getAllRoutes() ); $this->renderTemplate( 'cms/routes.phtml' ); } /** * ajax response action */ public function routeupdateAction()
thumbnails does not work when hovering quickly.
I'm trying to iterate through thumbnails and its not working as expected. When moving the mouse from one image to the next slowly it works but if I move the mouse from the first image set (fruits) to the third image set (memes) very quickly, some of the images from the first image set shows up in the last image set. Here is a working example: Jsfiddle example THanks for your help
differentiate the return statements
Hello friends i have three buttons. i want that when i click Hi button the event handler for all the button type should skip the executing the handler for this button. but for other buttons the handler should execute. however i make this but the handler is executing for hi button too. i tried return statements with true,false and nothing but it is not skiping the handler. That is why i could not differentiate between the return true,false and only return. please help regarding this and solve my
Animated css-value changes twice after there has been clicked once
Hello, There has been posted a question slightly similar to this one before, also by me, and got a perfect answer for that problem. I basically have a vertical row of thumbnails and want to make each one slide open horizontally while any other open ones close. However, I had a change of mind in the meantime and decided to add another animated change in the bottom-margin. This all works except when you click on the same thumbnail you have opened, to close it again. It then closes normally, but immediately
Add class is not working
Hello friends i have three submit buttons. and i want to add the class1 on the button which has the text 'a' by clicking on the button which has text 'Click me to add'. But when i click this button it gives nothing. Please help! HtML-- <div> <div> <input type="submit" name="name" value="a" /> <input type="submit" name="name" value="b" /> <input type="submit" name="name" value="CLick me to add" id="Sub" /> </div> </div> CSS-- <style type="text/css">
datepicker() not showing up in UI on input type text click.
This is my cshtml code <div style="text-align: left;"> <div>Start Time?</div> <input type="text" id="datepickerStart" /> </div> This is my cshtml code which doesn't work and the datepicker doent show up $(document).ready(function () { $("#datepickerStart").datepicker(); }); UNTILL I insert an alert like below $(document).ready(function () { alert("HI"); $("#datepickerStart").datepicker(); $("#datepickerEnd").datepicker(); }); My UI is cshtml and all my javascript in a separate .js file and
Is it possible for $ajax to read form fields not in the "data{...}"
Im having to read hidden fields and they will have a different number of fields each time.
Onsubmit show success message on div
I have 3 forms on a page which i submit by ajax and onsubmit it show a succesful message in a div. the problem is when i click submit on a particualr fomr, it calls all the sucess messages in all the divs. But i want it a particular div to show based on the form that was submitted <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="comment_div"></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="love_div"></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="favorite_div"></div></td>
How can I disable the div using jquery before button submit ?
I have two divs called "Yes" and "No" <div id="object"> <div class="object-content"> I'd say <div class="confirm" id="btnYes" runat ="server" >Yes</div> </div> <div class="object-content" style="float: right"> I'd say <div class="confirm" style="color: red" id="btnNo" runat="server">No</div> </div> </div> And one Comment button called "Post" <asp:Button ID="btnPostUrComment" OnClick="btnPostUrComment_Click" runat="server" Text="Post Your Comment" Height="33px"
How to push FileList to the previous variable
hey guys...! Im implementing jquery drag and drop file upload using ajax call to php I have implemented it successfully but i need a little modification and for me it is big When user drag and drop the multiple files im showing them up in a div containing id total . Once the user drag and drop the multiple files for the second time im clearing them up, instead of clearing i need to merge the FileList to the previous files which are stored in a variable upfiles Here is the basic code which i need
HELP: Can't pass value to hidden fields
Hi!, jQuery newbie here. As you can see the codes bellow, I'm trying to pass a value after such event, basically returning the date and age to hidden fields. // Compute age (fld_age) according DOB fields $('#fld_birth_yy, #fld_birth_mm, #fld_birth_dd').on('change', function(e){ e.preventDefault(); if ($('#fld_birth_yy').val() != 0 && $('#fld_birth_mm').val() != 0 && $('#fld_birth_dd').val() != 0) { var str_dob = $('#fld_birth_yy').val() + '/' + $('#fld_birth_mm').val() + '/' + $('#fld_birth_dd').val();
Translate attr place holder!
Hi all, I'm translating my store element's, everything seems to work fine, but I can't manage to translate the attr 'placeholder' acording to the language. Maybe you can advice a method how to do it. Here is the HTML: <nav> <div class="nav-holder row"> <ul> <li><a href="http://stores.ebay.es/100x100ORYGINAL" class="tr" key="tienda">Tienda</a></li> <li><a href="http://stores.ebay.es/100x100ORYGINAL/PAGO-Y-ENVIO.html" class="tr" key="pagos-envios">Pagos y Envíos</a></li> <li><a href="http://stores.ebay.es/100x100ORYGINAL/DEVOLUCIONES.html"
My confirm dialog is not working as I wanted
Hi, Im trying to delete my images using jquery ajax and php. And I already have everything working fine, but now Im trying to do a confirmation message in a dialog, and if user clicks on "yes" I do my delete and if user clicks in "no" I close my dialog. But Im having some difficults with my jQuery, when I click on my delete link Im opening my dialog, its ok, but my when I click in my "no" I dont close my dialog. And also When I click in yes, I want to remove but I also want to close my dialog but
how to refer child elements of an element in jQuery
Hi All JQuery Gurus, I have style code: <style>#RibbonContainer #Ribbon\.List\.CustomViews #Ribbon\.List\.CustomViews-LargeMedium-2-1, #RibbonContainer #Ribbon\.List\.CustomViews #Ribbon\.List\.CustomViews-LargeMedium-2-0 { display : none; } </style> I want to execute it using jQuery. I am looking for equivalent jQuery to the above style tag. Can anybody explains me how to refer child elements of an element? Is this valid jQuery? $("#RibbonContainer #Ribbon\.List\.CustomViews #Ribbon\.List\.CustomViews-LargeMedium-2-1").hide();
Sequential Ajax calls
I've got a validation that requires an ajax call, the validation is done both on the field change event and on the form submit so I've got a named function that does the validation and just call that function from both places. The problem I've got though is that when the form is submitted there is another validation that needs to happen via ajax, this one may or may not be required based on a form value. The validation process I'd like to follow when the form is submitted is make sure all the required
For image find attr "title" and replace with "alt"
I am trying to replace the "title"(not assigned) of each image with the assigned alternative text. For example: Before: <img src="imagesYolloSwag.jpg" alt="swag" width="136" height="143" > // title not defined After: <img src="imagesYolloSwag.jpg" alt="swag" width="136" height="143" > // title added, and value picked from alt text What am i doing wrong here? Please help. <script> $(document).ready(function() { $('img').each(function() { var altX = $(this).attr('alt'); $(this).attr('title').replaceWith(altX);
slideshow with previous and next buttons to work
I am trying to get the event handler attached to my Next button to work, and then will have to do the same with a previous button. I am getting a "Not implemented" error in line 8 of the jQuery - I am newer to jQuery and Java, so not sure why this has happening and have exhausted myself trying to find out why. Besides just a fix, an explanation would be appreciated. Buttons in HTML: <input type="button" id="previous" value="Previous" > <input type="button" id="next" value="Next" >jQuery:
A glitch
I have a table with the following repeated code in it <td> <span>+</span> <span>some number</span> <span>-</span> </td> and the following code var sign = $(this).text(); var qu = $(this).parent().children().eq(1).text(); var v = $(this).parent().children().eq(1); if(sign == '+') { if(qu >= 10) { } else { qu = qu + 1; $(v).text(qu); console.log(qu); } } if(sign == '-') { if(qu <= 0) { } else { qu = qu-1; $(v).text(qu); } } The code which reduces the number by 1 works fine However the code which increases
jQuery - Array GROUPBY
Hi All, I have some data in an array. I want to groupby the data based on a specific column. Please note, its NOT sorting that I want. Example: Name Dept DOJ AAA D1 1.1.2010 BBB D2 2.1.2010 CCC D1 1.1.2010 DDD D2 2.1.2010 EEE D1 1.1.2010 FFF D2 1.1.2010 I want to groupby the data based on DOJ and then based on dept. So, the output should be as below: Name Dept DOJ AAA D1 1.1.2010 CCC D1
Fixed-Header with extra columns.
hi, I am using fixed-header code for my table on vertical scroll, its working fine for all column name except last two (balance and pay status) because they are going out side page (horizontally). and when i scroll from bottom to see the last two columns values , the fixed header only show the columns till advance, fixed header not showing last two remaining columns that go out side page horizontally. Check the screen shots for better understanding. image-1 you can see all column till pay status.
how to load different page content using Jquery / ajax
i have two menu panels . i need to load contents without refreshing page. how i do it left menu --------------------- <ul> <li><a href="1.html"></a></li> <li><a href="2.html"></a></li> <li><a href="3.html"></a></li> </ul> right menu left navigation --------------------- <ul> <li><a href="a.html"></a></li> <li><a href="b.html"></a></li> <li><a href="c.html"></a></li> </ul> <div id="content"> </div> i need load pages in #content div.. pls help me to write script . i need one script for all links
cant click a dynamically generated element.
I have a HTML table which is dynamically generated The <table> <thead> all tr's and td's within the thead and <tbody> are generated using $.append() The TR's and TD's and content of the td's inside the <tbody> are created using $.each() I want to use .on() on these elements .on() works for the elements generated by append() but it does not work for elements generated by each() why is this?
$append() inconsistent behavior
I have discovered that if you use $('body').append("<table>"); a full table element is appended ie debuggers show that both <table> and </table> are present. But if you use $('body').append("<tr>"); only the opening tr is created. You have to use $('body').append("<tr></tr>"); to get the full element. If you use $('body').append("<table></table>"); then the closing tag gets duplicated. I noticed this with some other HTML elements as well. Why does append() show this difference depending on what is
Getting and setting from XML
I want to display a list of results from an XML file. When you click an item from the list of results it displays the selected value in a separate div and when you confirm it it saves it to local storage. Any Ideas? Thanks
How save all changes in local storage?
I'm trying to create an editable listview. You can add and eliminate elements of the list. Each element have a group of elements that you can see if you click on each element. How can I save all the changes of the list in local storage? I need save the changes of the listview (add/eliminate items) and the the data of the all the inputs text that are inside of each item of the list. here is my code: http://jsfiddle.net/juank_romero/hA8Ps/11/ Thanks for your help :)
Issue on Using jQuey load function
can you please take a look at this ajax load() function Demo and let me know why I am not able to load data from the URL into the divs Here is the code I am using: <div id="result"></div> <div id="page"></div> $('#result').load('ajax/http://www.fifa.com/worldcup/index.html .mu-m'); $('#page').load('ajax/http://www.fifa.com/worldcup/index.html'); but I am getting this error: Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Next Page