Search Results

Search found 23477 results on 940 pages for 'jquery ui sortable'.

Page 263/940 | < Previous Page | 259 260 261 262 263 264 265 266 267 268 269 270  | Next Page >

  • firefox, jQuery ajax calls firing twice and never triggering success or error functions

    - by Adrian Adkison
    Hi, I am developing with the .NET framework, using jQuery 1.4.2 client side. When developing in Firefox version 3.6, every so often an one of the many ajax calls I make on the page will fire twice, the second will return successfully but will not trigger the success handler of the ajax call and the first never returns anything. So basically the data is all sent to the server and response is sent down but nothing happens with the response. Here is an example of the call I am making. It happens to any of the ajax calls, so there is not one particular that is causing the problem: $.ajax({ type:"POST", contentType : "application/json; charset=utf-8", data:"{}", dataType:"json", success:function(){ alert('success'); }, error:function(){ alert('error'); }, url:'/services.aspx/somemethod' }); }) From firebug, here are the headers of the first call which in firebug shows as never completely responding, meaning i see no response code and the loader gif in the firebug never goes away. Note:In firebug it usually says Response Header but for the first call this space is blank Server ASP.NET Development Server/9.0.0.0 X-AspNet-Version 2.0.50727 Content-Type application/json; charset=utf-8 Connection Close Request Headers Host mydomain.com User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401Firefox/3.6.3 ( .NET CLR 3.5.30729) Accept application/json, text/javascript, */* Accept-Language en-us,en;q=0.5 Accept-Encoding gzip,deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive 115 Connection keep-alive Content-Type application/json; charset=utf-8 X-Requested-With XMLHttpRequest Referer http://mydomain.com/mypage.aspx Here is the header from the second request which just appear to complete in firebug (i.e response is 200): Response Header Server ASP.NET Development Server/9.0.0.0 X-AspNet-Version 2.0.50727 Content-Type application/json; charset=utf-8 Connection Close Request Headers Host mydomain.com User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729) Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language en-us,en;q=0.5 Accept-Encoding gzip,deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive 115 Connection keep-alive Content-Type application/json; charset=utf-8 Referer http://mydomain.com/mypage.aspx To summarize my question, why are two requests being made and why are neither of them triggering a success or error handler in the ajax call. I have seen this article about firefox 3.5+ and preflighted requests https://developer.mozilla.org/En/HTTP_access_control#Preflighted_requests In the article is says if a "POST" is made with any other content type than "application/x-www-form-urlencoded, multipart/form-data, or text/plain" than the request is pre-flighted. If this is the case, this should happen to all of my calls. Thanks

    Read the article

  • How to stop event bubbling with jquery live?

    - by chobo2
    Hi I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site. Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false It says that fn must return false so what I tried to do $('.MoreAppointments').live('click', function(e) { alert("Hi"); return false; }); but that did not work so I am not sure how to make it return false. Update Here is some more information. I have a table cell and I bind a click event to it. $('#CalendarBody .DateBox').click(function(e) { AddApointment(this); }); So the AddApointment just makes some ui dialog box. Now the live code(MoreAppointments) sits in this table cell and is basically an anchor tag. So when I click on the anchor tag it first goes to the above code(addApointment - so runs that event first) runs that but does not launch my dialog box instead it goes straight to the (MoreAppointment) event and runs that code. Once that code has run it launches the dialog box from "addApointment". Update 2 Here is some of the html. I did not copy the whole table since it is kinda big and all the cells repeat itself with the same data. If needed I will post it. <td id="c_12012009" class="DateBox"> <div class="DateLabel"> 1</div> <div class="appointmentContainer"> <a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a> </div> <div class="appointmentOverflowContainer"> <div> <a class="MoreAppointments">+1 More</a></div> </div> </td>

    Read the article

  • jQuery and XML (with CDATA)

    - by P..
    I've seen the post that deal with this issue but I still can't solve my issue: I've got XML with CDATA and when I parse the XML, it includes the CDATA (which I don't want). XML sample: <mainnav> <nav path="/" xmlpath="home.xml" key="footer" navigator=""> <display><![CDATA[Home]]></display> <title><![CDATA[Home]]></title> </nav> <nav path="/nav1/" xmlpath="nav1.xml" key="primary" navigator="primary" iconid="0"> <display><![CDATA[Nav 1]]></display> <title><![CDATA[Nav 1]]></title> <overdesc><![CDATA[test nav 1]]></overdesc> <sub path="/nav1/sub1/" xmlpath="nav1/sub1.xml" key="sub"> <display><![CDATA[sub 1<br />of nav 1]]></display> <title><![CDATA[sub 1<br />of nav 1]]></title> </sub> </nav> <nav path="/nav1/" xmlpath="nav2.xml" key="primary" navigator="primary" iconid="1"> <display><![CDATA[Nav 2]]></display> <title><![CDATA[Nav 2]]></title> <overdesc><![CDATA[test nav 2]]></overdesc> <sub path="/nav2/sub1/" xmlpath="nabv2/sub1.xml" key="sub"> <display><![CDATA[sub 1<br />of nav 2]]></display> <title><![CDATA[sub 1<br />of nav2]]></title> </sub> </nav> </mainnav> jQuery: $(document).ready(function(){ $.ajax({ type: "GET", url: "site_xml/config.xml", //contentType: "text/xml", dataType: ($.browser.msie) ? "xml" : "text/xml", success: parseXML, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });}); function parseXML(xml) { $(xml).find('nav').each(function(){ if ($(this).attr("key")=="primary") { // this is a primary nav item; var title = $.trim( $(this).find('title').text() ); alert(title); $("#output").append(title); //nothing showing up in my output DIV, presumably due to the CDATA tags? } }); }

    Read the article

  • z-index issues with jQuery Tabs, Superfish Menu

    - by NightMICU
    Hi all, For the life of me I cannot get my Superfish menu to stop hiding behind my jQuery UI tabs in IE 7. I have read the documentation out there, have tried changing z-index values and tried the bgIframe plugin, although I am not sure if I am implementing it correctly (left out in my example below, using Supersubs). Here is the Javascript I am using for Superfish - using the Supersubs plugin: $(document).ready(function() { $("ul.sf-menu").supersubs({ minWidth: 12, // minimum width of sub-menus in em units maxWidth: 27, // maximum width of sub-menus in em units extraWidth: 1 // extra width can ensure lines don't sometimes turn over // due to slight rounding differences and font-family }).superfish({ delay: 1000, // one second delay on mouseout animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation speed: 'medium' // faster animation speed }); }); And here is the structure of my page: <div id="page-container"> <div id="header"></div> <div id="nav-admin"> <!-- This is where Superfish goes --> </div> <div id="header-shadow"></div> <div id="content"> <div id="admin-main"> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> </ul> <div id="tabs-1"> <!-- Content for Tab 1 --> </div> <div id="tabs-2"> <!-- Content for Tab 2 --> </div> </div> </div> </div> <div id="footer-shadow"></div> <div id="footer"> <div id="alt-nav"> <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/altnav.inc.php'; //CHANGE WHEN UPLOADED TO MATCH DOCUMENT ROOT ?> </div> </div> </div>

    Read the article

  • Using jQuery to parse XML returned from PHP script (imgur.com API)

    - by vette982
    Here's my jQuery: var docname = $('#doc').val(); function parseXml(xml) { $(xml).find("rsp").each(function() { alert("success"); }); } $('#submit').click(function() { $.ajax({ type: "GET", url: "img_upload.php", data: "doc=" + docname, dataType: "xml", success: parseXml }); return false; }); Note that #doc is the id of a form text input box and #submit is the submit button's id. If successful, I'd like a simple "success" javascript popup to appear. Here's *img_upload.php* with my API key omitted: <?php $filename = $_GET["doc"]; $handle = fopen($filename, "r"); $data = fread($handle, filesize($filename)); // $data is file data $pvars = array('image' => base64_encode($data), 'key' => <MY API KEY>); $timeout = 30; $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, 'http://imgur.com/api/upload.xml'); curl_setopt($curl, CURLOPT_TIMEOUT, $timeout); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars); $xml = curl_exec($curl); curl_close ($curl); ?> When directly accessed with a GET argument for "doc", img_upload.php file returns the following XML format: <?xml version="1.0" encoding="utf-8"?> <rsp stat="ok"> <image_hash>cxmHM</image_hash> <delete_hash>NNy6VNpiAA</delete_hash> <original_image>http://imgur.com/cxmHM.png</original_image> <large_thumbnail>http://imgur.com/cxmHMl.png</large_thumbnail> <small_thumbnail>http://imgur.com/cxmHMs.png</small_thumbnail> <imgur_page>http://imgur.com/cxmHM</imgur_page> <delete_page>http://imgur.com/delete/NNy6VNpiAA</delete_page> </rsp> What's the problem here? Here's the Imgur API page for reference.

    Read the article

  • webservice method is not accessible from jquery ajax

    - by Abhisheks.net
    Hello everyone.. i am using jqery ajax to calling a web service method but is is not doing and genrating error.. the code is here for jquery ajax in asp page var indexNo = 13; //pass the value $(document).ready(function() { $("#a1").click(function() { $.ajax({ type: "POST", url: "myWebService.asmx/GetNewDownline", data: "{'indexNo':user_id}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { $("#divResult").text(msg.d); } }); }); }); and this is the is web service method using System; using System.Collections; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Data; using System.Web.Script.Serialization; using TC.MLM.DAL; using TC.MLM.BLL.AS; /// /// Summary description for myWebService /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class myWebService : System.Web.Services.WebService { public myWebService() { //Uncomment the following line if using designed components //InitializeComponent(); } [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string GetNewDownline(string indexNo) { IndexDetails indexDtls = new IndexDetails(); indexDtls.IndexNo = "13"; DataSet ds = new DataSet(); ds = TC.MLM.BLL.AS.Index.getIndexDownLineByIndex(indexDtls); indexNoDownline[] newDownline = new indexNoDownline[ds.Tables[0].Rows.Count]; for (int count = 0; count <= ds.Tables[0].Rows.Count - 1; count++) { newDownline[count] = new indexNoDownline(); newDownline[count].adjustedid = ds.Tables[0].Rows[count]["AdjustedID"].ToString(); newDownline[count].name = ds.Tables[0].Rows[count]["name"].ToString(); newDownline[count].structPostion = ds.Tables[0].Rows[count]["Struct_Position"].ToString(); newDownline[count].indexNo = ds.Tables[0].Rows[count]["IndexNo"].ToString(); newDownline[count].promoterId = ds.Tables[0].Rows[count]["PromotorID"].ToString(); newDownline[count].formNo = ds.Tables[0].Rows[count]["FormNo"].ToString(); } JavaScriptSerializer serializer = new JavaScriptSerializer(); JavaScriptSerializer js = new JavaScriptSerializer(); string resultedDownLine = js.Serialize(newDownline); return resultedDownLine; } public class indexNoDownline { public string adjustedid; public string name; public string indexNo; public string structPostion; public string promoterId; public string formNo; } } please help me something.

    Read the article

  • Galleria jQuery plugin briefly shows all images in IE 7 & 8

    - by hollyb
    I'm using the galleria jQuery plugin on a site. When the gallery first loads, all of the images appear briefly & vertically in ie 7 & 8. This doesn't happen when i isolate the gallery, only when i put it on a somewhat heavy page. This leads me to believe that it happens when the page is a little slow to load. Does anybody know a way to fix this? I feel like an overflow: hidden should fix this, but I've applied it along with a height in every container I could think of. Anybody have any ideas? Here is my css: .galleria{list-style:none;width:350px; overflow:hidden; height: 70px;} .galleria li{display:block;width:50px;height:50px;overflow:hidden;float:left;margin:4px 10px 20px 0;} .galleria li a{display:none;} .galleria li div{position:absolute;display:none;top:0;left:180px;} .galleria li div img{cursor:pointer;} .galleria li.active div img,.galleria li.active div{display:block;} .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} .galleria li .caption{display: inline;padding-top:.5em; width: 300px; } * html .galleria li div span{width:350px;} /* MSIE bug */ html: <ul class="gallery"> <li class="active"><img src="1.jpg" cap="A great veiw by so and so. This is a long block of info.<br /><span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="2.jpg" cap="A mountain <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="3.jpg" cap="Another witty caption <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="4.jpg" cap="<span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> </ul>

    Read the article

  • jQuery galleria plugin with dynamically loaded images

    - by panas
    I'm using the Galleria plugin with jQuery to create my image gallery. I'm trying to get load images dynamically from the user's selection into the DOM and have the gallery auto-update to display those new images but it's not working. Firebug shows the images are successfully loading into the DOM but Galleria displays no thumbnails. I need a way to reload Galleria to display the new images. /* ---- Gallery Code ---- */ if ($(this).find('div').attr('title') == 'photogallery' && $('.galleria_container').length == 0) { $('.gallery').galleria( { history : false, clickNext : true, onImage : function(image,caption,thumb) { if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { image.css('display','none').fadeIn(1000); } var _li = thumb.parents('li'); caption.css('display','none').fadeIn(1000); _li.siblings().children('img.selected').fadeTo(500,0.3); thumb.fadeTo('fast',1).addClass('selected'); image.attr('title','Next image >>'); }, onThumb : function(thumb) { var _li = thumb.parents('li'); var _fadeTo = _li.is('.active') ? '1' : '0.3'; thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); thumb.hover ( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active ) } }); } /* ---- Gallery Selector ---- */ $(document).ready(function() { var galleryImages = new Object(); <?php echo $myGal; ?> function setImages(type) { var image = ''; for (var i = 0; i < galleryImages[type].length; i++) { image += '<li><img src="' + galleryImages[type][i] + '"></li>'; } $('ul.gallery').html(image); } $('ul.menu-horiz li ul li').click(function() { setImages($(this).attr('rel')); }); }); The PHP code you see just creates an array of images. So to summarise my question: How can I reload Galleria once the new images have been loaded into the DOM?

    Read the article

  • Inline-editing: onBlur prevents onClick from being triggered (jQuery)

    - by codethief
    Hello StackOverflow community! I'm currently working on my own jQuery plugin for inline-editing as those that already exist don't fit my needs. Anyway, I'd like to give the user the following (boolean) options concerning the way editing is supposed to work: submit_button reset_on_blur Let's say the user would like to have a submit button (submit_button = true) and wants the inline input element to be removed as soon as it loses focus (reset_on_blur = true). This leads to an onClick handler being registered for the button and an onBlur handler being registered for the input element. Every time the user clicks the button, however, the onBlur handler is also triggered and results in the edit mode being left, i.e. before the onClick event occurs. This makes submitting impossible. FYI, the HTML in edit mode looks like this: <td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td> So, is there any way I could check in the onBlur handler if the focus was lost while activating the submit button, so that edit mode isn't left before the submit button's onClick event is triggered? I've also tried to register a $('body').click() handler to simulate blur and to be able to trace back which element has been clicked, but that didn't work either and resulted in rather strange bugs: $('html').click(function(e) { // body doesn't span over full page height, use html instead // Don't reset if the submit button, the input element itself or the element to be edited inline was clicked. if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) { cancel(element); } }); jEditable uses the following piece of code. I don't like this approach, though, because of the delay. Let alone I don't even understand why this works. ;) input.blur(function(e) { /* prevent canceling if submit was clicked */ t = setTimeout(function() { reset.apply(form, [settings, self]); }, 500); }); Thanks in advance!

    Read the article

  • Jquery hasClass conditional not working

    - by Wade D Ouellet
    Hey, I have my site going here: http://www.treethink.com I am trying to make it so when a navigation item is clicked, it retracts the news ticker on the right and then doesn't run any of the extracting/timer functions anymore. I got it to retract but it still extracts. How I am doing it is I am adding a "noTicker" class with the nav buttons and removing it with colorbox's close button. The function runs on the page initially and if there isn't a "noTicker" class it runs the news ticker as planned. When a nav or close button is clicked it runs the function again which checks again to see if it has that class. So if it has the class it should retract (which it is so that must mean it's adding the class properly) and then not run any of the timer functions, but it still runs the timer functions for some reason. Here is my jQuery. /* Initially hide all news items */ $('#ticker1').hide(); $('#ticker2').hide(); $('#ticker3').hide(); var randomNum = Math.floor(Math.random()*3); /* Pick random number */ newsTicker(); function newsTicker() { if (!$("#ticker").hasClass("noTicker")) { $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */ $('div#ticker div:eq(' + randomNum + ')').show(); /* Select div with random number */ $("#ticker").animate({right: "0"}, {duration: 800 }); /* Pull out ticker with random div */ }); $("#ticker").oneTime(15000,function(i) { /* Do the first retract once */ $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */ $("#ticker").oneTime(1000,function(i) { /* Afterwards */ $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */ }); }); $("#ticker").everyTime(16500,function(i) { /* Everytime timer gets to certain point */ /* Show next div */ randomNum = (randomNum+1)%3; $('div#ticker div:eq(' + (randomNum) + ')').show(); $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */ $("#ticker").oneTime(15000,function(i) { /* Afterwards */ $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */ }); $("#ticker").oneTime(16000,function(i) { /* Afterwards */ /* Hide all divs */ $('#ticker1').hide(); $('#ticker2').hide(); $('#ticker3').hide(); }); }); } else { $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */ $("#ticker").oneTime(1000,function(i) { /* Afterwards */ $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */ }); } } /* when nav item is clicked re-run news ticker function but give it new class to prevent activity */ $("#nav li").click(function() { $("#ticker").addClass("noTicker"); newsTicker(); }); /* when close button is clicked re-run news ticker function but take away new class so activity can start again */ $("#cboxClose").click(function() { $("#ticker").removeClass("noTicker"); newsTicker(); }); Thanks, Wade

    Read the article

  • bug in my jquery code while trying replace html elements with own values

    - by loviji
    I today ask a question, about using Jquery, replace html elements with own values. link text And I use answer, and get a problem. function replaceWithValues not works same in all cases.I call this function two times: 1. btnAddParam click 2. btnCancelEdit click $("#btnAddParam").click(function() { var lastRow = $('#mainTable tr:last'); var rowState = $("#mainTable tr:last>td:first"); replaceWithValues(lastRow, rowState); var htmlToAppend = "<tr bgcolor='#B0B0B0' ><td class='textField' er='editable'><input value='' type='text' /></td><td><textarea cols='40' rows='3' ></textarea></td><td>" + initSelectType(currentID) + "</td><td><input id='txt" + currentID + "3' type='text' class='measureUnit' /></td><td><input type='checkbox' /></td><td></td></tr>"; $("#mainTable").append(htmlToAppend); }); //buttonCancelEdit located in end of row $('#mainTable input:button').unbind().live('click', function() { var row = $(this).closest('tr'); var rowState = $(this).closest('tr').find("td:first"); replaceWithValues(row, rowState); $(this).remove(); }); //do row editable -- replaceWithElements $('#mainTable tr').unbind().live('click', function() { if ($(this).find("td:first").attr("er") == "readable") { var rowState = $(this).closest('tr').find("td:first"); replaceWithElements($(this), rowState); } }); function replaceWithValues(row, er) { if (er.attr("er") == "editable") { var inputElements = $('td > input:text', row); inputElements.each(function() { var value = $(this).val(); $(this).replaceWith(value); }); er.attr("er", "readable"); } } function replaceWithElements(row, er) { if (er.attr("er") == "readable") { var tdinit = $("<td>").attr("er", "editable").addClass("textField"); $('.textField', row).each(function() { var element = tdinit.append($("<input type='text' value="+$.trim($(this).text())+" />")); $(this).empty().replaceWith(element); }); row.find("td:last").append("<input type='button'/>"); //$('.selectField') ... //$('.textAreaField') ... } } $("#btnAddParam").click() function works well. it call function replaceWithValues. I call $('#mainTable tr').unbind().live('click', function() { } to do row editable, and it creates a button in the end of row. After user can click this button and call function $('#mainTable input:button').unbind().live('click', function() {}. and this function call function replaceWithValues. but in this case it doesn't work.

    Read the article

  • ASP.NET MVC - PartialView html not changing via jQuery html() call

    - by Bryan Roth
    When I change the selection in a DropDownList, a PartialView gets updated via a GET request. When updating the PartialView via the jQuery html() function, the html returned is correct but when it displayed in the browser it is not correct. For example, certain checkboxes within the PartialView should become enabled but they remain disabled even though the html returned says they should be. When I do a view source in the browser the html never gets updated. I'm a little perplexed. Thoughts? Search.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Search </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function () { $("#Sections").change(function () { var section = $("#Sections").val(); var township = $("#Townships").val(); var range = $("#Ranges").val(); $.get("Search/Search?section=" + section + "&township=" + township + "&range=" + range, function (response) { $("#cornerDiv").html(response) }); }); }); </script> <h2>Search</h2> <%--The line below is a workaround for a VB / ASPX designer bug--%> <%=""%> <% Using Ajax.BeginForm("Search", New AjaxOptions With {.UpdateTargetId = "searchResults", .LoadingElementId = "loader"})%> Township <%= Html.DropDownList("Townships")%> Range <%= Html.DropDownList("Ranges")%> Section <%= Html.DropDownList("Sections")%> <div id="cornerDiv"> <% Html.RenderPartial("Corners")%> </div> <input type="submit" value="Search" /> <span id="loader">Searching...</span> <% End Using%> <div id="searchResults"></div> </asp:Content>

    Read the article

  • simple jquery dropdown - clearTimeout, setTimeout issues

    - by user210757
    HTML: <ul class="topnav"> <li><a href="#"><span>One</span></a></li> <li><a href="#"><span>Two</span></a></li> <li> <li><a href="#"><span>Three</span></a></li> <ul class="subnav"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> </ul> jquery: var timeout = null; $(document).ready(function() { $("ul.topnav li").mouseover(function() { if (timeout) clearTimeout(timeout); $(this).find("ul.subnav").slideDown('fast').show(); }).mouseout(function() { timeout = setTimeout(closemenu, 500); }); // sub menu mouseovers keep dropdown open $("ul.subnav li").mouseover(function() { if (timeout) clearTimeout(timeout); } ).mouseout(function() { timeout = setTimeout(closemenu, 500); // alert(timeout); }); // any click closes $(document).click(closemenu); }); // Closes all open menus function closemenu() { $('ul.subnav:visible').hide(); if (timeout) clearTimeout(timeout); } I'm having issues with timeout. In use, if i mouseover "Three", the dropdown stays out forever. if i mouseover "A", dropdown will stay out forever, but if I mouseover "B" or anything lower, the menu will close on me. if you uncomment "// alert(timeout);" it gets there for B, (and A) but timeout will have a value. why is this? i thought clearTimeout would null the timeout variable?

    Read the article

  • Table filtering in jquery - a more elegant solution please

    - by Neil Burton
    I want to filter certain rows out of a table and am using classes to categorise the rows. The below code enables me to show and hide row data categorised as "QUO" and "CAL" (eventually there will be other categories. Can someone point me towards a more elegant solution, so I don't have to duplicate code for each category as I have below? Thanks! <!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"> <html> <head> <title>Untitled</title> <style> </style> <script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#toggle_ac_cal").click(function() { var checked_status = this.checked; if (checked_status==true) { $(".ac_cal").show() } else { $(".ac_cal").hide() } }); $("#toggle_ac_quo").click(function() { var checked_status = this.checked; if (checked_status==true) { $(".ac_quo").show() } else { $(".ac_quo").hide() } }); }); </script> </head> <body> <input type="checkbox" id="toggle_ac_cal" checked="checked" />CAL<br/> <input type="checkbox" id="toggle_ac_quo" checked="checked" />QUO<br/> <table> <tbody> <tr class="ac_cal"> <td>CAL</td> <td>10 Oct</td> <td>John Barnes</td> </tr> <tr class="ac_cal"> <td>CAL</td> <td>10 Oct</td> <td>Neil Burton</td> </tr> <tr class="ac_quo"> <td>QUO</td> <td>11 Oct</td> <td>Neil Armstrong</td> </tr> </tbody> </table> </body> </html>

    Read the article

  • problem with jquery : minipulating val() property of element

    - by P4ul
    Hi, Please help! I have some form elements in a div on a page: <div id="box"> <div id="template"> <div> <label for="username">Username</label> <input type="text" class="username" name="username[]" value="" / > <label for="hostname">hostname</label> <input type="text" name="hostname[]" value=""> </div> </div> </div> using jquery I would like to take a copy of #template, manipulate the values of the inputs and insert it after #template so the result would look something like: <div id="box"> <div id="template"> <div> <label for="username">Username</label> <input type="text" class="username" name="username[]" value="" / > <label for="hostname">hostname</label> <input type="text" name="hostname[]" value=""> </div> </div> <div> <label for="username">Username</label> <input type="text" class="username" name="username[]" value="paul" / > <label for="hostname">hostname</label> <input type="text" name="hostname[]" value="paul"> </div> </div> I am probably going about this the wrong way but the following test bit of javascript code run in firebug on the page does not seem to change the values of the inputs. var cp = $('#template').clone(); cp.children().children().each( function(i,d){ if( d.localName == 'INPUT' ){ $(d).val('paul'); //.css('background-color', 'red'); } }); $("#box").append(cp.html()); although if I uncomment "//.css('background-color', 'red');" the inputs will turn red.

    Read the article

  • Accessing array values in jQuery ajax callback function

    - by gibberish
    Values are received through a jQuery AJAX callback, but I've been unsuccessful getting at the values. Here's the ajax call: $.ajax({ type: "POST", url: "ajax/ax_all_ajax_fns.php", data: 'request=edit_timecard_entry&staff_id='+staff_id+'&tid='+tid, success: function(data){ alert(data); } } Here's the code sent out by ax_all_ajax_fns.php: $staff_id = $_POST['staff_id']; $t_id = $_POST['tid']; $rCard = mysql_query("SELECT `staff_id`, `date`, `project_id`, `project_num`, `task_desc`, `hours` FROM `timecards` WHERE `t_id`='$t_id'"); $aCard = mysql_fetch_assoc($rCard); print_r($aCard); // echo $aCard; Of course, I don't want the information print_r'd, I want it echoed. The print_r was used to demonstrate that the correct data was sent out by the PHP script, and it is echoed successfully in the alert() box in the success function. So the correct data is being returned, and (if correctly formatted) it is viewable. The data returned in this way looks like this in the alert() popup: Array ( [staff_id] => 51 [date] => 2012-10-18 [project_id] => 0 [project_num => 49 [task_desk] => This is a task [hours] => 3.30 ) But when I use echo to output the $aCard array and then try to break it down inside the success function of the ajax call, I can't figure out how to get at the values. My attempts have consistently returned values of "undefined". In the success function, in place of alert(data);, I've tried this: var tce_staff_id = data['staff_id']; alert(tce_staff_id); and this: var tce_staff_id = data.staff_id; alert(tce_staff_id); What am I missing? UPDATE: Thanks to Martin S. for information re json_encode() PHP instruction. I've modified the ajax script as follows: echo json_encode($aCard); I now get THIS result from alert(data); in the success function: {"staff_id":"51","date":"2012-10-18","project_id":"0","project_num":"49","task_desc":"This is a task","hours":"3.30"} However, the following returns "undefined": alert(data.staff_id); alert(data[0].staff_id); var test = data.staff_id; alert(test); Can anyone see what I'm missing? All above code comes immediately after alert(data) inside the success callback of the ajax function. alert(data) DOES work and displays the desired data, as above.

    Read the article

  • object not found error with dynamic web forms with (jquery) javscript script

    - by deostroll
    In a normal aspx page I've set up a jquery tab system. When a particular tab shows up I wire up an ajax call to get another html page with the following content. It is simply a form with some javascript inside of it. <!-- demo.htm --> <form method="post" action="post.aspx"> <div id="fields"> Class: <input id="txtclass" name="txtclass" type="text"/> Grade: <input id="txtgrade" name="txtgrade" type="text"/> <input id="btnupdate" value="Update"/> </div> <div id="update"> Reason:<br/> <input id="txtreason" name="txtreason" type="text"/> <br/> Comments:<br/> <textarea id="txtcomments" name="txtcomments"></textarea> <br/> <input type="button" id="btnsave" value="Save"/> </div> <script type="text/javascript"> $(function(){ //all textboxes should be disabled $('#fields input').each(function(i,j){ if(! $(this).is(':button') ) $(this).attr('disabled', 'disabled') }); //update div should be hidden $('#update).hide(); //click event of btnupdate should // be set to show the update div contents // and enable input fields $('#btnupdate').click(function(){ //enable all textboxes $('#fields input').each(function(i,j){ $(this).attr('disabled', ''); }); //hide btnupdate $('#btnupdate').hide(); //show div update $('#update').show(); }); }); </script> </form> The script executes normally and the form is shown as intended. The btnupdate is supposed to show the contents in the update div and load the form for accepting user input. Whenever I hit btnupdate button I get an object not found exception on IE 8. IE 8 asks if it should start up its in-built debuggger. But, even in this debugger I cannot see what the problem is...However on clicking "No" in that dialog the button click function executes properly, and the form is displayed as intended. Is there a better way to resolve the problem?

    Read the article

  • Using jQuery to Dynamically Insert Into List Alphabetically

    - by Dex
    I have two ordered lists next to each other. When I take a node out of one list I want to insert it alphabetically into the other list. The catch is that I want to take just the one element out and place it back in the other list without refreshing the entire list. The strange thing is that when I insert into the list on the right, it works fine, but when I insert back into the list on the left, the order never comes out right. I have also tried reading everything into an array and sorting it there just in case the children() method isn't returning things in the order they are displayed, but I still get the same results. Here is my jQuery: function moveNode(node, to_list, order_by){ rightful_index = 1; $(to_list) .children() .each(function(){ var ordering_field = (order_by == "A") ? "ingredient_display" : "local_counter"; var compA = $(node).attr(ordering_field).toUpperCase(); var compB = $(this).attr(ordering_field).toUpperCase(); var C = ((compA > compB) ? 1 : 0); if( C == 1 ){ rightful_index++; } }); if(rightful_index > $(to_list).children().length){ $(node).fadeOut("fast", function(){ $(to_list).append($(node)); $(node).fadeIn("fast"); }); }else{ $(node).fadeOut("fast", function(){ $(to_list + " li:nth-child(" + rightful_index + ")").before($(node)); $(node).fadeIn("fast"); }); } } Here is what my html looks like: <ol> <li ingredient_display="Enriched Pasta" ingredient_id="101635" local_counter="1"> <span class="rank">1</span> <span class="rounded-corners"> <span class="plus_sign">&nbsp;&nbsp;+&nbsp;&nbsp;</span> <div class="ingredient">Enriched Pasta</div> <span class="minus_sign">&nbsp;&nbsp;-&nbsp;&nbsp;</span> </span> </li> </ol>

    Read the article

  • jquery ajax error cannot find url outside of debug mode

    - by John Orlandella Jr.
    I inherited some code two weeks ago that is using the jquery.ajax method to connect to a .NET web service. Here is the piece of code give me the trouble... if (MSCTour.AppSettings.OFFLINE !== 'TRUE') { $.ajax({ url: url, data: json, type: "POST", contentType: "application/json", timeout: 10000, dataType: "json", // not "json" we'll parse success: function(res){ if (!callback) { return; } /* // *** Use json library so we can fix up MS AJAX dates */ var result = ""; if (res !== "") { try { result = $.evalJSON(res); } catch (e) { result = {}; bare = true; } } /* // *** Bare message IS result */ if (bare) { callback(result); return; } /* // *** Wrapped message contains top level object node // *** strip it off */ for (var property in result) { callback(result[property]); break; } }, error: function(xhr,status,error){ if (status === 'parsererror') {} else {return error;} }, complete: function(res, status){ if (callback) { if ((status != 'success' && status != 'error') || status === 'parsererror' || (status === 'timeout' && res !== '')) { try { result = $.secureEvalJSON(res); } catch (e) { result = {}; bare = true; } callback(res); } } return; } }); } The url variable at this point equals /testsite/service.svc/GetItems Now here is where my problem lies... When running this site out of debug mode through visual studio I am not having any problem connecting to the database through the web service and seeing all my data, for both viewing and updating. When I go through the normal web server for the same site, on the same page, no data is showing up. When I put a break on the error portion of the code above in firebug this is information I am getting in the image linked below. link text I am getting what appears to be a 404 error, but when I look on the server all of the files are in the right place... coupled with the fact that it works when in debug mode, I think I am slowly going crazy staring at these same lines of code trying to find the needle in the haystack. Any help or just a direction to look in would be greatly appreciated.

    Read the article

  • Mindblowing jQuery Weirdness

    - by Jason
    ...at least to me. This code used to work fine. I'm pretty sure nothing has changed, but now all of the sudden it behaves oddly. Basically I'm trying to create inline editing functionality. When the user clicks on the link, it dynamically generates a textbox and a confirm and cancel link. I'm having problems with the cancel link not removing everything in the cell. HTML: ... <td class="bid"> <a href="javascript:" class="102093" title="Click to modify bid">$0.45</a> </td> ... Binding jQuery (in $(function())): $('.bid a').live('click', renderBidChange); .... $('.report_table .cancel').live('click', cancelUpdate); renderBidChange (this function creates the dynamic elements): function renderBidChange(){ var cpc = $(this); var value = cpc.text().replace('$', ''); var cell = cpc.parent('.bid'); cpc.hide(); var input = document.createElement('input'); $(input).attr({type:'text',class:'dynamic cpc-input'}).val(value); cell.append(input); var accept = document.createElement('a'); $(accept).addClass('accept').attr({'href':'javascript:', 'title':'Accept Changes'}).text('Accept Changes'); cell.append(accept); var cancel = document.createElement('a'); $(cancel).addClass('cancel').attr({'href':'javascript:', 'title':'Cancel Changes'}).text('Cancel Changes'); cell.append(cancel); $(input).focus(); input.select(); } cancelUpdate this function just removes everything visible (all the dynamic junk in this case) in the cell and shows what used to be there. function cancelUpdate(){ var cell = $(this).parent(); cell.find(':visible').remove(); cell.find(':hidden').show(); } However, for some reason, the cancel link remains after it is clicked! Everything else is removed except that. W T F Thanks for any insight you're able to provide! I'm sure it's just some stupid little detail I'm over[caffeinatedly]looking... UPDATE Immediately after posting this I epiphanied that it may be a CSS issue, but after double checking my code, it is not.

    Read the article

  • jQuery multiple running totals

    - by Benjamin Randal
    0I am using jQuery to calculate a running total on multiple textboxes. Just found an awesome response on how to get that working a few days ago, but now I am running into another problem. When using one selector, the total for GetTotal is calculated perfectly. However, when I include the second selector, the totals begin to conflict with one another, and no longer calculate properly. I have been searching for a solution to this for some time now, does anyone have any ideas? Here is the selector i am currently using: function GetTotal(txtBox) { var total = 0; $('input:text').each(function(index, value) { total += parseInt($(value).val() || 0); }); $("#chkTotal").html(total); } My view uses these txt boxes <div class="editor-field"> @Html.TextBox("Field1", String.Empty, new {InputType = "text", id = "field1", onchange = "GetTotal(this)" }) </div> <div class="editor-field"> @Html.TextBox("Field2", String.Empty, new {InputType = "text", id = "field2", onchange = "GetTotal(this)" }) </div> <div> <h3>Total Checked</h3> </div> <div id="chkTotal"></div> Now I am trying to implement another selector which will total two additional editor fields... function GetTotal1(txtBox) { var total1 = 0; $('input:text').each(function (index, value) { total1 += parseInt($(value).val() || 0); }); $("#disTotal").html(total1); } View: <div class="editor-field"> @Html.TextBox("Field3", String.Empty, new {InputType = "text", id = "field3", onchange = "GetTotal1(this)" }) </div> <div class="editor-field"> @Html.TextBox("Field4", String.Empty, new {InputType = "text", id = "field4", onchange = "GetTotal1(this)" }) </div> <div> <h3>Total Distributed</h3> </div> <div id="disTotal"></div>

    Read the article

  • Replace click() with document.ready() in jquery....

    - by bala3569
    I downloaded jquery effects example and all effects are appearing only onclick but i want it to be executed on document.ready() and continue... <script type="text/javascript"> var ImgIdx = 2;//To mark which image will be select next function PreloadImg(){ $.ImagePreload("images/im2.jpg"); $.ImagePreload("images/im3.jpg"); $.ImagePreload("images/im4.jpg"); $.ImagePreload("images/im5.jpg"); } $(document).ready(function(){ PreloadImg(); $(".SlashEff ul li").click(function(){ $(".Slash").ImageSwitch({Type:$(this).attr("rel"), NewImage:"images/im"+ImgIdx+".jpg", speed: 4000 }); ImgIdx++; if(ImgIdx>5) ImgIdx = 1; }); }); </script> and my <div class="SlashEff"> <ul> <li class="TryFadeIn" rel="FadeIn">Fade in</li> <li class="TryFlyIn" rel="FlyIn">Fly in</li> <li class="TryFlyOut" rel="FlyOut">Fly out</li> <li class="TryFlipIn" rel="FlipIn">Flip in</li> <li class="TryFlipOut" rel="FlipOut">Flip out</li> <li class="TryScroll" rel="ScrollIn">Scroll in</li> <li class="TryScroll" rel="ScrollOut">Scroll out</li> <li class="TrySingleDoor" rel="SingleDoor">Single Door</li> <li class="TryDoubleDoor" rel="DoubleDoor">Double Door</li> </ul> </div> Here is the link http://www.hieu.co.uk/blog/index.php/imageswitch/ I tried this, $(document).ready(function(){ PreloadImg(); $(".Slash").ImageSwitch({Type:$(this).attr("rel"), NewImage:"images/im"+ImgIdx+".jpg", speed: 4000 }); ImgIdx++; if(ImgIdx>5) ImgIdx = 1; }); I tried this but it gets executed only once.... I want to execute this every 5000ms... Is this possible...

    Read the article

  • use jquery to toggle disabled state with a radio button

    - by hbowman
    I want to toggle two radio buttons and select fields based on which radio button is selected. I have the jQuery working, but want to know if there is a way to make it more efficient. Seems like quite a few lines for the simple goal I am trying to achieve. Here are the requirements: when the page loads, #aircraftType should be checked and #aircraftModelSelect should be grayed out (right now, the "checked" is being ignored by Firefox). If the user clicks either #aircraftType or #aircraftModel, the opposite select field should become disabled (if #aircraftModel is checked, #aircraftTypeSelect should be disabled, and vise versa). Any help on optimizing this code is appreciated. Code is up on jsfiddle too: http://jsfiddle.net/JuRKn/ $("#aircraftType").attr("checked"); $("#aircraftModel").removeAttr("checked"); $("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled"); $("#aircraftType").click(function(){ $("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled"); $("#aircraftTypeSelect").removeAttr("disabled").removeClass("disabled"); }); $("#aircraftModel").click(function(){ $("#aircraftTypeSelect").attr("disabled","disabled").addClass("disabled"); $("#aircraftModelSelect").removeAttr("disabled").removeClass("disabled"); }); HTML <div class="aircraftType"> <input type="radio" id="aircraftType" name="aircraft" checked /> <label for="aircraftType">Aircraft Type</label> <select size="6" multiple="multiple" id="aircraftTypeSelect" name="aircraftType"> <option value="">Light Jet</option> <option value="">Mid-Size Jet</option> <option value="">Super-Mid Jet</option> <option value="">Heavy Jet</option> <option value="">Turbo-Prop</option> </select> </div> <div class="aircraftModel"> <input type="radio" id="aircraftModel" name="aircraft" /> <label for="aircraftModel">Aircraft Model</label> <select size="6" multiple="multiple" id="aircraftModelSelect" name="aircraftModel"> <option value="">Astra SP</option> <option value="">Beechjet 400</option> <option value="">Beechjet 400A</option> <option value="">Challenger 300</option> <option value="">Challenger 600</option> <option value="">Challenger 603</option> <option value="">Challenger 604</option> <option value="">Challenger 605</option> <option value="">Citation Bravo</option> </select> </div>

    Read the article

  • Monitoring DOM Changes in JQuery

    - by user363866
    Is there a way to detect when the disabled attribute of an input changes in JQuery. I want to toggle the style based on the value. I can copy/paste the same enable/disable code for each change event (as I did below) but I was looking for a more generic approach. Can I create a custom event that will monitor the disabled attribute of specified inputs? Example: <style type="text/css">.disabled{ background-color:#dcdcdc; }</style> <fieldset> <legend>Option 1</legend> <input type="radio" name="Group1" id="Radio1" value="Yes" />Yes <input type="radio" name="Group1" id="Radio2" value="No" checked="checked" />No <div id="Group1Fields" style="margin-left: 20px;"> Percentage 1: <input type="text" id="Percentage1" disabled="disabled" /><br /> Percentage 2: <input type="text" id="Percentage2" disabled="disabled" /><br /> </div> </fieldset> <fieldset> <legend>Option 2</legend> <input type="radio" name="Group2" id="Radio3" value="Yes" checked="checked" />Yes <input type="radio" name="Group2" id="Radio4" value="No" />No <div id="Group2Fields" style="margin-left: 20px;"> Percentage 1: <input type="text" id="Text1" /><br /> Percentage 2: <input type="text" id="Text2" /><br /> </div> </fieldset> <script type="text/javascript"> $(document).ready(function () { //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); $("input[name='Group1']").change(function () { var disabled = ($(this).val() == "No") ? "disabled" : ""; $("#Group1Fields input").attr("disabled", disabled); //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); //remove disabled style to all enabled controls $("input:not(:disabled)").removeClass("disabled"); }); $("input[name='Group2']").change(function () { var disabled = ($(this).val() == "No") ? "disabled" : ""; $("#Group2Fields input").attr("disabled", disabled); //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); //remove disabled style to all enabled controls $("input:not(:disabled)").removeClass("disabled"); }); }); </script>

    Read the article

  • JQUERY Ajax form, page refreshs & isn't supposed to in Safari, doesn't refresh in FF (works fine)

    - by nobosh
    I'm working on a AJAX form which lives in a JQUERY UI Dialog. It works great in FireFox, but for some reason, in safari it refreshes the page to: /? Please let me know if somethings wrong here? Thanks <div class="modal-container"> <form onsubmit="" action="" id="list-dialog-form" name="list-dialog-form"> <div id="modal-wrapper"> <br><br> <div class="modal-inputbar"> <span style="width: 100px;" class="inputbar-label"> <label>Edit List Name:</label> </span> <span style="width: 200px;" class="inputbar-input"> <input type="text" style="padding-right: 25px;" autocomplete="off" maxlength="140" id="listname" value="Untitled"> </span> </div> </div> <div id="modal-submit" class="modal-submit"> <span class="left delete-wrap"> <span onclick="deleteThisList(15);" class="delete"> </span> </span> <span style="line-height: 2em;" class="right"> <input type="hidden" value="15" id="tasklistID"> <input type="submit" value="update" id="dialogcloser"> <input type="button" onclick="$('#listeditdialog').dialog('close');" value="close" id="dialogcloser"> </span> </div> </form> </div> // Handles Updating the List Title $("#list-dialog-form").submit(function(){ // Ajax Spinner $("#listname").css("background", "url('/images/ajax-loader.gif') no-repeat scroll 98% center #FFF"); $.ajax({ url: '/ajax/listname-update/index.cfm', data: ({listname: $("#listname").val().trim(), tasklistID: $("#tasklistID").val()}), dataType: 'json', type: 'post', success: function( result ) { // Update the name in the top, project list $("#list-" + $("#tasklistID").val()).find('a').html($("#listname").val().trim()); $("#list-" + $("#tasklistID").val()).effect('highlight', {color: '#BDC1C7'}, 500); //Remove the Ajax Spinner $("#listname").css("background", "#FFF"); $("#listname").effect('highlight', {color: '#BDC1C7'}, 500); //close the dialog $('#listeditdialog').dialog('close'); } }); return false; });

    Read the article

< Previous Page | 259 260 261 262 263 264 265 266 267 268 269 270  | Next Page >