Search Results

Search found 3653 results on 147 pages for 'val smith'.

Page 140/147 | < Previous Page | 136 137 138 139 140 141 142 143 144 145 146 147  | Next Page >

  • jQuery doesn't work in IE8?

    - by Wade D Ouellet
    Hi, I am working on a site here: mfm.treethink.net All the jquery works fine in Firefox, Chrome and Safari but on IE8 it gives me errors and the banner at the top doesn't work (which uses the crossSlide jQuery plugin) and as well the image rollovers don't work with the colour change. IE8 is telling me that the errors are on lines 53, 134 and 149 in the source, all of those lines are where the jquery function is declared. $(document).ready(function(){ I am running jquery 1.4. Oddly enough, the other piece of jQuery I have on that page works, the artist browse/select menu on the right. But the banner and image rollovers don't. Here are all the scripts I'm running: 1: the banner - doesn't work in IE8 <script type="text/javascript"> $(function() { $('#banner').crossSlide({ sleep: 5, fade: 1 }, [ <?php $pages = get_posts('numberposts=2000&post_type=artist&post_status=publish'); $i = 1; foreach( $pages as $page ) { $content = $page->post_title; if( empty($content) ) continue; $content = apply_filters('the_content', $content); ?> { src: '/wp-content/uploads/<?php echo $page->post_name ?>.jpg' }, <?php $i++; } ?> ]); }); </script> 2 - image rollovers - doesn't work in IE8 <script type="text/javascript"> $(function(){ $("ul#artists li").hover(function() { /* On hover */ var thumbOver = $(this).find("img").attr("src"); /* Find image source */ /* Swap background */ $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') center bottom no-repeat'}); $(this).find("span").stop().fadeTo('fast', 0 , function() { $(this).hide() }); } , function() { $(this).find("span").stop().fadeTo('fast', 1).show(); }); }); </script> 3 - the artist select - works in IE 8 <script> $("#browse-select").change(function() { window.location.href = $(this).val(); }); </script> These scripts were done by referencing previously made scripts, like I said I'm still new to jQuery. The second works in IE8 and the first one is the one that doesn't. I noticed the third one, the only one working, is written differently than the first two non-working ones without a function declaration at the top. Could this have anything to do with it? Any help figuring out this problem would be so appreciated. Thanks a lot, Wade

    Read the article

  • javascript - multiple dependent/cascading/chained select boxes on same form

    - by Aaron
    I'm populating select box options via jquery and json but I'm not sure how to address multiple instances of the same chained select boxes within my form. Because the select boxes are only rendered when needed some records will have ten sets of chained select boxes and others will only need one. How does one generate unique selects to support the auto population of secondary select options? Here's the code I'm using, and I thank you in advance for any insight you may provide. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function populateACD() { $.getJSON('/acd/acd2json.php', {acdSelect:$('#acdSelect').val()}, function(data) { var select = $('#acd2'); var options = select.attr('options'); $('option', select).remove(); $.each(data, function(index, array) { options[options.length] = new Option(array['ACD2']); }); }); } $(document).ready(function() { populateACD(); $('#acdSelect').change(function() { populateACD(); }); }); </script> <?php require_once('connectvars.php'); $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); $squery = "SELECT ACD1ID, ACD1 from ACD1"; $sdata = mysqli_query($dbc, $squery); // Loop through the array of ACD1s, placing them into an option of a select echo '<select name="acdSelect" id="acdSelect">'; while ($row = mysqli_fetch_array($sdata)) { echo "<option value=" . $row['ACD1ID'] . ">" . $row['ACD1'] . "</option>\n"; } echo '</select><br /><br />'; <select name="acd2" id="acd2"> </select> acd2json.php <?php $dsn = "mysql:host=localhost;dbname=wfn"; $user = "acd"; $pass = "***************"; $pdo = new PDO($dsn, $user, $pass); $rows = array(); if(isset($_GET['acdSelect'])) { $stmt = $pdo->prepare("SELECT ACD2 FROM ACD2 WHERE ACD1ID = ? ORDER BY ACD2"); $stmt->execute(array($_GET['acdSelect'])); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); } echo json_encode($rows); ?>

    Read the article

  • Loading a Page into a jQuery Dialog

    - by Dave
    I tend to follow a fairly "modular" approach to building applications and I recently started working with jQuery. The application I'm working on is going to be fairly large so I'm trying to break pieces out into separate files/modules when possible. One example of this is a "User Settings" dialog. This dialog has a form, a few tabs, and quite a good number of input fields so I want to develop it in a separate HTML file (PHP actually, but it can be considered HTML for the purposes of this example). It's an entire page in and of itself with all the tags you would expect such as: <html><head></head><body></body></html> So I can now develop, what I want to be, the dialog separate from the base application. This dialog has it's own Javascript (A LOT of Javascript, in fact) in the head as well, with jQuery $(document).ready(){} capturing, etc. Everything works flawlessly in isolation. However, when I attempt to load the jQuery modal dialog with the page (inside of the main application page), as one might expect, trouble ensues. Here's a brief, very simple, example of what it looks like: editUserDialog.load ("editUser.php", {id : $('#userList').val(), popup : "true"}, function () { editUserDialog.dialog ("option", "title" , "Edit User"); editUserDialog.dialog ('open'); }); (I'm passing in a "popup" flag to the page so that the page can determine its context -- i.e. as a page or inside of the jQuery dialog). Question 1: When I moved the code from the "head" into "body" (in the editUser.php page) it actually worked for the most part. It seemed that jQuery was calling the $(document).ready() function in the context of the body of the loaded file and not the head. Is this a bad idea? Question 2: Is my process for building this application just totally flawed to begin with? I've scoured the net to attempt to find a "best practices" sort of document to building reasonably large applications using jQuery/PHP without a lot of success so maybe there's something out there someone else is aware of that I've somehow missed. Thanks for bearing with me while I attempt to describe the issues I've encountered and I hope I've accurately described the problem.

    Read the article

  • JQuery Tooltip Plugin from Jorn

    - by Jeff Ancel
    I am thinking someone may have run across this one, but not sure. From a high level, I am trying to roll over a input [type=text] and display a tool tip (with the contained value) using the plugin available at http://bassitance.de. I have to use titles and classes for validation on the specific elements, so I put a blank div to hold the input [type=text] value for the roll over. Issue: It won't hold the value of 2 text boxes at once. Once I put a value in the box on the right, the tooltip on the left goes away. Same thing if I switch it aroun. I can't keep a tooltip on more than one element. Here is the code (Note: You will have to download the plugins in the source as I am not sure where the live versions are if there are any). <link rel="stylesheet" href="/scripts/jquery-tooltip/jquery.tooltip.css" /> <script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/scripts/jquery-tooltip/jquery.tooltip.min.js"></script> <script type="text/javascript"> $(function(){ $("input").change(function(){ var newTitle = $(this).val(); $(this).parent().attr("title",newTitle); // re-init tool tip reload(); }); // Init tooltip reload(); }); reload = function(){ $("div").tooltip(); } </script> <body> <table border="1px solid black"> <tr> <td title="hello"> <div> <input type="text" value=""/> </div> </td> <td> <div> <input type="text" value=""/> </div> </td> </tr> </table> <div id="debug"></div> </body> </html>

    Read the article

  • Filter Calendar view SharePoint WWS 3.0

    - by lerac
    Hi all, I have a SP site with a calendarview and would like to filter this on the basis of the current user. Don't be afraid I already figured out how do to this with a list customizing some excisting jScripts and working with Content Editor WebPart. Yet this jScript does not work in a Calendar. To paint a picture I have columns like: Judge1 Lawyer Clerk (example). Underneath these columns there are names ofcourse. However these are not shown in Calendar view, so it is hard to filter on something that is not displayed only the casenumbers. Now I've been thinking (not always wise) perhaps I can adjust the aspx page of calendar/list by adjusting a filter I applied in SharePoint. This would also solve the issue of displaying all the content before it filters with Java, since it should not be possible for users to see the entire listcontent (security). I went to Modify list view and created a filter where judge1 = Mr. J. Jenkins. Then I went to SharePoint Designer and opend the Calendar aspx page. To my expectation I found Mr. J. Jenkins with the following code: Since I can't display image because i'm new, not very handy discrimination I have to give you a url. Code can't be pasted either is completely messes it up even with codemode on. Hyperlink CODE IMAGE Keep in mind I just posted a very tiny part of the code (only the part I want to change). Now I have no idea what kind of code this is above this text (SP wss 3.0 uses for aspx pages), but I would like to change Mr. J. Jenkins into a jScript var/val. Since I already managed to get the current user that is logged in content. var user = jP.getUserProfile(); var userinfspvalue = user.Department; There is more code around that one 2 ofcourse, yet to give you a picture. The var userinfspvalue is what I would like to replace the text Mr. J. Jenkins into. This would mean the calendar would be dynamically filtered based upon the current user that is logged on. Have no idea what is possible, perhaps there is a better solution who knows... Do you know? Thank you so much ahead!

    Read the article

  • Difficulty getting Saxon into XQuery mode instead of XSLT

    - by Rosarch
    I'm having difficulty getting XQuery to work. I downloaded Saxon-HE 9.2. It seems to only want to work with XSLT. When I type: java -jar saxon9he.jar I get back usage information for XSLT. When I use the command syntax for XQuery, it doesn't recognize the parameters (like -q), and gives XSLT usage information. Here are some command line interactions: >java -jar saxon9he.jar No source file name Saxon-HE 9.2.0.6J from Saxonica Usage: see http://www.saxonica.com/documentation/using-xsl/commandline.html Options: -a Use xml-stylesheet PI, not -xsl argument -c:filename Use compiled stylesheet from file -config:filename Use configuration file -cr:classname Use collection URI resolver class -dtd:on|off Validate using DTD -expand:on|off Expand defaults defined in schema/DTD -explain[:filename] Display compiled expression tree -ext:on|off Allow|Disallow external Java functions -im:modename Initial mode -ief:class;class;... List of integrated extension functions -it:template Initial template -l:on|off Line numbering for source document -m:classname Use message receiver class -now:dateTime Set currentDateTime -o:filename Output file or directory -opt:0..10 Set optimization level (0=none, 10=max) -or:classname Use OutputURIResolver class -outval:recover|fatal Handling of validation errors on result document -p:on|off Recognize URI query parameters -r:classname Use URIResolver class -repeat:N Repeat N times for performance measurement -s:filename Initial source document -sa Use schema-aware processing -strip:all|none|ignorable Strip whitespace text nodes -t Display version and timing information -T[:classname] Use TraceListener class -TJ Trace calls to external Java functions -tree:tiny|linked Select tree model -traceout:file|#null Destination for fn:trace() output -u Names are URLs not filenames -val:strict|lax Validate using schema -versionmsg:on|off Warn when using XSLT 1.0 stylesheet -warnings:silent|recover|fatal Handling of recoverable errors -x:classname Use specified SAX parser for source file -xi:on|off Expand XInclude on all documents -xmlversion:1.0|1.1 Version of XML to be handled -xsd:file;file.. Additional schema documents to be loaded -xsdversion:1.0|1.1 Version of XML Schema to be used -xsiloc:on|off Take note of xsi:schemaLocation -xsl:filename Stylesheet file -y:classname Use specified SAX parser for stylesheet --feature:value Set configuration feature (see FeatureKeys) -? Display this message param=value Set stylesheet string parameter +param=filename Set stylesheet document parameter ?param=expression Set stylesheet parameter using XPath !option=value Set serialization option >java -jar saxon9he.jar -q:"..\w3xQueryTut.xq" Unknown option -q:..\w3xQueryTut.xq Saxon-HE 9.2.0.6J from Saxonica Usage: see http://www.saxonica.com/documentation/using-xsl/commandline.html Options: -a Use xml-stylesheet PI, not -xsl argument // etc... >java net.sf.saxon.Query -q:"..\w3xQueryTut.xq" Exception in thread "main" java.lang.NoClassDefFoundError: net/sf/saxon/Query Caused by: java.lang.ClassNotFoundException: net.sf.saxon.Query // etc... Could not find the main class: net.sf.saxon.Query. Program will exit. I'm probably making some stupid mistake. Do you know what it could be?

    Read the article

  • How to call function that inside JQuery Plugin From outside the plugin?

    - by CaTz
    hi, i am using textarea elastic plugin JQuery. this is the plugin (function(jQuery){ jQuery.fn.extend({ elastic: function() { // We will create a div clone of the textarea // by copying these attributes from the textarea to the div. var mimics = [ 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontSize', 'lineHeight', 'fontFamily', 'width', 'fontWeight']; return this.each( function() { // Elastic only works on textareas if ( this.type != 'textarea' ) { return false; } var $textarea = jQuery(this), $twin = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}), lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'), minheight = parseInt($textarea.css('height'),10) || lineHeight*3, maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE, goalheight = 0, i = 0; // Opera returns max-height of -1 if not set if (maxheight < 0) { maxheight = Number.MAX_VALUE; } // Append the twin to the DOM // We are going to meassure the height of this, not the textarea. $twin.appendTo($textarea.parent()); // Copy the essential styles (mimics) from the textarea to the twin var i = mimics.length; while(i--){ $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString())); } // Sets a given height and overflow state on the textarea function setHeightAndOverflow(height, overflow){ curratedHeight = Math.floor(parseInt(height,10)); if($textarea.height() != curratedHeight){ $textarea.css({'height': curratedHeight + 'px','overflow':overflow}); } } // This function will update the height of the textarea if necessary function update() { // Get curated content from the textarea. var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/ /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />'); var twinContent = $twin.html(); if(textareaContent+'&nbsp;' != twinContent){ // Add an extra white space so new rows are added when you are at the end of a row. $twin.html(textareaContent+'&nbsp;'); // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height if(Math.abs($twin.height()+lineHeight/3 - $textarea.height()) > 3){ var goalheight = $twin.height()+lineHeight/3; if(goalheight >= maxheight) { setHeightAndOverflow(maxheight,'auto'); } else if(goalheight <= minheight) { setHeightAndOverflow(minheight,'hidden'); } else { setHeightAndOverflow(goalheight,'hidden'); } } } } // Hide scrollbars $textarea.css({'overflow':'hidden'}); // Update textarea size on keyup $textarea.keyup(function(){ update(); }); $textarea.focus(function(){ update(); }); // And this line is to catch the browser paste event $textarea.live('input paste',function(e){ setTimeout( update, 250); }); // Run update once when elastic is initialized update(); }); } }); })(jQuery); How can i call from the outside of the plugin to the update function that is inside?

    Read the article

  • jQuery Ajax (beforeSend and complete) working properly on FireFox but not on IE8 and Chrome

    - by Farhan Zia
    I am using jQuery ajax version 1.4.1 in my MVC application (though the issue I am discussing was same with the old jQuery version 3.2.1) as well, to check during customer registration if the username is already registered. As the user clicks on the "Check Availibility" button, I am showing a busy image in place of the check button (actually hiding the check button and showing the image) while checking the availibility on the server and then displaying a message. It is a Sync call (async: false) and I used beforeSend: and complete: to show and hide the busy image and the check button. This thing is working well on Firefox but in IE 8 and Chrome, neither the busy image appear nor the check button hides rather the check button remained pressed as the whole thing has hanged. The available and not available messages appear correctly though. Below is the code: HTML in a User Control (ascx): (i have replaced the angular braces with square below) [div id="available"]This Username is Available [div id="not_available"]This Username is not available [input id="txtUsername" name="txtUsername" type="text" size="50" /]  [button id="check" name="check" type="button"]Check Availability[/button] [img id="busy" src="/Content/Images/busy.gif" /] On the top of this user control, I am linking an external javascript file that has the following code: $(document).ready(function() { $('img#busy').hide(); $('div#available').hide(); $('div#not_available').hide(); $("button#check").click(function() { var available = checkUsername($("input#txtUsername").val()); if (available == "1") { $("div#available").show(); $("div#not_available").hide(); } else { $("div#available").hide(); $("div#not_available").show(); } }); }); function checkUsername(username) { $.ajax({ type: "POST", url: "/SomeController/SomeAction", data: { "id": username }, timeout: 3000, async: false, beforeSend: function() { $("button#check").hide(); $("img#busy").show(); }, complete: function() { $("button#check").show(); $("img#busy").hide(); }, cache: false, success: function(result) { return result; }, error: function(error) { $("img#busy").hide(); $("button#check").show(); alert("Some problems have occured. Please try again later: " + error); } }); }

    Read the article

  • Jason/ajax web service call get redirected (302 Object moved) and then 500 unknow webservice name

    - by user646499
    I have been struggling with this for some times.. I searched around but didnt get a solution yet. This is only an issue on production server. In my development environment, everything works just fine. I am using JQuery/Ajax to update product information based on product's Color attribute. for example, a product has A and B color, the price for color A is different from color B. When user choose different color, the price information is updated as well. What I did is to first add a javascript function: function updateProductVariant() { var myval = jQuery("#<%=colorDropDownList.ClientID%").val(); jQuery.ajax({ type: "POST", url: "/Products.aspx/GetVariantInfoById", data: "{variantId:'" + myval + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var obj = jQuery.parseJSON(response.d); jQuery("#<%=lblStockAvailablity.ClientID%>").text(obj.StockMessage); jQuery(".price .productPrice").text(obj.CurrentPrice); jQuery(".price .oldProductPrice").text(obj.OldPrice); } }); } Then I can register the dropdown list's 'onclick' event point to function 'updateProductVariant' GetVariantInfoById is a WebGet method in the codebehind, its also very straightforward: [WebMethod] public static string GetVariantInfoById(string variantId) { int id = Convert.ToInt32(variantId); ProductVariant productVariant = IoC.Resolve().GetProductVariantById(id); string stockMessage = productVariant.FormatStockMessage(); StringBuilder oBuilder = new StringBuilder(); oBuilder.Append("{"); oBuilder.AppendFormat(@"""{0}"":""{1}"",", "StockMessage", stockMessage); oBuilder.AppendFormat(@"""{0}"":""{1}"",", "OldPrice", PriceHelper.FormatPrice(productVariant.OldPrice)); oBuilder.AppendFormat(@"""{0}"":""{1}""", "CurrentPrice", PriceHelper.FormatPrice(productVariant.Price)); oBuilder.Append("}"); return oBuilder.ToString(); } All these works fine on my local box, but if i upload to the production server, catching the traffic using fiddler, /Products.aspx/GetVariantInfoById becomes a Get call instead of a POST On my local box, HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Thu, 03 Mar 2011 09:00:08 GMT X-AspNet-Version: 4.0.30319 Cache-Control: private, max-age=0 Content-Type: application/json; charset=utf-8 Content-Length: 117 Connection: Close But when deployed on the host, it becomes HTTP/1.1 302 Found Proxy-Connection: Keep-Alive Connection: Keep-Alive Content-Length: 186 Via: 1.1 ADV-TMG-01 Date: Thu, 03 Mar 2011 08:59:12 GMT Location: http://www.pocomaru.com/Products.aspx/GetVariantInfoById/default.aspx Server: Microsoft-IIS/7.0 X-Powered-By: ASP.NET then of course, then it returns 500 error titleUnknown web method GetVariantInfoById/default.aspx.Parameter name: methodName Can someone please take a look? I think its some configuration in the production server which automatially redirects my webservice call to some other URL, but since the product server is out of my control, i am seeking a local fix for this. Thanks for the help!

    Read the article

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

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

    Read the article

  • decrypt an encrypted value ?

    - by jim
    I have an old Paradox database (I can convert it to Access 2007) which contains more then 200,000 records. This database has two columns: the first one is named "Word" and the second one is named "Mean". It is a dictionary database and my client wants to convert this old database to ASP.NET and SQL. However, we don't know what key or method is used to encrypt or encode the "Mean" column which is in the Unicode format. The software itself has been written in Delphi 7 and we don't have the source code. My client only knows the credentials for logging in to database. The problem is decoding the Mean column. What I do have is the compiled windows application and the Paradox database. This software can decode the "Mean" column for each "Word" so the method and/or key is in its own compiled code(.exe) or one of the files in its directory. For example, we know that in the following row the "Zymurgy" exactly means "???? ??? ????? ?? ???? ????, ????? ?????" since the application translates it like that. Here is what the record looks like when I open the database in Access: Word Mean Zymurgy 5OBnGguKPdDAd7L2lnvd9Lnf1mdd2zDBQRxngsCuirK5h91sVmy0kpRcue/+ql9ORmP99Mn/QZ4= Therefore we're trying to discover how the value in the Mean column is converted to "???? ??? ????? ?? ???? ????, ????? ?????". I think the "Mean" column value in above row is encoded in Base64 string format, but decoding the Base64 string does not yet result in the expected text. The extensions for files in the win app directory are dll, CCC, DAT, exe (other than the main app file), SYS, FAM, MB, PX, TV, VAL. Any kind of help is appreciated. Additional information: guys! the creators are not that stupid to save the values only in encoded form. they're definitely encrypted them. so i guess we have to look for the key.

    Read the article

  • Modify PHP Search Script to Handle Multiple Entries For a Single Input

    - by Thomas
    I need to modify a php search script so that it can handle multiple entries for a single field. The search engine is designed for a real estate website. The current search form allows users to search for houses by selecting a single neighborhood from a dropdown menu. Instead of a dropdown menu, I would like to use a list of checkboxes so that the the user can search for houses in multiple neighborhoods at one time. I have converted all of the dropdown menu items into checkboxes on the HTML side but the PHP script only searches for houses in the last checkbox selected. For example, if I selected: 'Dallas' 'Boston' 'New York' the search engine will only search for houses in New York. Im new to PHP, so I am a little at a loss as to how to modify this script to handle the behavior I have described: <?php require_once(dirname(__FILE__).'/extra_search_fields.php'); //Add Widget for configurable search. add_action('plugins_loaded',array('DB_CustomSearch_Widget','init')); class DB_CustomSearch_Widget extends DB_Search_Widget { function DB_CustomSearch_Widget($params=array()){ DB_CustomSearch_Widget::__construct($params); } function __construct($params=array()){ $this->loadTranslations(); parent::__construct(__('Custom Fields ','wp-custom-fields-search'),$params); add_action('admin_print_scripts', array(&$this,'print_admin_scripts'), 90); add_action('admin_menu', array(&$this,'plugin_menu'), 90); add_filter('the_content', array(&$this,'process_tag'),9); add_shortcode( 'wp-custom-fields-search', array(&$this,'process_shortcode') ); wp_enqueue_script('jquery'); if(version_compare("2.7",$GLOBALS['wp_version'])>0) wp_enqueue_script('dimensions'); } function init(){ global $CustomSearchFieldStatic; $CustomSearchFieldStatic['Object'] = new DB_CustomSearch_Widget(); $CustomSearchFieldStatic['Object']->ensureUpToDate(); } function currentVersion(){ return "0.3.16"; } function ensureUpToDate(){ $version = $this->getConfig('version'); $latest = $this->currentVersion(); if($version<$latest) $this->upgrade($version,$latest); } function upgrade($current,$target){ $options = $this->getConfig(); if(version_compare($current,"0.3")<0){ $config = $this->getDefaultConfig(); $config['name'] = __('Default Preset','wp-custom-fields-search'); $options['preset-default'] = $config; } $options['version']=$target; update_option($this->id,$options); } function getInputs($params = false,$visitedPresets=array()){ if(is_array($params)){ $id = $params['widget_id']; } else { $id = $params; } if($visitedPresets[$id]) return array(); $visitedPresets[$id]=true; global $CustomSearchFieldStatic; if(!$CustomSearchFieldStatic['Inputs'][$id]){ $config = $this->getConfig($id); $inputs = array(); if($config['preset']) $inputs = $this->getInputs($config['preset'],$visitedPresets); $nonFields = $this->getNonInputFields(); if($config) foreach($config as $k=>$v){ if(in_array($k,$nonFields)) continue; if(!(class_exists($v['input']) && class_exists($v['comparison']) && class_exists($v['joiner']))) { continue; } $inputs[] = new CustomSearchField($v); } foreach($inputs as $k=>$v){ $inputs[$k]->setIndex($k); } $CustomSearchFieldStatic['Inputs'][$id]=$inputs; } return $CustomSearchFieldStatic['Inputs'][$id]; } function getTitle($params){ $config = $this->getConfig($params['widget_id']); return $config['name']; } function form_processPost($post,$old){ unset($post['###TEMPLATE_ID###']); if(!$post) $post=array('exists'=>1); return $post; } function getDefaultConfig(){ return array('name'=>'Site Search', 1=>array( 'label'=>__('Key Words','wp-custom-fields-search'), 'input'=>'TextField', 'comparison'=>'WordsLikeComparison', 'joiner'=>'PostDataJoiner', 'name'=>'all' ), 2=>array( 'label'=>__('Category','wp-custom-fields-search'), 'input'=>'DropDownField', 'comparison'=>'EqualComparison', 'joiner'=>'CategoryJoiner' ), ); } function form_outputForm($values,$pref){ $defaults=$this->getDefaultConfig(); $prefId = preg_replace('/^.*\[([^]]*)\]$/','\\1',$pref); $this->form_existsInput($pref); $rand = rand(); ?> <div id='config-template-<?php echo $prefId?>' style='display: none;'> <?php $templateDefaults = $defaults[1]; $templateDefaults['label'] = 'Field ###TEMPLATE_ID###'; echo $this->singleFieldHTML($pref,'###TEMPLATE_ID###',$templateDefaults); ?> </div> <?php foreach($this->getClasses('input') as $class=>$desc) { if(class_exists($class)) $form = new $class(); else $form = false; if(compat_method_exists($form,'getConfigForm')){ if($form = $form->getConfigForm($pref.'[###TEMPLATE_ID###]',array('name'=>'###TEMPLATE_NAME###'))){ ?> <div id='config-input-templates-<?php echo $class?>-<?php echo $prefId?>' style='display: none;'> <?php echo $form?> </div> <?php } } } ?> <div id='config-form-<?php echo $prefId?>'> <?php if(!$values) $values = $defaults; $maxId=0; $presets = $this->getPresets(); array_unshift($presets,__('NONE','wp-custom-fields-search')); ?> <div class='searchform-name-wrapper'><label for='<?php echo $prefId?>[name]'><?php echo __('Search Title','wp-custom-fields-search')?></label><input type='text' class='form-title-input' id='<?php echo $prefId?>[name]' name='<?php echo $pref?>[name]' value='<?php echo $values['name']?>'/></div> <div class='searchform-preset-wrapper'><label for='<?php echo $prefId?>[preset]'><?php echo __('Use Preset','wp-custom-fields-search')?></label> <?php $dd = new AdminDropDown($pref."[preset]",$values['preset'],$presets); echo $dd->getInput()."</div>"; $nonFields = $this->getNonInputFields(); foreach($values as $id => $val){ $maxId = max($id,$maxId); if(in_array($id,$nonFields)) continue; echo "<div id='config-form-$prefId-$id'>".$this->singleFieldHTML($pref,$id,$val)."</div>"; } ?> </div> <br/><a href='#' onClick="return CustomSearch.get('<?php echo $prefId?>').add();"><?php echo __('Add Field','wp-custom-fields-search')?></a> <script type='text/javascript'> CustomSearch.create('<?php echo $prefId?>','<?php echo $maxId?>'); <?php foreach($this->getClasses('joiner') as $joinerClass=>$desc){ if(compat_method_exists($joinerClass,'getSuggestedFields')){ $options = eval("return $joinerClass::getSuggestedFields();"); $str = ''; foreach($options as $i=>$v){ $k=$i; if(is_numeric($k)) $k=$v; $options[$i] = json_encode(array('id'=>$k,'name'=>$v)); } $str = '['.join(',',$options).']'; echo "CustomSearch.setOptionsFor('$joinerClass',".$str.");\n"; }elseif(eval("return $joinerClass::needsField();")){ echo "CustomSearch.setOptionsFor('$joinerClass',[]);\n"; } } ?> </script> <?php } function getNonInputFields(){ return array('exists','name','preset','version'); } function singleFieldHTML($pref,$id,$values){ $prefId = preg_replace('/^.*\[([^]]*)\]$/','\\1',$pref); $pref = $pref."[$id]"; $htmlId = $pref."[exists]"; $output = "<input type='hidden' name='$htmlId' value='1'/>"; $titles="<th>".__('Label','wp-custom-fields-search')."</th>"; $inputs="<td><input type='text' name='$pref"."[label]' value='$values[label]' class='form-field-title'/></td><td><a href='#' onClick='return CustomSearch.get(\"$prefId\").toggleOptions(\"$id\");'>".__('Show/Hide Config','wp-custom-fields-search')."</a></td>"; $output.="<table class='form-field-table'><tr>$titles</tr><tr>$inputs</tr></table>"; $output.="<div id='form-field-advancedoptions-$prefId-$id' style='display: none'>"; $inputs='';$titles=''; $titles="<th>".__('Data Field','wp-custom-fields-search')."</th>"; $inputs="<td><div id='form-field-dbname-$prefId-$id' class='form-field-title-div'><input type='text' name='$pref"."[name]' value='$values[name]' class='form-field-title'/></div></td>"; $count=1; foreach(array('joiner'=>__('Data Type','wp-custom-fields-search'),'comparison'=>__('Compare','wp-custom-fields-search'),'input'=>__('Widget','wp-custom-fields-search')) as $k=>$v){ $dd = new AdminDropDown($pref."[$k]",$values[$k],$this->getClasses($k),array('onChange'=>'CustomSearch.get("'.$prefId.'").updateOptions("'.$id.'","'.$k.'")','css_class'=>"wpcfs-$k")); $titles="<th>".$v."</th>".$titles; $inputs="<td>".$dd->getInput()."</td>".$inputs; if(++$count==2){ $output.="<table class='form-field-table form-class-$k'><tr>$titles</tr><tr>$inputs</tr></table>"; $count=0; $inputs = $titles=''; } } if($titles){ $output.="<table class='form-field-table'><tr>$titles</tr><tr>$inputs</tr></table>"; $inputs = $titles=''; } $titles.="<th>".__('Numeric','wp-custom-fields-search')."</th><th>".__('Widget Config','wp-custom-fields-search')."</th>"; $inputs.="<td><input type='checkbox' ".($values['numeric']?"checked='true'":"")." name='$pref"."[numeric]'/></td>"; if(class_exists($widgetClass = $values['input'])){ $widget = new $widgetClass(); if(compat_method_exists($widget,'getConfigForm')) $widgetConfig=$widget->getConfigForm($pref,$values); } $inputs.="<td><div id='$this->id"."-$prefId"."-$id"."-widget-config'>$widgetConfig</div></td>"; $output.="<table class='form-field-table'><tr>$titles</tr><tr>$inputs</tr></table>"; $output.="</div>"; $output.="<a href='#' onClick=\"return CustomSearch.get('$prefId').remove('$id');\">Remove Field</a>"; return "<div class='field-wrapper'>$output</div>"; } function getRootURL(){ return WP_CONTENT_URL .'/plugins/' . dirname(plugin_basename(__FILE__) ) . '/'; } function print_admin_scripts($params){ $jsRoot = $this->getRootURL().'js'; $cssRoot = $this->getRootURL().'css'; $scripts = array('Class.js','CustomSearch.js','flexbox/jquery.flexbox.js'); foreach($scripts as $file){ echo "<script src='$jsRoot/$file' ></script>"; } echo "<link rel='stylesheet' href='$cssRoot/admin.css' >"; echo "<link rel='stylesheet' href='$jsRoot/flexbox/jquery.flexbox.css' >"; } function getJoiners(){ return $this->getClasses('joiner'); } function getComparisons(){ return $this->getClasses('comparison'); } function getInputTypes(){ return $this->getClasses('input'); } function getClasses($type){ global $CustomSearchFieldStatic; if(!$CustomSearchFieldStatic['Types']){ $CustomSearchFieldStatic['Types'] = array( "joiner"=>array( "PostDataJoiner" =>__( "Post Field",'wp-custom-fields-search'), "CustomFieldJoiner" =>__( "Custom Field",'wp-custom-fields-search'), "CategoryJoiner" =>__( "Category",'wp-custom-fields-search'), "TagJoiner" =>__( "Tag",'wp-custom-fields-search'), "PostTypeJoiner" =>__( "Post Type",'wp-custom-fields-search'), ), "input"=>array( "TextField" =>__( "Text Input",'wp-custom-fields-search'), "DropDownField" =>__( "Drop Down",'wp-custom-fields-search'), "RadioButtonField" =>__( "Radio Button",'wp-custom-fields-search'), "HiddenField" =>__( "Hidden Constant",'wp-custom-fields-search'), ), "comparison"=>array( "EqualComparison" =>__( "Equals",'wp-custom-fields-search'), "LikeComparison" =>__( "Phrase In",'wp-custom-fields-search'), "WordsLikeComparison" =>__( "Words In",'wp-custom-fields-search'), "LessThanComparison" =>__( "Less Than",'wp-custom-fields-search'), "MoreThanComparison" =>__( "More Than",'wp-custom-fields-search'), "AtMostComparison" =>__( "At Most",'wp-custom-fields-search'), "AtLeastComparison" =>__( "At Least",'wp-custom-fields-search'), "RangeComparison" =>__( "Range",'wp-custom-fields-search'), //TODO: Make this work... // "NotEqualComparison" =>__( "Not Equal To",'wp-custom-fields-search'), ) ); $CustomSearchFieldStatic['Types'] = apply_filters('custom_search_get_classes',$CustomSearchFieldStatic['Types']); } return $CustomSearchFieldStatic['Types'][$type]; } function plugin_menu(){ add_options_page('Form Presets','WP Custom Fields Search',8,__FILE__,array(&$this,'presets_form')); } function getPresets(){ $presets = array(); foreach(array_keys($config = $this->getConfig()) as $key){ if(strpos($key,'preset-')===0) { $presets[$key] = $key; if($name = $config[$key]['name']) $presets[$key]=$name; } } return $presets; } function presets_form(){ $presets=$this->getPresets(); if(!$preset = $_REQUEST['selected-preset']){ $preset = 'preset-default'; } if(!$presets[$preset]){ $defaults = $this->getDefaultConfig(); $options = $this->getConfig(); $options[$preset] = $defaults; if($n = $_POST[$this->id][$preset]['name']) $options[$preset]['name'] = $n; elseif($preset=='preset-default') $options[$preset]['name'] = 'Default'; else{ list($junk,$id) = explode("-",$preset); $options[$preset]['name'] = 'New Preset '.$id; } update_option($this->id,$options); $presets[$preset] = $options[$preset]['name']; } if($_POST['delete']){ check_admin_referer($this->id.'-editpreset-'.$preset); $options = $this->getConfig(); unset($options[$preset]); unset($presets[$preset]); update_option($this->id,$options); list($preset,$name) = each($presets); } $index = 1; while($presets["preset-$index"]) $index++; $presets["preset-$index"] = __('New Preset','wp-custom-fields-search'); $linkBase = $_SERVER['REQUEST_URI']; $linkBase = preg_replace("/&?selected-preset=[^&]*(&|$)/",'',$linkBase); foreach($presets as $key=>$name){ $config = $this->getConfig($key); if($config && $config['name']) $name=$config['name']; if(($n = $_POST[$this->id][$key]['name'])&&(!$_POST['delete'])) $name = $n; $presets[$key]=$name; } $plugin=&$this; ob_start(); wp_nonce_field($this->id.'-editpreset-'.$preset); $hidden = ob_get_contents(); $hidden.="<input type='hidden' name='selected-preset' value='$preset'>"; $shouldSave = $_POST['selected-preset'] && !$_POST['delete'] && check_admin_referer($this->id.'-editpreset-'.$preset); ob_end_clean(); include(dirname(__FILE__).'/templates/options.php'); } function process_tag($content){ $regex = '/\[\s*wp-custom-fields-search\s+(?:([^\]=]+(?:\s+.*)?))?\]/'; return preg_replace_callback($regex, array(&$this, 'generate_from_tag'), $content); } function process_shortcode($atts,$content){ return $this->generate_from_tag(array("",$atts['preset'])); } function generate_from_tag($reMatches){ global $CustomSearchFieldStatic; ob_start(); $preset=$reMatches[1]; if(!$preset) $preset = 'default'; wp_custom_fields_search($preset); $form = ob_get_contents(); ob_end_clean(); return $form; } } global $CustomSearchFieldStatic; $CustomSearchFieldStatic['Inputs'] = array(); $CustomSearchFieldStatic['Types'] = array(); class AdminDropDown extends DropDownField { function AdminDropDown($name,$value,$options,$params=array()){ AdminDropDown::__construct($name,$value,$options,$params); } function __construct($name,$value,$options,$params=array()){ $params['options'] = $options; $params['id'] = $params['name']; parent::__construct($params); $this->name = $name; $this->value = $value; } function getHTMLName(){ return $this->name; } function getValue(){ return $this->value; } function getInput(){ return parent::getInput($this->name,null); } } if (!function_exists('json_encode')) { function json_encode($a=false) { if (is_null($a)) return 'null'; if ($a === false) return 'false'; if ($a === true) return 'true'; if (is_scalar($a)) { if (is_float($a)) { // Always use "." for floats. return floatval(str_replace(",", ".", strval($a))); } if (is_string($a)) { static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"')); return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"'; } else return $a; } $isList = true; for ($i = 0, reset($a); $i < count($a); $i++, next($a)) { if (key($a) !== $i) { $isList = false; break; } } $result = array(); if ($isList) { foreach ($a as $v) $result[] = json_encode($v); return '[' . join(',', $result) . ']'; } else { foreach ($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v); return '{' . join(',', $result) . '}'; } } } function wp_custom_fields_search($presetName='default'){ global $CustomSearchFieldStatic; if(strpos($presetName,'preset-')!==0) $presetName="preset-$presetName"; $CustomSearchFieldStatic['Object']->renderWidget(array('widget_id'=>$presetName,'noTitle'=>true),array('number'=>$presetName)); } function compat_method_exists($class,$method){ return method_exists($class,$method) || in_array(strtolower($method),get_class_methods($class)); }

    Read the article

  • How would you organize a large complex web application (see basic example)?

    - by Anurag
    How do you usually organize complex web applications that are extremely rich on the client side. I have created a contrived example to indicate the kind of mess it's easy to get into if things are not managed well for big apps. Feel free to modify/extend this example as you wish - http://jsfiddle.net/NHyLC/1/ The example basically mirrors part of the comment posting on SO, and follows the following rules: Must have 15 characters minimum, after multiple spaces are trimmed out to one. If Add Comment is clicked, but the size is less than 15 after removing multiple spaces, then show a popup with the error. Indicate amount of characters remaining and summarize with color coding. Gray indicates a small comment, brown indicates a medium comment, orange a large comment, and red a comment overflow. One comment can only be submitted every 15 seconds. If comment is submitted too soon, show a popup with appropriate error message. A couple of issues I noticed with this example. This should ideally be a widget or some sort of packaged functionality. Things like a comment per 15 seconds, and minimum 15 character comment belong to some application wide policies rather than being embedded inside each widget. Too many hard-coded values. No code organization. Model, Views, Controllers are all bundled together. Not that MVC is the only approach for organizing rich client side web applications, but there is none in this example. How would you go about cleaning this up? Applying a little MVC/MVP along the way? Here's some of the relevant functions, but it will make more sense if you saw the entire code on jsfiddle: /** * Handle comment change. * Update character count. * Indicate progress */ function handleCommentUpdate(comment) { var status = $('.comment-status'); status.text(getStatusText(comment)); status.removeClass('mild spicy hot sizzling'); status.addClass(getStatusClass(comment)); } /** * Is the comment valid for submission */ function commentSubmittable(comment) { var notTooSoon = !isTooSoon(); var notEmpty = !isEmpty(comment); var hasEnoughCharacters = !isTooShort(comment); return notTooSoon && notEmpty && hasEnoughCharacters; } // submit comment $('.add-comment').click(function() { var comment = $('.comment-box').val(); // submit comment, fake ajax call if(commentSubmittable(comment)) { .. } // show a popup if comment is mostly spaces if(isTooShort(comment)) { if(comment.length < 15) { // blink status message } else { popup("Comment must be at least 15 characters in length."); } } // show a popup is comment submitted too soon else if(isTooSoon()) { popup("Only 1 comment allowed per 15 seconds."); } });

    Read the article

  • Jquery Tools Overlay call on javascript function

    - by user342944
    Hi Guys, I have a jquery overlay window in my html alongwith a button to activate here is the code. <!-- Validation Overlay Box --> <div class="modal" id="yesno" style="top: 100px; left: 320px; position: relative; display: none; z-index: 0; margin-top: 100px;"> <h2> &nbsp;&nbsp;Authentication Failed</h2> <p style="font-family:Arial; font-size:small; text-align:center"> Ether your username or password has been entered incorrectly. Please make sure that your username or password entered correctly... </p> <!-- yes/no buttons --> <p align="center"> <button class="close"> OK </button> </p> </div> Here is the Jquery tools Script <SCRIPT> $(document).ready(function() { var triggers = $(".modalInput").overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#a2a2a2', loadSpeed: 200, opacity: 0.9 }, closeOnClick: false }); var buttons = $("#yesno button").click(function(e) { // get user input var yes = buttons.index(this) === 0; // do something with the answer triggers.eq(0).html("You clicked " + (yes ? "yes" : "no")); }); $("#prompt form").submit(function(e) { // close the overlay triggers.eq(1).overlay().close(); // get user input var input = $("input", this).val(); // do something with the answer triggers.eq(1).html(input); // do not submit the form return e.preventDefault(); }); }); And here how its called upon clicking on a button or a hyperlink "<BUTTON class="modalInput" rel="#yesno">You clicked no</BUTTON>" All i want is I dont want to show the overlay on clicking on button or through a link. Is it possible to call it through a javascript function like "showOverlay()" ??

    Read the article

  • Jquery:: How can select clicked element in table without define unique id for each element

    - by Yosef
    Hello, I have table (that generated by server) below. I want to get input element value class="itemQuantity" of clicked row. I write Jquery code but he missing "this" of clicked element. <script type="text/javascript"> $(document).ready(function() { $('.updateButton').click(function() { alert($('.itemQuantity').val()); }); }); </script> How Can I do it with jquery(I thinking to use this and not create id for each element, but I have low knoledge in jquery). Thanks, Yosef <table id="items"> <tr> <th>item id</th> <th>item name</th> <th>item quantity</th> <th>item update</th> </tr> <tr> <td class="itemID"> 1 </td> <td class="itemName"> Ferari </td> <td > <input class="itemQuantity" type="text" size="4"/> </td> <td> <button class="updateButton" >update item</button> </td> </tr> <tr> <td class="itemID"> 2 </td> <td class="itemName"> Fiat </td> <td > <input class="itemQuantity" type="text" size="4"/> </td> <td> <button class="updateButton" >update item</button> </td> </tr> <tr> <td class="itemID"> 3 </td> <td class="itemName"> Hundai </td> <td > <input class="itemQuantity" type="text" size="4"/> </td> <td> <button class="updateButton" >update item</button> </td> </tr> </table>

    Read the article

  • jQuery: How can select clicked element in table without define unique id for each element

    - by Yosef
    Hello, I have table (that generated by server) below. I want to get input element value class="itemQuantity" of clicked row. I write jQuery code but he missing "this" of clicked element. <script type="text/javascript"> $(document).ready(function() { $('.updateButton').click(function() { alert($('.itemQuantity').val()); }); }); </script> How can I do it with jQuery (I thinking to use this and not create id for each element, but I have low knowledge in jQuery). Thanks, Yosef <table id="items"> <tr> <th>item id</th> <th>item name</th> <th>item quantity</th> <th>item update</th> </tr> <tr> <td class="itemID"> 1 </td> <td class="itemName"> Ferari </td> <td > <input class="itemQuantity" type="text" size="4" /> </td> <td> <button class="updateButton">update item</button> </td> </tr> <tr> <td class="itemID"> 2 </td> <td class="itemName"> Fiat </td> <td > <input class="itemQuantity" type="text" size="4" /> </td> <td> <button class="updateButton">update item</button> </td> </tr> <tr> <td class="itemID"> 3 </td> <td class="itemName"> Hundai </td> <td > <input class="itemQuantity" type="text" size="4" /> </td> <td> <button class="updateButton">update item</button> </td> </tr> </table>

    Read the article

  • jQuery hide ul header when all entries are deleted...

    - by Scott
    I'm a noob with jQuery...and I hope I've explained this well enough; I have a <ul> header that appears when I've added an entry to a dynamically created list using $.post. Each entry added has a delete/edit button associated with it. Header is this: <ul class="header"> <li>Month</li> <li>Year</li> <li>Cottage</li> </ul> My dynamic list that is created: <ul class="addedItems"> <li>Month</li> <li>Year</li> <li>Cottage</li> <li><span class="edit">edit</span></li> <li><span class="del">delete</span></li> </ul> This all looks like this: Month Year Cottage <--this appears after I've added an entry -------------------------------- and I want it to stick around unless all items are deleted. Dec 1990 Fir edit/delete <--entries Jan 2000 Willow edit/delete My question is: Is there some kind of conditional that I can use with jQuery to hide the class="header" if all the items are deleted? I've read up on conditional statements like is and not with jq but I'm not really understanding how they work. All of the items in class="addedItems" is stored in data produced by JSON. This is the delete function: $(".del").live("click", function(){ var del = this; var thisVal = $(del).val(); $.post("delete.php", { dirID : thisVal }, function(data){ if(confirm("Are you sure you want to DELETE this entry?") == true) { if(data.success) { //hide the class="header" here somwhere?? $(del).parents(".addedItems").hide(); } else if(data.error) { // throw error if item does not delete } } }, "json"); return false; }); //end of .del function Here is the delete.php <?php if($_POST) { $data['delID'] = $_POST['dirID']; $query = "DELETE from //tablename WHERE dirID = '{$data['delID']}' LIMIT 1"; $result = $db->query($query); if($result) { $data['success'] = true; $data['message'] = "Entry was successfully removed."; } else { $data['error'] = true; $data['message'] = "Item could not be deleted."; } echo json_encode($data); } ?>

    Read the article

  • jQuery - google chrome won't get updated textarea value

    - by Phil Jackson
    Hi, I have a textarea with default text 'write comment...'. when a user updates the textarea and clicks 'add comment' Google chrome does not get the new text. heres my code; function add_comment( token, loader ){ $('textarea.n-c-i').focus(function(){ if( $(this).html() == 'write a comment...' ) { $(this).html(''); } }); $('textarea.n-c-i').blur(function(){ if( $(this).html() == '' ) { $(this).html('write a comment...'); } }); $(".add-comment").bind("click", function() { try{ var but = $(this); var parent = but.parents('.n-w'); var ref = parent.attr("ref"); var comment_box = parent.find('textarea'); var comment = comment_box.val(); alert(comment); var con_wrap = parent.find('ul.com-box'); var contents = con_wrap .html(); var outa_wrap = parent.find('.n-c-b'); var outa = outa_wrap.html(); var com_box = parent.find('ul.com-box'); var results = parent.find('p.com-result'); results.html(loader); comment_box.attr("disabled", "disabled"); but.attr("disabled", "disabled"); $.ajax({ type: 'POST', url: './', data: 'add-comment=true&ref=' + encodeURIComponent(ref) + '&com=' + encodeURIComponent(comment) + '&token=' + token + '&aj=true', cache: false, timeout: 7000, error: function(){ $.fancybox(internal_error, internal_error_fbs); results.html(''); comment_box.removeAttr("disabled"); but.removeAttr("disabled"); }, success: function(html){ auth(html); if( html != '<span class="error-msg">Error, message could not be posted at this time</span>' ) { if( con_wrap.length == 0 ) { outa_wrap.html('<ul class="com-box">' + html + '</ul>' + outa); outa_wrap.find('li:last').fadeIn(); add_comment( token, loader ); }else{ com_box.html(contents + html); com_box.find('li:last').fadeIn(); } } results.html(''); comment_box.removeAttr("disabled"); but.removeAttr("disabled"); } }); }catch(err){alert(err);} return false; }); } any help much appreciated.

    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

  • JQGrid and JQuery Autocomplete

    - by Neff
    When implementing JQGrid 4.3.0, Jquery 1.6.2, and JQuery UI 1.8.16 Ive come across an issue with the Inline edit. When the inline edit is activated, some of the elements get assigned an auto complete. When the inline edit is canceld or saved, the auto complete does not always go away (selecting text by double clicking it then hitting delete, then hitting escape to exit row edit). Leaving the auto complete controls in edit mode when the row is no longer considered in edit mode. Perhaps you can tell me if there is a problem with the initialization or if I you are aware of an event post-"afterrestorefunc" that the fields can be returned to their "original" state. Original state being displayed as data in the JQGrid row. I've tried removing the DOM after row close, .remove() and .empty(): ... "afterrestorefunc": function(){ $('.ui-autocomplete-input').remove(); } ... but that causes other issues, such as the jqgrid is not able to find the cell when serializing the row for data or edit, and requires a refresh of the page, not just jqgrid, to be able to once again see the data from that row. Auto complete functionality for the element is created on the double click of the row: function CreateCustomSearchElement(value, options, selectiontype) { ... var el; el = document.createElement("input"); ... $(el).autocomplete({ source: function (request, response) { $.ajax({ url: '<%=ResolveUrl("~/Services/AutoCompleteService.asmx/GetAutoCompleteResponse") %>', data: "{ 'prefixText': '" + request.term + "', 'contextKey': '" + options.name + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (data) { response($.map(data.d, function (item) { return { label: Trim(item), value: Trim(item), searchVal: Trim(item) } })) } }); }, select: function (e, item) { //Select is on the event of selection where the value and label have already been determined. }, minLength: 1, change: function (event, ui) { //if the active element was not the search button //... } }).keyup(function (e) { if (e.keyCode == 8 || e.keyCode == 46) { //If the user hits backspace or delete, check the value of the textbox before setting the searchValue //... } }).keydown(function (e) { //if keycode is enter key and there is a value, you need to validate the data through select or change(onblur) if (e.keyCode == '13' && ($(el).val())) { return false; } if (e.keyCode == '220') { return false } }); } Other Sources: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing http://api.jqueryui.com/autocomplete/ Update: I tried only creating the autocomplete when the element was focused, and removing it when onblur. That did not resolve the issue either. It seems to just need the autocomplete dropdown to be triggered.

    Read the article

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

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

    Read the article

  • Jquery retrieve values of Dynamically created elements

    - by Amitd
    Hi, I have a html page with a form. The form has Div which gets populated dynamically with Input elements like text box,radio,checkbox etc. Now I want to retrieve the values of these dynamically created elements in the Html page,so that i can submit it to a page. //HTML PAGE <script type="text/javascript"> $(function() { populateQuestions(); }); $("#submit_btn").click(function() { // validate and process form here //HOW TO ??retrieve values??? var optionSelected = $("input#OptionSelected_1").val();// doesn't work? // alert(optionSelected); postAnswer(qid,values);//submit values showNextQuestion() ;// populate Div Questions again new values }); </script> <form action="" name="frmQuestion"> <div id="Questions" style="color: #FF0000"> </div> //Question DIV generation script example radio buttons //questionText text of question //option for question questionOptions // **sample call** var question = createQuestionElement("1","MCQ", "WHAT IS ABCD??", "Opt1$Opt2$Opt3"); question.appendTo($('#Questions')); function createQuestionElement(id, type, questionText, questionOptions) { var questionDiv = $('<div>').attr('id', 'Question'); var divTitle = $('<div>').attr('id', 'Question Title').html(questionText); divTitle.appendTo(questionDiv); var divOptions = $('<div>').attr('id', 'Question Options'); createOptions(id, "radio", questionOptions, divOptions); divOptions.appendTo(questionDiv); return questionDiv; } function createOptions(id, type, options, div) { var optionArray = options.split("$"); // Loop over each value in the array. $.each( optionArray, function(intIndex, objValue) { if (intIndex == 0) { div.append($("<input type='" + type + "' name='OptionSelected_" + id + "' checked='checked' value='" + objValue + "'>")); } else { div.append($("<input type='" + type + "' name='OptionSelected_" + id + "' value='" + objValue + "'>")); } div.append(objValue); div.append("<br/>"); }

    Read the article

  • How would you organize this Javascript?

    - by Anurag
    How do you usually organize complex web applications that are extremely rich on the client side. I have created a contrived example to indicate the kind of mess it's easy to get into if things are not managed well for big apps. Feel free to modify/extend this example as you wish - http://jsfiddle.net/NHyLC/1/ The example basically mirrors part of the comment posting on SO, and follows the following rules: Must have 15 characters minimum, after multiple spaces are trimmed out to one. If Add Comment is clicked, but the size is less than 15 after removing multiple spaces, then show a popup with the error. Indicate amount of characters remaining and summarize with color coding. Gray indicates a small comment, brown indicates a medium comment, orange a large comment, and red a comment overflow. One comment can only be submitted every 15 seconds. If comment is submitted too soon, show a popup with appropriate error message. A couple of issues I noticed with this example. This should ideally be a widget or some sort of packaged functionality. Things like a comment per 15 seconds, and minimum 15 character comment belong to some application wide policies rather than being embedded inside each widget. Too many hard-coded values. No code organization. Model, Views, Controllers are all bundled together. Not that MVC is the only approach for organizing rich client side web applications, but there is none in this example. How would you go about cleaning this up? Applying a little MVC/MVP along the way? Here's some of the relevant functions, but it will make more sense if you saw the entire code on jsfiddle: /** * Handle comment change. * Update character count. * Indicate progress */ function handleCommentUpdate(comment) { var status = $('.comment-status'); status.text(getStatusText(comment)); status.removeClass('mild spicy hot sizzling'); status.addClass(getStatusClass(comment)); } /** * Is the comment valid for submission */ function commentSubmittable(comment) { var notTooSoon = !isTooSoon(); var notEmpty = !isEmpty(comment); var hasEnoughCharacters = !isTooShort(comment); return notTooSoon && notEmpty && hasEnoughCharacters; } // submit comment $('.add-comment').click(function() { var comment = $('.comment-box').val(); // submit comment, fake ajax call if(commentSubmittable(comment)) { .. } // show a popup if comment is mostly spaces if(isTooShort(comment)) { if(comment.length < 15) { // blink status message } else { popup("Comment must be at least 15 characters in length."); } } // show a popup is comment submitted too soon else if(isTooSoon()) { popup("Only 1 comment allowed per 15 seconds."); } });

    Read the article

  • Jquery Ajax Call In For Loop Only Runs Once - Possible Issue with Timing & Exit Condition?

    - by Grumps
    Background I'm building a form that uses autocomplete against the EchoNest API. First the users picks an artist, using the Artist Suggest call. Next they select a song but the Song and/Or Artist song search doesn't provide a "wild card" search. It only returns exact matches. So based on the forums they suggest building an array of the songs and using auto complete on the array. I can only get a maximum of 100 responses at a time. I do know based on the initial response the number of songs. My Plan: Wrap the ajax call in a for loop ('runonceloop'). Amend the loop exit condition after the first response with the total number of songs. Challenge I'm having: The 'runonceloop' only completes a singe loop because or at least that's what I believe: The exit condition is satisfied before the first response [1] is received. I've tried to adjust the 'exit condition' and 'counter' such that they are set and and increased at the end of the success block. This seems to lock up my browser. Can someone provide some guidance on this situation?[2] I'd really appreciate it. I also don't think turning async off is a good idea because it locks the browser. Response[1]: { "response": { "status": { "code": "0", "message": "Success", "version": "4.2" }, "start": 0, "total": 121, //Used for "songs": [ { "id": "SOXZYYG127F3E1B7A2", "title": "Karma police" }, { "id": "SOXZABD127F3E1B7A2", "title" : "Creep" } ] } } } Code[2] var songsList = []; function getSongs() { var numsongs = 2; //at least 2 runs. var startindex = 0; runonceloop: //<~~~~Referenced in question for (var j = 0;j >= numsongs;) { console.log('numsongs' + numsongs); $.ajax({ url: "http://developer.echonest.com/api/v4/artist/songs", dataType: "jsonp", data: { results: 100, api_key: "XXXXXXXXXXX", format: "jsonp", name: $("#artist").val(), start: startindex }, success: function (data) { var songs = data.response.songs; numsongs = data.response.total; //modify exit condition for (var i = 0; i < songs.length; i++) { songsList.push(songs[i].title); } j +=100;// increase by 100 to match number of responses. } }); }};

    Read the article

  • How to update strongly typed Html.DropDownList using Jquery

    - by Remnant
    I have a webpage with two radiobuttons and a dropdownlist as follows: <div class="sectionheader">Course <div class="dropdown"><%=Html.DropDownList("CourseSelection", Model.CourseList, new { @class = "dropdown" })%> </div> <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Advanced", false )%> Advanced </label></div> <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Beginner", true )%> Beginner </label></div> </div> The dropdownlist is strongly typed and populated with Model.CourseList (NB - on the first page load, 'Beginner' is the default selection and the dropdown shows the beginner course options accordingly) What I want to be able to do is to update the DropDownList based on which radiobutton is selected i.e. if 'Advanced' selected then show one list of course options in dropdown, and if 'Beginner' selected then show another list of courses. The code I would like to call sits within my Controller: public JsonResult UpdateDropDown(string courseType) { IDropDownList dropdownlistRepository = new DropDownListRepository(); IEnumerable<SelectListItem> courseList = dropdownlistRepository.GetCourseList(courseType); return Json(courseList); } Edit - Updated below to show latest position Using examples provided in jQuery in Action, I now have the following jQuery code: $('.radiobuttons input:radio').click(function() { var courseType = $(this).val(); //Get selected courseType from radiobutton var dropdownList = $(".dropdown"); //Ref for dropdownlist $.getJSON("/ByCourse/UpdateDropDown", { courseType: courseType }, function(data) { $(dropdownList).loadSelect(data); }); }); The loadSelect function is taken straight from the book and is as follows: (function($) { $.fn.emptySelect = function() { return this.each(function() { if (this.tagName == 'SELECT') this.options.length = 0; }); } $.fn.loadSelect = function(optionsDataArray) { return this.emptySelect().each(function() { if (this.tagName == 'SELECT') { var selectElement = this; $.each(optionsDataArray, function(index, optionData) { var option = new Option(optionData.Text, optionData.Value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option, null); } }); } }); } })(jQuery); 1 day+ later I still cannot get this to work. Assuming the jQuery code is correct then I can only think that the issue is with retrieving the actual data with $getJSON. I have verified that JsonResult UpdateDropDown does actually retrieve valid data. What am I missing? Assembly reference? (NB: I have MicrosoftAjax.js and MicrosoftMvcAjax.js in my head tags of the master page Should JsonResult be ActionResult? (I have seen both used in samples on web) Do I need to register route Controller/UpdateDropDown in Global.asax? Any further guidance would be appreciated.

    Read the article

< Previous Page | 136 137 138 139 140 141 142 143 144 145 146 147  | Next Page >