Search Results

Search found 17232 results on 690 pages for 'jquery accordion'.

Page 443/690 | < Previous Page | 439 440 441 442 443 444 445 446 447 448 449 450  | Next Page >

  • How get <body> element from the html which one have as a string

    - by Oleg
    Hello! I have a stupid problem. An jQuery.ajax request return me a full HTML text as a string. I receive such response in an case of error on the server. The server give me an error description which I want to place inside of the corresponding place of my current page. So now the question: I have a string contains full HTML document (which is not an XML!!! see <hr> element inside). I need to have for example only BODY part as a jQuery object. Then I could append it to the corresponding part of my page. Here is an example of the string which I need to parse: <html> <head> <title>The resource cannot be found.</title> <style> body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px} // ... </style> </head> <body bgcolor="white"> <span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1> <h2> <i>The resource cannot be found.</i> </h2></span> <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "> <b> Description: </b>HTTP 404. The resource you are looking for ...bla bla.... <br><br> <b> Requested URL: </b>/ImportBPImagesInfos/Repository.svc/GetFullProfilimageSw<br><br> <hr width=100% size=1 color=silver> <b>Version Information:</b>&nbsp;Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1 </font> </body> </html> <!-- [HttpException]: A public action method &#39;.... at System.Web.Mvc.Controller.HandleUnknownAction(String actionName) at System.Web.Mvc.Controller.ExecuteCore() at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext) at System.Web.Mvc.MvcHandler.<>c__DisplayClass8.<BeginProcessRequest>b__4() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass1.<MakeVoidDelegate>b__0() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.<BeginSynchronous>b__7(IAsyncResult _) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncResultWrapper.End[TResult](IAsyncResult asyncResult, Object tag) at System.Web.Mvc.Async.AsyncResultWrapper.End(IAsyncResult asyncResult, Object tag) at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) -->

    Read the article

  • event capturing or bubbling

    - by ChampionChris
    I have a link button in a repeater control. the li element is drag and droppable using jquery. when the page loads the the link button works perfectly, the jquery that is attached and the server side code both execute. when I perform a drag and drop then click on the link button it doesn't not fire. when i click it a second time it does fire. If i perform 2 or drag and drops in a row the link button doesn't fire a as many drag and drops as i before it will fire. for example if if perform 3 drag and drops then it will take about 3 click before the events are fired. <asp:Repeater ID="rTracks" runat="server" OnItemDataBound="rTracks_ItemDataBound" EnableViewState="true"> <ItemTemplate> <li onclick="testclick();" class='admin-song ui-selectee <asp:Literal id="ltStatusClass" runat="server" />' mediaid="<%# Eval("MediaId") %>" artistid="<%# Eval("tbMedia.tbArtists.id") %>"><span class="handle"><strong> <%--<%# int.Parse(DataBinder.Eval(Container, "ItemIndex", "")) + 1%>--%><%# Eval("SortNumber")%></strong><%--0:03--%></span> <span class="play"><span class="btn-play">&nbsp;</span></span> <span class="track" title="<%# Eval("tbMedia.Title") %>"> <%# Eval("tbMedia.Title") %></span> <span class="artist"> <%# Eval("tbMedia.tbArtists.Name") %></span> <span class="time" length="<%# Eval("tbMedia.Length") %>"> <asp:Literal ID="ltRuntime" runat="server" /></span> <span class="notes"><span class="btn-notes"> <asp:Literal ID="ltNotesCount" runat="server" /></span></span> <span class="status"> <asp:Literal ID="ltStatus" runat="server" /></span> <span class="date"> <%# Eval("DateAdded") %></span> <span class="remove"><asp:LinkButton ID="lbStatusClass2" runat="server" CssClass="btn-del" OnClick="UpdateStatus" ValidationGroup='<%#Bind("MediaId") %>'> <%--<span class='<asp:Literal id="ltStatusClass2" runat="server" Text="btn-del" />'>--%> &nbsp;<%--</span>--%></asp:LinkButton></span></span> </li> </ItemTemplate> </asp:Repeater> I have onclick event on the li element, when the mouse is clicks the link button the li onclick event is fired even when linkbutton event doesnt fire. My question is if the li captures the event y doesnt the event fire on the linkbutton? What would be stopping the event?

    Read the article

  • how to gzip-compress large Ajax responses (HTML only) in Coldfusion?

    - by frequent
    I'm running Coldfusion8 and jquery/jquery-mobile on the front-end. I'm playing around with an Ajax powered search engine trying to find the best tradeoff between data-volume and client-side processing time. Currently my AJAX search returns 40k of (JQM-enhanced markup), which avoids any client-side enhancement. This way I'm getting by without the page stalling for about 2-3 seconds, while JQM enhances all elements in the search results. What I'm curious is whether I can gzip Ajax responses sent from Coldfusion. If I check the header of my search right now, I'm having this: RESPONSE-header Connection Keep-Alive Content-Type text/html; charset=UTF-8 Date Sat, 01 Sep 2012 08:47:07 GMT Keep-Alive timeout=5, max=95 Server Apache/2.2.21 (Win32) mod_ssl/2.2.21 ... Transfer-Encoding chunked REQUEST-header Accept */* Accept-Encoding gzip, deflate Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 Connection keep-alive Cookie CFID= ; CFTOKEN= ; resolution=1143 Host www.host.com Referer http://www.host.com/dev/users/index.cfm So, my request would accept gzip, deflate, but I'm getting back chunked. I'm generating the AJAX response in a cfsavecontent (called compressedHTML) and run this to eliminate whitespace <cfrscipt> compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL"); </cfscript> before sending the compressedHTML in a response object like this: {"SUCCESS":true,"DATA": compressedHTML } Question If I know I'm sending back HTML in my data object via Ajax, is there a way to gzip the response server-side before returning it vs sending chunked? If this is at all possible? If so, can I do this inside my response object or would I have to send back "pure" HTML? Thanks! EDIT: Found this on setting a 'web.config' for dynamic compression - doesn't seem to work EDIT2: Found thi snippet and am playing with it, although I'm not sure this will work. <cfscript> compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL"); if ( cgi.HTTP_ACCEPT_ENCODING contains "gzip" AND not showRaw ){ cfheader name="Content-Encoding" value="gzip"; bos = createObject("java","java.io.ByteArrayOutputStream").init(); gzipStream = createObject("java","java.util.zip.GZIPOutputStream"); gzipStream.init(bos); gzipStream.write(compressedHTML.getBytes("utf-8")); gzipStream.close(); bos.flush(); bos.close(); encoder = createObject("java","sun.misc. outStr= encoder.encode(bos.toByteArray()); compressedHTML = toString(bos.toByteArray()); } </cfscript> Probably need to try this on the response object and not the compressedTHML variable

    Read the article

  • when importing multiple javascript files the javascript seems to break

    - by waywardmd
    I am trying to incorperate several different js files into one page. For some reason though whichever ones are first, seem to break. Here is the code I am using: <link href="inc/css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="inc/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="inc/js/prototype.js"></script> <script type="text/javascript" src="inc/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="inc/js/lightbox.js"></script> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script type="text/javascript" src="inc/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="inc/js/jquery.slideshow.lite-0.4.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("#slideshow2").slideshow({ pauseSeconds: 6, height: 196 }); }); </script> The first files are used for a lightbox and other functions and the second ones are used for a slideshow. Depending on the order one or the other will work, but never both at the same time. What am I doing wrong? Any help is greatly appreciated, thanks.

    Read the article

  • Change a dropdown depending on another dropdown

    - by Eric Evans
    I'm trying to create a three select dropdowns that represent a persons birthday. I'm taking into consideration that there are 4 months with 30 days, 7 with 31 ,and 1 with 28 or 29 depending if it's a leap year or not. I would like the days dropdown to show the number of days depending on which month is chosen in the month dropdown. Here's what I have now. Here's the html for the select <!Doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Birthday validation</title> <script src="jquery-1.11.1.min.js"></script> <script src="birthday_drop.js"></script> <link href="style.css" rel="stylesheet /> </head> <body> <h2>Birthday</h2> <fieldset class="birthday-picker"> <select class="birth-month" name="birth[month]"><option>Month</option></select> <select class="birth-day" name="birth[day]"><option>Day</option></select> <select class="birth-year" name="birth[year]"><option>Year</option></select> </fieldset> </body> </html> Here's the jquery that populates the dropdowns and my attempt to use the change function /** * Created by Eric Evans on 8/19/14. */ $(document).ready(function(){ var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; for(i=0; i < months.length; i++){ $("<option value=' + months[i] + '>" + months[i] + "</option>").appendTo('.birth-month'); } for(i=0; i <= 31; i++){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day'); } var myYear = new Date().getFullYear(); for(i=myYear; i >= 1950; i--){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-year'); } $('.birth-month').change(function(){ if($(this).val() == 'April'){ for(i=0; i <= 30; i++){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day'); } } }); }); Any help would be greatly appreciated

    Read the article

  • HTML/JS/CSS issue getting bigger by itself

    - by Azzyh
    Here's the picture to begin with. I have this check box, that when you check, then with jQuery toggle(); it hides that you see in first half of the picture (#writeComment) and shows #SCtryVOTE (what you see in the other half picture, to the right). Now i dont know why but of some reason it expands when its checked, why i dont know, is it because it needs more place than it have or? how do i make this work without having problems when its checked. Here's coding: $('#tryout').click(function () { $('#writeComment').toggle(!$(this).attr('checked')); $('#SCtryVOTE').toggle($(this).attr('checked')); }); the js jquery script part, heres the table and divs HTML part: <input type="checkbox" id="tryout"> <table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> <tr style="background: #686868;"> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> </td> </tr> <tr> <td align="left" valign="top" width="70" height="112" style=""> TEST </td> <td align="left" valign="top" width="70" height="112" style=""> <div id="writeComment"> Smid en kommentar:<br> <form action="javascript:DoInsert()" method="post"> <textarea id="kommentar" name="kommentar"></textarea><br /> <input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>"> <input type="submit" name="Submit" value="Sæt ind!"> </form> </div> <div id="SCtryVOTE" style="display: none;"> <form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post"> <textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea> <br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input> Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input> <input type="submit" id="SCstem" name="Submit" value="Stem!"> </form> </div> Maybe you need the CSS part too for these two boxes: #writeComment{ position: relative; left: 5px; top: 10px; } #SCtryVOTE{ position: relative; left: 5px; top: 10px; }

    Read the article

  • Get Image Source URLs from a Different Page Using JS

    - by SDD
    Everyone: I'm trying to grab the source URLs of images from one page and use them in some JavaScript in another page. I know how to pull in images using JQuery .load(). However, rather than load all the images and display them on the page, I want to just grab the source URLs so I can use them in a JS array. Page 1 is just a page with images: <html> <head> </head> <body> <img id="image0" src="image0.jpg" /> <img id="image1" src="image1.jpg" /> <img id="image2" src="image2.jpg" /> <img id="image3" src="image3.jpg" /> </body> </html> Page 2 contains my JS. (Please note that the end goal is to load images into an array, randomize them, and using cookies, show a new image on page load every 10 seconds. All this is working. However, rather than hard code the image paths into my javascript as shown below, I'd prefer to take the paths from Page 1 based on their IDs. This way, the images won't always need to be titled "image1.jpg," etc.) <script type = "text/javascript"> var days = 730; var rotator = new Object(); var currentTime = new Date(); var currentMilli = currentTime.getTime(); var images = [], index = 0; images[0] = "image0.jpg"; images[1] = "image1.jpg"; images[2] = "image2.jpg"; images[3] = "image3.jpg"; rotator.getCookie = function(Name) { var re = new RegExp(Name+"=[^;]+", "i"); if (document.cookie.match(re)) return document.cookie.match(re)[0].split("=")[1]; return''; } rotator.setCookie = function(name, value, days) { var expireDate = new Date(); var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days)); document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; } rotator.randomize = function() { index = Math.floor(Math.random() * images.length); randomImageSrc = images[index]; } rotator.check = function() { if (rotator.getCookie("randomImage") == "") { rotator.randomize(); document.write("<img src=" + randomImageSrc + ">"); rotator.setCookie("randomImage", randomImageSrc, days); rotator.setCookie("timeClock", currentMilli, days); } else { var writtenTime = parseInt(rotator.getCookie("timeClock"),10); if ( currentMilli > writtenTime + 10000 ) { rotator.randomize(); var writtenImage = rotator.getCookie("randomImage") while ( randomImageSrc == writtenImage ) { rotator.randomize(); } document.write("<img src=" + randomImageSrc + ">"); rotator.setCookie("randomImage", randomImageSrc, days); rotator.setCookie("timeClock", currentMilli, days); } else { var writtenImage = rotator.getCookie("randomImage") document.write("<img src=" + writtenImage + ">"); } } } rotator.check() </script> Can anyone point me in the right direction? My hunch is to use JQuery .get(), but I've been unsuccessful so far. Please let me know if I can clarify!

    Read the article

  • How do I make the info window editable in the Google Maps API?

    - by zjm1126
    I would like to make the info window editable when i click on it. This is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Attaching functions to elements in a loop

    - by user435377
    I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ for (i = 2; i <= 14; i++) { $("#Q19_LND_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_CE_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_SOLSD_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); } }); </script> </head> <body> <table> <tr> <td><font face="arial" size="-1">Lap Roux-N-Y</font>&nbsp;</td> <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td> <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td> <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td> <td align="center"><input tabindex="4" disabled type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td> </tr> <tr> <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td> </tr> <tr> <td><font face="arial" size="-1">Lap Esophagectomy</font>&nbsp;</td> <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td> <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td> <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td> <td align="center"><input tabindex="8" disabled type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td> </tr> <tr> </table> </body> </html>

    Read the article

  • FineUploader multiple instances and dynamic naming

    - by RichieMN
    I am using FineUploader 4.0.8 within a MVC4 project using the jquery wrapper. Here is an example of my js code that creates a single instance of the fineUploader and is working just fine. At this time, I have the need for more than one instance of fineUploader, but each individual control doesn't know anything about the other and they're rendered as needed on a page (I've seen previous questions using a jQuery .each, which won't work here). Currently, I can't seem to correctly render any upload buttons, probably due to having an ID duplicated or something. See below for how I'm using MVC's Razor to create unique variables and html IDs for that individual instance. Here's my current implementation where I've added the dynamic values (places where you see _@Model.{PropertyName}): // Uploader control setup var [email protected] = $('#[email protected]').fineUploader({ debug: true, template: '[email protected]', button: $("#[email protected]"), request: { endpoint: '@Url.Action("UploadFile", "Survey")', customHeaders: { Accept: 'application/json' }, params: { [email protected]: (function () { return instance; }), [email protected]: (function () { return surveyItemResultId; }), [email protected]: (function () { return itemId; }), [email protected]: (function () { return loopingCounter++; }) } }, validation: { acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'], allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'], sizeLimit: 1024 * 1024 * 2.5, // 2.5MB stopOnFirstInvalidFile: false }, failedUploadTextDisplay: { mode: 'custom' }, multiple: true, text: { uploadButton: 'Select your upload file(s)' } }).on('submitted', function (event, id, filename) { $("#modal-overlay").fadeIn(); $("#modal-box").fadeIn(); [email protected]++; $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled'); }).on('complete', function (event, id, filename, responseJSON) { [email protected]++; if ([email protected] == [email protected]) { $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled'); //$("#overlay").fadeOut(); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); } }).on('error', function (event, id, name, errorReason, xhr) { //$("#overlay").fadeOut(); alert('error: ' + errorReason); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); }); }); Using the same principle as above, I've added this logic to the template too. Here's part of my template: <script type="text/template" id="[email protected]"> <div class="qq-uploader-selector qq-uploader"> <div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone"> <span>Drop files here to upload</span> What I see when I use the above code is only the drag and drop section visible, and no button. There are no js errors either. I do have an example that only has one instance of this control on it and the results are the same visible drag and drop section and no button). Any thought as to what's going on? I'll gladly update the question if you find I'm missing something helpful. Please don't just -1 me if it's something I can easily improve or fix.

    Read the article

  • django : nginx : jquery css not being served

    - by PlanetUnknown
    I'm using apache+mod_wsgi for django. And all css/js/images are served through nginx. For some odd, reason when others/friends/colleagues try accessing the site, jquery/css is not getting loaded for them, hence the page looks jumbled up. My html files use code like this - <link rel="stylesheet" type="text/css" href="http://x.x.x.x:8000/css/custom.css"/> <script type="text/javascript" src="http://1x.x.x.x:8000/js/custom.js"></script> My nginx configuration in sites-available is like this - server { listen 8000; server_name localhost; access_log /var/log/nginx/aa8000.access.log; error_log /var/log/nginx/aa8000.error.log; location / { index index.html index.htm; } location /static/ { autoindex on; root /opt/aa/webroot/; } } There is a directory /opt/aa/webroot/static/ which have corresponding css & js directories. The odd thing is that the pages show fine when I access them. I have cleared my cache/etc, but the page loads fine for me, from various browsers. Also, I don't see any 404 any error in the nginx log files. Actually the logs for nginx are not getting refreshed at all. I restarted the nginx server using root, is that incorrect ? There is a user www-data defined in the nginx configuration file. Any pointers would be great.

    Read the article

  • How can I make a div expand on click with only one open at a time?

    - by imHavoc
    As shown in here: http://www.learningjquery.com/2007/03/accordion-madness. But I need help to edit it so that it will work for my circumstances. Sample HTML <div class="row even"> <div class="info"> <div class="class">CK1</div> <div class="teacher_chinese">??</div> <div class="teacher_english">Teacher Name</div> <div class="assistant_chinese">??</div> <div class="assistant_english">Assistant Name</div> <div class="room">Room 00</div> <div class="book"></div> </div> <div class="chapters"> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=1"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=2"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=11"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=12"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=13"><span class="chapter">??</span></a> </div> </div> JQUERY [Work In Progress] $(document).ready(function() { $('div#table_cantonese .chapters').hide(); $('div#table_cantonese .book').click(function() { var $nextDiv = $(this).next(); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast', function() { $nextDiv.slideToggle('fast'); }); } else { $nextDiv.slideToggle('fast'); } }); }); So when the end-user click on div.book, div.chapters will expand. And only one div.chapters will be shown at a time. So if a div.chapters is already open, then it will close the open one first before animating the one the user clicked on.

    Read the article

  • reuse div container to load images

    - by user295927
    Hi All; What I would like to do: use a single container to load images. As it is now: I have eleven (11) containers in HTML mark-up each with its own div. each container holds 4 images (2 images side by side top and bottom) when link in anchor tag is clicked div with images fades in. /*-- Jquery accordion is used for navigation typical example is below --*/ <li> <a class="head" href="#">commercial/hospitality</a> <ul> <li><a href="#" projectName="project1" projectType="hospitality1" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 1</a> </li> <li><a href="#" projectName="project2" projectType="hospitality2" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 2</a> </li> <li><a href="#" projectName="project3" projectType="hospitality3" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 3</a> </li> </ul> </li> Typical <div> container used for image insertion currently there are 11 of them: <div id="hospitality1" class="current"> <div id="image1"><img src="images/testImage.jpg"/></div> <div id="image2"><img src="images/testImage.jpg"/></div> <div id="image3"><img src="images/testImage.jpg"/></div> <div id="image4"><img src="images/testImage.jpg"/></div> </div> Here is the code I am using at this point, it does work, but is there a better way to do this that will only re-use a single div container for loading the images? $(document).ready(function(){ $('#navigation a').click(function (selected) { var projectType = $(this).attr("projectType"); //projectType var projectName = $(this).attr("projectName"); //projectName var image1 = $(this).attr("image1"); //anchor tag for image number 1 var image2 = $(this).attr("image2"); //anchor tag for image number 2 var image3 = $(this).attr("image3"); //anchor tag for image number 3 var image4 = $(this).attr("image4"); //anchor tag for image number 4 console.log(projectType); //returns type of project console.log(projectName); //returns name of project console.log(image1); //returns 1st image console.log(image2); //returns 2nd image console.log(image3); //returns 3rd image console.log(image4); //returns 4th image $(function() { $(".current").hide(); // hides previous selected image $("#" + projectType ).fadeIn("normal").addClass("current"); }); }); As you can, see the mark up getting quite large. Any help is appreciated. ussteele

    Read the article

  • jsTree: async loading

    - by vandalo
    Hello everyone, I am trying to use this jQuery plugin (jsTree) in one of my project. All the others I've found haven't been recently updated. Anyway, I am using this plugin to load a folder structure, but I would like to do this operation async. The examples I've found on their site (called async) are ridiculous. I've tried to check on the Internet but it seems that most people load the whole tree. I would like to load a branch on every single node click. I am using JSON. Thank in advance

    Read the article

  • How to call parent window function in chrome browser?

    - by Pier Luigi
    HI, I've surprisingly found problems, in Chrome browser, in calling window parent javascript functions. If I have a window with a javascript function defined in it <script type="text/javascript"> function dolink() { . . . } </script> and I have an iframe inside that window that makes this call using jquery <script type="text/javascript"> $(function() { $('a.arglink').click(function() { window.parent.dolink($(this).attr('href')); return false; }); }); </script> the call to dolink function doesn't work. Stepping with chrome javascript debugger, it appears that window.parent.dolink is undefined. It's by design or a mistake that I made? In Firefox and IE it works fine.

    Read the article

  • jstree dynamic JSON data from django

    - by danspants
    I'm trying to set up jsTree to dynamically accept JSON data from django. This is the test data i have django returning to jstree: result=[{ "data" : "A node", "children" : [ { "data" : "Only child", "state" : "closed" } ], "state" : "open" },"Ajax node"] response=HttpResponse(content=result,mimetype="application/json") this is the jstree code I'm using: jQuery("#demo1").jstree({ "json_data" : { "ajax" : { "url" : "/dirlist", "data" : function (n) { return { id : n.attr ? n.attr("id") : 0 }; }, error: function(e){alert(e);} } }, "plugins" : [ "themes","json_data"] }); All I get is the ajax loading symbol, the ajax error response is also triggered and it alerts "undefined". I've also tried simpleJson encoding in django but with the same result. If I change the url so that it is receiving a JSON file with identical data, it works as expected. Any ideas on what the issue might be?

    Read the article

  • Triggering FancyBox from a DIV onclick();

    - by Tim
    Hello, This question seems to be asked a lot, but I haven't seen an answer that works. So I have a div that works like this: <div onclick="location.href='http://www.abc123.com';" class="menuitem"> </div> Now I need the link (specified in location.href) to open up in a fancybox iframe. I would love to use an A element but this div holds other items so I don't think I can. I am open to all suggestions... even using elements other than divs, or using a different jquery iframe lightbox. Thanks Tim Mohr

    Read the article

  • Reload Grid not working for mutiple jqgrid

    - by arun chaudhary
    I am using jqgrid.My page has three tabs and each tab contains a different grid.All grids have different ids.The content of tabs is fetched via AJAX request lazily.Now after all three grids are rendered and i try to reload grid via function jQuery("#myOffersTable").trigger('reloadGrid'); Only the grid which loaded last reloads and it doesn't work for other grids. eg if grids load seq is : 1-2-3 then this code will only work for grid 3 but if seq is 3-2-1 then it will work only for 1. But if i try reloading grids using reload button on navigator bar it works fine. Any help would be appreciated. Thanks Arun

    Read the article

  • Image map popup on rollover, with popup text drawn from database

    - by lbholland
    I have a custom map of the USA with about 20 polygonal hot spots. I would like a box to pop up next to each hot spot on hover, with text and links drawn from my DB specific to the location. I would have thought this is a common situation, but I can't find a solution that works. I tried using an asp:imagemap and an ajax popup extender but you can't assign IDs to hotspots and it doesn't support mouseover events. I tried css with an html image map but I can't figure out how to use css solutions with polygonal hot spots, and I also don't know how to link it to get the data from the db without asp targets (I'm not very familiar with jquery, which would work, I am guessing). Anyone know of any simple-ish solutions out there?

    Read the article

  • Alternative to pjax/djax and ajaxy

    - by elluca
    I was evaluating jQuery plugins to make a Drupal 7 site using AJAX everywhere. I have been using ajaxy. But it does not seem to be very actively maintained. Two possible solutions I have found are pjax and djax. What are your experiences with those plugins? What other plugins do you know that do similar functionality? Very important features are SEO friendliness (preferably using pushState so no hash is being used. Hashes are used as a fallback for not supported browsers.). And also has to be very flexible since it has to wirk with Drupal's HTML structure.

    Read the article

  • appointments scheduler managment with asp.net MVC

    - by Alexandre Jobin
    I'm building an Appointments Scheduler manager on asp.net mvc. My requirements are: The administrator will add timeslot appointments to the calendar for each persons in the company who can receive a client The client can search online for available timeslot appointments and can make a reservation Idealy, the UI can show the appointsments by days/weeks or agenda style Is there any asp.net mvc control that can do this. Or any tutorials that can inspire me of how I can do this? For now, I've found the jQuery Week Calendar but I'm not sure it will answer all my needs and the author has stopped the development of the project. Thank you very much for the help!

    Read the article

  • Colorbox modal opening/closing another Colorbox modal

    - by CmdrTallen
    Greetings. I have a need to have a 'child' modal opended from a colorbox modal. Form - anchor - opens modal ('parent') - model has another anchor - open modal 'child' The problem is that when the 'child' modal closes via the $.fn.colorbox.close() Method this seems to close all the colorbox modal windows. I just need to close the 'child' (the second opened from the first modal), after I set a hidden on the 'parent' modal. Any suggestions on how to close just the second colorbox window? Using jQuery 1.3.2 and Colorbox 1.3.5

    Read the article

  • How to set focus to a textbox on page load event

    - by Kalpana
    I am trying to set focus to the text box on page load event. I tried many solutions by referring the element id, but couldn't able to focus the element. Later when I inspect the element using firebug I found for the same element the id changes in different execution. I am looking for the simplest solution using javascript or jquery to achieve this <h:form id="form"> <rich:dataTable value="#{books}" var="book"> <ui:repeat value="#{authors}" var="author"> <h:inputText value="#{author.name}"/> </ui:repeat> </rich:dataTable> </h:form>

    Read the article

  • What is the best way of doing this?

    - by NewSOuser
    Hey, I am wondering how exactly the below pagination systems are set up? In terms of the how the data is displayed, for instance, does BuySellAds load all results in from database and then paginate that data so filter can be done easier? or, do they call the database every time a new page is loaded and then grab the info and display it? I really would like to know how both BuySellAds and Nike make their pagination systems, since I have to make a similar system that has many filters and options to easily sort through the data from a database. I want to accomplish this with php and jquery if that's what I even need to use. Here is what I am talking about so you can experience it for yourself: BuySellAds store.nike.com Any info/suggestions would be great. Thanks for your input.

    Read the article

  • Breaking out of first element in IHTMLTxtRange

    - by XwipeoutX
    I'm trying to do a rich text editor for a web application, and I need to be able to mark some elements in the text as uneditable by the user. The reason for this is they're placeholders for dynamic content (like created date) that I want to have a live preview for. Take the following Code as an example - there's no toolbar or anything in this one, for light weightness, but the textarea and html are synchronized. <!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" --> <html> <head> <title>Hi</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(function() { g = {}; g.iFrame = document.createElement("IFRAME"); $("#frameContainer").append(g.iFrame); g.iDoc = g.iFrame.contentWindow.document; g.iDoc.designMode = "on"; g.jTextArea = $("#textContainer textarea"); setTimeout(function() { g.iDoc.body.innerHTML = "<b class=\"notype\">Cannot type here</b>"; $(g.iDoc).trigger("keyup"); $(g.iDoc.body).focus(); }, 0); $(g.iDoc).keyup(function() { g.jTextArea.text(g.iDoc.body.innerHTML); }); g.jTextArea.keyup(function() { g.iDoc.body.innerHTML = this.innerText; }); var getSelection = function() { if (typeof g.iDoc.selection !== "undefined" && g.iDoc.selection.type !== "Text" && g.iDoc.selection.type !== "None") { g.iDoc.selection.clear(); } return g.iDoc.selection.createRange(); }; $(g.iDoc).keypress(function(event) { // If we're in a marked field, disable the operation. var sel = getSelection(); if ($(sel.parentElement()).hasClass('notype')) { sel.moveToElementText(sel.parentElement()); sel.collapse(); sel.move("character", -1); sel.select(); $("#log").append("<div>outside of thing</div>"); } }); $(testLink).click(function() { // Try and insert stuff at the front $(g.iDoc.body).focus(); var sel = getSelection(); sel.moveToElementText(sel.parentElement()); sel.collapse(); sel.move("character", -100); sel.pasteHTML("Before html?"); $(g.iDoc).trigger("keyup"); $(g.iDoc.body).focus(); }); }); </script> </head> <body id="#body"> <div id="container"> <div id="frameContainer"> <h1> Frame</h1> </div> <div id="textContainer"> <h1> Text</h1> <textarea rows="10" cols="80"></textarea> </div> <a href="#" id="testLink">Test</a> <div id="log"> </div> </div> </body> </html> In the keyup binding, I can successfuly detect if I'm inside another element, and move the cursor to the front of the text before inserting it no problem. However, since there is no text before the element marked as 'notype', it gets inserted inside the same element. This is double bad when the user presses "enter", as a new tag is genrated, and the "notype" tag is duplicated, obviously not required. I want the behaviour as follows: * If the user types while the cursor is in the 'notype' tag, the cursor is moved to front and the text goes there * If the cursor is at the last position inside the 'notype' tag, then the text appears after the tag * If the user types anywhere else, it's inserted as always. The link at the bottom tries to manually put the cursor at the front and insert the html. Obviously fails. I know this one can work by doing something like $(g.iDoc.body).prepend("before!"), but this obviously won't work in a real scenario (using keyup).

    Read the article

< Previous Page | 439 440 441 442 443 444 445 446 447 448 449 450  | Next Page >