Search Results

Search found 23724 results on 949 pages for 'jquery ui slider'.

Page 51/949 | < Previous Page | 47 48 49 50 51 52 53 54 55 56 57 58  | Next Page >

  • Jquery find behavior in firefox 3.5.9

    - by dragoon
    Hi, i have the following piece of HTML code on my page: <tr> <td> <div> <input type="hidden" name="test" value=""> <input autocomplete="off" class="ffb-input watermark"> <div class="ffb"> <div class="content"> </div> </div> </div> </td> </tr> In JavaScript I get the <tr> element using jquery and trying to search for input like this: tr.find('div input:hidden') but nothing is returned. When I'm using find like this: tr.find('div input[type=hidden]') Everything is working fine. What is the reason for such behavor? I observe this only in FireFox 3.5.9, not in 3.6.3, Jquery 1.4.2

    Read the article

  • Jquery Get json from remote host

    - by h_a86
    Hi i am trying to read json from a remote host by using this piece of code. <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON("http://50.116.19.49/rest/user.json",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); }); }); }); </script> </head> <body> <button>Get JSON data</button> <div></div> </body> </html> The problem is when i type the url in browser i get json from it. But failed to get json by using the above jquery method. Can someone help in this regard. Thanks

    Read the article

  • Detecting scroll in Jquery Mobile

    - by noway
    I can't detect whether the page is scrolled or not with jquery mobile. Scrolltop always return 0 in any case. <script> var interval = setInterval(function() { alert($("#articlecontent").scrollTop()); //alert($(window).scrollTop()); //alert($("#maindiv").scrollTop()); } }, 3000); </script> <div data-role="page" id="maindiv"> <div class="ui-bar ui-bar-b"> </div> <div id='articlecontent' data-role="content" data-iscroll> sldfjlkjsl lksjd kls df hjks djkh sdjfkh sjkf jksd jkhsdf jkhsd hjwiuhhfg skd jkshd fkj fkjsg kjhsdkjf sldfjlkjsl lksjd kls df hjks djkh sdjfkh sjkf jksd jkhsdf jkhsd hjwiuhhfg skd jkshd fkj fkjsg kjhsdkjf sldfjlkjsl lksjd kls df hjks djkh sdjfkh sjkf jksd jkhsdf jkhsd hjwiuhhfg skd jkshd fkj fkjsg kjhsdkjf </div> <div data-role="footer" data-id="foo1"> </div> </div>

    Read the article

  • JQuery/JavaScript confusion with Previous and Next buttons.

    - by Anders H
    I've got some inherited JQuery code that isn't working as I'd think and I'm just not even sure what to research or look up next. The Problem: I've got a few DIVs within the HTML: a container, a "frame" and the content. If the content is longer than the frame, it's cut off using overflow:hidden and a Next - button appears. The next button works correctly. However, there's also a previous button with similar code, but it does not work as expected and just displays whenever the next button does. Whenever either button is hidden, it will not reappear again when navigating back through the "pages". When the I may be overlooking something in the code, but here it is in full. The HTML: <div id="draggable" class="ui-widget-content"> <div id="draggable-title" class="cufon">about</div> <a id="draggable-close" href="javascript:void(0);"><div class="close-img icon"></div></a> <div class="clear"></div> <div id="draggable-frame"> <div id="draggable-content"> </div> </div> <a id="prevContent" href="javascript:void(0);">&laquo; previous</a><a id="nextContent" href="javascript:void(0);">next &raquo;</a> </div> The JavaScript: $(function() { $("#draggable").draggable(); }); $(document).ready(function(){ $("#draggable-frame").scrollTop(0); $("#prevContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showPrev()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#prevContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#nextContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showNext()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#nextContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#draggable-close").click(function(){ $("#draggable").fadeOut("medium"); }); $("#prevContent").hide(); $("#nextContent").hide(); showContent("about"); $(".opener").click(function(){ $("#draggable-frame").scrollTop(0); $("#draggable").fadeIn("medium"); showContent($(this).attr("title")); }); }); // function showPrev() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() - $("#draggable-frame").height()); } // function showNext() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() + $("#draggable-frame").height()); } function showContent(title) { $("#draggable-title").html(title); $("#draggable-content").html($("#"+title).html()); Cufon.replace('.cufon', { fontFamily: 'cav', hover: true }); $("#nextContent").hide(); $("#prevContent").hide(); if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#nextContent").show(); } if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#prevContent").show(); } } Even just point me in the right direction to research would be a big help right now. Thank you.

    Read the article

  • jQuery hold form submit until "continue" button pressed

    - by Seán McCabe
    I am trying to submit a form, which I have had working, but have now modified it to include a modal jQuery UI box, so that it won't submit until the user presses "continue". I've had various problems with this, including getting the form to hold until that button is pressed, but I think I have found a solution to that, but implementing it, I am getting a SyntaxError which I can't find the source of. With the help of kevin B managed to find the answer was the form was submitting, but the returned JSON response wasn't quite formatted right. The response was that the form wasn't being submitted, so that problem is still occurring. So updated the code with the provided feedback, now need to find out why the form isnt submitting. I know its something to do with the 2nd function isnt recognising the submit button has been pressed, so need to know how to submit that form data without the form needing to be submitted again. Below is the new code: function submitData() { $("#submitProvData").submit(function(event) { event.preventDefault(); var gTotal, sTotal, dfd; var dfd = new $.Deferred(); $('html,body').animate({ scrollTop: 0 }, 'fast'); $("#submitProvData input").css("border", "1px solid #aaaaaa"); $("#submitProvData input[readonly='readonly']").css("border", "none"); sTotal = $('#summaryTotal').val(); gTotal = $('#gptotal').val(); if(gTotal !== 'sTotal'){ $("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV //SET $("#newsupinvdiagbox").dialog({ resizable: false, autoOpen:false, modal: true, draggable: false, width:380, height:240, closeOnEscape: false, position: ['center',20], buttons: { 'Continue': function() { $(this).dialog('close'); reData(); }, // end continue button 'Correct': function() { $(this).dialog('close'); return false; } //end cancel button }//end buttons });//end dialog $('#newsupinvdiagbox').dialog('open'); } return false; }); } function reData() { console.log('submitted'); $("#submitProvData").submit(function(resubmit){ console.log('form submit'); var formData; formData = new FormData($(this)[0]); $.ajax({ type: "POST", url: "functions/invoicing_upload_provider.php", data: formData, async: false, success: function(result) { $.each($.parseJSON(result), function(item, value){ if(item == 'Success'){ $('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.'); $('#newsupinv_window_message_success').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } else if(item == 'Error'){ $('#newsupinv_window_message_error_mes').html(value); $('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700); } else if(item == 'Warning'){ $('#newsupinv_window_message_warning_mes').html(value); $('#newsupinv_window_message_warning').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } }); }, error: function() { $('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted"); $('#newsupinv_window_message_error').fadeIn(300); $('#newsupinv_window_message_error').delay(3000).fadeOut(700); }, cache: false, contentType: false, processData: false }); }); }

    Read the article

  • How can I make a jQuery UI 'draggable()' div draggable for touchscreen?

    - by artlung
    I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item. Basically, I click or tap on div#everything (100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I can drag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage. So here's the code I use to capture clicks: $('#everything').bind('click', function(e){ var elem = document.createElement('DIV'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).css({ top: STATE.top, left: STATE.left }).html('<textarea></textarea>') .addClass('instance') .bind('click', function(event){ return false; }); $(this).append(e); }); And here's the code I use to "save" the note and turn the input div into just a display div: $('textarea').live('mouseleave', function(){ var val = jQuery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).css({ height: '30px' }); STATE.height = 30; if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) { while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) { var h = div.height() + 10; STATE.height = h; div.css({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guid = uniqueID() div.addClass('savedNote').attr('id', STATE.guid).draggable({ stop: function() { var offset = $(this).offset(); STATE.guid = $(this).attr('id'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); } }); And I have this code when I load the page for saved notes: $('.savedNote').draggable({ stop: function() { STATE.guid = $(this).attr('id'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); My STATE object handles saving the notes. Onload, this is the whole html body: <body> <div id="everything"></div> <div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> <div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> <div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> <div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> <div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> </body> So, my question is really: how can I make this work better on iPad? I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs. More general comments about how to write UI components like this would be welcome as well. Thanks!

    Read the article

  • jquery tabs with form help

    - by sico87
    Hello, I am implementing jQuery tabs on mysite, one of the tabs holds a form and this is my problem, the form is loaded in via ajax as it is used multiple time throughout the site. My issue is that when the form is submitted the page leaves the tabbed area, whereas I need to stay within the tabbed system. Below is the code I am using TABS HTML <div id="tabs"> <ul> <li><a href="#tabs-1">Active Categories</a></li> <li><a href="#tabs-2">De-activated Categories</a></li> <li><a href="<?=base_url();?>admin/addCategory">Add A New Category</a></li> </ul> FORM MARKUP <div id="contact_form"> <?php // open the form echo form_open(base_url().'admin/addCategory'); // categoryTitle echo form_label('Category Name', 'categoryTitle'); echo form_error('categoryTitle'); $data = array( 'name' => 'categoryTitle', 'id' => 'categoryTitle', 'value' => $categoryTitle, ); echo form_input($data); // categoryAbstract $data = array( 'name' => 'categoryAbstract', 'id' => 'categoryAbstract wysiwyg', 'value' => $categoryAbstract, ); echo form_label('Category Abstract', 'categoryAbstract'); echo form_error('categoryAbstract'); echo form_textarea($data); // categorySlug $data = array( 'name' => 'categorySlug', 'id' => 'categorySlug', 'value' => $categorySlug, ); echo form_label('Category Slug', 'categorySlug'); echo form_error('categorySlug'); echo form_input($data); // categoryIsSpecial /*$data = array( 'name' => 'categoryIsSpecial', 'id' => 'categoryIsSpecial', 'value' => '1', 'checked' => $checkedSpecial, ); echo form_label('Is Category Special?', 'categoryIsSpecial'); echo form_error('categoryIsSpecial'); echo form_checkbox($data);*/ // categoryOnline $data = array( 'name' => 'categoryOnline', 'id' => 'categoryOnline', 'value' => '1', 'checked' => $checkedOnline, ); echo form_label('Online?', 'categoryOnline'); echo form_checkbox($data); echo form_error('categoryOnline'); //hidden field check if we are adding or editing echo form_hidden('edit', $edit); echo form_hidden('categoryId', $categoryId); // categorySubmit $data = array('class' => 'submit', 'id' => 'submit', 'value'=>'Submit', 'name' => 'categorySubmit'); echo form_submit($data); echo form_close(); ?> </div> FORM PROCESS function saveCategory() { $data = array(); // we need to set the what element the form errors get displayed in $this->form_validation->set_error_delimiters('<div class="formError">', '</div>'); // we need to estabilsh some rules so the form can be submitted without error, // or if there is error then the form needs show errors. $config = array( array( 'field' => 'categoryTitle', 'label' => 'Category title', 'rules' => 'required|trim|max_length[25]|xss_clean' ), array( 'field' => 'categoryAbstract', 'label' => 'Category abstract', 'rules' => 'required|trim|max_length[150]|xss_clean' ), array( 'field' => 'categorySlug', 'label' => 'Category slug', 'rules' => 'required|trim|alpha|max_length[25]|xss_clean' ), /*array( 'field' => 'categoryIsSpecial', 'label' => 'Special category', 'rules' => 'trim|xss_clean' ),*/ array( 'field' => 'categoryOnline', 'label' => 'Category online', 'rules' => 'trim|xss_clean' ) ); $this->form_validation->set_rules($config); // with the validation rules set we can no run the validation rules over the form // if any the validation returns false then the error messages will be returned to the view // in the delimiters that we set further up the page. if($this->form_validation->run() == FALSE) { // we should reload the form $this->load->view('admin/add_category'); } }

    Read the article

  • jQuery inserting comment help

    - by StealthRT
    Hey all, i am trying to learn how to insert a comment within some html code without having to refresh the page. I know jQuery is capable of inserting a comment into a div area but i am having problems finding an example like that with fading in. Here is my comment code: <div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> <tr><td class="Commentsaying">this is a test comment</td></tr> </table> <div id="stylized" class="myform" align="center"> <form id="CommentForm122" name="CommentForm122"> <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> <textarea name="txtComment" class="box" id="txtComment"></textarea> <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> <div class="buttons" align="center"> <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> </div> </form> </div> </div> The code i need to insert again would be: <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> <tr><td class="Commentsaying">this is a test comment</td></tr> </table> But again, i am unable to find an example using jQuery to automatically insert that part of the code under the other "table /table" box.. So after its inserted by jQuery, the code should look like this: <div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> <tr><td class="Commentsaying">this is a test comment</td></tr> </table> <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> <tr><td class="Commentsaying">this is a test comment</td></tr> </table> <div id="stylized" class="myform" align="center"> <form id="CommentForm122" name="CommentForm122"> <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> <textarea name="txtComment" class="box" id="txtComment"></textarea> <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> <div class="buttons" align="center"> <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> </div> </form> </div> </div> As always, any help would be great! :o) David

    Read the article

  • Anti-Forgery Request Helpers for ASP.NET MVC and jQuery AJAX

    - by Dixin
    Background To secure websites from cross-site request forgery (CSRF, or XSRF) attack, ASP.NET MVC provides an excellent mechanism: The server prints tokens to cookie and inside the form; When the form is submitted to server, token in cookie and token inside the form are sent in the HTTP request; Server validates the tokens. To print tokens to browser, just invoke HtmlHelper.AntiForgeryToken():<% using (Html.BeginForm()) { %> <%: this.Html.AntiForgeryToken(Constants.AntiForgeryTokenSalt)%> <%-- Other fields. --%> <input type="submit" value="Submit" /> <% } %> This invocation generates a token then writes inside the form:<form action="..." method="post"> <input name="__RequestVerificationToken" type="hidden" value="J56khgCvbE3bVcsCSZkNVuH9Cclm9SSIT/ywruFsXEgmV8CL2eW5C/gGsQUf/YuP" /> <!-- Other fields. --> <input type="submit" value="Submit" /> </form> and also writes into the cookie: __RequestVerificationToken_Lw__= J56khgCvbE3bVcsCSZkNVuH9Cclm9SSIT/ywruFsXEgmV8CL2eW5C/gGsQUf/YuP When the above form is submitted, they are both sent to server. In the server side, [ValidateAntiForgeryToken] attribute is used to specify the controllers or actions to validate them:[HttpPost] [ValidateAntiForgeryToken(Salt = Constants.AntiForgeryTokenSalt)] public ActionResult Action(/* ... */) { // ... } This is very productive for form scenarios. But recently, when resolving security vulnerabilities for Web products, some problems are encountered. Specify validation on controller (not on each action) The server side problem is, It is expected to declare [ValidateAntiForgeryToken] on controller, but actually it has be to declared on each POST actions. Because POST actions are usually much more then controllers, this is a little crazy Problem Usually a controller contains actions for HTTP GET and actions for HTTP POST requests, and usually validations are expected for HTTP POST requests. So, if the [ValidateAntiForgeryToken] is declared on the controller, the HTTP GET requests become invalid:[ValidateAntiForgeryToken(Salt = Constants.AntiForgeryTokenSalt)] public class SomeController : Controller // One [ValidateAntiForgeryToken] attribute. { [HttpGet] public ActionResult Index() // Index() cannot work. { // ... } [HttpPost] public ActionResult PostAction1(/* ... */) { // ... } [HttpPost] public ActionResult PostAction2(/* ... */) { // ... } // ... } If browser sends an HTTP GET request by clicking a link: http://Site/Some/Index, validation definitely fails, because no token is provided. So the result is, [ValidateAntiForgeryToken] attribute must be distributed to each POST action:public class SomeController : Controller // Many [ValidateAntiForgeryToken] attributes. { [HttpGet] public ActionResult Index() // Works. { // ... } [HttpPost] [ValidateAntiForgeryToken(Salt = Constants.AntiForgeryTokenSalt)] public ActionResult PostAction1(/* ... */) { // ... } [HttpPost] [ValidateAntiForgeryToken(Salt = Constants.AntiForgeryTokenSalt)] public ActionResult PostAction2(/* ... */) { // ... } // ... } This is a little bit crazy, because one application can have a lot of POST actions. Solution To avoid a large number of [ValidateAntiForgeryToken] attributes (one for each POST action), the following ValidateAntiForgeryTokenAttribute wrapper class can be helpful, where HTTP verbs can be specified:[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)] public class ValidateAntiForgeryTokenWrapperAttribute : FilterAttribute, IAuthorizationFilter { private readonly ValidateAntiForgeryTokenAttribute _validator; private readonly AcceptVerbsAttribute _verbs; public ValidateAntiForgeryTokenWrapperAttribute(HttpVerbs verbs) : this(verbs, null) { } public ValidateAntiForgeryTokenWrapperAttribute(HttpVerbs verbs, string salt) { this._verbs = new AcceptVerbsAttribute(verbs); this._validator = new ValidateAntiForgeryTokenAttribute() { Salt = salt }; } public void OnAuthorization(AuthorizationContext filterContext) { string httpMethodOverride = filterContext.HttpContext.Request.GetHttpMethodOverride(); if (this._verbs.Verbs.Contains(httpMethodOverride, StringComparer.OrdinalIgnoreCase)) { this._validator.OnAuthorization(filterContext); } } } When this attribute is declared on controller, only HTTP requests with the specified verbs are validated:[ValidateAntiForgeryTokenWrapper(HttpVerbs.Post, Constants.AntiForgeryTokenSalt)] public class SomeController : Controller { // GET actions are not affected. // Only HTTP POST requests are validated. } Now one single attribute on controller turns on validation for all POST actions. Maybe it would be nice if HTTP verbs can be specified on the built-in [ValidateAntiForgeryToken] attribute, which is easy to implemented. Submit token via AJAX The browser side problem is, if server side turns on anti-forgery validation for POST, then AJAX POST requests will fail be default. Problem For AJAX scenarios, when request is sent by jQuery instead of form:$.post(url, { productName: "Tofu", categoryId: 1 // Token is not posted. }, callback); This kind of AJAX POST requests will always be invalid, because server side code cannot see the token in the posted data. Solution The tokens are printed to browser then sent back to server. So first of all, HtmlHelper.AntiForgeryToken() must be called somewhere. Now the browser has token in HTML and cookie. Then jQuery must find the printed token in the HTML, and append token to the data before sending:$.post(url, { productName: "Tofu", categoryId: 1, __RequestVerificationToken: getToken() // Token is posted. }, callback); To be reusable, this can be encapsulated into a tiny jQuery plugin:/// <reference path="jquery-1.4.2.js" /> (function ($) { $.getAntiForgeryToken = function (tokenWindow, appPath) { // HtmlHelper.AntiForgeryToken() must be invoked to print the token. tokenWindow = tokenWindow && typeof tokenWindow === typeof window ? tokenWindow : window; appPath = appPath && typeof appPath === "string" ? "_" + appPath.toString() : ""; // The name attribute is either __RequestVerificationToken, // or __RequestVerificationToken_{appPath}. tokenName = "__RequestVerificationToken" + appPath; // Finds the <input type="hidden" name={tokenName} value="..." /> from the specified. // var inputElements = $("input[type='hidden'][name='__RequestVerificationToken" + appPath + "']"); var inputElements = tokenWindow.document.getElementsByTagName("input"); for (var i = 0; i < inputElements.length; i++) { var inputElement = inputElements[i]; if (inputElement.type === "hidden" && inputElement.name === tokenName) { return { name: tokenName, value: inputElement.value }; } } return null; }; $.appendAntiForgeryToken = function (data, token) { // Converts data if not already a string. if (data && typeof data !== "string") { data = $.param(data); } // Gets token from current window by default. token = token ? token : $.getAntiForgeryToken(); // $.getAntiForgeryToken(window). data = data ? data + "&" : ""; // If token exists, appends {token.name}={token.value} to data. return token ? data + encodeURIComponent(token.name) + "=" + encodeURIComponent(token.value) : data; }; // Wraps $.post(url, data, callback, type). $.postAntiForgery = function (url, data, callback, type) { return $.post(url, $.appendAntiForgeryToken(data), callback, type); }; // Wraps $.ajax(settings). $.ajaxAntiForgery = function (settings) { settings.data = $.appendAntiForgeryToken(settings.data); return $.ajax(settings); }; })(jQuery); In most of the scenarios, it is Ok to just replace $.post() invocation with $.postAntiForgery(), and replace $.ajax() with $.ajaxAntiForgery():$.postAntiForgery(url, { productName: "Tofu", categoryId: 1 }, callback); // Token is posted. There might be some scenarios of custom token. Here $.appendAntiForgeryToken() is provided:data = $.appendAntiForgeryToken(data, token); // Token is already in data. No need to invoke $.postAntiForgery(). $.post(url, data, callback); And there are scenarios that the token is not in the current window. For example, an HTTP POST request can be sent by iframe, while the token is in the parent window. Here window can be specified for $.getAntiForgeryToken():data = $.appendAntiForgeryToken(data, $.getAntiForgeryToken(window.parent)); // Token is already in data. No need to invoke $.postAntiForgery(). $.post(url, data, callback); If you have better solution, please do tell me.

    Read the article

  • Windows 8 can't open any modern UI app

    - by Joyal
    I just upgraded my machine with Windows 7 Pro x64, to Windows 8 Pro x64, with the Windows 8 Upgrade Assistant. Everything went great, but none of the Modern UI Apps open, and they do not show any error messages or warnings, they just close right away I opened them. I tried to open Skydrive, Windows Store, Photo App,Music App, Bing, Videos , Finances and all the available Modern UI apps on my screen My screen resolution is 1080p, so it is not a resolution issue, I'm using a Windows account , but i switched to Local account but didn't solved the issue. I ran Windows Update and updated my nVidia video drivers. I also tried an app called "Metro App Troubleshooter" without luck

    Read the article

  • Windows 8 Metro UI with Multiple Monitors -- Keep in always maximized?

    - by Jersey Dude
    Before installing Win 8 today, my plan was to keep the Metro UI up on my smaller, laptop monitor and have the classic UI running on my two larger monitors. However, in reality, as soon as I click on something in one of the classic UI monitors, the Metro UI minimizes (thus exposing the classic UI in its place). Is there any way to keep the Metro UI from minimizing when I do something in another monitor? Oddly enough, if there is an app running/suspended in the Metro Window, then the Metro UI is not minimized. If the Start screen is currently viewed, clicking in a classic window/monitor switches the Metro UI from the start screen to the last run app. Very peculiar .. Thanks

    Read the article

  • JQuery-UI Drag, Drop and Re-Drag Clones on Re-Drag

    - by amarcy
    I am using the following code to extend the JQuery-UI demos included with the download. I am trying to set up a container that the user can drag items into and then move the items around within the container. I incorporated the answer from http://stackoverflow.com/questions/867469/jquery-draggable-clone which works with one problem. <script> $(document).ready(function() { $("#droppable").droppable({ accept: '.ui-widget-content', drop: function(event, ui) { if($(ui).parent(":not(:has(#id1))")){ $(this).append($(ui.helper).clone().attr("id", "id1")); } $("#id1").draggable({ containment: 'parent', }); } }); $(".ui-widget-content").draggable({helper: 'clone'}); }); </script> div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> When an item is dropped onto the droppable container it can be dragged one time and when it is dropped after that drag it loses its dragging capability. How do I allow for the item to be dragged multiple times after it has been added to the droppable container?

    Read the article

  • Jquery Ui DatePicker, attaches to textbox but only works once, then all click events are disabled.

    - by RubbleFord
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#date').datepicker(); }); </script> </head> <body> <%--<form id="form1" runat="server">--%> <div> <input type="text" id="date" /> </div> <%--</form>--%> </body> </html> I've attached a datepicker to a text box and the first time I click it, it works a treat and populates the text box with the current date. It works fine in IE7 Comp mode, Chrome and Firefox. It works once or twice on IE8 but locks the browser up after that. One interesting note is the host operating system is Windows 2008 R2. Any ideas?

    Read the article

  • Multiple jQuery UI buttons with same ID

    - by Mark Nolan
    There might be a really simple solution to this question, but i just don't see it! I have a page with a list of items. every item has the same jquery ui button (its inside a dialog and adds that item to a list). i identify the item via the parenting DIV holding the DB id. So far so good... The Problem is only the first button on the list works! The second, third etc. buttons don't show any reaction at all. The buttons all have the same id - as the list is dynamic and the same action is triggered with every click. Only the parenting ID changes. Heres the display part: <div id="2"> <div id="56"> <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_2.mp3</button> </div> </div> <div id="2"> <div id="57"> <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_3.mp3</button> </div> </div> And here comes the js Part: $('#add-audio-file').click(function() { assetID = $(this).parent('div').attr('id'); pageID = $(this).parent('div').parent('div').attr('id'); $.post( "modules/portfolio/serialize.php", {id : pageID, assetid : assetID, do : "add-audio-file"}, function(data, textStatus, xhr) { $('#dialog-add-audio').dialog('close'); } ); }); I am using jquery 1.4.2 and jquery ui 1.8rc3 Any ideas?

    Read the article

  • jquery script that used to work is not working with jquery 1.4.2

    - by Zayatzz
    ... and i cant figure out why. The script is following: <script type="text/javascript" src="http://path/to/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> function openMediaPlayer() { $('#flashMovie').animate({'height':'333px'}); } function closeMediaPlayer() { $('#flashMovie').animate({'height':'80px'}); } jQuery(function($){ $('#videoholder').bind('mouseenter', function(){ openMediaPlayer(); }); $('#videoholder').bind('mouseleave', function(){ closeMediaPlayer(); }); }); </script> <div id="videoholder" style="height:80px;width:412px;"> <object width="412" height="80" type="application/x-shockwave-flash" id="flashMovie" name="flashMovie" style="height: 80px;" data="http://path/to/Player.swf"><param name="menu" value="false"><param name="bgcolor" value="#666666"><param name="allowFullscreen" value="true"><param name="flashvars" value="playlistURL=http://path/to/Player/data/playlist.xml"></object> </div> pure and simple resizing flash object. It worked with older(1.3.2) jquery verision. The animate just does not work. Can anyone tell me what i should change to get it working again? Alan.

    Read the article

  • jquery script that used to work is not working with jquery 1.4.2

    - by Zayatzz
    ... and i cant figure out why. The script is following: <script type="text/javascript" src="http://path/to/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> function openMediaPlayer() { $('#flashMovie').animate({'height':'333px'}); } function closeMediaPlayer() { $('#flashMovie').animate({'height':'80px'}); } jQuery(function($){ $('#videoholder').bind('mouseenter', function(){ openMediaPlayer(); }); $('#videoholder').bind('mouseleave', function(){ closeMediaPlayer(); }); }); </script> <div id="videoholder" style="height:80px;width:412px;"> <object width="412" height="80" type="application/x-shockwave-flash" id="flashMovie" name="flashMovie" style="height: 80px;" data="http://path/to/Player.swf"><param name="menu" value="false"><param name="bgcolor" value="#666666"><param name="allowFullscreen" value="true"><param name="flashvars" value="playlistURL=http://path/to/Player/data/playlist.xml"></object> </div> pure and simple resizing flash object. It worked with older(1.3.2) jquery verision. The animate just does not work. Can anyone tell me what i should change to get it working again? Alan.

    Read the article

  • How to submit to the server with JQuery.UI Dialog and ASP.Net?

    - by Paul
    Hi, I'm looking for a way to submit information captured in a JQuery Dialog to the server in ASP.Net. I originally thought it would work with a 'hidden' asp button, but the click doesn't seem to be submitting the form. Here's the code I have so far: <script type="text/javascript"> jQuery(document).ready(function() { var dlg = jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 150, width: 300, modal: true, buttons: { "Add": function() { var btn = document.getElementById("<%=btnAdd.ClientID %>"); if (btn) btn.click(); $(this).dialog("close"); } } }); $("#dialog").parent().appendTo("#dialog_target"); }); </script> <div id="hidden" style="visibility:hidden" > <!-- Hidden button that actually triggers server add --> <asp:Button ID="btnAdd" runat="server" style="display:none" OnClick="btnAdd_Click" /> <!-- Hidden Delete Dialog --> <div id="dialog" title="New Additional Skill"> <label>Additional Skill Name:</label> <asp:TextBox ID="_txtNewSkillName" runat="server" /> </div> Any pointers?

    Read the article

  • Why my jquery function is not firing on Firefox

    - by Cristian Boariu
    I have some trouble with some jquery method (for some checkboxes I want them to fire on checked/unchecked so I can do something then). This method works perfectly on Chrome and IE but not on latest FF. jQuery(function () { jQuery(':checkbox').change(function () { var counter = jQuery('.count').text(); var thisCheck = jQuery(this); if (thisCheck.is(':checked')) { counter++; //apply green color to the selected row jQuery(this).closest('tr').addClass('checked'); } else { counter--; //remove green color to the selected row jQuery(this).closest('tr').removeClass('checked'); } jQuery('.count').html(counter); //enable export button when there are selected emails to be exported if (counter > 0) { jQuery(".exportButton").removeAttr("disabled", ""); } else { jQuery(".exportButton").attr("disabled", "disabled"); } }); }); Basically it's simply not firing...Even with Debug is not catching the first line (function declare nor other lines too). If I move this javascript(without function declare) inside jQuery(document).ready(function ($) { all works nice on Firefox too... Yes, I do use jQuery.noConflict(); before jQuery(document).ready(function ($) { Do you know why this happens?

    Read the article

  • jQuery Validation plugin: disable validation for specified submit buttons

    - by Ted
    I have a form with multiple fields that I'm validating (some with methods added for custom validation) with Jörn Zaeffere's excellent jQuery Validation plugin. How do you circumvent validation with specified submit controls (in other words, fire validation with some submit inputs, but do not fire validation with others)? This would be similar to ValidationGroups with standard ASP.NET validator controls. My situation: It's with ASP.NET WebForms, but you can ignore that if you wish. However, I am using the validation more as a "recommendation": in other words, when the form is submitted, validation fires but instead of a "required" message displaying, a "recommendation" shows that says something along the line of "you missed the following fields.... do you wish to proceed anyways?" At that point in the error container there's another submit button now visible that can be pressed which would ignore the validation and submit anyways. How to circumvent the forms .validate() for this button control and still post? The Buy and Sell a House sample at http://jquery.bassistance.de/validate/demo/multipart/ allows for this in order to hit the previous links, but it does so through creating custom methods and adding it to the validator. I would prefer to not have to create custom methods duplicating functionality already in the validation plugin. The following is a shortened version of the immediately applicable script that I've got right now: var container = $("#<%= Form.ClientID %> div.validationSuggestion"); $('#<%= Form.ClientID %>').validate({ errorContainer: container, errorLabelContainer: $("ul",container), rules: { <%= YesNo.UniqueID %>: { required: true }, <%= ShortText.UniqueID %>: { required: true } // etc. }, messages: { <%= YesNo.UniqueID %>: 'A message.', <%= ShortText.UniqueID %>: 'Another message.' // etc. }, highlight: function(element, errorClass) { $(element).addClass(errorClass); $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); $(element.form).find("label[for=" + element.id + "]").removeClass("valid"); }, unhighlight: function(element, errorClass) { $(element).removeClass(errorClass); $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); $(element.form).find("label[for=" + element.id + "]").addClass("valid"); }, wrapper: 'li' }); Much thanks in advance for helpful pointers. [UPDATE] Thanks to redsquare I discovered it's as easy as adding class="cancel" to the submit button. So easy and yet I have no idea how I did not come across it in all my searching. And for those who say my my follow-up answer regarding "but requires a double-click": this was merely due to a leftover experiment line that was unbinding the event - again something I don't know how I overlooked when testing. Thanks!

    Read the article

  • Jquery autocomplete Items not clickable in mobile safari

    - by princyp
    I'm using the defualt jquery autocomplete plugin in my iphone web app, it builds a div with li's. In the browser the hovers and click events work for this but in mobile safari if I click it highlights the entire results containing div. Do I need to create seperate event listeners for the iphone? How would I go about doing this? thanks

    Read the article

  • Validate subset of a form using jQuery Validate plugin

    - by Andrew Davey
    My HTML form has a number of divs that are the steps of a wizard. Upon clicking a "next" button I want to validate just the active div. I'm using the jQuery.Validate.js plugin. Each div has an ID, so I want a way to say something like: wizardForm.validate().element('#first-step :input') but this only validates the first input, not all of them. How can I validate all inputs within a div?

    Read the article

  • jquery validate - validating a field on pageload

    - by boz
    Hi there, I've got an input field on my plain html form that I would like to be marked as invalid (and the error message shown) from the moment the page loads. Is this possible to do with the jquery validate plugin? Failing that, how can I hide an element when the plugin tries to validate a particular input field?

    Read the article

  • Why is jQuery .load() firing twice?

    - by LeslieOA
    Hello S-O. I'm using jQuery 1.4 with jQuery History and trying to figure out why Firebug/Web Inspector are showing 2 XHR GET requests on each page load (double that amount when visiting my sites homepage (/ or /#). e.g. Visit this (or any) page with Firebug enabled. Here's the edited/relevant code (see full source): - $(document).ready(function() { $('body').delegate('a', 'click', function(e) { var hash = this.href; if (hash.indexOf(window.location.hostname) > 0) { /* Internal */ hash = hash.substr((window.location.protocol+'//'+window.location.host+'/').length); $.historyLoad(hash); return false; } else if (hash.indexOf(window.location.hostname) == -1) { /* External */ window.open(hash); return false; } else { /* Nothing to do */ } }); $.historyInit(function(hash) { $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { $('#page').empty(); $('#loading').fadeIn('fast'); if (hash == '') { /* Index */ $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); } else { $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) { switch (XMLHttpRequest.status) { case 200: ajaxLoad(); break; case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404 default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break; } }); } }); // $('#ajax') }); // historyInit() function ajaxLoad() { $('#loading').fadeOut('fast', function() { $(this).remove(); $('#ajax').animate({height: 'show', opacity: '1'}, 'fast', 'swing'); }); } }); A few notes that may be helpful: - Using WordPress with default/standard .htaccess I'm redirecting /links-like/this to /#links-like/this via JavaScript only (PE) I'm achieving the above with window.location.replace(addr); and not window.location=addr; Feel free to visit my site if needed. Thanks in advanced.

    Read the article

< Previous Page | 47 48 49 50 51 52 53 54 55 56 57 58  | Next Page >