Search Results

Search found 1039 results on 42 pages for 'textarea'.

Page 17/42 | < Previous Page | 13 14 15 16 17 18 19 20 21 22 23 24  | Next Page >

  • Focus CSS tag in Internet Explorer 8

    - by Sam
    This is driving me nuts. http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class This is an example of using the hover pseudo-class. Works fine in Chrome and IE. When I save locally it works fine in Chrome but won't work in IE. What am I doing wrong!? <link rel="Stylesheet" href="style.css" /> <form> <p>1) Name:<br /> <input type="text" size="40"></p> <p>2) Email address:<br /> <input type="text" size="40"></p> <p>3) Comments:<br /> <textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p> <p><input id="actualsubmit" type="submit" value="Submit"></p> </form> style.css: input:focus, textarea:focus{ background-color: lightyellow; }

    Read the article

  • Dynamically generate client-side HTML form control using JavaScript and server-side Python code in Google App Engine

    - by gisc
    I have the following client-side front-end HTML using Jinja2 template engine: {% for record in result %} <textarea name="remark">{{ record.remark }}</textarea> <input type="submit" name="approve" value="Approve" /> {% endfor %} Thus the HTML may show more than 1 set of textarea and submit button. The back-end Python code retrieves a variable number of records from a gql query using the model, and pass this to the Jinja2 template in result. When a submit button is clicked, it triggers the post method to update the record: def post(self): if self.request.get('approve'): updated_remark = self.request.get('remark') record.remark = db.Text(updated_remark) record.put() However, in some instances, the record updated is NOT the one that correspond to the submit button clicked (eg if a user clicks on record 1 submit, record 2 remark gets updated, but not record 1). I gather that this is due to the duplicate attribute name remark. I can possibly use JavaScript/jQuery to generate different attribute names. The question is, how do I code the back-end Python to get the (variable number of) names generated by the JavaScript? Thanks.

    Read the article

  • Need help getting Wysihat to work

    - by slythic
    Hi all, I'm using Wysihat in a rails project and am stumped by it's inability to bind to my textarea named post_description (model name Post field name description). I have the following in my head tag: <%= javascript_include_tag 'prototype_1.7'%> <%= javascript_include_tag 'wysihat' %> <script type="text/javascript" charset="utf-8"> document.on("dom:loaded", function() { var editor = WysiHat.Editor.attach('post_description'); var toolbar = new WysiHat.Toolbar(editor); toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); // Hide our error message if the editor loads fine $('error').hide(); }); </script> I'm able to see Wysihat works (the bold, italic, and underline tools are shown and when click works as intended). The following in the source of the posts/new HTML: <div id="post_description_editor" class="editor" contenteditable="true"></div> <textarea cols="40" id="post_description" name="post[description]" rows="20" style="display: none; "></textarea> However, when I type something in the description field and click submit the post validation fails saying the description field is empty. Anyone have any clue on how I can get this to work? Thanks in advance!

    Read the article

  • jQuery: If, Else with buttons error

    - by Wipqozn
    I'm running into an odd error. I'm working in Django 1.2, and have implemented the commenting framework. I'm trying to attach a hide/show button to each comment field, but whenever click on a hide/show button, it behaves as if each hide/show button beneath it on the page was clicked. Here's the jQuery code: <input type="Button" id="hideShow" name="hide/show" value="Hide"></input> <script> $("#hideShow").click(function() { if($(this).val() == "Hide") { $("textarea").hide("fast"); $(this).val("Show"); } else { $("textarea").show("fast"); $(this).val( "Hide"); } }); </script> So, when I click the Hide/show button, it will perform the action for each button beneath the clicked button + once for the button itself. So If I click a button, and there are two buttons beneath it, and value=hide it will first hide the 'textarea', than show the text area, than finally hide it again. I'm new to jQuery (although I do have experience in other languages), and I have an -idea- why it's not working: that whenever an action is performed jQuery jumps to the first one, than continues down the page looking for any other actions performed, and responds to each one. So it comes to my first button, sets it as being clicked, and so when jQuery comes across the other buttons it views them all as being 'clicked' and performs actions accordingly. I've thought of a semi-solution to my problem, putting in a variable which tracks how many times it has gone through, and than acting based on -that- action. But I would rather not do that, since it's not really a solution to the problem at hand but a work around. Any input is appreciated.

    Read the article

  • minifying final html output using regex with codeigniter

    - by Aman
    Google pages suggest you to minify html i.e. remove all the un-necessary spaces. Codeigniter does have feature of giziping output or it can be done via .htaccess. But still I also would like to remove un-necessary spaces from final html output as well. I played a bit with this peace of code to do it, and it seem to work. This does indeed result in html that is without excess spaces and removes other tab formatting. class Welcome extends CI_Controller { function _output() { echo preg_replace('!\s+!', ' ', $output); } function index(){ ... } } Now the problem with this is there may be tag like <pre>,<textarea>, etc.. which may have space in it and regx should remove them. So, how do I remove excess space from final html, without effecting spaces or formatting for these certain tags using regx? Thanks to @Alan Moore got the answer, this worked for me echo preg_replace('#(?ix)(?>[^\S ]\s*|\s{2,})(?=(?:(?:[^<]++|<(?!/?(?:textarea|pre)\b))*+)(?:<(?>textarea|pre)\b|\z))#', ' ', $output); @ridgerunner here did very good job of analyzing this regx, ended up using his solution. Cheers to ridgerunner.

    Read the article

  • Load some data from database and hide it somewhere in a web page

    - by kwokwai
    Hi all, I am trying to load some data (which may be up to a few thousands words) from the database, and store the data somewhere in a html web page for comparing the data input by users. I am thinking to load the data to a Textarea under Div tag and hide the the data: <Div id="reference" style="Display:none;"> <textarea rows="2" cols="20" id="database"> html, htm, php, asp, jsp, aspx, ctp, thtml, xml, xsl... </textarea> </Div> <table border=0 width="100%"> <tr> <td>Username</td> <td> <div id="username"> <input type="text" name="data" id="data"> </div> </td> </tr> </table> <script> $(document).ready(function(){ //comparing the data loaded from database with the user's input if($("#data").val()==$("#database").val()) {alert("error");} }); </script> I am not sure if this is the best way to do it, so could you give me some advice and suggest your methods please.

    Read the article

  • Unobstrusive pseudo-classes and attribute selectors emulation in IE

    - by Álvaro G. Vicario
    I'm trying to emulate some pseudo-classes and attribute selectors in Internet Explorer 6 and 7, such as :focus, :hover or [type=text]. So far, I've managed to add a class name to the affected elements: $("input, textarea, select") .hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); }) .focus(function(){ $(this).addClass("focus"); }) .blur(function(){ $(this).removeClass("focus"); }); $("input[type=text]").each(function(){ $(this).addClass("text"); }); However, I'm still forced to duplicate selector in my style sheets: textarea:focus, textarea.focus{ } And, to make things worse, IE6 seems to ignore all the selectors when it finds an attribute: input[type=text], input.text{ /* IE6 ignores this */ } And, of course, IE6 ignores selectors with multiple classes: input.text.focus{ /* IE6 ignores this */ } So I'm likely to end up with this mess: input[type=text]{ /* Rules here */ } input.text{ /* Same rules again */ } input[type=text]:focus{ } input.text_and_focus{ } input.text_and_hover{ } input.text_and_focus_and_hover{ } My question: is there any way to read the rules or computed style defined for a CSS selector and apply it to certain elements, so I only need to maintain one set of standard CSS?

    Read the article

  • How To Add/Remove Multi Rows In jQuery And Wordpress

    - by SUBSWISS
    Hey All I'm making a wordpress theme options page, and one of the options I want to make is how to add/removes dynamic rows by that the user can make it when he want to add a block. something like this <table id="block" width="350px" border="0"> <tr> <td> 1 </td><!--Nomber of the row--> <td><input type="text" /><br /><label>Title</label></td><!--Title of the row--> <td><input type="text" /><br /><label>IMG Link</label></td><!--Image of the row--> <td><textarea type="textarea" cols="40" rows="2"></textarea><br /><label>Description</label></td> </tr> </table> and the result will be something like this : Please Click Here To See The Image Beside I want to make it saved to wordpress when updating are saved . Thank you. Karar

    Read the article

  • Using Rich Text Editor (WYSIWYG) in ASP.NET MVC

    - by imran_ku07
       Introduction:          In ASP.NET MVC forum I found some question regarding a sample HTML Rich Text Box Editor(also known as wysiwyg).So i decided to create a sample ASP.NET MVC web application which will use a Rich Text Box Editor. There are are lot of Html Editors are available, but for creating a sample application, i decided to use cross-browser WYSIWYG editor from openwebware. In this article I will discuss what changes needed to work this editor with ASP.NET MVC. Also I had attached the sample application for download at http://www.speedfile.org/155076. Also note that I will only show the important features, not discuss every feature in detail.   Description:          So Let's start create a sample ASP.NET MVC application. You need to add the following script files,         jquery-1.3.2.min.js        jquery_form.js        wysiwyg.js        wysiwyg-settings.js        wysiwyg-popup.js          Just put these files inside Scripts folder. Also put wysiwyg.css in your Content Folder and add the following folders in your project        addons        popups          Also create a empty folder Uploads to store the uploaded images. Next open wysiwyg.js and set your configuration                  // Images Directory        this.ImagesDir = "/addons/imagelibrary/images/";                // Popups Directory        this.PopupsDir = "/popups/";                // CSS Directory File        this.CSSFile = "/Content/wysiwyg.css";              Next create a simple View TextEditor.aspx inside View / Home Folder and add the folllowing HTML.        <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <html >            <head runat="server">                <title>TextEditor</title>                <script src="../../Scripts/wysiwyg.js" type="text/javascript"></script>                <script src="../../Scripts/wysiwyg-settings.js" type="text/javascript"></script>                <script type="text/javascript">                            WYSIWYG.attach('text', full);                            </script>            </head>            <body>                <% using (Html.BeginForm()){ %>                    <textarea id="text" name="test2" style="width:850px;height:200px;">                    </textarea>                    <input type="submit" value="submit" />                <%} %>            </body>        </html>                  Here i have just added a text area control and a submit button inside a form. Note the id of text area and WYSIWYG.attach function's first parameter is same and next to watch is the HomeController.cs        using System;        using System.Collections.Generic;        using System.Linq;        using System.Web;        using System.Web.Mvc;        using System.IO;        namespace HtmlTextEditor.Controllers        {            [HandleError]            public class HomeController : Controller            {                public ActionResult Index()                {                    ViewData["Message"] = "Welcome to ASP.NET MVC!";                    return View();                }                    public ActionResult About()                {                                return View();                }                        public ActionResult TextEditor()                {                    return View();                }                [AcceptVerbs(HttpVerbs.Post)]                [ValidateInput(false)]                public ActionResult TextEditor(string test2)                {                    Session["html"] = test2;                            return RedirectToAction("Index");                }                        public ActionResult UploadImage()                {                    if (Request.Files[0].FileName != "")                    {                        Request.Files[0].SaveAs(Server.MapPath("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                        return Content(Url.Content("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                    }                    return Content("a");                }            }        }          So simple code, just save the posted Html into Session. Here the parameter of TextArea action is test2 which is same as textarea control name of TextArea.aspx View. Also note ValidateInputAttribute is false, so it's up to you to defends against XSS. Also there is an Action method which simply saves the file inside Upload Folder.          I am uploading the file using Jquery Form Plugin. Here is the code which is found in insert_image.html inside addons folder,        function ChangeImage() {            var myform=document.getElementById("formUpload");                    $(myform).ajaxSubmit({success: function(responseText){                insertImage(responseText);                        window.close();                }            });        }          and here is the Index View which simply renders the html of Editor which was saved in Session        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>        <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">            Home Page        </asp:Content>        <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">            <h2><%= Html.Encode(ViewData["Message"]) %></h2>            <p>                To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.            </p>            <%if (Session["html"] != null){                  Response.Write(Session["html"].ToString());            } %>                    </asp:Content>   Summary:          Hopefully you will enjoy this article. Just download the code and see the effect. From security point, you must handle the XSS attack your self. I had uploaded the sample application in http://www.speedfile.org/155076

    Read the article

  • wmd editor (jquery version) over ajax forms

    - by Davide Barison
    i'm trying wmd editor over ajax. here there is the bugged code wdm code is based on openlibrary fork on github it work very good without ajax. but when i try to display editor over ajax form it doesn't load. non ajax version produce this html: <div id="wmd-container"> <div id="wmd-button-bar"></div> <div id="wmd-button-bar-0" class="wmd-button-bar"><ul class="wmd-button-row"><li style="background-position: 0px 0px;" title="Strong &lt;strong&gt; Ctrl+B" class="wmd-button wmd-bold-button"></li><li style="background-position: -20px 0px;" title="Emphasis &lt;em&gt; Ctrl+I" class="wmd-button wmd-italic-button"></li><li class="wmd-spacer"></li><li style="background-position: -40px 0px;" title="Hyperlink &lt;a&gt; Ctrl+L" class="wmd-button wmd-link-button"></li><li style="background-position: -60px 0px;" title="Blockquote &lt;blockquote&gt; Ctrl+Q" class="wmd-button wmd-quote-button"></li><li style="background-position: -80px 0px;" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K" class="wmd-button wmd-code-button"></li><li style="background-position: -100px 0px;" title="Image &lt;img&gt; Ctrl+G" class="wmd-button wmd-image-button"></li><li class="wmd-spacer"></li><li style="background-position: -120px 0px;" title="Numbered List &lt;ol&gt; Ctrl+O" class="wmd-button wmd-olist-button"></li><li style="background-position: -140px 0px;" title="Bulleted List &lt;ul&gt; Ctrl+U" class="wmd-button wmd-ulist-button"></li><li style="background-position: -160px 0px;" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H" class="wmd-button wmd-heading-button"></li><li style="background-position: -180px 0px;" title="Horizontal Rule &lt;hr&gt; Ctrl+R" class="wmd-button wmd-hr-button"></li><li class="wmd-spacer"></li><li style="background-position: -200px -20px;" title="Undo - Ctrl+Z" class="wmd-button wmd-undo-button"></li><li style="background-position: -220px -20px;" title="Redo - Ctrl+Shift+Z" class="wmd-button wmd-redo-button"></li><li style="background-position: -240px 0px;" class="wmd-button wmd-help-button"><a title="WMD website" target="_blank" href="http://wmd-editor.com/"></a></li></ul></div><div id="wmd-button-bar-2" class="wmd-button-bar"></div><div id="wmd-button-bar-4" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-4" class="wmd-preview"></div><div id="wmd-preview-2" class="wmd-preview"></div><div id="wmd-preview-0" class="wmd-preview"></div> </div> with ajax form: <div id="wmd-container"> <div id="wmd-button-bar"></div> <div id="wmd-button-bar-1" class="wmd-button-bar"></div><div id="wmd-button-bar-3" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-3" class="wmd-preview"></div><div id="wmd-preview-1" class="wmd-preview"></div> </div> any help?

    Read the article

  • ZendX_JQuery dialogContainer usage

    - by Kalle Johansson
    Hi ! I'm aming to make use of the ZendX_JQuery dialogContainer view helper, in order to produce a modal window, were users can input specified information(for example send a message). I'm trying to use the dialogContainer view helper in this fashion. First of, include the ZendX library in the applications library folder. Secondly, include the following row in the initViewHelper method within the Bootstrap.php file "$view-addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');" third, adding the following conditional enabling of js in the layout.phtml "<?php if($this->jQuery()->isEnabled()){ $this->jQuery()->setLocalPath($this->baseUrl() .'/js/jquery/js/jquery-1.4.2.min.js') ->setUiLocalPath($this->baseUrl() .'/js/jquery/js/jquery-ui-1.8.custom.min.js') ->addStylesheet($this->baseUrl() .'/js/jquery/css/ui-lightness/jquery-ui-1.8.custom.css'); echo $this->jQuery(); } ?>" fourth, creating my Application_Form_JQueryForm extending ZendX_JQuery_Form "<?php class Application_Form_JQueryForm extends ZendX_JQuery_Form { private $form; public function init() { $this->form = $this->setAction(Zend_Controller_Front::getInstance()->getBaseUrl() . '/index/index') ->setMethod('post'); $this->form->setDecorators(array( 'FormElements', 'Form', array ('DialogContainer', array( 'id' => 'tabContainer', 'style' => 'width: 600px;', 'title' => 'Send a private message to Kalle', 'JQueryParams' => array( 'tabPosition' => 'top', ), )), )); $topic = new Zend_Form_Element_Text('topic'); $topic->setValue('topic') ->setRequired(true) ->setValidators(array('validators' => array( 'validator' => 'StringLength', 'options' => array(1,15) ))) ->setDecorators(array( 'ViewHelper', 'Description', 'Errors', array('HtmlTag', array('tag' => 'dl')))); $textarea = new Zend_Form_Element_Textarea('textarea'); $textarea->setValue('post a comment') ->setAttribs(array( 'rows' => 4, 'cols' => 20 )) ->setRequired(true) ->setValidators(array('validators' => array( 'validator' => 'StringLength', 'options' => array(1,15) ))) ->setDecorators(array( 'ViewHelper', 'Description', 'Errors', array('HtmlTag', array('tag' => 'dl')))); $submit = new Zend_Form_Element_Submit('submit'); $submit->setLabel('Send your comment') ->setDecorators(array( 'ViewHelper', 'Description', 'Errors', array('Description', array('escape' => false, 'tag' => 'span')), array('HtmlTag', array('tag' => 'dl')))) ->setDescription('or <a href="/index/index/send/false">Cancel</a>'); $this->form->addElements(array($topic, $textarea, $submit)); } }" This form is then instanciated in the controllers action method, and called in the view. And so to the problem of mine, no matter what i try, in order to for instance set, the width of the dialogContainer or any other parameter (color, css, height, so on and so forth), this being in the JQueryForm's setDecorator part for the form, i can't seem to get any change whatsoever in the resulting modal when called in the view, any help in the proper direction would be greatly appreciated Thanks in advance, Kalle Johansson

    Read the article

  • Selecting and inserting text at cursor location in textfield with JS/jQuery

    - by IceCreamYou
    Hello. I have developed a system in PHP which processes #hashtags like on Twitter. Now I'm trying to build a system that will suggest tags as I type. When a user starts writing a tag, a drop-down list should appear beneath the textarea with other tags that begin with the same string. Right now, I have it working where if a user types the hash key (#) the list will show up with the most popular #hashtags. When a tag is clicked, it is inserted at the end of the text in the textarea. I need the tag to be inserted at the cursor location instead. Here's my code; it operates on a textarea with class "facebook_status_text" and a div with class "fbssts_floating_suggestions" that contains an unordered list of links. (Also note that the syntax [#my tag] is used to handle tags with spaces.) maxlength = 140; var dest = $('.facebook_status_text:first'); var fbssts_box = $('.fbssts_floating_suggestions'); var fbssts_box_orig = fbssts_box.html(); dest.keyup(function(fbss_key) { if (fbss_key.which == 51) { fbssts_box.html(fbssts_box_orig); $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() { var tag = $(this).html(); //This part is not well-optimized. if (tag.match(/W/)) { tag = '[#'+ tag +']'; } else { tag = '#'+ tag; } var orig = dest.val(); orig = orig.substring(0, orig.length - 1); var last = orig.substring(orig.length - 1); if (last == '[') { orig = orig.substring(0, orig.length - 1); } //End of particularly poorly optimized code. dest.val(orig + tag); fbssts_box.hide(); dest.focus(); return false; }); fbssts_box.show(); fbssts_box.css('left', dest.offset().left); fbssts_box.css('top', dest.offset().top + dest.outerHeight() + 1); } else if (fbss_key.which != 16) { fbssts_box.hide(); } }); dest.blur(function() { var t = setTimeout(function() { fbssts_box.hide(); }, 250); }); When the user types, I also need get the 100 characters in the textarea before the cursor, and pass it (presumably via POST) to /fbssts/load/tags. The PHP back-end will process this, figure out what tags to suggest, and print the relevant HTML. Then I need to load that HTML into the .fbssts_floating_suggestions div at the cursor location. Ideally, I'd like to be able to do this: var newSuggestions = load('/fbssts/load/tags', {text: dest.getTextBeforeCursor()}); fbssts_box.html(fbssts_box_orig); $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() { var tag = $(this).html(); if (tag.match(/W/)) { tag = tag +']'; } dest.insertAtCursor(tag); fbssts_box.hide(); dest.focus(); return false; }); And here's the regex I'm using to identify tags (and @mentions) in the PHP back-end, FWIW. %(\A(#|@)(\w|(\p{L}\p{M}?))+\b)|((?<=\s)(#|@)(\w|(\p{L}\p{M}?))+\b)|(\[(#|@).+?\])%u Right now, my main hold-up is dealing with the cursor location. I've researched for the last two hours, and just ended up more confused. I would prefer a jQuery solution, but beggars can't be choosers. Thanks!

    Read the article

  • HTML/JS/CSS issue getting bigger by itself

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

    Read the article

  • Why my onsubmitg is not firing - Spring

    - by GigaPr
    Hi, i have a controller public class EditUserController extends BaseController { public EditUserController() { setCommandClass(User.class); setCommandName("editaUser"); } public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ModelAndView modelAndView = new ModelAndView("editUser"); String id = request.getParameter("id"); if(!id.isEmpty()) { User user = this.userServiceImplementation.get(Integer.parseInt(id)); modelAndView.addObject("editaUser", user); } return modelAndView; } } and the view <form:form method="POST" commandName="editaUser" cssClass="addUserForm"> <div class="floatL"> <div class="padding5"> <div class="fieldContainer"> <strong>First Name:</strong>&nbsp; </div> <form:errors path="firstName" cssClass="error"/> <form:input path="firstName" cssClass="textArea" /> </div> <div class="padding5"> <div class="fieldContainer"> <strong>Last Name:</strong>&nbsp; </div> <form:errors path="lastName" cssClass="error"/> <form:input path="lastName" cssClass="textArea" /> </div> </div> <div class="floatR"> <div class="padding5"> <div class="fieldContainer"> <strong>Username:</strong>&nbsp; </div> <form:errors path="username" cssClass="error"/> <form:input path="username" cssClass="textArea" /> </div> <div class="padding5"> <div class="fieldContainer"> <strong>Password</strong>&nbsp; </div> <form:errors path="password" cssClass="error"/> <form:input path="password" cssClass="textArea"/> </div> </div> <input type="submit" class="floatR" value="Save" > </form:form> and the bean definition looks like <bean name="/editUser.htm" class="com.rssFeed.mvc.EditUserController"> <property name="userServiceImplementation" ref="userServiceImplementation"/> <property name="commandName" value="editaUser" /> <property name="successView" value="users"/> <property name="sessionForm" value="true"/> </bean> I populate the view using the querystring but i would lke to update the record in the database on click of the submit button. i tried to insert a on submit method protected ModelAndView onSubmit(Object command, BindException bindException) throws Exception { return new ModelAndView(getSuccessView()); } but it never fires What is the problem i do not get it?? thanks

    Read the article

  • Replace html element with data in javascript

    - by Ultimate
    I trying to auto increment the serial number when row increases and automatically readjust the numbering order when a row gets deleted in javascript. For that I am using the following clone method for doing my task. Rest of the thing is working correct except its not increasing the srno because its creating the clone of it. Following is my code for this: function addCloneRow(obj) { if(obj) { var tBody = obj.parentNode.parentNode.parentNode; var trTable = tBody.getElementsByTagName("tr")[1]; var trClone = trTable.cloneNode(true); if(trClone) { var txt = trClone.getElementsByTagName("input"); var srno = trClone.getElementsByTagName("span"); var dd = trClone.getElementsByTagName("select"); text = tBody.getElementsByTagName("tr").length; alert(text) //here i am getting the srno in increasing order //I tried something like following but not working //var ele = srno.replace(document.createElement("h1"), srno); //alert(ele); for(var i=0; i<dd.length; i++) { dd[i].options[0].selected=true; var nm = dd[i].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); dd[i].name = nNm+"[]"; } for(var j=0; j<txt.length; j++) { var nm = txt[j].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); txt[j].name = nNm+"[]"; if(txt[j].type == "hidden"){ txt[j].value = "0"; }else if(txt[j].type == "text") { txt[j].value = ""; }else if(txt[j].type == "checkbox") { txt[j].checked = false; } } for(var j=0; j<txt.length; j++) { var nm = txt[j].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); txt[j].name = nNm+"[]"; if(txt[j].type == "hidden"){ txt[j].value = "0"; }else if(txt[j].type == "text") { txt[j].value = ""; }else if(txt[j].type == "checkbox") { txt[j].checked = false; } } tBody.insertBefore(trClone,tBody.childNodes[1]); } } } Following is my html : <table id="step_details" style="display:none;"> <tr> <th width="5">#</th> <th width="45%">Step details</th> <th>Expected Results</th> <th width="25">Execution</th> <th><img src="gui/themes/default/images/ico_add.gif" onclick="addCloneRow(this);"/></th> </tr> <tr> <td><span>1</span></td> <td><textArea name="step_details[]"></textArea></td> <td><textArea name="expected_results[]"></textArea></td> <td><select onchange="content_modified = true" name="exec_type[]"> <option selected="selected" value="1" label="Manual">Manual</option> <option value="2" label="Automated">Automated</option> </select> </td> <td><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td> </tr> </table> I want to change the srno. of span element dynamically after increment and decrement on it. Need help thanks

    Read the article

  • JSCompress fails to compress my js file - why?

    - by Renso
    Issue: You use the online compression utility jscompress.com to compress your js file but it fails with an error. Why this may be happening and how to fix it. Possible causes: Apparently not using open and closing curly brackets in an IF statement would cause this. Well turns out this is not the case. Look at the following example and see if you can figure out what the issue is :-)   function SetupDeliveredVPRecontactNotes($item, id) {     var theData;     $.ajax({         data: { deliveredVPId: id },         url: $('#ajaxGetDeliveredVPRecontactNotesUrl').val(),         type: "GET",         async: false,         dataType: "html",         success: function(data, result) {             $item.empty();             var input = '<textarea class="recontactNote" rows="4" name="DeliveredVPRecontactNotes_' + id + '" id="DeliveredVPRecontactNotes_' + id + '" cols="115">' + data + '</textarea>';             $item.append(input);             theData = data;         },         error: function(XMLHttpRequest, textStatus, errorThrown) {             $item.empty();             alert("An error occurred: The operation to retrieve the DeliveredVP's Recontact Notes has failed");         }     });                  //ajax     return theData; }     Solution: The name of the method/function is the same as the message in the ALERT message when the spaces are removed: " DeliveredVP Recontact Notes" becomes " DeliveredVPRecontactNotes" and mathes that of the function. So I changed it to " DeliveredVP's Recontact Notes"

    Read the article

  • how to override ckeditor events [migrated]

    - by joe
    I am new to ckeditor, I have hard time figuring this issue out. due to my html design; if I try to use the link editor dialog while my ckeditor is maximized, it just doesn't show up, I understand that ckeditor is the top most object in my html page and the link dialog comes underneath it. if now I bring ckeditor to its normal state I will be able to see and use the link dialog. my idea is to slightly override the link button click event as follows: if the editor is in full screen mode, bring it back to the normal state. and keep a flag somewhere so that when I close the link dialog, I can decide whether to bring back the ckeditor to a maximized mode again. now this is easy logic except that I do not know how to override the click event of the link button and keep it work as expected. here's what I have: $().ready(function () { var editor = $('#txa').ckeditor(); CKEDITOR.plugins.registered['link']= { init : function( editor ) { var command = editor.addCommand( 'link', { modes : { wysiwyg:1, source:1 }, exec : function( editor ) { if(editor.commands.maximize.state == 1 ){ alert("maximized"); //....here bring back the editor to UN-maximized state and let the link button event click do the default behavior } else { alert("normal state"); } //2 is normal state //1 is maximized } } ); editor.ui.addButton( 'link',{label : 'YOUR LABEL',command : 'link'}); } } }); html part to make the exemple work: <div> <textarea id="txa"> </textarea> </div> TO BE SHORT: http://jsfiddle.net/Q43QP/ if the editor is maximized, bring it to normal state then show the link dialog.

    Read the article

  • asp.net mvc Ajax.BeginForm

    - by Bala R
    Hello, I'm having some difficulties with Ajax.BeginForm I have something like this in a view <% using (Ajax.BeginForm("ActionName", null , null, new { id = "FormName" })) {%> <input type="hidden" value = '<%= Html.Encode( Model.id) %>' name="id"/> <textarea id="message" name=message rows="4" style="width: 90%"> </textarea> <% }%} And the action method is something like this [AcceptVerbs(HttpVerbs.Post)] [Authorize] public ActionResult ActionName(int id, string message) { .... } I'm trying to pass the 'id' and 'message' to the action method. I'm passing 'null' for routeValues but I dont know what to pass. Ideally I was trying to find an overload that did not require route values but took actionName and htmlattributes (for form name) but I could not find one.I don't want to add 'message' to the view-model and I do need the FormName in there for jquery operations. What is the best way to work around this problem ?

    Read the article

  • flex DataGrid row auto fit content

    - by orangestar
    Hi, all! I try to create a DataGrid in flex which can fit its content. The itemEdit is a TextArea that can auto change its height while inputing. I set variableRowHeight="true" and wordWrap="true". Although The TextArea will auto resize but the height of row is not changed. Could anyone tell me how to change row height of DataGrid while inputing? One way I found is auto commit its text to DataGrid so the DataGrid will know the data changes but which function can commit its data? Thank you!

    Read the article

  • How to destroy tinymce completely?

    - by powerboy
    I am working on something like this: On a webpage, there is an article wrapped in a DIV, an Edit button. When a user click on the Edit button, insert an textarea via javascript, load the html of the DIV into the textarea, load and initial tinymce. When the user click on the Save button, save and update the article via ajax, and destroy tinymce completely. The problem is that, I failed to destroy tinymce completely. When the user click on the Edit button again, a new tinymce instance will load while the old instance is just hidden. BTW, I am using the jQuery version of tinymce

    Read the article

  • jquery - check length of input field?

    - by KnockKnockWhosThere
    The code below is intended to enable the submit button once the user clicks in the textarea field. It works, but I'm trying to also make it so that it's only enabled if there's at least one character in the field. I tried wrapping it in: if($(this).val().length > 1) { } But, that didn't seem to work... Any ideas? $("#fbss").focus(function(){ $(this).select(); if($(this).val()=="Default text") { $(this).val(""); $("input[id=fbss-submit]").removeClass(); $("input[id=fbss-submit]").attr('disabled',false); $("input[id= fbss-submit]").attr('class','.enableSubmit'); if($('.charsRemaining')) { $('.charsRemaining').remove(); $("textarea[id=fbss]").maxlength({ maxCharacters: 190, status: true, statusClass: 'charsRemaining', statusText: 'characters left', notificationClass: 'notification', showAlert: false, alertText: 'You have exceeded the maximum amount of characters', slider: false }); } });

    Read the article

  • Breaking out of first element in IHTMLTxtRange

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

    Read the article

  • How can I get ambethia's captcha plugin to work in rails 3?

    - by James
    I have installed ambethia's captcha plugin as a plugin in my rails 3 app. When I put the <%= recaptcha_tags %> in my view, it puts this on the page: <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=my_key&error=expression"></script> <noscript> <iframe src="http://api.recaptcha.net/noscript?k=my_other_key" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"></noscript> Is there a way that I can make this work in rails 3? I'd appreciate any help.

    Read the article

  • tinymce not working with chrome when i dynamically setcontent

    - by oo
    I have a site that i put: <body onload="ajaxLoad()" > I have a javascript function that then shove data from my db into the text editor by using the setContent method in javascript of the textarea. seems fine in firefox and IE but in chrome sometimes nothing shows up. no error, just blank editor in the body section: <textarea id="elm1" name="elm1" rows="40" cols="60" style="width: 100%"> </textarea> in the head section: function ajaxLoad() { var ed = tinyMCE.get('elm1'); ed.setProgressState(1); // Show progress window.setTimeout(function() { ed.setProgressState(0); // Hide progress ed.setContent('<p style="text-align: center;"><strong><br /><span style="font-size: small;">General Manager&#39;s Corner</span></strong></p><p style="text-align: center;">August&nbsp;2009</p><p>It&rsquo;s been 15<sup>th</sup> and so have a Steak Night (Saturday, 15<sup>th</sup>) and a shore Dinner planned (Saturday, 22<sup>nd</sup>) this month. urday, September 5<sup>th</sup>. e a can&rsquo;t missed evening, shas extended it one additional week. The last clinic will be the week of August 11<sup>th</sup>. </p><p>&nbsp;Alt (Tuesday through Thursday) </p><p>&nbsp;I wouClub.</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;<strong></strong></p>'); }, 1); } i am not sure if its some of the formatting that chrome is reject but it seems like if tinymce can parse it in one browser it can do it in any browser so i am confused. any suggestions?

    Read the article

  • How can I make a jQuery UI 'draggable()' div draggable for touchscreen?

    - by artlung
    I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item. Basically, I click or tap on div#everything (100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I can drag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage. So here's the code I use to capture clicks: $('#everything').bind('click', function(e){ var elem = document.createElement('DIV'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).css({ top: STATE.top, left: STATE.left }).html('<textarea></textarea>') .addClass('instance') .bind('click', function(event){ return false; }); $(this).append(e); }); And here's the code I use to "save" the note and turn the input div into just a display div: $('textarea').live('mouseleave', function(){ var val = jQuery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).css({ height: '30px' }); STATE.height = 30; if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) { while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) { var h = div.height() + 10; STATE.height = h; div.css({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guid = uniqueID() div.addClass('savedNote').attr('id', STATE.guid).draggable({ stop: function() { var offset = $(this).offset(); STATE.guid = $(this).attr('id'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); } }); And I have this code when I load the page for saved notes: $('.savedNote').draggable({ stop: function() { STATE.guid = $(this).attr('id'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); My STATE object handles saving the notes. Onload, this is the whole html body: <body> <div id="everything"></div> <div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> <div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> <div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> <div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> <div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> </body> So, my question is really: how can I make this work better on iPad? I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs. More general comments about how to write UI components like this would be welcome as well. Thanks!

    Read the article

< Previous Page | 13 14 15 16 17 18 19 20 21 22 23 24  | Next Page >