Search Results

Search found 359 results on 15 pages for 'preventdefault'.

Page 9/15 | < Previous Page | 5 6 7 8 9 10 11 12 13 14 15  | Next Page >

  • jquery tab switching links so they jump to top of page?

    - by Evan
    I was given some great help by redsquare to get this far to change jquery tabs from links within the content, but I have one more issue that I'm looking for support on... When a user clicks a link to switch to a different tab from within the content, can i get the page to jump to the top of the page? Within my demo link, scroll to the bottom of the page to click the links and they switch tabs just perfectly, which you can confirm if you scroll up. So, I'm looking for the switch to also jump the user to the top of the page, so the user doesn't have to "scroll" to the top of the page to begin reading new content. Here's my demo: http://jsbin.com/etoku3/11 Existing code: <script type="text/javascript"> $(document).ready(function() { var $tabs = $("#container-1").tabs(); var changeTab = function(ev){ ev.preventDefault(); var tabIndex = this.hash.charAt(this.hash.length-1) -1; $tabs.tabs('select', tabIndex); }; $('a.tablink').click(changeTab); }); </script> Thank you so much! Evan

    Read the article

  • Jquery cookie plugin - conditional content determined by cookie being set

    - by Dave
    Hello I have a sign up form that is displayed to all new site visitors. If a user fills out the form, the next time they visit the site, I would like to display a "welcome back" message where the form would usually sit. I am trying to do this via the jquery cookie plugin (http://plugins.jquery.com/project/Cookie). My form would look like this: <div id="sign_up_form_wrapper"><form id="sign_up" action="" method="POST" name="form"> <input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp; I accept the terms and conditions</a> <br /><br /><input type="submit" value="ENTER"> </form></div> And I am setting my cookie here: <script type="text/javascript" language="javascript"> $().ready(function() { $('#sign_upm').submit(function(e) { e.preventDefault(); if ($('#sign_up input[name=checkbox]').is(':checked')) { $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 }); } }); }); </script> That will set the cookie when a user has checked the box, but now I need to do somehting like this: if the cookie has been set, do this: <div id="sign_up_form_wrapper"> <p>Welcome back, John</p> </div> otherwise do this: <div id="sign_up_form_wrapper"> <!-- full form code here --> </div> Any ideas or pointers would be very appreciated, thanks.

    Read the article

  • JQuery .submit function will not submit form in IE

    - by Sean
    I have a form that submits some values to JQuery code,which then which sends off an email with the values from the form.It works perfectly in Firefox, but does not work in IE6(surprise!) or IE7. Has anyone any suggestions why? greatly appreciated?I saw on some blogs that it may have something to do with the submit button in my form but nothing Ive tried seems to work. Here is the form html: <form id="myform1"> <input type="hidden" name="itempoints" id="itempoints" value="200"> </input> <input type="hidden" name="itemname" id="itemname" value="testaccount"> </input> <div class="username"> Nickname: <input name="nickname" type="text" id="nickname" /> </div> <div class="email"> Email: <input name="email" type="text" id="email" /> </div> <div class="submitit"> <input type="submit" value="Submit" class="submit" id="submit" /> </div> </form> and here is my JQuery: var $j = jQuery; $j("form[id^='myForm']").submit(function(event) { var nickname = this.nickname.value; var itempoints = this.itempoints.value; var itemname = this.itemname.value; event.preventDefault(); var email = this.email.value; var resp = $j.ajax({ type:'post', url:'/common/mail/application.aspx', async: true, data: 'email=' +email + '&nickname=' + nickname + '&itempoints=' + itempoints + '&itemname=' + itemname, success: function(data, textStatus, XMLHttpRequest) { alert("Your mail has been sent!"); window.closepopup(); } }).responseText; return false; });

    Read the article

  • JQuery Simple Modal OSX Multiple dialogs

    - by Aneef
    HI, I'm planning to use the jquery Simple modal for login and registration on my project site. i tried to have 2 modals as mentioned here. but im still unable to make it work. here is my code jQuery(function ($) { var OSX = { container: null, init: function () { $("a.osx").click(function (e) { e.preventDefault(); $(this.id + "_osx-modal-content").modal({ overlayId: this.id+'_osx-overlay', containerId: this.id+'_osx-container', closeHTML: null, minHeight: 80, opacity: 65, position: ['0',], overlayClose: true, onOpen: OSX.open, onClose: OSX.close }); }); }, open: function (d) { var self = this; self.container = d.container[0]; d.overlay.fadeIn('slow', function () { $("#osx-modal-content", self.container).show(); var title = $("#osx-modal-title", self.container); title.show(); d.container.slideDown('slow', function () { setTimeout(function () { var h = $("#osx-modal-data", self.container).height() + title.height() + 20; // padding d.container.animate( {height: h}, 200, function () { $("div.close", self.container).show(); $("#osx-modal-data", self.container).show(); } ); }, 300); }); }) }, close: function (d) { var self = this; // this = SimpleModal object d.container.animate( {top:"-" + (d.container.height() + 20)}, 500, function () { self.close(); // or $.modal.close(); } ); } }; OSX.init(); I guess its something to do with the open: function part, anyone can help me ?

    Read the article

  • jQuery ajax link, returned data includes a from that wont submit

    - by calumogg
    Hi everyone, I have a problem with the returned data from a ajax request. Basically when I click on a link it runs a ajax request to load some html into a div, that part is working fine the problem comes when the data has been loaded. Part of the html loaded is a form, this form works fine if I load the page directly but when it is loaded through ajax into the div it wont submit but the rest of the links in the html work fine. Here is the code that requests the remote html data: // Ajax to load image editing page $('a.editpicture').click(function(e) { e.preventDefault(); var picture = $(this).attr("id") $.ajax({ url: 'http://localhost/digital-xposure/index.php/members/viewpicture/' + picture, success: function(data) { $('#update-picture').html(data); } }); }); This is the form it loads: <form method="post" id="updatepicture" name="updatepicture" action="http://localhost/digital-xposure/index.php/members/editpicture"/> <p>Title<input type="text" name="title" id="title" style="input" value="<?php echo $title; ?>"></P> <p>Album<?php echo $albums;?></p> <p>Description<textarea name="description" id="description" cols="50" rows="5"><?php echo $description; ?></textarea></P> <input type="hidden" name="filename" id="filename" value="<?php echo $filename; ?>" /> <input type="button" name="update-submit" id="update-submit" value="Update details" class="button"> Or <input type="button" onClick="location.href='<?php echo base_url(); ?>index.php/members/deletepicture/<?php echo $filename; ?>'" value="Delete picture" class="button"> </form> Any ideas why the form wont submit after being loaded into the div? Any help is greatly appreciated, thanks. Calum

    Read the article

  • Click event keeps firing

    - by Ben Shelock
    I have absolutely no idea why this is happening but the following code seems to be executed a huge ammount of times in all browsers. $('#save_albums').click(function(){ for(var i = 1; i <= 5; i++){ html = $('#your_albums ol li').eq(i).html(); alert(html); } }); Looks fairly innocent to me... Here's the code in it's entirety $(function(){ $('#query').keyup(function(){ var text = encodeURI($(this).val()); if(text.length > 3){ $('#results').load('search.php?album='+text, function(){ $('.album').hover(function(){ $(this).css('outline', '1px solid black') },function(){ $(this).css('outline', 'none') }); $('.album').click(function(){ $('#fores').remove(); $('#yours').show(); if($('#your_albums ol li').length <= 4){ albumInfo = '<li><div class="album">' + $(this).html() + '</div></li>'; if($('#your_albums ol li').length >= 1){ $('#your_albums ol li').last().after(albumInfo); } else{ $('#your_albums ol').html(albumInfo); } } else{ alert('No more than 5 please'); } }); $('#clear_albums').click(function(e){ e.preventDefault; $('#your_albums ol li').remove(); }); $('#save_albums').click(function(){ for(var i = 1; i <= 5; i++){ html = $('#your_albums ol li').eq(i).html(); alert(html); } }); }); } else{ $('#results').text('Query must be more than 3 characters'); } }); });

    Read the article

  • Conditional Drag and Drop Operations in Flex/AS3 Tree

    - by user163757
    Good day everyone. I am currently working with a hierarchical tree structure in AS3/Flex, and want to enable drag and drop capabilities under certain conditions: Only parent/top level nodes can be moved Parent/top level nodes must remain at this level; they can not be moved to child nodes of other parent nodes Using the dragEnter event of the tree, I am able to handle condition 1 easily. private function onDragEnter(event:DragEvent):void { // only parent nodes (map layers) are moveable event.preventDefault(); if(toc.selectedItem.hasOwnProperty("layer")) DragManager.acceptDragDrop(event.target as UIComponent); else DragManager.showFeedback(DragManager.NONE); } Handling the second condition is proving to be a bit more difficult. I am pretty sure the dragOver event is the place for logic. I have been experimenting with calculateDropIndex, but that always gives me the index of the parent node, which doesn't help check if the potential drop location is acceptable or not. Below is some pseudo code of what I am looking to accomplish. private function onDragOver(e:DragEvent):void { // if potential drop location has parents // dont allow drop // else // allow drop } Can anyone provide advice how to implement this?

    Read the article

  • jQuery: script remember values between times it is triggered?

    - by Marius
    Hello there, I am writing an ajax script in jQuery. The script gets new or previous page from a php documents that returns HTML. If, located on page 1, I click next, the script IS able to find the next page number (page2), but when I click it AGAIN, the script again has to be able to find the next page number (page3) and at the minute it doesnt. I was wondering how I can save a variable between time a script is triggered, so that I can just + 1 to each time somebody clicks "next", and -1 when somebody clicks "previous". This is my code: $('.buttonNeste').click(function(event){ event.preventDefault(); if (page == null || id == null ) { var page = parseInt($(this).closest('.paginationFullWidth').attr('id')) + 1; var id = $(this).closest('.paginationFullWidth').siblings('.jtextfill').children('h1').attr('id'); } else { var page = page + 1; } var target = $(this); $.post( 'http://www.example.com/controllers/foo.php', { 'page': ( page ), 'id': id }, function(data) { $(target).closest('.paginationFullWidth').siblings('.commentsContainer').html(data); }); }); Thank you for your time. Kind regards, Marius

    Read the article

  • calling Valums Ajax uploader from other DOM element

    - by Marc
    I'm facing a problem with the valums Ajax File upload. Since the plugin is working perfectly after a few modifications on the server side, I cannot implement a specific behavior. My DOM is composed with an input file plus the container to instantiate the fileuploader buttons. What I want is to be able to fire the fileuploader plugins when clicking on the input:file[name="upload-file"]. ... <div id="upload-accepted"> <fieldset> <label for="upload-file">Select a file:</label> <input type="file" name="upload-file" id="upload-file"/> <noscript> <p>Please enable JavaScript to use file uploader.</p> </noscript> </fieldset> <div id="upload-container"> </div> </div> ... <script type="text/javascript"> $(function() { var uploader = new qq.FileUploader({ action: '/file-upload', element: document.getElementById('upload-container'), onSubmit: function(id, filename){...}, onComplete: function(id, fileName, responseJSON){...} }); }); </script> I have tried to add the following on the script but it don't works $("#upload-file").live('change', function(event) { event.preventDefault(); $('.qq-upload-button').trigger('click'); return false; }); Any clues? Thanks in advance!

    Read the article

  • A problem of trying to implement scrolling inertia with jQuery

    - by gargantaun
    I'm trying to add some iPhone style scrolling inertia to a web page that will only be viewed on the iPad. I have the scrolling working in one direction (scrollLeft), but it doesn't work in the other direction. It's a pretty simple function function onTouchEnd(event){ event.preventDefault(); inertia = (oldMoveX - touchMoveX); // Inertia Stuff if( Math.abs(inertia) > 10 ){ $("#feedback").html(inertia); $("#container").animate({ 'scrollLeft': $("#container").scrollLeft() + (inertia * 10) }, inertia * 20); }else{ $("#feedback").html("No Inertia"); } } I've bound it to the 'touchend' event on the body. The intertia is the difference betweent he old moveX position and the latest moveX position when a touch ends. I then try to animate the scrollLeft property of a div that contains a bunch of thumbnails. As I've said, this works when scrolling to the left, but not when scrolling to the right. You can view the full source code (all in one page) or test it on your iPhone or iPad (or in the simulator) here http://www.appliedworks.co.uk/files/times/swipegal.html Any ideas?

    Read the article

  • Previously working emberjs1.0-pre form on jsfiddle returns "error": "Please use POST request"

    - by brg
    This code ** http://jsfiddle.net/wagenet/ACzaJ/8/ ** was working a few days ago, when i returned to it today, it throws {"error": "Please use POST request"}, when i click add button Also the jsfiddle editor.js always throws exception on this line: function stop(){cc = stop; throw StopIteration;}; Does anyone knows the cause of this issue. Many thanks Update 1 Based on @Peter Wagenet's suggestions below, the form now logs entries or inputs to the console but it doesn't display on the result section of jsfiddle instead what is displayed on jsfiddle result section or page is still this error {"error": "Please use POST request"} ** http://jsfiddle.net/ACzaJ/18/ Update 2 In this fiddle, http://jsfiddle.net/ACzaJ/19/, i have successfully eliminated this error {"error": "Please use POST request"} by adding event.preventDefault(); to the submit action in Todos.TodoFormView. That allows us to use arbitrary view methods as action handlers. The existing issue is that the input to the form, only displays on the console and not on jsfiddle result section, though no error displays on the result section, there is a new error appearing in the console of the updated fiddle: Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. Finally solved I needed to comment out App.initialize() for it to work as expected. This the working fiddle ** http://jsfiddle.net/ACzaJ/20/. I don't know why that is so, but my guess is that, App.initialize works with other parts like the router for routing, ApplicationController and ApplicationView with {{outlet}} in the handlebars, which i didn't need for this fiddle. Finally Finally and completely solved This ** http://jsfiddle.net/tQWn8/ works with App.initialize. But you have to declare all those components above and pass the router to App.initialize, like this App..initialize(router). If you don't do this, then you will get the old error Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.

    Read the article

  • jqModal dialog - only displaying once

    - by James Inman
    I've got a jqModal dialog with the following code: $(document).ready( function() { $('td.item.active').click( function(e) { $(this).append( '<div class="new">&nbsp;</div>' ); $("#jqModal").jqm({ modal:true, onHide: function(e) { e.w.hide(); // Hide window e.o.remove(); // Remove overlay } }); $('#jqModal').jqmShow(); $('input#add_session').click( function(e) { e.preventDefault(); $('#jqModal').hide(); $('.jqmOverlay').remove(); }); }); }); The HTML used is as follows: <div id="jqModal" class="jqmWindow"> <form action="" method="post"> <ul> <li> <input id="add_session" name="commit" type="submit" value="Add Session" /> <input type="button" name="close" value="Close" id="close" class="jqmClose" /> </li> </ul> </form> </div> When I first click a <td>, the dialog launches without a problem. On the second click (or subsequent), the new class is added to the <div>, but the dialog doesn't launch.

    Read the article

  • plupload with webpy.

    - by markus
    Hi, i have a problem. I want to upload a file with plupload with the HML5 runtime. This is my html/js code : jQuery(function(){ jQuery("#uploader").pluploadQueue({ // General settings runtimes : 'html5', name : 'file', url : 'http://server.name/addContent', max_file_size : '${maxSize}$_("GB")', }); jQuery('#form_upload_file').submit(function(e) { var uploader = jQuery('#uploader').pluploadQueue(); // Validate number of uploaded files if (uploader.total.uploaded == 0) { // Files in queue upload them first if (uploader.files.length > 0) { // When all files are uploaded submit form uploader.bind('UploadProgress', function() { if (uploader.total.uploaded == uploader.files.length) jQuery('#form_upload_file').submit(); }); uploader.start(); } else alert('You must at least upload one file.'); e.preventDefault(); } }); }); <form id="form_upload_file" action="#" method="POST"> <div id="uploader"></div> <input type="hidden" name="token" value="token" /> <input type="hidden" name="idUser" value="$idUser" /> </form> So, when i click in the button to upload(the submit() method is not called), it does an OPTIONS HTTP request to my server so i don't know what i must do to save the file? this is my webpy code : def OPTIONS(self): web.header('Content-type', 'text/plain: charset=utf-8') web.header('Cache-Control', 'no-store, no-cache, must-revalidate') web.header('Cache-Control', 'post-check=0, pre-check=0', False) web.header('Pragma', 'no-cache') def POST(self): input = web.input(_unicode=False, file={})#on récupère les input self.copy(input.file.file) etc. any idea ? thanks.

    Read the article

  • jQuery Validation error...

    - by Povylas
    Hi, I have been struggling with this jQuery Validation Plugin. Here is the code: <script type="text/javascript"> $(function() { var validator = $('#signup').validate({ errorElement: 'span', rules: { username: { required: true, minlenght: 6 //remote: "check-username.php" }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, agree: "required" }, messages: { username: { required: "Please enter a username", minlength: "Your username must consist of at least 6 characters" //remote: "Somenoe have already chosen nick like this." }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }); var root = $("#wizard").scrollable({size: 1, clickable: false}); // some variables that we need var api = root.scrollable(); $("#data").click(function() { validator.form(); }); // validation logic is done inside the onBeforeSeek callback api.onBeforeSeek(function(event, i) { if($("#signup").valid() == false){ return false; }else{ return true; } $("#status li").removeClass("active").eq(i).addClass("active"); }); //if tab is pressed on the next button seek to next page root.find("button.next").keydown(function(e) { if (e.keyCode == 9) { // seeks to next tab by executing our validation routine api.next(); e.preventDefault(); } }); $('button.fin').click(function(){ parent.$.fn.fancybox.close() }); }); </script> And here is the error: $.validator.methods[method] is undefined http://www.vvv.vhost.lt/js/jquery-validate/jquery.validate.min.js Line 15 I am completely confused... Maybe some kind of handler is needed? I would be grateful for any kind of answer.

    Read the article

  • jQuery: How can I animate to a taller height with the height being added to the top of the element?

    - by Jannis
    Hi, I have a simple problem but I am not sure how to solve it. Basically I have some hidden content that, once expanded, requires a height of 99px. While collapsed the element holding it section#newsletter is set to be 65px in height. LIVE EXAMPLE: http://dev.supply.net.nz/asap-finance-static/ On the click of a#signup_form the section#newsletter is expanded to 99px using the following jQuery: $('#newsletter_form').hide(); // hide the initial form fields $('#form_signup').click(function(event) { event.preventDefault(); // stop click // animate $('section#newsletter').animate({height: 99}, 400, function() { $('#newsletter_form').show(300); }) }); All this works great except for the fact that this element sits in a sticky footer so its initial height is used to position it. Animating the height of this element causes scrollbars on the browser, because the 34px added are added to the bottom of the element, so my question: How can I add these 34px to the top of the element so the height expands upwards into the body not downwards? Thanks for reading, I look forward to your help and suggestions. Jannis

    Read the article

  • Customize jQuery.aptags plugin - mouseclick submit from dropdown list

    - by atmorell
    Hello, I am using jquery.autocomplete.js and jquery.apitags to select a few elements from a dropdown list. This works great, and I can select multiple elements etc. However the jquery-aptags plugin does only fire when enter is pressed. This might confuse some users if they use the mouse to click instead of the arrows/enter on the keyboard. I think this is the code inside jquery.aptags that submits the tag. // // Hook to the keypress event. // $(this).bind('keypress', { __c: __c }, function (e) { var c = ''; var i = 0; var v = $(this).val(); if (e.keyCode == 13) { e.stopPropagation(); e.preventDefault(); __createSpans(this, v, e.data.__c, true); } }); I am wondering if it is possible to call the method directly from a new event. $('.ac_results > ul > li').livequery(function() { $(this).bind('click', function() { $('#address_city').aptags({__createSpans}); }); }); Any thoughts?

    Read the article

  • How to disable vertical bounce/scroll on iPhone in a mobile web application

    - by Kasper Skov
    As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas? Im using jquery.mobile btw :) Update: I actually managed to get the code from the first answer working somewhat: function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListener( 'touchmove' , stopScrolling , false ); The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me). But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet. Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.

    Read the article

  • Is there a way to get an ASMX Web Service created in VS 2005 to receive and return JSON?

    - by Ben McCormack
    I'm using .NET 2.0 and Visual Studio 2005 to try to create a web service that can be consumed both as SOAP/XML and JSON. I read Dave Ward's Answer to the question How to return JSON from a 2.0 asmx web service (in addition to reading other articles at Encosia.com), but I can't figure out how I need to set up the code of my asmx file in order to work with JSON using jQuery. Two Questions: How do I enable JSON in my .NET 2.0 ASMX file? What's a simple jQuery call that could consume the service using JSON? Also, I notice that since I'm using .NET 2.0, I i'm not able to implement using System.Web.Script.Services.ScriptService. Here's my C# code for the demo ASMX service: using System; using System.Web; using System.Collections; using System.Web.Services; using System.Web.Services.Protocols; /// <summary> /// Summary description for StockQuote /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class StockQuote : System.Web.Services.WebService { public StockQuote () { //Uncomment the following line if using designed components //InitializeComponent(); } [WebMethod] public decimal GetStockQuote(string ticker) { //perform database lookup here return 8; } [WebMethod] public string HelloWorld() { return "Hello World"; } } Here's a snippet of jQuery I found on the internet and tried to modify: $(document).ready(function(){ $("#btnSubmit").click(function(event){ $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "http://bmccorm-xp/WebServices/HelloWorld.asmx", data: "", dataType: "json" }) event.preventDefault(); }); });

    Read the article

  • problem in json response from server to client using jquery

    - by user1400
    hello i try to use ajax and zend framework in my application , i could pass variable to server but i can not get data from server , it does not return values, it return all html code page, where is my mistake? or should i config other thing? $('#myForm').submit(function($e){ $e.preventDefault(); var $paramToServer=$("#myForm").serialize(); $.ajax({ type:'POST', url:'test', data:$paramToServer , success:function(re){ var res = $.evalJSON(re); console.log(res.id); // to see in firebog }, dataType:'json' }); }); public function testAction() { $this->_helper->getHelper('viewRenderer')->setNoRender(); //disable layout Zend_Layout::getMvcInstance()->disableLayout(); $name=$this->getRequest()->getParam ( 'name' ); //pass $name to server $return = array( 'id' => '5', 'family' => 'hello ', ); $return = Zend_Json::encode( $return); // Response $this->getResponse()->setBody($return); } thanks

    Read the article

  • JavaScript: input validation in the keydown event

    - by c411
    Hi, I'm attempting to do info validation against user text input in the process of keydown event. The reason that I am trying to validate in the keydown event is because I do not want to display the characters those that are considered to be illegal in the input box at the beginning. The validation I am writing is like this, function validateUserInput(){ var code = this.event.keyCode; if ((code<48||code>57) // numerical &&code!==46 //delete &&code!==8 //back space &&code!==37 // <- arrow &&code!==39) // -> arrow { this.event.preventDefault(); } } I can keep going like this, however I am seeing drawbacks on this implmentation. Those are, for example, Conditional statement become longer and longer when I put more conditions to be examined. keyCodes can be different by browsers. I have to not only check what is not legal but also have to check what are exceptionals. In above examples, delete,backspace, and arrow keys are exceptionals. But the feature that I don't want to lose is having not to display the input in the textarea unless it passes the validation. (In case the user try to put illegal characters in the textarea, nothing should appear at all) That is why I am not doing validation upon keyup event. So my question is, Are there better ways to validate input in keydown event than checking keyCode by keyCode? Are there other ways to capture the user inputs other than keydown event before browser displays it? And a way to put the validation on it? Thanks for the help in advance.

    Read the article

  • jquery slide to attribute with specific data attribute value

    - by Alex M
    Ok, so I have the following nav with absolute urls: <ul class="nav navbar-nav" id="main-menu"> <li class="first active"><a href="http://example.com/" title="Home">Home</a></li> <li><a href="http://example.com/about.html" title="About">About</a></li> <li><a href="http://example.com/portfolio.html" title="Portfolio">Portfolio</a></li> <li class="last"><a href="example.com/contact.html" title="Contact">Contact</a></li> </ul> and then articles with the following data attributes: <article class="row page" id="about" data-url="http://example.com/about.html"> <div class="one"> </div> <div class="two" </div> </article> and when you click the link in the menu I would like to ignore the fact it is a hyperlink and slide to the current article based on its attribute data-url. I started with what I think is the obvious: $('#main-menu li a').on('click', function(event) { event.preventDefault(); var pageUrl = $(this).attr('href'); )}; and have tried find and animate but then I don't know how to reference the article with data-url="http://example.com/about.html". Any help would be most appreciated. Thanks

    Read the article

  • Customize jQuery.aptags plugin - mouseclick submit from .ac_results list

    - by atmorell
    Hello, I am using jquery.autocomplete.js and jquery.apitags to select a few elements from a div (.ac_results) This works great, and I can select multiple elements etc. However the jquery-aptags plugin does only fire when enter is pressed. This might confuse some users if they use the mouse to click instead of the arrows/enter on the keyboard. I think this is the code inside jquery.aptags that submits the tag. // // Hook to the keypress event. // $(this).bind('keypress', { __c: __c }, function (e) { var c = ''; var i = 0; var v = $(this).val(); if (e.keyCode == 13) { e.stopPropagation(); e.preventDefault(); __createSpans(this, v, e.data.__c, true); } }); I am wondering if it is possible to call the method directly from a new event. $('.ac_results > ul > li').livequery(function() { $(this).bind('click', function() { $('#address_city'). //how do I fire the "enter" event from here? }); }); Any thoughts?

    Read the article

  • jquery .submit live click runs more than once

    - by fxuser
    I use the following code to run my form ajax requests but when i use the live selector on a button i can see the ajax response fire 1 time, then if i re-try it 2 times, 3 times, 4 times and so on... I use .live because i also have a feature to add a post and that appears instantly so the user can remove it without refreshing the page... Then this leads to the above problem... using .click could solve this but it's not the ideal solution i'm looking for... jQuery.fn.postAjax = function(success_callback, show_confirm) { this.submit(function(e) { e.preventDefault(); if (show_confirm == true) { if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) { $.post(this.action, $(this).serialize(), $.proxy(success_callback, this)); } } else { $.post(this.action, $(this).serialize(), $.proxy(success_callback, this)); } return false; }) return this; }; $(document).ready(function() { $(".delete_button").live('click', function() { $(this).parent().postAjax(function(data) { if (data.error == true) { } else { } }, true); }); });? EDIT: temporary solution is to change this.submit(function(e) { to this.unbind('submit').bind('submit',function(e) { the problem is how can i protect it for real because people who know how to use Firebug or the same tool on other browsers can easily alter my Javascript code and re-create the problem

    Read the article

  • jQuery Collapse (with cookies), default open instead of closed?

    - by Christian
    Hi. I've got a jQuery snippet which basically allows a user to toggle a div, open or closed - their preference is saved in a cookie. (function($) { $.fn.extend({ collapse: function(options) { var defaults = { inactive : "inactive", active : "active", head : ".trigger", group : ".wrap-me-up", speed : 300, cookie : "collapse" }; // Set a cookie counter so we dont get name collisions var op = $.extend(defaults, options); cookie_counter = 0; return this.each(function() { // Increment cookie name counter cookie_counter++; var obj = $(this), sections = obj.find(op.head).addClass(op.inactive), panel = obj.find(op.group).hide(), l = sections.length, cookie = op.cookie + "_" + cookie_counter; // Look for existing cookies for (c=0;c<=l;c++) { var cvalue = $.cookie(cookie + c); if ( cvalue == 'open' + c ) { panel.eq(c).show(); panel.eq(c).prev().removeClass(op.inactive).addClass(op.active); }; }; sections.click(function(e) { e.preventDefault(); var num = sections.index(this); var cookieName = cookie + num; var ul = $(this).next(op.group); // If item is open, slide up if($(this).hasClass(op.active)) { ul.slideUp(op.speed); $(this).removeClass(op.active).addClass(op.inactive); $.cookie(cookieName, null, { path: '/', expires: 10 }); return } // Else slide down ul.slideDown(op.speed); $(this).addClass(op.active).removeClass(op.inactive); var cookieValue = 'open' + num; $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }); }); } }); })(jQuery); Demo: http://christianbullock.com/demo/ I'm just wondering how I can display the list open as default, and have the div collapse when the header is clicked? Many thanks. Christian.

    Read the article

  • Error returning Ajax in IE7

    - by GuiPereira
    Hi everybody! It's my first question here. First of all, sorry for my 'not perfect' english... I'm developing an ASP.NET MVC application with AJAX. I have the following code in the View: <% using(Html.BeginForm(null, "Home", FormMethod.Post, new{id="formcpf"})){ %> <p> <input name="tipo" type="radio" value="GeraCPF" /> CPF <input type="radio" name="tipo" value="GeraCNPJ" /> CNPJ </p> <p> <input type="submit" id="sbmt" value="Gerar" /> <br /><br /> <span id="lblCPF" class="respostaBG"></span> </p> <%} % and the following Javascript to call an Ajax request: $(document).ready(function() { $("form#formcpf").submit(function(event) { $(this).attr("action", $("input[@name='tipo']:checked").val()); event.preventDefault(); hijack(this, update_sessions, "html"); }); }); function hijack(form, callback, format) { $.ajax({ url: form.action, type: form.method, dataType: format, data: $(form).serialize(), success: callback }); } function update_sessions(result) { $("#lblCPF").html(result); } in Firefox and Chrome works fine, but in IE7 sometimes returns the value into the label, sometimes not. I have to keep submiting to get the return. Anyone could help?

    Read the article

< Previous Page | 5 6 7 8 9 10 11 12 13 14 15  | Next Page >