Search Results

Search found 291 results on 12 pages for 'appendto'.

Page 11/12 | < Previous Page | 7 8 9 10 11 12  | Next Page >

  • Why doesn't the .click() not work in this instance?

    - by Deshiknaves
    Basically what this does is fadeIn pre-existing divs and then loads an image. When the image is loaded it then appends that into one of the pre-existing divs. Then it appends a new div with an id of xButton. Then later it $('#xButton').click() should hide the 3 divs. However it just doesn't work. If I change the click() to either #modalImage or #overlay, it works but just not for the #xButton. I would really like to figure out why its not working and how I should be doing this instead. Thanks. $(function(){ $('#container a').click(function(e){ e.preventDefault(); var id = $(this).attr('href'), img = new Image(); $('#overlay').fadeIn(function(){ $('#modalImage').fadeIn(); }); $(img).load(function(){ $(this).hide(); $('#modalImage').removeClass('loader').append(this); $(this).fadeIn(function(){ var ih = $(this).outerHeight(), iw = $(this).outerWidth(), newH = ($(window).height()/10)*7, newW = ($(window).width()/10)*7; if (ih >= iw && ih >= newH) { $(this).css('height',newH + 'px'); $(this).css('width', 'auto'); } else if (ih >= iw && newH > ih) { $(this).css('height', ih + 'px'); $(this).css('width', 'auto'); } else if (iw > ih && iw >= newW) { if ((newW / (iw / ih)) > newH) { $(this).css('width', 'auto'); $(this).css('height', newH + 'px'); } else { $(this).css('width', newW + 'px'); $(this).css('height', 'auto'); } } else { $(this).css('width', iw + 'px'); $(this).css('height', 'auto'); } var padW = ($(window).width() - $(this).outerWidth()) / 2, padH = ($(window).height() - $(this).outerHeight()) / 2; console.log (padH + ' ' + padW); $(this).css('top', padH); $(this).css('left', padW); if($('#overlay').is(":visible") == true) { ih = ih + 4; $('<div id="xButton">x</div>').appendTo('#modalImage'); if (padH >= 0) { $('#xButton').css('top', padH - 4).css('right', padW - 65); } else { $('#xButton').css('top', '20px').css('right', padW - 65); } } }); }).attr('src', id); }); $('#xButton').click(function(){ $(this).hide(); $('#overlay').fadeOut(function(){ $('#modalImage img').css('top', '-9999px').remove(); $('#xButton').remove(); $('#modalImage').addClass('loader'); }); }); });

    Read the article

  • Reloading a Flickr request from author

    - by user1797325
    I have my flickr gallery coded, but I want to be able to click on the Author's name and the page will reload just with the images from that author. Here is my current code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Outbrain Test Gallery</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.masonry.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $('#flkr').masonry({ // options itemSelector : '.tiles', isResizable: true, }); }); </script> <script type="text/javascript">$(document).ready(function() { $('<ul />').prependTo('#flkr'); $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?', function(data) { $.each(data.items, function(i,item) { var squares = (item.media.m).replace('_m.jpg', '_q.jpg'); if(i <= 20){ $('<img/>').attr({ alt: item.title, src: squares, height: '150', width: '150' }).appendTo('#flkr ul').wrap('<li class="tiles"><a href="' + item.link + '"></a><p class="title">' + item.title + '</p><p class="author"><strong>By:</strong> ' + item.author + '</p><p class="date"><strong>Uploaded: </strong>' + item.published + '</p></li>'); } }); }); }); </script> </head> <body> <ul id="flkr"></ul> </body> </html>

    Read the article

  • jQuery function execute on Button Click and Enter/Return (key)

    - by Alvin Jones
    I'm trying to create a little search box that allows you to search Twitter based on the keyword you enter in the input field. While it's work, it only works if you press the Submit button. I would also like to be able to press the Enter or Return key to initiate the search. I've tried using the .sumbit function and wrapping my input around a form element with no success. Any insight would be greatly appreciate! Live example: http://tinyurl.com/84axyym <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ function(data) { $('#startSearch').click(function(){ $('#tweets .results').remove(); var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' $.getJSON(searchTerm, function(data) { $.each(data.results, function() { $('<div class="results"></div>') .hide() .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') .append('<span class="userText">' + this.text + '</span>') .append('<time class="textTime">' + relTime(this.created_at) + '</time>') .appendTo('#tweets') .fadeIn(); }); }); </script> <body> <label id="searchLabel" for="twitterSearch">Search</label> <input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"> <input id="startSearch" type="submit"> <datalist id="searchSugg"> <option value="css3 mulitple backgrounds"> <option value="html5 video"> <option value="responsive web design"> <option value="twitter api"> </datalist> <div id="tweets"> </div> </body>

    Read the article

  • Inheritance of jQuery's prototype partially fails

    - by user1065745
    I want to use Coffeescript to create an UIObject class. This class should inherit from jQuery, so that instances of UIObject can be used as if they where created with jQuery. class UIObject isObject: (val) -> typeof val is "object" constructor: (tag, attributes) -> @merge jQuery(tag, attributes), this @UIObjectProperties = {} merge: (source, destination) -> for key of source if destination[key] is undefined destination[key] = source[key] else if @isObject(source[key]) @merge(source[key], destination[key]) return It partially works. Consider the Foobar class below: class Foobar extends UIObject constructor: -> super("<h1/>", html: "Foobar") $("body").append(new Foobar) works fine. BUT: (new Foobar).appendTo("body") places the tag, but also raises RangeError: Maximum call stack size exceeded. Was it just a bad idea to inherit from jQuery? Or is there a solurion? For those who don't know CoffeeScript, the JavaScript source is: var Foobar, UIObject; var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; UIObject = (function () { UIObject.prototype.isObject = function (val) { return typeof val === "object"; }; function UIObject(tag, attributes) { this.merge(jQuery(tag, attributes), this); this.UIObjectProperties = {}; } UIObject.prototype.merge = function (source, destination) { var key; for (key in source) { if (destination[key] === void 0) { destination[key] = source[key]; } else if (this.isObject(source[key])) { this.merge(source[key], destination[key]); } } }; return UIObject; })(); Foobar = (function () { __extends(Foobar, UIObject); function Foobar() { Foobar.__super__.constructor.call(this, "<h1/>", { html: "Foobar" }); } return Foobar; })();

    Read the article

  • Can't get jQuery to get focus on cloned input fields

    - by Rebel1Moon
    I have a page that needs to create dynamic form fields as often as the user needs, and I am trying to use Ajax to tie it in to my database for faster form entry and to prevent user typos. So, I have put my Ajax returned data into popup div, the user selects, then the form field is filled in. The problem comes on the cloned fields. They don't seem to want to bring up the popup div when focused. I am thinking it is something to do with when they get created/added to the DOM. Here is my JS that creates the clones: $(document).ready(function() { var regex = /^(.*)(\d)+$/i; var cloneIndex = $(".clonedInput").length; $("button.clone").live("click", function(){ $(this).parents(".clonedInput").clone() .appendTo("#course_container") .attr("id", "clonedInput" + cloneIndex) .find("*").each(function() { var id = this.id || ""; var match = id.match(regex) || []; if (match.length == 3) { this.id = match[1] + (cloneIndex); } }); cloneIndex++; numClones=cloneIndex-1; //alert("numClones "+numClones); }); Here is where I expect to be able to get focus on the correct cloned field and call the popup. The baker_equiv0 id is original code, whereas baker_equiv1 is the first clone. $('#baker_equiv0').focus(function() { \\ THIS CODE WORKS $('.popup').fadeIn(500); $('#results').empty(); // document.enter_data.baker_equiv1.value="test"; THIS LINE WORKS //alert("numClones "+numClones); }); $('#baker_equiv1').focus(function() { // THIS DOESN'T EVER FIRE alert("numClones "+numClones); $('.popup').fadeIn(500); $('#results').empty(); }); Here is the HTML with the form: <label for="baker_equiv" class="">Baker Equivalent: <span class="requiredField">*</span></label> <input type="text" class="cinputsa" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);"> If I put this in the HTML code above, it works fine: onfocus="alert(this.id)" I'd also be interested in how to adjust the JS code to work based on the id array created rather than having to copy code for each potential set of fields clones, i.e., baker_equiv[] rather than baker_equiv0, baker_equiv1, etc. Thanks all!

    Read the article

  • jquery - clone nth row of a table?

    - by John
    I'm trying to use jquery to clone a table row everytime someone presses the add-row button. Can anyone tell me what's wrong with my code? I'm using HTML + smarty templating language in my view. Here's what my template file looks like: <table> <tr> <td>Description</td> <td>Unit</td> <td>Qty</td> <td>Total</td> <td></td> </tr> <tbody id="entries"> {foreach from=$arrItem item=i name=inv} <tr> <td> <input type="hidden" name="invoice_item_id[]" value="{$i.invoice_item_id}"/> <input type="hidden" name="assignment_id[]" value="{$i.assignment_id}" /> <input type="text" name="description[]" value="{$i.description}"/> </td> <td><input type="text" class="unit_cost" name="unit_cost[]" value="{$i.unit_cost}"/></td> <td><input type="text" class="qty" name="qty[]" value="{$i.qty}"/></td> <td><input type="text" class="cost" name="cost[]" value="{$i.cost}"/></td> <td><a href="javascript:void(0);" class="delete-invoice-item">delete</a></td> </tr> {/foreach} </tbody> <tfoot> <tr><td colspan="5"><input type="button" id="add-row" value="add row" /></td></tr> </tfoot> </table> Here's my Jquery Javascript call, which I know gets fired when I put in an alert() statement. So the problem is with me not knowing how jquery works. $('#add-row').live('click', function() {$('#entries tr:nth-child(0)').clone().appendTo('#entries');}); So what am I doing wrong?

    Read the article

  • jQuery .ajax doesn't load Google Adsense

    - by Sahas Katta
    Hey Everyone, Just ran into an odd issue. I have a simple WP loop and instead of regular NEXT/BACK pages, I use a jQuery powered $.ajax get to append the following page to the current page. It works perfectly. However, I choose to insert a Google Adsense unit every 5th story. Unfortunately, the Adsense unit that is brought in with a second, third, or etc page load don't render. Here's my loop: 10 stories per page, Adsense after the 4th one. <?php $count = 0; ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php $count++; ?> <div class="card"> <div class="title"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><span><?php the_title(); ?></span></a> </div> </div> <?php if ($count == 4) : ?> <div class="card"> <!-- ADSENSE CODE HERE (Straight from Google Adsense Panel, no tweaks.) --> </div> <?php endif; ?> As for my jQuery script, here's how that looks: $.ajax({ url: nextPageLink, type: 'GET', success: function(data) { $(data).find('#reviews .card').appendTo('#reviews'); }, error: function(xhr, status, error) { $('.loadination').addClass('hidden'); } }); Keep in mind, I just simplified my code to give you guys an example. The code above was just the essentials. All the loading stuff works perfectly. Images, text, links, etc all load just fine. However, the Google Adsense unit doesn't. Any help would be appreciated. Thanks and Happy Holidays!

    Read the article

  • Difficulty with jQuery and input keydown event

    - by Rosarch
    I am making a simple JavaScript enhanced list. I want it to be a list of inputs, each with an 'Add' and 'Remove' button. If the user clicks 'Add', a new li will be added. If the user clicks 'Remove', that li will be removed. It works fine, except for hitting "enter" in an <input>. Currently, it always causes the Remove.click event handler to fire, unless there's only one item in the list. I'm not sure why. How can I suppress this? Here is the complete jQuery. My attempt to fix the "enter" issue is commented out, and it doesn't work. I suspect that I could be designing this code better; if you see an improvement I'd love to hear it. function make_smart_list(list) { var ADD_CLASS = 'foo-widget-Add'; var REMOVE_CLASS = 'foo-widget-Remove'; var jq_list = $(list); jq_list.parents('form').submit(function() { return false; }); function refresh_handlers() { jq_list.find(sprintf('.%s, .%s', REMOVE_CLASS, ADD_CLASS)).unbind('click'); // jq_list.find('input').unbind('submit'); // // jq_list.find('input').submit(function() { // var jq_this = $(this); // var next_button = jq_this.nextAll('button'); // if (next_button.hasClass(ADD_CLASS)) { // next_button.nextAll('button').click(); // return; // } // // if (next_button.hasClass(REMOVE_CLASS)) { // return false; // } // // }); jq_list.find("." + REMOVE_CLASS).click(function() { var jq_this = $(this); jq_this.parent().remove(); refresh_handlers(); return false; }); jq_list.find("." + ADD_CLASS).click(function() { var jq_this = $(this); if (jq_this.prevAll('input').val() == '') { return; } jq_this.parent().clone().appendTo(jq_this.parent().parent()); jq_this.parent().next().find('input').val('').focus(); jq_this.removeClass(ADD_CLASS).addClass(REMOVE_CLASS); jq_this.text('Remove'); refresh_handlers(); return false; }); } refresh_handlers(); } (sprintf is another script I have.)

    Read the article

  • Function to get the font and calculate the width of the string not working on first instance

    - by user3627265
    I'm trying to calculate the width of the string based on the font style and size. The user will provide the string, the font style and the font size, and then after giving all the data the user will hit the submit button and the function will trigger. Basically this script works but only when the submit button is hit twice or the font is selected twice,. I mean if you selec DNBlock as a font, it will not work for first time, but the second time you hit submit, it will then work. I'm not sure where is the problem here, but when I used the default font style like Arial, times new roman etc it works perfectly fine. Any Idea on this? I suspected that the font style is not being rendered by the script or something. Correct me if I'm wrong. Thanks //Repeat String String.prototype.repeat = function( num ) { return new Array( num + 1 ).join( this ); } //Calculate the width of string String.prototype.textWidth = function() { var fntStyle = document.getElementById("fntStyle").value; if(fntStyle == "1") { var fs = "DNBlock"; } else if(fntStyle == "2") { var fs = "DNBlockDotted"; } else if(fntStyle == "3") { var fs = "DNCursiveClassic"; } else if(fntStyle == "4") { var fs = "DNCursiveDotted"; } else if(fntStyle == "5") { var fs = "FoundationCursiveDots-Regul"; } var f = document.getElementById("fntSize").value.concat('px ', fs), o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; } //Trigger the event $("#handwriting_gen").submit(function () { var rptNO = parseInt($('#rptNO').val()); $("[name='txtLine[]']").each(function(){ alert(this.value.repeat(rptNO).textWidth()); if(this.value.repeat(rptNO).textWidth() > 1000) { $(this).focus(); $(this).css({"background-color":"#f6d9d4"}).siblings('span.errorMsg').text('Text is too long.'); event.preventDefault(); } }); });

    Read the article

  • jquery add either of two fields to form

    - by user2891182
    I have worked out how to add a field to a form through JQuery but cannot figure out how to have two add field buttons so I can add one or the other fields? Could someone lead me in the right direction? <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addButton").click(function () { if(counter>10){ alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTextBoxDiv.appendTo("#TextBoxesGroup"); counter++; }); $("#removeButton").click(function () { if(counter==1){ alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); $("#getButtonValue").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> --I am trying to have a use click on either of these two buttons and have the appropriate field added next.-- <input type='button' value='Add field #01' id='addButton'> <input type='button' value='Add field #02' id='addButton'> <input type='button' value='Remove Last Field' id='removeButton'> </body> </html>

    Read the article

  • jQuery UI Dialog problem if modal is set to TRUE

    - by VansFannel
    Hello! I'm developing an ASP.NET WebForm application with Visual Studio 2008 SP1 and C#. I have the following ASPX page: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog({ autoOpen: false, modal: true, buttons: { 'Ok': function() { __doPostBack('TreeNew', ''); $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } }, close: function() { }, open: function(type, data) { $(this).parent().appendTo("form"); } }); }); function ShowDialog() { $('#dialog').dialog('open'); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="TreeNew" runat="server" Text="Nuevo" OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/> <asp:Label ID="Message" runat="server"></asp:Label> <div id="dialog_target"></div> <div id="dialog" title="Select content type"> <p id="validateTips">All form fields are required.</p> <asp:RadioButtonList ID="ContentTypeList" runat="server"> <asp:ListItem Value="1">Text</asp:ListItem> <asp:ListItem Value="2">Image</asp:ListItem> <asp:ListItem Value="3">Audio</asp:ListItem> <asp:ListItem Value="4">Video</asp:ListItem> </asp:RadioButtonList> </div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </form> </body> </html> When modal is set to true the page stars to grow (I know that because both scroll bars are getting smaller, vertical bar faster than horizontal bar). Looking inside page source code I see that the following div is outside forms tag: <div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/> If I set modal to false, the error doesn't happen. I think the problem is that the div working as modal is outside the form. What do you think?

    Read the article

  • How to move child element from one parent to another using jQuery

    - by Kapslok
    I am using the jQuery DataTables plugin. I would like to move the search box (.dataTables_filter) and number of records to display dropdown (.dataTables_length) from their parent element (.dataTables_wrapper) to another div on my page without losing any registered javascript behavior. For instance the search box has a function attached to the 'keyup' event and I want to keep that intact. The DOM looks like this: <body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body> This is what I would like the DOM to look like after the move: <body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body> I've been looking at the .append(), .appendTo(), .prepend() and .prependTo() functions but haven't had any luck with these in practice. I've also looked at the .parent() and .parents() functions, but can't seem to code a workable solution. I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over, and I really want these elements to be floated in their new parents. Any help with this is much appreciated.

    Read the article

  • Firefox not running jQuery for XHTML output

    - by ScottSEA
    Okay, I did a crappy job of describing the issue in my previous post. I think the discussion got sidetracked from the core issue - so I'm going to try again. Mea Culpa to Elzo Valugi about the aforementioned thread. I have an XML file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="wtf.xsl"?> <Paragraphs> <Paragraph>Hi</Paragraph> </Paragraphs> Simple enough. I also have a stylesheet to create XHTML output: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" indent="yes" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" omit-xml-declaration="yes"/> <xsl:template match="/*"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>FF-JS-XHTML WTF</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="wtf.js"></script> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="Paragraph"> <p> <xsl:apply-templates /> </p> </xsl:template> </xsl:stylesheet> Last but not least, I have the following jQuery in toto (wtf.js, from the script tag in the stylesheet): $(function() { alert('Hiya!'); $('<p>Hello</p>').appendTo('body'); }); Extremely simple, but sufficient for the demonstration. When I run this in Internet Explorer, I get the alert 'Hiya!' as well as the expected: Hi Hello but when I run it in Firefox (3.0.1), I still get the alert, but the jQuery does not insert the paragraph into the DOM, and I just get this: Hi If I change the stylesheet to method="html" it works fine, and I get (along with the alert): Hi Hello Why doesn't Firefox run the jQuery with an XHTML document? Has anyone any experience with this problem? EDIT: ADDITIONAL INFO I can successfully insert elements into the documents this way in Firefox (method="xml"): var frag = document.createDocumentFragment(); var p = document.createElement('p'); p.appendChild(document.createTextNode('Ipsum Lorem')); frag.appendChild(p); $('body').append(frag); but I'm running into a similar problem with the .remove() method. It is looking more and more that Firefox doesn't construct a DOM from XML that jQuery can relate to, or somesuch.

    Read the article

  • How to avoid flickering in jquery?

    - by Pandiya Chendur
    I am using jquery with asp.net webforms..... I am using asp.net pagemethods and jquery.... I am emptying a div on click of anchor tags and filling it with new content.... What happens is my div flickers when my new data is loaded to it... How to avoid this in jquery? Can i use any effect for this.... <script type="text/javascript"> $(document).ready(function() { getRecordspage(1, 5); $("a.page-numbers").click(function() { $("#ResultsDiv").empty(); getRecordspage($(this).text(), 5) }); }); </script> and my page, <body> <form id="form1" runat="server"> <div id="ResultsDiv"> </div> <div class="pager"> <a ID="lnkbtn0" class="page-numbers" href="javascript:void(0);">1</a> <a ID="lnkbtn1" class="page-numbers" href="javascript:void(0);">2</a> <a ID="lnkbtn2" class="page-numbers" href="javascript:void(0);">3</a> <a ID="lnkbtn3" class="page-numbers" href="javascript:void(0);">4</a> </div> </form> </body> and my getRecordspage() function is function getRecordspage(curPage, pagSize) { $.ajax({ type: "POST", url: "Default.aspx/GetRecords", data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(jsonObj) { var strarr = jsonObj.d.split('##'); var jsob = jQuery.parseJSON(strarr[0]); $.each(jsob.Table, function(i, employee) { $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv'); }); $(".resultsdiv:even").addClass("resultseven"); $(".resultsdiv").hover(function() { $(this).addClass("resultshover"); }, function() { $(this).removeClass("resultshover"); }); } }); }

    Read the article

  • jquery-ui .draggable is not a function error

    - by niczoom
    I am getting the following error (using Firefox 3.5.9): $("#dragMe_" + myCount).draggable is not a function $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); Line 231 http://www.liamharding.com/pgi/pgi.php Link to page in question : http://www.liamharding.com/pgi/pgi.php For example, click the 2 checkbox's 'R25 + R50 Random Walk' then click Show/Refresh Graphs. Two graphs should be displayed, both with draggable thin horizontal red lines. Re-open the options panel and de-select R50 Random Walk, now click Show/Refresh Graphs again, 1 graph is removed and the other updated; now re-select R50 Random Walk and click Show/Refresh, you will find the still checked R25 graph gets updated ok the above error occurs and i cant figure out why. Initially, when displaying the first 2 graphs it uses the same code and it works just fine. The error occurs on this line: //********* ERROR OCCURS HERE ********** $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); Here is the code for the Show/Refresh Graphs.click() event: $("#btnShowGraphs").click(function(){ // Hide 'Options' panel (only if open AND an index is checked) if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();}; var myCount = 0; var divIsNew = false; var gif_loader_small = '<div id="gif_loader_small"></div>'; var gif_loader_big = '<div id="gif_loader_big"></div>'; $("input:checkbox[id=indexCheck]").each(function() { if (this.checked) { // check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name) if ( $("#"+this.value).length == 0 ) { console.log("New 'graphContainer' div : "+this.value); divIsNew = true; // Create new divs for graph image, drag bar and heading var $structure = " \ <li id=\""+this.value+"\" class=\"graphContainer\"> \ <div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \ <div id=\"image_"+myCount+"\" class=\"image\"></div> \ <div id=\"heading_"+myCount+"\" class=\"heading\"></div> \ </li> \ "; $('#graphResults').append($structure); // Hide dragMe DIV $('#dragMe_'+myCount).hide(); // Make 'dragMe' draggable div //********* ERROR OCCURS HERE ********** $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); } // Display small loading gif $(gif_loader_small).clone().appendTo( $(this).parent() ); // Display large circular loading gif var $loader = $(gif_loader_big); // add temporary css attributes onto existing graph divs as they need to be displayed diffrently if(!divIsNew){ console.log("Reposition existing 'gif_loader_big' div"); $loader = $(gif_loader_big).css({ "position" : "absolute", "top" : "35%", "opacity" : ".85"}); } // add newly styled big-loader-gif to index div $loader.clone().prependTo( $("#"+this.value) ); // Call function to fetch image using ajax get_graph(this, myCount, divIsNew); } else { // REMOVE 'graphContainer' DIVS NOT CHECKED // check for div existance if ( $("#"+this.value).length != 0 ) { console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value); // DESTROY draggable //$("#dragMe_"+myCount).draggable("destroy"); // remove div $("#"+this.value).remove(); } } // reset counters and other variables myCount++; divIsNew = false; console.log("Complete: "+this.value+", NEXT index"); }); });

    Read the article

  • jquery dynamic select doesn't submit values

    - by n00b0101
    I have a form that includes three select boxes. The first one is categories, and selecting a category from it will populate the variables multi-select box with values specific to the selected category. Selecting variables and then clicking "add selected" will populate the target select box will those variables. The problem is, print_r shows that the values in the target select box aren't passed upon submit, and I don't understand why... Below is the code, and help is really appreciated Here's the html markup: <select multiple="" id="categories" name="categories[]"> <option class="category" value="Income">Income</option> <option class="category" value="Gender">Gender</option> <option class="category" value="Age">Age</option> </select> //note that i'm only showing variables for a presumably select category <select multiple="multiple" id="variables" name="variables[]"> <option value="2">Less Than $15,000</option> <option value="3">$15,000 - $19,999</option> <option value="4">$20,000 - $29,999</option> <option value="5">$30,000 - $39,999</option> <option value="6">$40,000 - $49,999</option> <option value="11">$90,000 - $99,999</option> <option value="12">$100,000 - $124,999</option> <option value="13">$125,000 - $149,999</option> <option value="14">Greater than $149,999</option> </select> <select name="target[]" id="target" multiple="multiple" height="60"> </select> And here's the jquery code: $(function(){ var opts = {}, $cats = $("#categories"), $target = $("#target"), $vars = $("#variables"); $vars.find("option").each(function(){ var $opt = $(this), cat = this.className, value = this.value, label = $opt.text(); if(!opts[cat]) { opts[cat] = []; } opts[cat].push({label: label, value: value}); $opt.remove(); }); function update_variables(){ var cat = $cats.val(), new_opts = []; $vars.empty(); $.each(opts[cat], function(){ if( $target.find('[value=' + this.value + ']').length === 0 ){ new_opts.push(option(this.value, this.label)); } }); $vars.html(new_opts.join('')); } function option(value, label){ return "<option value='" + value + "'>" + label + "</option>"; } $("#add").click(function(e){ e.preventDefault(); $vars.find(':selected').appendTo($target).attr('selected',false); update_variables(); }); $("#remove").click(function(e){ e.preventDefault(); $target.find(':selected').remove(); update_variables(); }); $cats.change(function(){ update_variables(); }).change(); })

    Read the article

  • Jquery autocomplete UI - No results on multiple fields

    - by pjammer
    Andrew's answer to my comment has sparked this question. According to his awesome answer in the link above, the code at the bottom of the question will only work for ONE widget. But it's killer nice code and makes sense... I guess I want the best of both worlds. Nice JS, (if that is possible) and to have the zero results show() just the element that we're using at the time. This code snippet is the main crux of my problem, as I see it: source: function (request, response) { jQuery.ajax({ url: "/autocomplete.json", data: { term: request.term }, success: function (data) { if (data.length == 0) { jQuery('span.guest_investor_email').show(); jQuery('span.investor_field_delete_button').show(); } response(data); } }); Currently: I have a button on my page that says "Add more Information" and each time you click it, a new instance of the autocomplete text field appears, complete with some hidden fields and a display:none; on guest_investor_email. If I use the autocomplete text field, say 3 times, and i have 3 autocomplete instances on the page and the third one finds 0 results: The code will show() all 3 instances of the guest_investor_email text field, instead of just this one that is blank. QUESTION: How do i get something like jQuery(this).siblings(('span.guest_investor_email').show(); to work? this is an Object and not an array of elements to select. If it isn't with this I don't mind, as long as I know how to get at it. Thanks. Full Code: jQuery(".auto_search_complete").live("click", function() { jQuery(this).autocomplete({ minLength: 3, source: function (request, response) { jQuery.ajax({ url: "/autocomplete.json", data: { term: request.term }, success: function (data) { if (data.length == 0) { jQuery('span.guest_investor_email').show(); jQuery('span.investor_field_delete_button').show(); } response(data); } }); }, focus: function(event, ui) { jQuery(this).val(ui.item.user ? ui.item.user.name : ui.item.pitch.name); return false; }, select: function(event, ui) { jQuery(this).val(ui.item.user ? ui.item.user.name : ui.item.pitch.name); jQuery(this).siblings('div.hidden_fields').children('.poly_id').val(ui.item.user ? ui.item.user.id : ui.item.pitch.id); jQuery(this).siblings('div.hidden_fields').children('.poly_type').val(ui.item.user ? "User" : "Pitch"); jQuery(this).siblings('span.guest_investor_email').hide(); jQuery(this).siblings('span.investor_field_delete_button').show(); jQuery(this).attr('readonly','readonly'); jQuery(this).attr('id', "investor-selected"); return false; } }).each(function() { jQuery(this).data( "autocomplete" )._renderItem = function( ul, item ) { return jQuery( "" ) .data( "item.autocomplete", item ) .append("" + (item.user ? item.user.name : item.pitch.name) + "" + (item.user ? item.user.investor_type : item.pitch.investor_type) + " - " + (item.user ? item.user.city : item.pitch.city) + "" ) .appendTo( ul ); }; }); });

    Read the article

  • How add loading image using jquery?

    - by user244394
    I'm working on a form, <form id="myform" class="form"> </form> that gets submitted to the server using jquery ajax. How can I refresh the form on success to show the updated form information and add a spinner until the form loads? here is my html and jquery snippet <div class="container"> <div class="page-header"> <div class="span2"> <!--Sidebar content--> <img src="img/emc_logo.png" title="EMC" > </div> <div class="span6"> <h2 class="form-wizard-heading">Configuration</h2> </div> </div> <form id="myform" class="form"> </form> </div> <!-- /container --> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3 id="myModalLabel">Configuration Changes</h3> <p><span class="label label-important">Please review your changes before submitting. Submitting the changes will result in rebooting the cluster</span></p> </div> <div class="modal-body"> <table class="table table-condensed table-striped" id="display"></table> </div> <div class="modal-footer"> <button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button id="save" class="btn btn-primary">Save changes</button> </div> </div> //Jquery part $(document).ready(function () { $('input').hover(function () { $(this).popover('show') }); // On mouseout destroy popout $('input').mouseout(function () { $(this).popover('destroy') }); $('#myform').on('submit', function (ev) { ev.preventDefault(); var data = $(this).serializeObject(); json_data = JSON.stringify(data); $('#myModal').modal('show'); $.each(data, function (key, val) { var tablefeed = $('<tr><td>' + key + '</td><td id="' + key + '">' + val + '</td><tr>').appendTo('#display'); }); $(".modal-body").html(tablefeed); }); $("#cancel").click(function () { $("#display").empty(); }); $(function () { $("#save").click(function () { // validate and process form here alert("button submitted" + json_data); $.ajax({ type: "POST", url: "somefile.json.", data: json_data, contentType: 'application/json', success: function (data, textStatus, xhr) { console.log(arguments); console.log(xhr.status); alert("Your form has been submitted: " + textStatus + xhr.status); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText + " - " + errorThrown + " : " + jqXHR.status); } }); }); }); });

    Read the article

  • What's a clean way to have the server return a JavaScript function which would then be invoked?

    - by Khnle
    My application is architected as a host of plug-ins that have not yet been written. There's a long reason for this, but with each new year, the business logic will be different and we don't know what it will be like (Think of TurboTax if that helps). The plug-ins consist of both server and client components. The server components deals with business logic and persisting the data into database tables which will be created at a later time as well. The JavaScript manipulates the DOM for the browsers to render afterward. Each plugin lives in a separate assembly, so that they won't disturb the main application, i.e., we don't want to recompile the main application. Long story short, I am looking for a way to return JavaScript functions to the client from an Ajax get request, and execute these JavaScript functions (which are just returned). Invoking a function in Javascript is easy. The hard part is how to organize or structure so that I won't have to deal with maintenance problem. So concat using StringBuilder to end up with JavaScript code as a result of calling toString() from the string builder object is out of the question. I want to have no difference between writing JavaScript codes normally and writing Javascript codes for this dynamic purpose. An alternative is to manipulate the DOM on the server side, but I doubt that it would be as elegantly as using jQuery on the client side. I am open for a C# library that supports chainable calls like jQuery that also manipulates the DOM too. Do you have any idea or is it too much to ask or are you too confused? Edit1: The point is to avoid recompiling, hence the plug-ins architecture. In some other parts of the program, I already use the concept of dynamically loading Javascript files. That works fine. What I am looking here is somewhere in the middle of the program when an Ajax request is sent to the server. Edit 2: To illustrate my question: Normally, you would see the following code. An Ajax request is sent to the server, a JSON result is returned to the client which then uses jQuery to manipulate the DOM (creating tag and adding to the container in this case). $.ajax({ type: 'get', url: someUrl, data: {'': ''}, success: function(data) { var ul = $('<ul>').appendTo(container); var decoded = $.parseJSON(data); $.each(decoded, function(i, e) { var li = $('<li>').text(e.FIELD1 + ',' + e.FIELD2 + ',' + e.FIELD3); ul.append(li); }); } }); The above is extremely simple. But next year, what the server returns is totally different and how the data to be rendered would also be different. In a way, this is what I want: var container = $('#some-existing-element-on-the-page'); $.ajax({ type: 'get', url: someUrl, data: {'': ''}, success: function(data) { var decoded = $.parseJSON(data); var fx = decoded.fx; var data = decode.data; //fx is the dynamic function that create the DOM from the data and append to the existing container fx(container, data); } }); I don't need to know, at this time what data would be like, but in the future I will, and I can then write fx accordingly.

    Read the article

  • z-index not working in IE8 with the sortable jQuery plugin

    - by Ojtwist
    I'm working with the jQuery Sortable plugin to drag and drop images from one box to another box. This works fine in ff,chrome and safari but it fails in IE8. It seems that when you start dragging that the image is send to the back. I've tried to solve this by adding the z-index option to the sortable plugin, i've tried appending it to a node higher in the hierarchy (body). It appears that setting a z-index on every other item in the page would fix this, haven't tried it yet and i'm not planning on doing this because this would mess up alot. So the user can drag an image from 1 gallery to the next gallery screenshot of how it should work: http://img69.imageshack.us/i/draganddrop.jpg/ Some html: <!--SECOND ARROCRDION ITEM --> <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a> <div> <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p> <form method="GET" action="javascript:;"> <p> <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" /> <button class="s3d-button flickr_search" id="flickr_seach_button"> <span class="s3d-button-inner" >__MSG__SEARCH__</span> </button> <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" /> <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a> </p> </form> <div id="flickr_input_error">__MSG__INPUT_ERROR__</div> <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div> **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>** <div id="flickr_key_pagging" ></div> </div> </div> <!--SLIDING SIDEBAR --> <div id="flickr_sidebar" class="jcarousel-skin-tango"> <div id="flickr_side_paging"></div> **<ul> <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li> </ul>** </div> The images get rendered into the ul, so basically it's just an ul with li's with images javascript for sortable: horizontal: { helper: "clone", // Instead of dragging the real image a copy will be dragged connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected cursor: 'pointer', //change the cursor when dragging opacity: 0.50, //Change the opacity while dragging appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped containment: 'body', //Make sure the user can't drag the images outside the widget revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position zIndex: 9999 } I've tried it with setting the dragged image to absolute and the container on relative... doesn't work Anyone know how to solve this in IE8 ?

    Read the article

  • Optimizing JS Array Search

    - by The.Anti.9
    I am working on a Browser-based media player which is written almost entirely in HTML 5 and JavaScript. The backend is written in PHP but it has one function which is to fill the playlist on the initial load. And the rest is all JS. There is a search bar that refines the playlist. I want it to refine as the person is typing, like most media players do. The only problem with this is that it is very slow and laggy as there are about 1000 songs in the whole program and there is likely to be more as time goes on. The original playlist load is an ajax call to a PHP page that returns the results as JSON. Each item has 4 attirbutes: artist album file url I then loop through each object and add it to an array called playlist. At the end of the looping a copy of playlist is created, backup. This is so that I can refine the playlist variable when people refine their search, but still repopulated it from backup without making another server request. The method refine() is called when the user types a key into the searchbox. It flushes playlist and searches through each property (not including url) of each object in the backup array for a match in the string. If there is a match in any of the properties, it appends the information to a table that displays the playlist, and adds it to the object to playlist for access by the actual player. Code for the refine() method: function refine() { $('#loadinggif').show(); $('#library').html("<table id='libtable'><tr><th>Artist</th><th>Album</th><th>File</th><th>&nbsp;</th></tr></table>"); playlist = []; for (var j = 0; j < backup.length; j++) { var sfile = new String(backup[j].file); var salbum = new String(backup[j].album); var sartist = new String(backup[j].artist); if (sfile.toLowerCase().search($('#search').val().toLowerCase()) !== -1 || salbum.toLowerCase().search($('#search').val().toLowerCase()) !== -1 || sartist.toLowerCase().search($('#search').val().toLowerCase()) !== -1) { playlist.push(backup[j]); num = playlist.length-1; $("<tr></tr>").html("<td>" + num + "</td><td>" + sartist + "</td><td>" + salbum + "</td><td>" + sfile + "</td><td><a href='#' onclick='setplay(" + num +");'>Play</a></td>").appendTo('#libtable'); } } $('#loadinggif').hide(); } As I said before, for the first couple of letters typed, this is very slow and laggy. I am looking for ways to refine this to make it much faster and more smooth.

    Read the article

  • CSS + jQuery - Unable to perform .toggle() and repeated jQueryTemplate Item [I must warn you this is a bit overwhelming]

    - by user1027620
    Okay here we go: Stream.html (Template file) <div class="streamItem clearfix"> <input type="button" /> <div class="clientStrip"> <img src="" alt="${Sender}" /> </div> <div class="clientView"> <a href="#" class="clientName">${Sender}</a> <p>${Value}</p> <p>${DateTime}</p> <div class="itemGadgets"> <ul> <li class="toggleInput">Value</li> <li></li> </ul> </div> <div class="inputContainer"> <input type="text" value="" /> </div> </div> </div> <div class="spacer" /> Default.aspx (jQuery) $('.toggleInput').live('click', function () { $(this).parent().parent() .find('.inputContainer').toggle(); $(this).parent().parent().find('.inputContainer') .find('input[type=text]').focus(); }); Update: The above has been changed to: $('.toggleInput').live('click', function () { $(this).closest(".clientView").find(".inputContainer").toggle() $(this).closest(".clientView").find(".inputContainer") .find('input[type=text]').focus(); }); Issues with jQuery: I have comments that belong to each .streamItem. My previous solution was to use ListView control as follows: <ItemTemplate> <asp:Panel ID="StreamItem" CssClass="StreamItem" runat="server"> ... <!-- Insert another nested ListView control here to load the comments for the parent stream. --> So as you can see, this is not a solution since I started using jQuery Templates and I am fetching the data using the following jQuery $.ajax method: $.ajax({ type: 'POST', url: 'Services.asmx/GetStream', data: "{}", contentType: 'application/json', success: function (Stream) { $.get('Templates/Stream.html', function (template) { $.tmpl(template, Stream.d).appendTo("#Stream"); }); } }); How can I resolve this without using the old ListView solution but by using jQuery Templates to load the comments whenever I am getting data for a specific stream? I am using a simple WebMethod to return my data as follows: [WebMethod] public List<Stream> GetStream() { List<Stream> Streams = Stream.GetRange(X, X, HttpContext.Current.User.Identity.Name); return Streams; } I am looking for a way to handle the .toggleInput click event. I need check if .Comments (a main container for the (to be comments container <div>)) has children (or more than one .commentItem). If so, then I need to show that .inputContainer and hide all the other .inputContainer divs with .Comments size() == 0 if they're visible. Please see the image below: Default.aspx (Partial CSS) div.streamItem div.clientView { float : left; width : 542px; } div.streamItem div.clientView p { margin : 5px 0 0 0; font-size : 10pt; } div.streamItem div.clientView div.inputContainer { display : none; /* Doesn't hide .inputContainer */ padding : 2px; background-color : #f1f1f1; } Issues with CSS: On page load, display: none; has no effect. That's it! If you're reading this I'd like to thank you for your time and thoughts! :)

    Read the article

  • posting array of text fields using jquery and ajax

    - by tabia
    i dont want to use serialize() function please help me with this. I am a beginner html <input type='button' value='Add Tier Flavor' id='Add'> <input type='button' value='Remove Tier Flavor' id='Remove'> <div id='batch'> <div id="BatchDiv1"> <h4>Batch #1 :</h4> <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br> <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br> <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br> </div> </div> <br> </div> this is a dynamically added fields using javascript the code is: javascript <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#Add").click(function () { if(counter>5){ alert("Only 5 Tiers allow"); return false; } var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter); newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' + '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+ '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+ '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' ); newBatchBoxDiv.appendTo("#batch"); counter++; }); $("#Remove").click(function () { if(counter==1){ alert("No more tier to remove"); return false; } counter--; $("#BatchDiv" + counter).remove(); }); }); </script> i am trying to post the values in an array to post it onto next .php page i am using this var user_cupfl = $('input[name^="fl"]').serialize(); var user_cupfi = $('input[name^="fi"]').serialize(); var user_cupfr = $('input[name^="fr"]').serialize(); serialize is not passing the values. :( on second page i am trying to mail it using $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>"; $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>"; $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>"; i m posting array like this $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING); $user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING); $user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING); your replies will be highly appreciated

    Read the article

  • A Closable jQuery Plug-in

    - by Rick Strahl
    In my client side development I deal a lot with content that pops over the main page. Be it data entry ‘windows’ or dialogs or simple pop up notes. In most cases this behavior goes with draggable windows, but sometimes it’s also useful to have closable behavior on static page content that the user can choose to hide or otherwise make invisible or fade out. Here’s a small jQuery plug-in that provides .closable() behavior to most elements by using either an image that is provided or – more appropriately by using a CSS class to define the picture box layout. /* * * Closable * * Makes selected DOM elements closable by making them * invisible when close icon is clicked * * Version 1.01 * @requires jQuery v1.3 or later * * Copyright (c) 2007-2010 Rick Strahl * http://www.west-wind.com/ * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php Support CSS: .closebox { position: absolute; right: 4px; top: 4px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 0.95; filter: alpha(opacity="100"); } Options: * handle Element to place closebox into (like say a header). Use if main element and closebox container are two different elements. * closeHandler Function called when the close box is clicked. Return true to close the box return false to keep it visible. * cssClass The CSS class to apply to the close box DIV or IMG tag. * imageUrl Allows you to specify an explicit IMG url that displays the close icon. If used bypasses CSS image styling. * fadeOut Optional provide fadeOut speed. Default no fade out occurs */ (function ($) { $.fn.closable = function (options) { var opt = { handle: null, closeHandler: null, cssClass: "closebox", imageUrl: null, fadeOut: null }; $.extend(opt, options); return this.each(function (i) { var el = $(this); var pos = el.css("position"); if (!pos || pos == "static") el.css("position", "relative"); var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el; var div = opt.imageUrl ? $("<img>").attr("src", opt.imageUrl).css("cursor", "pointer") : $("<div>"); div.addClass(opt.cssClass) .click(function (e) { if (opt.closeHandler) if (!opt.closeHandler.call(this, e)) return; if (opt.fadeOut) $(el).fadeOut(opt.fadeOut); else $(el).hide(); }); if (opt.imageUrl) div.css("background-image", "none"); h.append(div); }); } })(jQuery); The plugin can be applied against any selector that is a container (typically a div tag). The close image or close box is provided typically by way of a CssClass - .closebox by default – which supplies the image as part of the CSS styling. The default styling for the box looks something like this: .closebox { position: absolute; right: 4px; top: 4px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 0.95; filter: alpha(opacity="100"); } Alternately you can also supply an image URL which overrides the background image in the style sheet. I use this plug-in mostly on pop up windows that can be closed, but it’s also quite handy for remove/delete behavior in list displays like this: you can find this sample here to look to play along: http://www.west-wind.com/WestwindWebToolkit/Samples/Ajax/AmazonBooks/BooksAdmin.aspx For closable windows it’s nice to have something reusable because in my client framework there are lots of different kinds of windows that can be created: Draggables, Modal Dialogs, HoverPanels etc. and they all use the client .closable plug-in to provide the closable operation in the same way with a few options. Plug-ins are great for this sort of thing because they can also be aggregated and so different components can pick and choose the behavior they want. The window here is a draggable, that’s closable and has shadow behavior and the server control can simply generate the appropriate plug-ins to apply to the main <div> tag: $().ready(function() { $('#ctl00_MainContent_panEditBook') .closable({ handle: $('#divEditBook_Header') }) .draggable({ dragDelay: 100, handle: '#divEditBook_Header' }) .shadow({ opacity: 0.25, offset: 6 }); }) The window is using the default .closebox style and has its handle set to the header bar (Book Information). The window is just closable to go away so no event handler is applied. Actually I cheated – the actual page’s .closable is a bit more ugly in the sample as it uses an image from a resources file: .closable({ imageUrl: '/WestWindWebToolkit/Samples/WebResource.axd?d=TooLongAndNastyToPrint', handle: $('#divEditBook_Header')}) so you can see how to apply a custom image, which in this case is generated by the server control wrapping the client DragPanel. More interesting maybe is to apply the .closable behavior to list scenarios. For example, each of the individual items in the list display also are .closable using this plug-in. Rather than having to define each item with Html for an image, event handler and link, when the client template is rendered the closable behavior is attached to the list. Here I’m using client-templating and the code that this is done with looks like this: function loadBooks() { showProgress(); // Clear the content $("#divBookListWrapper").empty(); var filter = $("#" + scriptVars.lstFiltersId).val(); Proxy.GetBooks(filter, function(books) { $(books).each(function(i) { updateBook(this); showProgress(true); }); }, onPageError); } function updateBook(book,highlight) { // try to retrieve the single item in the list by tag attribute id var item = $(".bookitem[tag=" +book.Pk +"]"); // grab and evaluate the template var html = parseTemplate(template, book); var newItem = $(html) .attr("tag", book.Pk.toString()) .click(function() { var pk = $(this).attr("tag"); editBook(this, parseInt(pk)); }) .closable({ closeHandler: function(e) { removeBook(this, e); }, imageUrl: "../../images/remove.gif" }); if (item.length > 0) item.after(newItem).remove(); else newItem.appendTo($("#divBookListWrapper")); if (highlight) { newItem .addClass("pulse") .effect("bounce", { distance: 15, times: 3 }, 400); setTimeout(function() { newItem.removeClass("pulse"); }, 1200); } } Here the closable behavior is applied to each of the items along with an event handler, which is nice and easy compared to having to embed the right HTML and click handling into each item in the list individually via markup. Ideally though (and these posts make me realize this often a little late) I probably should set up a custom cssClass to handle the rendering – maybe a CSS class called .removebox that only changes the image from the default box image. This example also hooks up an event handler that is fired in response to the close. In the list I need to know when the remove button is clicked so I can fire of a service call to the server to actually remove the item from the database. The handler code can also return false; to indicate that the window should not be closed optionally. Returning true will close the window. You can find more information about the .closable class behavior and options here: .closable Documentation Plug-ins make Server Control JavaScript much easier I find this plug-in immensely useful especial as part of server control code, because it simplifies the code that has to be generated server side tremendously. This is true of plug-ins in general which make it so much easier to create simple server code that only generates plug-in options, rather than full blocks of JavaScript code.  For example, here’s the relevant code from the DragPanel server control which generates the .closable() behavior: if (this.Closable && !string.IsNullOrEmpty(DragHandleID) ) { string imageUrl = this.CloseBoxImage; if (imageUrl == "WebResource" ) imageUrl = ScriptProxy.GetWebResourceUrl(this, this.GetType(), ControlResources.CLOSE_ICON_RESOURCE); StringBuilder closableOptions = new StringBuilder("imageUrl: '" + imageUrl + "'"); if (!string.IsNullOrEmpty(this.DragHandleID)) closableOptions.Append(",handle: $('#" + this.DragHandleID + "')"); if (!string.IsNullOrEmpty(this.ClientDialogHandler)) closableOptions.Append(",handler: " + this.ClientDialogHandler); if (this.FadeOnClose) closableOptions.Append(",fadeOut: 'slow'"); startupScript.Append(@" .closable({ " + closableOptions + "})"); } The same sort of block is then used for .draggable and .shadow which simply sets options. Compared to the code I used to have in pre-jQuery versions of my JavaScript toolkit this is a walk in the park. In those days there was a bunch of JS generation which was ugly to say the least. I know a lot of folks frown on using server controls, especially the UI is client centric as the example is. However, I do feel that server controls can greatly simplify the process of getting the right behavior attached more easily and with the help of IntelliSense. Often the script markup is easier is especially if you are dealing with complex, multiple plug-in associations that often express more easily with property values on a control. Regardless of whether server controls are your thing or not this plug-in can be useful in many scenarios. Even in simple client-only scenarios using a plug-in with a few simple parameters is nicer and more consistent than creating the HTML markup over and over again. I hope some of you find this even a small bit as useful as I have. Related Links Download jquery.closable West Wind Web Toolkit jQuery Plug-ins © Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery   ASP.NET  JavaScript  

    Read the article

  • A Closable jQuery Plug-in

    - by Rick Strahl
    In my client side development I deal a lot with content that pops over the main page. Be it data entry ‘windows’ or dialogs or simple pop up notes. In most cases this behavior goes with draggable windows, but sometimes it’s also useful to have closable behavior on static page content that the user can choose to hide or otherwise make invisible or fade out. Here’s a small jQuery plug-in that provides .closable() behavior to most elements by using either an image that is provided or – more appropriately by using a CSS class to define the picture box layout. /* * * Closable * * Makes selected DOM elements closable by making them * invisible when close icon is clicked * * Version 1.01 * @requires jQuery v1.3 or later * * Copyright (c) 2007-2010 Rick Strahl * http://www.west-wind.com/ * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php Support CSS: .closebox { position: absolute; right: 4px; top: 4px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 0.95; filter: alpha(opacity="100"); } Options: * handle Element to place closebox into (like say a header). Use if main element and closebox container are two different elements. * closeHandler Function called when the close box is clicked. Return true to close the box return false to keep it visible. * cssClass The CSS class to apply to the close box DIV or IMG tag. * imageUrl Allows you to specify an explicit IMG url that displays the close icon. If used bypasses CSS image styling. * fadeOut Optional provide fadeOut speed. Default no fade out occurs */ (function ($) { $.fn.closable = function (options) { var opt = { handle: null, closeHandler: null, cssClass: "closebox", imageUrl: null, fadeOut: null }; $.extend(opt, options); return this.each(function (i) { var el = $(this); var pos = el.css("position"); if (!pos || pos == "static") el.css("position", "relative"); var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el; var div = opt.imageUrl ? $("<img>").attr("src", opt.imageUrl).css("cursor", "pointer") : $("<div>"); div.addClass(opt.cssClass) .click(function (e) { if (opt.closeHandler) if (!opt.closeHandler.call(this, e)) return; if (opt.fadeOut) $(el).fadeOut(opt.fadeOut); else $(el).hide(); }); if (opt.imageUrl) div.css("background-image", "none"); h.append(div); }); } })(jQuery); The plugin can be applied against any selector that is a container (typically a div tag). The close image or close box is provided typically by way of a CssClass - .closebox by default – which supplies the image as part of the CSS styling. The default styling for the box looks something like this: .closebox { position: absolute; right: 4px; top: 4px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 0.95; filter: alpha(opacity="100"); } Alternately you can also supply an image URL which overrides the background image in the style sheet. I use this plug-in mostly on pop up windows that can be closed, but it’s also quite handy for remove/delete behavior in list displays like this: you can find this sample here to look to play along: http://www.west-wind.com/WestwindWebToolkit/Samples/Ajax/AmazonBooks/BooksAdmin.aspx For closable windows it’s nice to have something reusable because in my client framework there are lots of different kinds of windows that can be created: Draggables, Modal Dialogs, HoverPanels etc. and they all use the client .closable plug-in to provide the closable operation in the same way with a few options. Plug-ins are great for this sort of thing because they can also be aggregated and so different components can pick and choose the behavior they want. The window here is a draggable, that’s closable and has shadow behavior and the server control can simply generate the appropriate plug-ins to apply to the main <div> tag: $().ready(function() { $('#ctl00_MainContent_panEditBook') .closable({ handle: $('#divEditBook_Header') }) .draggable({ dragDelay: 100, handle: '#divEditBook_Header' }) .shadow({ opacity: 0.25, offset: 6 }); }) The window is using the default .closebox style and has its handle set to the header bar (Book Information). The window is just closable to go away so no event handler is applied. Actually I cheated – the actual page’s .closable is a bit more ugly in the sample as it uses an image from a resources file: .closable({ imageUrl: '/WestWindWebToolkit/Samples/WebResource.axd?d=TooLongAndNastyToPrint', handle: $('#divEditBook_Header')}) so you can see how to apply a custom image, which in this case is generated by the server control wrapping the client DragPanel. More interesting maybe is to apply the .closable behavior to list scenarios. For example, each of the individual items in the list display also are .closable using this plug-in. Rather than having to define each item with Html for an image, event handler and link, when the client template is rendered the closable behavior is attached to the list. Here I’m using client-templating and the code that this is done with looks like this: function loadBooks() { showProgress(); // Clear the content $("#divBookListWrapper").empty(); var filter = $("#" + scriptVars.lstFiltersId).val(); Proxy.GetBooks(filter, function(books) { $(books).each(function(i) { updateBook(this); showProgress(true); }); }, onPageError); } function updateBook(book,highlight) { // try to retrieve the single item in the list by tag attribute id var item = $(".bookitem[tag=" +book.Pk +"]"); // grab and evaluate the template var html = parseTemplate(template, book); var newItem = $(html) .attr("tag", book.Pk.toString()) .click(function() { var pk = $(this).attr("tag"); editBook(this, parseInt(pk)); }) .closable({ closeHandler: function(e) { removeBook(this, e); }, imageUrl: "../../images/remove.gif" }); if (item.length > 0) item.after(newItem).remove(); else newItem.appendTo($("#divBookListWrapper")); if (highlight) { newItem .addClass("pulse") .effect("bounce", { distance: 15, times: 3 }, 400); setTimeout(function() { newItem.removeClass("pulse"); }, 1200); } } Here the closable behavior is applied to each of the items along with an event handler, which is nice and easy compared to having to embed the right HTML and click handling into each item in the list individually via markup. Ideally though (and these posts make me realize this often a little late) I probably should set up a custom cssClass to handle the rendering – maybe a CSS class called .removebox that only changes the image from the default box image. This example also hooks up an event handler that is fired in response to the close. In the list I need to know when the remove button is clicked so I can fire of a service call to the server to actually remove the item from the database. The handler code can also return false; to indicate that the window should not be closed optionally. Returning true will close the window. You can find more information about the .closable class behavior and options here: .closable Documentation Plug-ins make Server Control JavaScript much easier I find this plug-in immensely useful especial as part of server control code, because it simplifies the code that has to be generated server side tremendously. This is true of plug-ins in general which make it so much easier to create simple server code that only generates plug-in options, rather than full blocks of JavaScript code.  For example, here’s the relevant code from the DragPanel server control which generates the .closable() behavior: if (this.Closable && !string.IsNullOrEmpty(DragHandleID) ) { string imageUrl = this.CloseBoxImage; if (imageUrl == "WebResource" ) imageUrl = ScriptProxy.GetWebResourceUrl(this, this.GetType(), ControlResources.CLOSE_ICON_RESOURCE); StringBuilder closableOptions = new StringBuilder("imageUrl: '" + imageUrl + "'"); if (!string.IsNullOrEmpty(this.DragHandleID)) closableOptions.Append(",handle: $('#" + this.DragHandleID + "')"); if (!string.IsNullOrEmpty(this.ClientDialogHandler)) closableOptions.Append(",handler: " + this.ClientDialogHandler); if (this.FadeOnClose) closableOptions.Append(",fadeOut: 'slow'"); startupScript.Append(@" .closable({ " + closableOptions + "})"); } The same sort of block is then used for .draggable and .shadow which simply sets options. Compared to the code I used to have in pre-jQuery versions of my JavaScript toolkit this is a walk in the park. In those days there was a bunch of JS generation which was ugly to say the least. I know a lot of folks frown on using server controls, especially the UI is client centric as the example is. However, I do feel that server controls can greatly simplify the process of getting the right behavior attached more easily and with the help of IntelliSense. Often the script markup is easier is especially if you are dealing with complex, multiple plug-in associations that often express more easily with property values on a control. Regardless of whether server controls are your thing or not this plug-in can be useful in many scenarios. Even in simple client-only scenarios using a plug-in with a few simple parameters is nicer and more consistent than creating the HTML markup over and over again. I hope some of you find this even a small bit as useful as I have. Related Links Download jquery.closable West Wind Web Toolkit jQuery Plug-ins © Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery   ASP.NET  JavaScript  

    Read the article

< Previous Page | 7 8 9 10 11 12  | Next Page >