Search Results

Search found 807 results on 33 pages for 'fn'.

Page 30/33 | < Previous Page | 26 27 28 29 30 31 32 33  | Next Page >

  • jquery addresses and live method

    - by Jay
    //deep linking $.fn.ajaxAnim = function() { $(this).animW(); $(this).html('<div class="load-prog">loading...</div>'); } $("document").ready(function(){ contM = $('#main-content'); contS = $('#second-content'); $(contM).hide(); $(contM).addClass('hidden'); $(contS).hide(); $(contS).addClass('hidden'); function loadURL(URL) { //console.log("loadURL: " + URL); $.ajax({ url: URL, beforeSend: function(){$(contM).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contM).html(data); $('.post-content').initializeScroll(); } }); } // Event handlers $.address.init(function(event) { //console.log("init: " + $('[rel=address:' + event.value + ']').attr('href')); }).change(function(event) { evVal = event.value; if(evVal == '/'){return false;} else{ $.ajax({ url: $('[rel=address:' + evVal + ']').attr('href'), beforeSend: function(){$(contM).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contM).html(data); $('.post-content').initializeScroll(); }}); } //console.log("change"); }) $('.update-main a, a.update-main').live('click', function(){ loadURL($(this).attr('href')); return false; }); $(".update-second a, a.update-second").live('click', function() { var link = $(this); $.ajax({ url: link.attr("href"), beforeSend: function(){$(contS).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contS).html(data); $('.post-content').initializeScroll(); }}); return false; }); }); I'm using jquery addresses to update content while maintaining a useful url. When clicking on links in a main nav, the url is updated properly, but when links are loaded dynamically with ajax, the url address function breaks. I have made 'click' events live, allowing for content to be loaded via dynamically loaded links, but I can't seem to make the address event listener live, but this seems to be the only way to make this work. Is my syntax wrong if I change this : $.address.change(function(event) { to this: $.address.live('change', function(event) { or does the live method not work with this plugin?

    Read the article

  • Flex/Flash 4 datagrid literally displays XML

    - by Setori
    Problem: Flex/Flash4 client (built with FlashBuilder4) displays the xml sent from the server exactly as is - the datagrid keeps the format of the xml. I need the datagrid to parse the input and place the data in the correct rows and columns of the datagrid. flow: click on a date in the tree and it makes a server request for batch information in xml form. Using a CallResponder I then update the datagrid's dataProvider. [code] <fx:Script> <![CDATA[ import mx.controls.Alert; [Bindable]public var selectedTreeNode:XML; public function taskTreeChanged(event:Event):void { selectedTreeNode=Tree(event.target).selectedItem as XML; var searchHubId:String = selectedTreeNode.@hub; var searchDate:String = selectedTreeNode.@lbl; if((searchHubId == "") || (searchDate == "")){ return; } findShipmentBatches(searchDate,searchHubId); } protected function findShipmentBatches(searchDate:String, searchHubId:String):void{ findShipmentBatchesResult.token = actWs.findShipmentBatches(searchDate, searchHubId); } protected function updateBatchDataGridDP():void{ task_list_dg.dataProvider = findShipmentBatchesResult.lastResult; } ]]> </fx:Script> <fx:Declarations> <actws:ActWs id="actWs" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/> <s:CallResponder id="findShipmentBatchesResult" result="updateBatchDataGridDP()"/> </fx:Declarations> <mx:AdvancedDataGrid id="task_list_dg" width="100%" height="95%" paddingLeft="0" paddingTop="0" paddingBottom="0"> <mx:columns> <mx:AdvancedDataGridColumn headerText="Receiving date" dataField="rd"/> <mx:AdvancedDataGridColumn headerText="Msg type" dataField="mt"/> <mx:AdvancedDataGridColumn headerText="SSD" dataField="ssd"/> <mx:AdvancedDataGridColumn headerText="Shipping site" dataField="sss"/> <mx:AdvancedDataGridColumn headerText="File name" dataField="fn"/> <mx:AdvancedDataGridColumn headerText="Batch number" dataField="bn"/> </mx:columns> </mx:AdvancedDataGrid> [/code] I cannot upload a pic, but this is the xml: [code] 2010-04-23 16:35:51.0 PRESHIP 2010-02-15 00:00:00.0 100000009 DF-Ocean-PRESHIPSUM-Quanta-PACT-EMEA-Scheduled Ship Date 20100215.csv 10053 [/code] and the xml is pretty much displayed exactly as is in the datagrid columns... I would appreciate your assistance.

    Read the article

  • XQuery method question, trying to sum values read from xml

    - by Buck
    I'm pretty new to XQuery and I'm trying to write an example function that I can't get to work. I want to read an xml file, parse out the "time" values, sum them as they're read and return the sum. This is trivial and I'm looking to build more functionality into it but I'd like to get this working first. Also, I know there's a "sum" directive in XQuery that would do just this but I want to add more to it so the built-in sum is insufficient for my needs. Here's my funtion: bool example(Zorba* aZorba) { XQuery_t lQuery = aZorba-compileQuery( "for $i in fn:doc('/tmp/products.xml')//time" "let $sum := xs:integer($i)" " return $sum" ); DynamicContext* lCtx = lQuery-getDynamicContext(); lCtx-setContextItemAsDocument("temp_measurements.xml", lDocStream); try { std::cout << lQuery << std::endl; } catch (DynamicException& e) { std::cerr << e.getDescription() << std::endl; return false; } catch (StaticException& f){ std::cerr << f.getDescription() << f.getErrorCodeAsString(f.getErrorCode()) << std::endl; return false; } } It's called with an appropriate main(). If I comment out the line that starts "let $sum..." then this works in that it returns the time values as a series of integers like this: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 3.... Input file looks like this: <?xml version="1.0" encoding="UTF-8"? <temps <temp <time0</time <lat0</lat <long0</long <value0</value </temp <temp <time1</time <lat0</lat <long1</long <value0</value </temp ...

    Read the article

  • jQuery .ajax call to bit.ly returns results in IE but not FF or Chrome

    - by Ian Quigley
    I am trying to call to the bit.ly URL shortening service using jQuery with an .ajax call. <html><head> <script type="text/javascript" src="http://www.twipler.com/settings/scripts/jquery.1.4.min.js"></script> <script type="text/javascript"> jQuery.fn.shorten = function(url) { var resultUrl = url; $.ajax( { url: "http://api.bit.ly/shorten?version=2.0.1&login=twipler&apiKey=R_4e618e42fadbb802cf95c6c2dbab3763&longUrl=" + url, async: false, dataType: 'json', data: "", type: "GET", success: function (json) { resultUrl = json.results[url].shortUrl; } }); return resultUrl; } ; </script></head><body> <a href="#" onclick="alert($().shorten('http://amiconnectedtotheinternet.com'));"> Shorten</a> </body> </html> This works in IE8 but does not work in FireFox (3.5.9) nor in Chrome. In both cases 'json' is null. Headers in IE8 GET http://api.bit.ly/shorten?ver..[SNIP]..dtotheinternet.com HTTP/1.1 Accept: application/json, text/javascript, */* Accept-Language: en-US Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; Media Center PC 6.0; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729) Host: api.bit.ly Connection: Keep-Alive Headers in Chrome GET http://api.bit.ly/shorten?versio..[SNIP]..nectedtotheinternet.com HTTP/1.1 Host: api.bit.ly Connection: keep-alive User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5 Origin: file:// Accept: application/json, text/javascript, */* Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 So the only obvious difference is that Chrome is sending "Origin: file://" and I've no idea how to stop it doing that.

    Read the article

  • Need help with implementation of the jQuery LiveUpdate routine

    - by miCRoSCoPiC_eaRthLinG
    Hey all, Has anyone worked with the LiveUpdate function (may be a bit of a misnomer) found on this page? It's not really a live search/update function, but a quick filtering mechanism for a pre-existing list, based on the pattern you enter in a text field. For easier reference, I'm pasting the entire function in here: jQuery.fn.liveUpdate = function(list){ list = jQuery(list); if ( list.length ) { var rows = list.children('li'), cache = rows.map(function(){ return this.innerHTML.toLowerCase(); }); this .keyup(filter).keyup() .parents('form').submit(function(){ return false; }); } return this; function filter(){ var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = []; if ( !term ) { rows.show(); } else { rows.hide(); cache.each(function(i){ var score = this.score(term); if (score > 0) { scores.push([score, i]); } }); jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ jQuery(rows[ this[1] ]).show(); }); } } }; I have this list, with members as the ID. And a text field with say, qs as ID. I tried binding the function in the following manner: $( '#qs' ).liveUpdate( '#members' ); But when I do this, the function is called only ONCE when the page is loaded (I put in some console.logs in the function) but never after when text is keyed into the text field. I also tried calling the routine from the keyup() function of qs. $( '#qs' ).keyup( function() { $( this ).liveUpdate( '#members' ); }); This ends up going into infinite loops (almost) and halting with "Too much recursion" errors. So can anyone please shed some light on how I am supposed to actually implement this function? Also while you are at it, can someone kindly explain this line to me: var score = this.score(term); What I want to know is where this member method score() is coming from? I didn't find any such method built into JS or jQuery. Thanks for all the help, m^e

    Read the article

  • jQuery: Trying to write my first plugin, how can I pass a selector to my func?

    - by Jannis
    Hi, I am trying to start writing some simple jQuery plugins and for my first try if figured I would write something that does nothing else but apply .first & .last classes to passed elements. so for instance i want to ultimately be able to: $('li').firstnlast(); So that in this html structure: <ul> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul> it would create the following: <ul> <li class="first"></li> <li></li> <li></li> <li class="last"></li> </ul> <ul> <li class="first"></li> <li class="last"></li> </ul> What i have written so far in my plugin is this: (function($) { $.fn.extend({ firstnlast: function() { $(this) .first() .addClass('first') .end() .last() .addClass('last'); } }); })(jQuery); However the above only returns this: <ul> <li class="first"></li> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li class="last"></li> </ul> It seems that passing only the li into the function it will look at all li elements on the entire page and then apply the classes to it. What I need to figure out is how i can basically make the function 'context aware' so that passing the above li into the function would apply the classes to those lis inside of the parent ul, not to the first and last li on the entire page. Any hints, ideas and help would be much appreciated. Thanks for reading, Jannis

    Read the article

  • jQuery, get datas in AJAX (done) then, display them as star (error)

    - by Tristan
    Hello, In my website, there are 2 steps : I get values from another domain with AJAX, it's numbers 100% working Then, i want to display those numbers in stars with this plugin (http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css) The error : the stars plugin does not work for the value i recieve from my ajax request, but it's working for my values for my domain which are not JS manipulated you can see a demo here http://www.esl.eu/fr/test/test_atome/?killcache=true PS: the data in ajax are provided in JSON-P so i wrote a parser which look like this: jQuery.ajax({ type: "get", dataType: "jsonp", url: "http://www.foo.com/", data: {demandeur: "monkey" }, cache: true, success: function(data, textStatus, XMLHttpRequest){ var obj = null, length = data.length; for (var i = 0; i < length; i++) { widget = "<p>AVERAGES<p>"; widget += "<p><span class='stars'>"; widget += data[i].services; widget += "</span></p>"; widget += "<p><span class='stars'>"; widget += data[i].qualite; widget += "</span></p>"; jQuery('#gotserv').html(widget); } } }); }); Then i have the star plugin after this function : $.fn.stars = function() { $(this).each(function() { // Get the value var val = parseFloat($(this).html()); // Make sure that the value is in 0 - 5 range val = val 5 ? 5 : (val < 0 ? 0 : val); // Calculate physical size var size = 16 * val; // Create stars holder var stars = $(''); // Adjust yellow stars' width stars.find('span').width(size); // Replace the numerical value with stars $(this).replaceWith(stars); }); I hope you understand, i don't know if i'm clear Thank you

    Read the article

  • jQuery: Sort div's according to content of different sub divs

    - by rayne
    I'm trying to create a somewhat complex sorting feature which neither uses divs nor lists. Unfortunately two hours of googling didn't help me. Here is the basic setup of my HTML: <div id="all_elements"> <!-- one element --> <div class="element"> <div class="wrapper"> <a href="/" title="links"> <img src="/img/image.jpg" border="0" alt="image" class="image" /></a> <div class="details"> <h3><a href="/" title="title">Name (Sort Argument 1)</a></h3> <div class="title"><a href="/" title="title">Title (Sort Argument 2)</a></div> <div class="year">2010 (Sort Argumentt 3)</div> <div class="country">Great Britain (Sort Argument 4)</div> </div><!-- details --> </div><!-- wrapper --> </div><!-- element --> </div> <!--all_elements--> The setup is a bit complex, but basically .element is the element that needs to be sorted alphabetically according to either the contents of h3, div.title, div.year or div.country. So the user will be able to view the contents of the site either sorted by name, by year, by country or by title. I have this jQuery snippet from a website, but all my attempts on trying to tell it to use the contents of e.g. h3 to sort have failed. Right now it sorts pretty much randomly. jQuery.fn.sort = function() { return this.pushStack([].sort.apply(this, arguments), []); }; function sortAscending(a, b) { return a.innerHTML > b.innerHTML ? 1 : -1; }; function sortDescending(a, b) { return a.innerHTML < b.innerHTML ? 1 : -1; }; $(document).ready(function() { $("#sort").toggle( function() { $('#all_elements .element').sort(sortDescending).appendTo('#all_elements'); $(this).text("Sort Asc"); }, function() { $('#all_elements .element').sort(sortAscending).appendTo('#all_elements'); $(this).text("Sort Desc"); }); }); How can I customize the function to sort the contents of my h3 or divs?

    Read the article

  • set equal height on multiple divs

    - by Greenie
    I need to set equal height on a series of divs inside another div wrapper. The problem is that I dont want the same height on all of them. The page kind of have 3 columns and the floating divs can be 1, 2 or 3 columns wide. The divs float left, so the following example will give me three rows of divs in my wrapper. How can I set equal height on the divs that are in the same row? In my example I want nr 1 and 2 to have equal height and 3, 4 and 5 another equal height? I cant know beforehand how many divs there is or how wide or high they are. Edit: They can be for instance 300, 600 or 900 px wide and the page width is 900px <div id="wrapper"> <div class="one-wide">nr1</div> <div class="two-wide">nr2</div> <div class="one-wide">nr3</div> <div class="one-wide">nr4</div> <div class="one-wide">nr5</div> <div class="three-wide">nr6</div> </div> Im thinking I somehow need to figure out when the added width of the divs is at the full page width and set equal height on those. Then do the same on the next divs. But I cant wrap my head around it. Currently im just using this to set the height on the children of the wrapper: $.fn.equalHeights = function(px) { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children('div').css({'min-height': currentTallest}); }); return this; };

    Read the article

  • XSLT generating attributes if source-Element is in parameterfile

    - by Siegfried
    Hi, i got an xml-file with some elements. For some of these is an aqvivalent in a parameter xml-file along with some other elements. I want to add these other elements from parm-file as parameter to output file if element-names are matching. (the Attributes should only be generated if an element "InvoiceHeader" exists in the source-xml. Here is my code... <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions"> <xsl:variable name="rpl" select="document('ParamInvoice.xml')"></xsl:variable> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <xsl:apply-templates></xsl:apply-templates> </xsl:template> <xsl:template match="*"> <xsl:copy> <xsl:if test="$rpl/StoraInvoice/local-name()"> <xsl:call-template name="AttributeErzeugen"> <xsl:with-param name="attr" select="$rpl/StoraInvoice/local-name()"></xsl:with-param> </xsl:call-template> </xsl:if> <xsl:apply-templates></xsl:apply-templates> </xsl:copy> </xsl:template> <xsl:template name="AttributeErzeugen"> <xsl:param name="attr"></xsl:param> <xsl:for-each select="$attr"> <xsl:attribute name="{Attibute/@name}"><xsl:value-of select="."></xsl:value- of></xsl:attribute> </xsl:for-each> </xsl:template> </xsl:stylesheet> and here the param-file <?xml version="1.0" encoding="UTF-8"?> <StoraInvoice> <InvoiceHeader> <Attribute name="Fuehrend">YYY</Attribute> <Attribute name="Feld">FFFF</Attribute> <Attribute name="Format">XYZXYZ</Attribute> </InvoiceHeader> </StoraInvoice> Siegfried

    Read the article

  • Drupal 7: File field causes error with Dependable Dropdowns

    - by LoneWolfPR
    I'm building a Form in a module using the Form API. I've had a couple of dependent dropdowns that have been working just fine. The code is as follows: $types = db_query('SELECT * FROM {touchpoints_metric_types}') -> fetchAllKeyed(0, 1); $types = array('0' => '- Select -') + $types; $selectedType = isset($form_state['values']['metrictype']) ? $form_state['values']['metrictype'] : 0; $methods = _get_methods($selectedType); $selectedMethod = isset($form_state['values']['measurementmethod']) ? $form_state['values']['measurementmethod'] : 0; $form['metrictype'] = array( '#type' => 'select', '#title' => t('Metric Type'), '#options' => $types, '#default_value' => $selectedType, '#ajax' => array( 'event' => 'change', 'wrapper' => 'method-wrapper', 'callback' => 'touchpoints_method_callback' ) ); $form['measurementmethod'] = array( '#type' => 'select', '#title' => t('Measurement Method'), '#prefix' => '<div id="method-wrapper">', '#suffix' => '</div>', '#options' => $methods, '#default_value' => $selectedMethod, ); Here are the _get_methods and touchpoints_method_callback functions: function _get_methods($selected) { if ($selected) { $methods = db_query("SELECT * FROM {touchpoints_m_methods} WHERE mt_id=$selected") -> fetchAllKeyed(0, 2); } else { $methods = array(); } $methods = array('0' => "- Select -") + $methods; return $methods; } function touchpoints_method_callback($form, &$form_state) { return $form['measurementmethod']; } This all worked fine until I added a file field to the form. Here is the code I used for that: $form['metricfile'] = array( '#type' => 'file', '#title' => 'Attach a File', ); Now that the file is added if I change the first dropdown it hangs with the 'Please wait' message next to it without ever loading the contents of the second dropdown. I also get the following error in my JavaScript console: "Uncaught TypeError: Object function (a,b){return new p.fn.init(a,b,c)} has no method 'handleError'" What am I doing wrong here?

    Read the article

  • Why won't this Jquery run on IE?

    - by Charles Marsh
    Hello All, I have this Jquery code (function($){ $.expr[':'].linkingToImage = function(elem, index, match){ // This will return true if the specified attribute contains a valid link to an image: return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i)); }; $.fn.imgPreview = function(userDefinedSettings){ var s = $.extend({ /* DEFAULTS */ // CSS to be applied to image: imgCSS: {}, // Distance between cursor and preview: distanceFromCursor: {top:2, left:2}, // Boolean, whether or not to preload images: preloadImages: true, // Callback: run when link is hovered: container is shown: onShow: function(){}, // Callback: container is hidden: onHide: function(){}, // Callback: Run when image within container has loaded: onLoad: function(){}, // ID to give to container (for CSS styling): containerID: 'imgPreviewContainer', // Class to be given to container while image is loading: containerLoadingClass: 'loading', // Prefix (if using thumbnails), e.g. 'thumb_' thumbPrefix: '', // Where to retrieve the image from: srcAttr: 'rel' }, userDefinedSettings), $container = $('<div/>').attr('id', s.containerID) .append('<img/>').hide() .css('position','absolute') .appendTo('body'), $img = $('img', $container).css(s.imgCSS), // Get all valid elements (linking to images / ATTR with image link): $collection = this.filter(':linkingToImage(' + s.srcAttr + ')'); // Re-usable means to add prefix (from setting): function addPrefix(src) { return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2'); } if (s.preloadImages) { (function(i){ var tempIMG = new Image(), callee = arguments.callee; tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr)); tempIMG.onload = function(){ $collection[i + 1] && callee(i + 1); }; })(0); } $collection .mousemove(function(e){ $container.css({ top: e.pageY + s.distanceFromCursor.top + 'px', left: e.pageX + s.distanceFromCursor.left + 'px' }); }) .hover(function(){ var link = this; $container .addClass(s.containerLoadingClass) .show(); $img .load(function(){ $container.removeClass(s.containerLoadingClass); $img.show(); s.onLoad.call($img[0], link); }) .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ); s.onShow.call($container[0], link); }, function(){ $container.hide(); $img.unbind('load').attr('src','').hide(); s.onHide.call($container[0], this); }); // Return full selection, not $collection! return this; }; })(jQuery); It works perfectly in all browsers apart from IE, which it does nothing, no errors, no clues? I have a funny feeling IE doesn't support attr? Can anyone offer any advice?

    Read the article

  • How To Create A Download Quota.

    - by snikolov
    I need to create an handy file down loader which will count the amount of bytes downloaded and stop when it has exceed a preset limit. i need to mirror some files but i only have 7 gb per moth of bandwidth and i dont want to exceed the limit. Example limits can be in bytes or number of files, each user has their own limit, as well as a limit for Download Quota itself. So if you set a limit of 2 gigabytes for Download Quota, downloads stop at 2 gigabytes, even if you have 3 users with a limit of 1 gigabyte each. if ($range) { //pass client Range header to rapidshare // _insert($range); $cookie .= "\r\nRange: $range"; $multipart = true; header("X-UR-RANGE-Range: $range"); } //octet-stream + attachment => client always stores file header('Content-type: application/octet-stream'); header('Content-Disposition: attachment; filename="' . $fn . '"'); //always included so clients know this script supports resuming header("Accept-Ranges: bytes"); //awful hack to pass rapidshare the premium cookie $user_agent = ini_get("user_agent"); ini_set("user_agent", $user_agent . "\r\nCookie: enc=$cookie"); $httphandle = fopen($url, "r"); $headers = stream_get_meta_data($httphandle); //let's check the return header of rapidshare for range / length indicators //we'll just pass these to the client foreach ($headers["wrapper_data"] as $header) { $header = trim($header); if (substr(strtolower($header), 0, strlen("content-range")) == "content-range") { // _insert($range); header($header); header("X-RS-RANGE-" . $header); $multipart = true; //content-range indicates partial download } elseif (substr(strtolower($header), 0, strlen("Content-Length")) == "content-length") { // _insert($range); header($header); header("X-RS-CL-" . $header); } } //now show the client he has a partial download if ($multipart) header('HTTP/1.1 206 Partial Content'); flush(); $download_rate = 100; while (!feof($httphandle)) { // send the current file part to the browser $var_stat = fread($httphandle, round($download_rate * 1024)); $var12 = strlen($var_stat); ////////////////////////////////// echo $var_stat; ///////////////////////////////// // flush the content to the browser flush(); // sleep one second sleep(1); }

    Read the article

  • Programming a callback function within a jQuery plugin

    - by ILMV
    I'm writing a jQuery plug-in so I can reuse this code in many places as it is a very well used piece of code, the code itself adds a new line to a table which has been cloned from a hidden row, it continues to perform a load of manipulations on the new row. I'm currently referencing it like this: $(".abc .grid").grid(); But I want to include a callback so each area the plug-in is called from can do something a bit more unique when the row has been added. I've used the jQuery AJAX plug-in before, so have used the success callback function, but cannot understand how the code works in the background. Here's what I want to achieve: $(".abc .grid").grid({ row_added: function() { // do something a bit more specific here } }); Here's my plug-in code (function($){ $.fn.extend({ //pass the options variable to the function grid: function() { return this.each(function() { grid_table=$(this).find('.grid-table > tbody'); grid_hidden_row=$(this).find('.grid-hidden-row'); //console.debug(grid_hidden_row); $(this).find('.grid-add-row').click(function(event) { /* * clone row takes a hidden dummy row, clones it and appends a unique row * identifier to the id. Clone maintains our jQuery binds */ // get the last id last_row=$(grid_table).find('tr:last').attr('id'); if(last_row===undefined) { new_row=1; } else { new_row=parseInt(last_row.replace('row',''),10)+1; } // append element to target, changes it's id and shows it $(grid_table).append($(grid_hidden_row).clone(true).attr('id','row'+new_row).removeClass('grid-hidden-row').show()); // append unique row identifier on id and name attribute of seledct, input and a $('#row'+new_row).find('select, input, a').each(function(id) { $(this).appendAttr('id','_row'+new_row); $(this).replaceAttr('name','_REPLACE_',new_row); }); // disable all the readonly_if_lines options if this is the first row if(new_row==1) { $('.readonly_if_lines :not(:selected)').attr('disabled','disabled'); } }); $(this).find('.grid-remove-row').click(function(event) { /* * Remove row does what it says on the tin, as well as a few other house * keeping bits and pieces */ // remove the parent tr $(this).parents('tr').remove(); // recalculate the order value5 //calcTotal('.net_value ','#gridform','#gridform_total'); // if we've removed the last row remove readonly locks row_count=grid_table.find('tr').size(); console.info(row_count); if(row_count===0) { $('.readonly_if_lines :disabled').removeAttr('disabled'); } }); }); } }); })(jQuery); I've done the usually searching on elgooG... but I seem to be getting a lot of noise with little result, any help would be greatly appreciated. Thanks!

    Read the article

  • jquery xml slideshow using ajax

    - by Codemaster Snake
    Hi all, I am trying to create a JQuery based slider using ajax to load images url from a xml file and then creating a html li list dynamically. Till now I am able to append and create DOM structure using Jquery. But I am not able to access the dynamically created list. I have also tried custom events using bind but not able to successfully implement it. Following is my jquery plugin code: (function($){ $.fn.genie = function(options) { var genie_dom = "<div class='genie_wrapper'><ul class='genie'></ul></div>"; var o, base; var genie_styles = "<style>.genie_wrapper{overflow:hidden}.genie{position: relative;margin:0;padding:0}.genie li {position: absolute;margin:0;padding:0}</style>"; var defaults = { width : '960px', height : '300px', background_color : '#000000', xml : 'genie.xml', speed : 1000, pause: 1000 }; base = $(this); o = $.extend(defaults, options); return this.each(function() { create_elements(); }); function create_elements() { $(base).html(genie_dom); $('head').append(genie_styles); $('.genie_wrapper').css({'background-color' : o.background_color, width : o.width, height: '300px', overflow: ''}); $.ajax({ type: "GET", url: o.xml, dataType: "xml", success: function(xml) { var slides = $(xml).find('slide'); var count = 0; $(slides).each(function(){ $('.genie').append('<li class="slide" id="slide'+count+'"><img src="' + $(this).text() + '" /></li>'); $('.genie li:last').css({'z-index' : count}); count++; }); } }); } } })(jQuery); In my html file: There is only one empty div to which I am calling my plugin like $(document).ready(function() { $('.slideshow').genie(); }); I have also tried using following everywhere in JS: $(".slide").bind("start_animation", function(e){ $(this).fadeOut(1000); alert($(this).html()); }); $(".slide").trigger("start_animation"); I want to animate li list using animate function, Can anyone please tell me how to implement it... It would be of great help... Regards, Neeraj Kumar EDIT: Can Anyone help me out please????

    Read the article

  • How to "enable" HTML5 elements in IE that were inserted by AJAX call?

    - by Gidon
    IE does not work good with unknown elements (ie. HTML5 elements), one cannot style them , or access most of their props. Their are numerous work arounds for this for example: http://remysharp.com/2009/01/07/html5-enabling-script/ The problem is that this works great for static HTML that was available on page load, but when one creates HTML5 elements afterward (for example AJAX call containing them, or simply creating with JS), it will mark these newly added elements them as HTMLUnknownElement as supposed to HTMLGenericElement (in IE debugger). Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE? Here is a test page: <html><head><title>TIME TEST</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <time>some time</time> <hr> <script type="text/javascript"> $("time").text("WORKS GREAT"); $("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion $("time").text("UPDATE"); </script> </body> </html> In IE you will see the: UPDATE , and NEW ELEMENT. In any other modern browser you will see UPDATE, and UPDATE Solution Using the answer provided I came up with the following piece of javascript to HTML5 enable a whole bunch of elements returned by my ajax call: (function ($) { jQuery.fn.html5Enable = function () { if ($.browser.msie) { $("abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video", this).replaceWith(function () { if (this.tagName == undefined) return ""; var el = $(document.createElement(this.tagName)); for (var i = 0; i < this.attributes.length; i++) el.attr(this.attributes[i].nodeName, this.attributes[i].nodeValue); el.html(this.innerHtml); return el; }); } return this; }; })(jQuery); Now this can be called whenever you want to append something: var el = $(AJAX_RESULT_OR_HTML_STRING); el.html5Enable(); $("SOMECONTAINER").append(el); See http://code.google.com/p/html5shiv/issues/detail?id=4 for an explanation about what this plugin doesn't do.

    Read the article

  • Javascript scope problem with object and setTimeout

    - by Shabbyrobe
    I'm trying to make a jQuery plugin that executes a method on a timer. I'd like it to work on multiple elements on a page independently. I've reached a point where the timer executes for each element, but the method called in the setTimeout seems to only know about the last instance of the plugin. I know I'm doing something fundamentally stupid here, but I'm danged if I know what. I know stuff like this has been asked 8 million times on here before, but I've not managed to find an answer that relates to my specific problem. Here's a script that demonstrates the structure of what I'm doing. <html> <head> <script type="text/javascript" src="assets/jquery.min.js"></script> <script type="text/javascript"> var crap = 0; (function($) { jQuery.fn.pants = function(options) { var trousers = { id: null, current: 0, waitTimeMs: 1000, begin: function() { var d = new Date(); this.id = crap++; console.log(this.id); // do a bunch of stuff window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); }, next: function() { this.current ++; console.log(this.id); window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); }, }; options = options || {}; $.extend(trousers, options); this.each(function(index, element) { trousers.begin(); }); return this; }; } )(jQuery); jQuery(document).ready(function() { jQuery("div.wahey").pants(); }); </script> </head> <body> <div class="wahey"></div> <div class="wahey"></div> </body> </html> The output I get is this: 0 1 1 1 1 1 The output I expect to get is this: 0 1 0 1 0 1

    Read the article

  • How to develop a Jquery plugin to find the first child that match with a selector?

    - by Ivan
    I'm trying to make a Jquery plugin (findFirst()) to find the first child with a given characteristics (something in the middle of the find() and children() functions. For instance, given this markup: <div id="start"> <div> <span>Hello world</span> <ul class="valid-result"> ... </ul> <ul class="valid-result"> <li> <ul class="not-a-result"> ... </ul> </li> </ul> <div> <ul class="valid-result"> ... </ul> </div> </div> </div> If you ask for $("#start").findFirst('ul') it should return all ul lists that I have tagged with the valid-result class, but not the ul with class not-a-result. It is, this function has to find the first elements that matches with a given selector, but not the inner elements that match this selector. This is the first time I try to code a Jquery function, and what I've already read doesn't helps me too much with this. The function I have developed is this: jQuery.fn.findFirst = function (sel) { return this.map(function() { return $(this).children().map(function() { if ($(this).is(sel)) { return $(this); } else { return $(this).findFirst(sel); } }); }); } It works in the sense it tries to return the expected result, but the format it returns the result is very rare for me. I suppose the problem is something I don't understand about Jquery. Here you have the JFiddle where I'm testing. EDIT The expected result after $("#start").findFirst('ul') is a set with all UL that have the class 'valid-result' BUT it's not possible to use this class because it doesn't exist in a real case (it's just to try to explain the result). This is not equivalent to first(), because first returns only one element!

    Read the article

  • embed a jquery script after jquery is loaded by widget

    - by matthew k
    http://stackoverflow.com/a/6065421 was helpful to see how to confirm jquery has been loaded. my widget will need a class that was written using jquery. may i have some assistance on embedding this other class built using jquery? thank you, below is the snippet from the above link with my code added in the final portion as noted in the code comments: (function(window, document, version, callback) { var j, d; var loaded = false; if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "/media/jquery.js"; script.onload = script.onreadystatechange = function() { if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { callback((j = window.jQuery).noConflict(1), loaded = true); j(script).remove(); } }; document.documentElement.childNodes[0].appendChild(script) } })(window, document, "1.3", function($, jquery_loaded) { //my code added below var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src", "http://mysite.com/widget/slides.jquery.js"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); $('#slides').slides({}); //this line gives an error. }); right now, i am trying the following based on the response(s) provided to this question (line that throws error is noted with a comment): //this function is called after jquery being embedded has been confirmed. {mysite} placeholder is nonexistent in actual code. function main() { jQuery(document).ready(function($) { var css_link = $("<link>", { rel: "stylesheet", type: "text/css", href: "http://mysite/widget/widget.css" }); css_link.appendTo('head'); $('#crf_widget').after('<div id="crf_widget_container"></div>'); /******* Load HTML *******/ var jsonp_url = "http://mysite/widget.php?callback=?"; $.getJSON(jsonp_url, function(data) { $('#crf_widget_container').html(data); $('#category_sel').change(function(){ alert(this.value); }); $.getScript("http://mysite/widget/slides.jquery.js", function(data, textStatus, jqxhr) { alert(1); //fires ok $('#slides').slides({}); //errors }); }); }); }

    Read the article

  • Swapping two jQuery draggable list items not working properly (with jsFiddle example)

    - by Tony_Henrich
    The minimalist working example below swaps the two boxes when box 'one' is dragged and dropped on box 'two'. The problem is that when box 'one' is dropped, its style has 'top' & 'left' values causing it to be placed away from where it should drop. Its class includes 'ui-draggable-dragging'. It seems the top & left values are related to the amount the elements were dragged before the drop. And the dragging was 'interrupted' hence the residual 'ui-draggable-dragging' class? What am I missing to make the swap work seamlessly? full jsfiddle example here <html> <head> <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = {revert: true}; $("li").draggable(options) $('#wrapper').droppable({ drop: function(event, ui) { $(ui.draggable).swapWith($('#two')); } }); }); </script> </head> <body> <form> <ul id="wrapper"> <li id='one'> <div style="width: 100px; height: 100px; border: 1px solid green"> one<br /></div> </li> <li id='two'> <div style="width: 110px; height: 110px; border: 1px solid red"> two<br /></div> </li> </ul> <br /> </form> </body> </html>

    Read the article

  • Elements added with appendTo() not immediately available

    - by Zip Gun Jim
    I'm having a problem with elements added with appendTo() not being immediately available in the DOM. First, I'm reading some data from a JSON file and then appending some html to a div. jsonUrl = "js/performers.json"; $.getJSON(jsonUrl, function(json) { $.each(json.performers, function(i, performer) { var html = '<div class="performer_mini">'; html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />'; html += performer.name + '<br /></div>'; $(html).appendTo("div#performer_spotlight"); }); }); Then I'm calling a random shuffler plugin to show one of the added divs at a time. $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000); The random shuffler does the following: (function($) { $.fn.randomShuffler = function(shuffledElements, fadeInTime, fadeOutTime, timeout) { fadeInTime = fadeInTime || 3000; fadeOutTime = fadeOutTime || 3000; timeout = timeout || 9000; $(shuffledElements).hide(); var $old_element; var $new_element; var old_index = 0; var new_index = 0; function shuffleElement() { $old_element = $new_element; old_index = new_index; while ($(shuffledElements).length > 0 && old_index == new_index) { // don't display the same element twice in a row new_index = Math.floor(Math.random()*$(shuffledElements).length); } $new_element = $(shuffledElements + ":eq(" + new_index + ")"); if ($old_element != undefined) { $old_element.fadeOut(fadeOutTime, function() { $new_element.fadeIn(fadeInTime); }); } else { $new_element.fadeIn(fadeInTime); } setTimeout(shuffleElement, timeout); } $(this).show(); shuffleElement(); } })(jQuery); The first time the shuffleElement() function is called $(shuffledElements).length equals 0, so no element is displayed. On the next call to shuffleElement(), the elements added with appendTo() are available and one is selected at random as expected. Everything works correctly after that. Is there some way to refresh the DOM or make these elements available to jQuery immediately after I add them with appendTo()? Any other suggestions for how to accomplish this?

    Read the article

  • small scale web site - global javascript file style/format/pattern - improving maintainability

    - by yaya3
    I frequently create (and inherit) small to medium websites where I have the following sort of code in a single file (normally named global.js or application.js or projectname.js). If functions get big, I normally put them in a seperate file, and call them at the bottom of the file below in the $(document).ready() section. If I have a few functions that are unique to certain pages, I normally have another switch statement for the body class inside the $(document).ready() section. How could I restructure this code to make it more maintainable? Note: I am less interested in the functions innards, more so the structure, and how different types of functions should be dealt with. I've also posted the code here - http://pastie.org/999932 in case it makes it any easier var ProjectNameEnvironment = {}; function someFunctionUniqueToTheHomepageNotWorthMakingConfigurable () { $('.foo').hide(); $('.bar').click(function(){ $('.foo').show(); }); } function functionThatIsWorthMakingConfigurable(config) { var foo = config.foo || 700; var bar = 200; return foo * bar; } function globallyRequiredJqueryPluginTrigger (tooltip_string) { var tooltipTrigger = $(tooltip_string); tooltipTrigger.tooltip({ showURL: false ... }); } function minorUtilityOneLiner (selector) { $(selector).find('li:even').not('li ul li').addClass('even'); } var Lightbox = {}; Lightbox.setup = function(){ $('li#foo a').attr('href','#alpha'); $('li#bar a').attr('href','#beta'); } Lightbox.init = function (config){ if (typeof $.fn.fancybox =='function') { Lightbox.setup(); var fade_in_speed = config.fade_in_speed || 1000; var frame_height = config.frame_height || 1700; $(config.selector).fancybox({ frameHeight : frame_height, callbackOnShow: function() { var content_to_load = config.content_to_load; ... }, callbackOnClose : function(){ $('body').height($('body').height()); } }); } else { if (ProjectNameEnvironment.debug) { alert('the fancybox plugin has not been loaded'); } } } // ---------- order of execution ----------- $(document).ready(function () { urls = urlConfig(); (function globalFunctions() { $('.tooltip-trigger').each(function(){ globallyRequiredJqueryPluginTrigger(this); }); minorUtilityOneLiner('ul.foo') Lightbox.init({ selector : 'a#a-lightbox-trigger-js', ... }); Lightbox.init({ selector : 'a#another-lightbox-trigger-js', ... }); })(); if ( $('body').attr('id') == 'home-page' ) { (function homeFunctions() { someFunctionUniqueToTheHomepageNotWorthMakingConfigurable (); })(); } });

    Read the article

  • working validation hint, working word counter but not working together

    - by Sriyani Rathnayaka
    I added a word counter to a my form's textarea... it is something like this... <div> <label>About you:</label> <textarea id="qualification" class="textarea hint_needed" rows="4" cols="30" ></textarea> <span class="hint">explain about you</span> <script type="text/javascript"> $("textarea").textareaCounter(); </script> </div> My problem is when I add textaracounter() like this my validation hint is not working.. when I remover the counter function validation hint is working... this is the jquery for hint message.. $(".hint").css({ "display":"none" }); $("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() { $(this).next(".hint").css({ "display":"inline" }); }).on("mouseleave", function() { $(this).next(".hint").css({ "display":"none" }); }); this is for the word counter.. (function($){ $.fn.textareaCounter = function(options) { // setting the defaults // $("textarea").textareaCounter({ limit: 100 }); var defaults = { limit: 150 }; var options = $.extend(defaults, options); // and the plugin begins return this.each(function() { var obj, text, wordcount, limited; obj = $("#experience"); obj.after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>'); obj.keyup(function() { text = obj.val(); if(text === "") { wordcount = 0; } else { wordcount = $.trim(text).split(" ").length; } if(wordcount > options.limit) { $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>'); limited = $.trim(text).split(" ", options.limit); limited = limited.join(" "); $(this).val(limited); } else { $("#counter-text").html((options.limit - wordcount)+' words left'); } }); }); }; })(jQuery); can anybody tell me what is the problem there? Thank you..

    Read the article

  • jQuery .live() not working.

    - by Silvio Iannone
    Hi there, my actual problem is that .live() jQuery method is not working. This si the code where i use it: jQuery.fn.sb_animateMenuItem = function() { var mousehoverColor = '#0089F7'; var duration = 250; return this.each(function() { var originalColor = $(this).css('background-color'); $(this).live('mouseover', function() { this.style.cursor = 'pointer'; $(this).animate().stop(); $(this).animate( { backgroundColor: mousehoverColor }, duration); }); $(this).live('mouseout', function() { this.style.cursor = 'default'; $(this).animate( { backgroundColor: originalColor }, duration); }); }); }; This snipped is used i another page in this way: <script type="text/javascript" src="ui/js/jquery-1.4.2.js"></script> <script type="text/javascript" src="ui/js/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" src="ui/js/color.js"></script> <script type="text/javascript" src="engine/js/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="ui/js/ui.js"></script> <script type="text/javascript"> // UI effects $(document).ready(function() { $('button').sb_animateButton(); $('input').sb_animateInput(); $('.top_menu_item').sb_animateMenuItem(); $('.top_menu_item_right').sb_animateMenuItem(); $('.left_menu_item').sb_animateMenuItem(); }); </script> Since my site uses AJAX requests i used the .live method in the first snippet, but when i load the page the effects are not applied the the button/input... tags. If i remove the .live method and use the 'normal' way, ui effects defined in the first snipped are applied but only the the elements loaded before any AJAX request. The elements loaded after the ajax request are not affected by first snippet (though they have the same selector). Thanks for helping.

    Read the article

  • Looping through array in PHP to post several multipart form-data

    - by Léon Pelletier
    I'm trying in an asp web application to code a function that would loop through a list of files in a multiple upload form and send them one by one. Is this something that can be done in ASP? Because I've read some posts about how to attach several files together, but saw nothing about looping through the files. I can easily imagine it in C# via HttpWebRequest or with socket, but in php, I guess there are already function designed to handle it? // This is false/pseudo-code :) for (int index = 0; index < number_of_files; index++) { postfile(file[index]); } And in each iteration, it should send a multipart form-data POST. postfile(TheFileInfos) should make a POST like it: POST /afs.aspx?fn=upload HTTP/1.1 [Header stuff] Content-Type: multipart/form-data; boundary=----------Ef1Ef1cH2Ij5GI3ae0gL6KM7GI3GI3 [Header stuff] ------------Ef1Ef1cH2Ij5GI3ae0gL6KM7GI3GI3 Content-Disposition: form-data; name="Filename" myimage1.png ------------Ef1Ef1cH2Ij5GI3ae0gL6KM7GI3GI3 Content-Disposition: form-data; name="fileid" 58e21ede4ead43a5201206101806420000007667212251 ------------Ef1Ef1cH2Ij5GI3ae0gL6KM7GI3GI3 Content-Disposition: form-data; name="Filedata"; filename="myimage1.png" Content-Type: application/octet-stream [Octet Stream] [Edit] I'll try it: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="form1" enctype="multipart/form-data" method="post" action="processFiles.php"> <p> <? // start of dynamic form $uploadNeed = $_POST['uploadNeed']; for($x=0;$x<$uploadNeed;$x++){ ?> <input name="uploadFile<? echo $x;?>" type="file" id="uploadFile<? echo $x;?>"> </p> <? // end of for loop } ?> <p><input name="uploadNeed" type="hidden" value="<? echo $uploadNeed;?>"> <input type="submit" name="Submit" value="Submit"> </p> </form> </body> </html>

    Read the article

< Previous Page | 26 27 28 29 30 31 32 33  | Next Page >