Search Results

Search found 36 results on 2 pages for 'jeditable'.

Page 1/2 | 1 2  | Next Page >

  • update div after jeditable submit in rails

    - by nvano
    i want to submit the text from jeditable, store it in the database and then i don´t want to render the updated text back to jeditable field, i want to update the whole div in which the jeditable field (and maybee other text fields) is. f.e. i change the username via jeditable inplace editor, then i store the changes in the db and now i want to update the complete div which contains the username (in place editor) and also other divs, cause after the username changes, the email changes, too.

    Read the article

  • Supplying a callback to Jeditable

    - by pjmorse
    Summary: When I try supplying a onsubmit or onreset callback to Jeditable, I get Object [function] has no method 'apply' errors. How I got here: I've been working on a rails plugin to supply Jeditable and jWYSIWYG for in-place WYSIWYG editing. Development is driven by a Rails project I'm working on which asks for specific functions. One of the options I added was the ability to trigger Jeditable's edit mode using a button instead of clicking on the editable text itself, following the pattern suggested in this answer. The next step, though, is to hide the button while in edit mode, and reveal it again when leaving edit mode. The hide is easy enough; I just added a line to the triggering function which sends .toggle() to the button. Reveal is trickier. I figure I need to .toggle() again on submit or cancel, and helpfully, Jeditable offers onsubmit and onreset callbacks. However, when I try using those callbacks, I get this Object [something] has no method 'apply' errors. What I'm trying: Because this is in the context of a Rails helper, the actual mechanics are a little more involved than this, but the upshot is that I'm trying to follow this pattern, handing Jeditable this in the args: "onsubmit":"showTrigger", and then including this script: function showTrigger(settings, original) { $(".edit_trigger[id='element_id']").toggle(); } However, on submitting changes or canceling an edit, I get the error Object showTrigger has no method 'apply' ...as described above. I also tried sending in a function directly as the "onsubmit" argument (i.e. "onsubmit": "function(settings, original){$(\".edit_trigger[id='element_id']\").toggle();}" and then I just get Object function(settings, original){$(\".edit_trigger[id='element_id']\").toggle();} has no method 'apply' instead. There must be something wrong with how I'm handing in this callback. Any ideas? ETA: This answer suggests to me that somehow I'm providing a string to Jeditable when it expects a function instead. However, because I'm working within the context of a Rails helper, I'm not at all sure how to fix that - the "showTrigger" bit is set as a Ruby variable in the helper, and although window.showTrigger() is defined when the window is loaded, I don't know how to designate that function within a Ruby variable such that it will be recognized as a function at page load time.

    Read the article

  • Jeditable Datepicker onblur problem

    - by Shobha Deepthi
    Hi, I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here: stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event. Here's my code, $.editable.addInputType('datepicker', { element : function(settings, original) { var input = $(''); if (settings.width != 'none') { input.width(settings.width); } if (settings.height != 'none') { input.height(settings.height); } input.attr('autocomplete','off'); $(this).append(input); return(input); }, plugin : function(settings, original) { var form = this; settings.onblur = function(e) { t = setTimeout(function() { original.reset.apply(form, [settings, self]); }, 100); }; $(this).find('input').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd-M-y', closeAtTop: true, onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); } }); }, submit : function(settings, original) { } }); $(function() { $('.edit_eta').editable('update_must_fix_eta.php', { id: 'bugid', name: 'eta', type: 'datepicker', event: 'click', select : true, width: '50px', onblur:'cancel', cssclass : 'editable', indicator : 'Updating ETA, please wait.', style : 'inherit', submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1} }); }); I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47 Even this does not help. Any help is appreciated.

    Read the article

  • Jeditable with jQuery UI Datepicker

    - by BrynJ
    I need to have a click to edit element on a page, that will in turn invoke an instance of the jQuery UI Datepicker. Currently, I'm using JEditable to provide the in place editing, which is working fine. However, I have a date control input that I would like to have appear as a calendar, which is where the fun starts. I've found a Comment in the this blog by Calle Kabo (the page is a little mashed unfortunately) that details a way to do this: $.editable.addInputType("datepicker", { element: function(settings, original) { var input = $("<input type=\"text\" name=\"value\" />"); $(this).append(input); return(input); }, plugin: function(settings, original) { var form = this; $("input", this).filter(":text").datepicker({ onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); } }); } }); However, I can't get the above to work - no errors, but no effect either. I've tried placing it within the jQuery document ready function and also outside of it - no joy. My UI Datepicker class is date-picker and my Jeditable class is ajaxedit, I'm sure the above inaction is due to the need to reference them somehow in the code, but I don't know how. Also, the Jeditable control is one of many element ids, if that has a bearing. Any ideas from those more in the know?

    Read the article

  • jeditable in an ASP.NET web form

    - by Barney
    Can someone explain to me how you would use jeditable with an ASP.NET web form (and C# codebehind). I've got a bit of experience with web forms but not very complicated stuff, and haven't used much jquery before, and this is just puzzling me. I understand how to put it in and attach it to the element you want to be editable, it's what jeditable does when you submit the text field that I don't get. How do you handle that in the webform in order to save the changed text? Hope someone understands my issue... Cheers!

    Read the article

  • Trying to integrate Jeditable+MarkItUp and Thickbox/Lightbox

    - by Bob Sawyer
    I've managed to successfully integrate MarkItUp with Jeditable based on the instructions on those two sites. What I would really like to do, however, is to have the Jeditable/MarkItUp editing window appear in a Thickbox or Lightbox overlay. So far my attempts to do this have not been successful. So, at the moment, I have the standard code: $.editable.addInputType('markitup', { element : $.editable.types.textarea.element, plugin : function(settings, original) { $('textarea', this).markItUp(settings.markitup); } }); $(".editme").editable("/content/save", { event : 'dblclick', type : 'markitup', submit : 'OK', cancel : 'Cancel', width : 640, height : 'auto', tooltip : 'Double-click to edit...', onblur : 'ignore', markitup : mySettings }); I've found other posts here that show how to trigger the edit box by clicking on a link rather than the object itself, and I've tried integrating that with the Thickbox calls, to no avail. Would appreciate anyone pointing me in the right direction. Thanks!

    Read the article

  • jeditable accidentally triggering on Draggable on nested items

    - by ripper234
    I'm using jquery-ui's draggable for drag-and-drop, and jeditable for inline editing. When I drag and drop an element that's also editable, right after it's dropped jeditable kicks in and pops into 'edit mode'. How can I disable this behavior? Edit - the problem happens because of netsting - see this example. I also added draggable to the mix to make the example more realistic (the actual real problem is in this site that I'm working on) Note - even though this question has an accepted answer because of the bounty rules, the problem is still not resolved for me.

    Read the article

  • jquery jeditable pass multiple values...

    - by Scott
    Alright totally new to jeditable, Say I have some <div>'s and <input type='hidden' /> items that are generated dynamically with PHP like this: <?php while($row = $db->fetch_assoc($query)) : ?> <input name="hiddenID" type="hidden" value="<?php echo $row['id'] ?>" <div class="items"><?php echo $row['item']; ?></div> <?php endwhile; ?> Which gives me say...this: 1 //hidden value item1 2 //hidden value item2 3 //hidden value item3 And a jeditable inline-edit script to go along with it: hidden = $(".items").siblings("[name=hiddenID]").val(); //using a global var..don't know how to pass it into the editable function. $(".items").editable('save.php', { type : 'text', tooltip : 'Double-Click to edit...', onblur : 'submit', event : 'dblclick', submitdata : function() { return {id : hidden }; //how do I pass mutiple hiddenID values?? } }); I am wondering how to pass multiple values into the editable function. The way I've shown here only passes one value...the first row.

    Read the article

  • Jeditable setting default selected value after change.

    - by Dk589
    My app allows the user to update a field via a drop down box using jeditable. When the program is loaded i created this function to get the selected value and set it as the selected value in jeditable. But after i change the value, the selected tag stays set as the old value. how can i make it change to the new value? this is the function function updateType(ID,type){ $(document).ready(function(){ $('#tweekType-'+ID).editable("edit.php?type=tweekType", { data : " {'copywriting':'Copywriting','design':'Design','code':'Code', 'selected':'"+type+"'}", type : 'select' }); }); this is the wrapper around the tag. <span id="tweekType-<?php echo $getTweaksReturned->tweekID; ?>"> <?php type($getTweaksReturned->type); ?> <script>updateType('<?php echo $getTweaksReturned->tweekID; ?>','<? echo $getTweaksReturned->type; ?>'); </script> </span> The same tag is replicated on the page the returns the new variable.

    Read the article

  • Jeditable doubling up on linebreaks every edit

    - by st3
    I'm using var retval = value.replace(/<br[\s\/]?>/gi, '\n'); To strip the <br> tags from the textarea and nl2br('$_POST('newValueHere')') to insert into my database and to return back to jeditable to display the edits. The only problem I'm having is that each click on the editable field seems to make all the <br> tags be written twice? This makes no sense, does anyone have any ideas what could be going on?

    Read the article

  • JQuery AutoComplete with JEditable

    - by bkak
    Hi, I am trying to attach AutoComplete of JQuery with JEditable. Got the following eg on search. But it also does not seem to work. http://www.pastie.org/978610 I want to attach AutoComplete to <td> of DataTable(Allan Jardine). Does anybody have any code snippet for the same? Pl help.. Thanks, Bhoomi.

    Read the article

  • JQuery JEditable stay in edit mode on error

    - by Justin
    I'm successfully using jeditable to submit via a function using jQuery.ajax and the async : false option , but am having an issue aborting if an error is returned. How can I get the edit box to stay activated and / or revert back to the original value if there are errors? I'm returning http status codes. so something like async : false .ajax submit here... if (xhr.status == 200) { return value; else { alert ('returned error'); // keep edit box activated but available for another try, or revert back to original value } I tried not returning a value from the function, which keeps the edit box activated and ready for another submit, but then the ESC key doesn't work anymore and if I click outside the edit area, the edit box stays. Thanks in advance!

    Read the article

  • jQuery + Jeditable - detect when select is changed

    - by Bryan Roth
    I'm using Jeditable for in-place editing. One the controls I am working with has the select type. When a user clicks on the field, the following select control is generated: <div id="status" class="editable_select"> <form> <select name="value"> <option value="Active">Active</option> <option value="Inactive">Inactive</option> </select> <button type="submit">Save</button> <button type="cancel">Cancel</button> </form> </div> What I am trying to figure out is how to use jQuery to detect when that select control is changed, especially since it doesn't have an ID attribute. This is what I have so far, but the event is not getting triggered: $(document).ready(function () { $('#status select').change(function () { alert("Change Event Triggered On:" + $(this).attr("value")); }); });

    Read the article

  • Jquery Using Jeditable and activating on click

    - by BandonRandon
    I found this to be almost exactly what I'm trying to do. I'm using Jeditable I can get the default setup to work. I've also been able to get the code in the forum above to work. I believe my problem is that because I'm using a table I need to so something else to select the previous element. Here is my HTML <table> <tr> <td width="5%"><input class="cat_checkbox" type="checkbox" name='delete_cat[]' value='<?php echo("$cat_data[cat_id]");?>' /></td> <td width="90%" class="edit_cat_title" id='unique_id'>Category</td> <td width="5%"><a href="#" class="edit_cat_title_trigger"><img src="images/edit.gif" border="0"></a></td> </tr> </table> and here is my JQuery: //modify title content on the fly $('.edit_cat_title').editable('action.php', { name : 'cat_title', indicator : 'Saving...', submit : 'OK', cancel : 'Cancel', tooltip:'click to edit', event : 'edit' }); //trigger with the click of the edit image $(".edit_cat_title_trigger").bind("click", function() { $(this).prev().trigger("edit_cat_title"); }); I know I probably should be able to figure it out and I know all i have to do is change $(this).prev().trigger("edit_cat_title"); to the right thing but I'm still really new to Jquery. Thanks

    Read the article

  • jeditable table cell

    - by user666262
    Hi all, I am having an issue when using jeditable to edit a cell in a table. The project is the MVC 2 web application and the table has been put on the standard about page. How do i tell the script to call a specific method in the controller ? because it is currently just loading the entire page into the cell. This is the javascript: $(document).ready(function () { $('.editable').editable('http://localhost:2196/Home/About', { type: 'text', cancel: 'Cancel', event: 'dblclick', submit: 'OK', tooltip: 'double Click to edit...' }); }); This is the table : <% foreach (DataTableEditable.Models.Company item in (IEnumerable<DataTableEditable.Models.Company>)Model) {%> <tr id="<%= Html.Encode(item.ID) %>"> <td class="editable"><%= Html.Encode(item.Name) %> </td> <td><%= Html.Encode(item.Address) %> </td> <td><%= Html.Encode(item.Town) %> </td> </tr> <% }%> Thanks lots John

    Read the article

  • jScrollPane jEditable DOM problems

    - by Kyle Lafkoff
    Hello world, I am having a funky problem. See (this link won't disappear): www.skitzo.org/~el/bugjeditable.png for the firebug output screenshot. Here's my code. I run getJSON() to fetch the info from the PHP which pulls from DB and I fill a div with the result. I have jScrollPane and jEditable so a user can scroll down and click to edit any of the content. It works sometimes and then it doesn't work which makes me wonder if the browser is not interpreting the code properly or if I am misunderstanding fundamental DOM concepts here.... Here is a live current version of the code: http://www.musedates.com/testing.php $().ready(function() { $('#pane1').jScrollPane(); $('#tab_journal').tabs(); $('#tab2').load("/journal_new.php"); var i=0; var row = ''; var k, v, dt; $.getJSON("/ajax.php?j=22", function(data) { row = '<p>'; while(i<data.length) { $.each(data[i], function(k, v) { if (k == 'subject') { row += '<div style="font-size:1.5em; color:#000000;"><div class="editable" style="width:705px;" id="title-'+data[i].id+'">'+v+'</div></div>posted: '+dt+'<br />'; } else if (k == 'dt') { dt = v; } else if (k == 'msg') { row += '<div class="editableMsg" style="width:705px; height:40px;" id="msg-'+data[i].id+'">'+v+'</div></p>'; } }); i++; } $('#pane1').append(row).jScrollPane({scrollbarWidth:10, scrollbarMargin:10, showArrows:true}); }); $('.editable').livequery(function () { $('.editable').editable("/savejournal.php", { submitdata : function() { }, tooltip : 'Click to edit', indicator : '<img src="/UI/images/indicator.gif">', cancel : 'Cancel', submit : 'OK' }); $('.editableMsg').editable("/savejournal.php", { submitdata : function() { }, tooltip: 'Click to edit', indicator : '<img src="/UI/images/indicator.gif">', cancel : 'Cancel', submit : 'OK', type : 'textarea' }); $(".editable,.editableMsg").mouseover(function() { $(this).css('background-color', '#FDD017'); }); $(".editable,.editableMsg").mouseout(function() { $(this).css('background-color', '#fff'); }); }); }); And then the HTML: <div id="tab_container" style="margin:0px 0px 2px 8px;"> <ul id="tab_journal"> <li><a href="#tab1"><span>View / Edit</span></a></li> <li><a href="#tab2"><span>New Entry</span></a></li> </ul> </div> <div id="tab1" style="margin:0px 0px 0px 8px;"> <div id="pane1" class="scroll-pane super-wide"></div> </div> <div id="tab2" style="margin:0px 0px 0px 8px; width:700px;"></div> Thanks world.

    Read the article

  • jeditable not working

    - by zurna
    I did not make any changes on the code. I dont receive any errors but its not working. I must be missing something very very simple here. Any suggestion appreciated... Test link. http://www.aslanyurek.com/inner.asp?Section=commentary&CommentaryID=1 $('.GameStory').editable('content/commentary/index.cs.asp?Process=EditLiveCommentary&CommentaryID=<%=Request.QueryString("CommentaryID")%>', { type : 'textarea', id : 'elementid', name : 'CommentaryDesc', cancel : 'Cancel', submit : 'OK', indicator : '<img src="img/indicator.gif">', tooltip : 'Click to edit...', cssclass : 'someclass' }); <div class="GameStory"> <p><span class="minute">36'</span>Here comes the pressure as Chelsea suddenly begin to up the tempo and Bolton can't keep the ball or clear it out of their own half.</p> <p><span class="minute">34'</span>Yuri Zhirkov, despite his head wound, is having a really good game and seems to be enjoying the freedom that he has been given to attack from his left back berth tonight.</p> <p><span class="minute">27'</span>Drogba whips in a free-kick that Jaaskelainen, for some reason, decides to punch straight into the face of Salomon Kalou who watches on as the ball rolls agonisingly of the post. Scare for Bolton.</p> <p><span class="minute">4'</span>Chelsea face Bolton at 8pm on Tuesday, April 13th.</p> <p><span class="minute">3'</span>Lively start at the Bridge with both sides looking to attack - it is by no means a defensive lineup from Owen Coyle so this could be an interesting game.</p> <p><span class="minute">0'</span>Nicolas Anelka gets the first shot of the match in on goal but its very tamely struck and Jaaskelainen gathers easily.</p> </div>

    Read the article

  • How can I make a Jeditable (jQuery) span activate editing on more than one event?

    - by JonathanHayward
    For the jQuery extension Jeditable, one of the parameters that can be specified is which DOM event will turn a div/span/... into a text input/textarea/... I would like to have more than one event serve as a trigger; that is, I would like either a click event or a contextmenu event to turn a span into an in-place edit area. Is there a graceful way to do this without forking Jeditable? --edit-- An example of code specifying the event is below. The parameter is optional, defaulting to a regular click. $(".edit_rightclick").editable("/ajax/save", { cancel: "Cancel", submit: "OK", tooltip: "Right click to edit.", event: "contextmenu", }); Calling twice, once for the regular click event with the event unspecified, and one for the contextmenu event (right-click if there are no switched mouse buttons or anything like that) does not seem to produce the intended effect of an element becoming editable in place on a click from either mouse button.

    Read the article

  • jeditable not updating browser display - leaves "click to edit..." after succesful edit

    - by Enoch
    I am using jeditable fairly simply and it all works fine, updates the database, etc. The only problem I have is after the user types the new value data and hits enter it doesn't update the field in the browser to show the new value - instead it puts "Click to edit..." in place of it. Am I missing something like a return value from my php file? the php fucntion just takes the args and updates the database - and it works fine. Enoch the jquery\jeditable code $('.edit').editable('update.php',{ id: 'field', name: 'val', indicator: 'Saving...', tooltip: 'Click to edit...', select : true, submitdata : { db : "pers", kn : "key", rec : "?php echo $rec; ?" } }); the div <div class="edit" id="svc_ad1"><?php echo $row-svc_ad1; ?>< /div> i also have a css class for pEdit edit{ float:left; width:200px; height:15px; margin-bottom:5px; border-bottom:1px solid #aaaaaa; }

    Read the article

  • Why is my jQuery jEditable, edit-in-place callback not working?

    - by unknowndomain
    I am using a jQuery jEditable edit-in-place field but when the JSON function returns and I try to return a value from my edit-in-place callback all I get is a flash of You can see this here... http://clareshilland.unknowndomain.co.uk/ Hit Ctrl+L to login... Username: stackoverflow Password: jquery Although you can see the script in /script.js here is the main code exerpt... $('#menu li a').editable(edit_menu_item, { cssclass: 'editable' }); Here is the callback: function edit_menu_item(value, settings) { $.ajax({ type : "POST", cache : false, url : 'ajax/menu/edit-category.php', dataType: 'json', data : { 'id': this.id, 'value': value }, success : function(data) { if (data.status == 'ok') { alert('ok'); return data.title; } else { alert('n/ok'); return this.revert; } }}); } The JSON code is here: ajax/menu.edit-category.php The edit-in-place is is on the menu which also has a jQuery sortable on it. Single click to edit. Enter to save, and it stores the data but does not update it on the edit-in-place field. Please help stackoverflow, I have been working on this for a mega age. Thanks in advance!

    Read the article

  • jQuery / jEditable and jQuery UI Dialog. Re-populating table cell.

    - by solefald
    Hello, this is my first time using JS, so i really have no idea what i am doing. I have a table with data, and using jEditable to allow a user to edit the data and POST it to my php script. When user hits "Save", it opens jQuery UI with the data from php script and it seems to work fine, however, if the user hits Cancel or Esc to close the jQuery UI dialog, they and up back on the page, but the cell they tried to edit is now completely empty. How do i get the cell re-populated? Thank you! $(".editable_textarea").editable("/path/to/my/scrip.php", { indicator : "<img src='/images/indicator.gif'>", type : 'textarea', submitdata: { _method: "post", uri: "<?php echo $this->uri->segment(3); ?>" }, select : false, submit : 'Save', cancel : 'Cancel', tooltip : "Click to edit...", cssclass : "editable", onblur: "cancel", cssclass: "edit_destination", callback: function(value, settings) { $(this).dialog({ autoOpen: true, width: 400, modal: true, position: "center", resizable: false, draggable: false, title: "Pending Changes", buttons: { "Cancel": function() { $(this).dialog("close"); }, "Confirm Changes": function() { document.findSameDestination.submit(); } } }); $('form#findSameDestination').submit(function(){ $(this).dialog('open'); return false; }); $(this).editable("disable"); }, data: function(value, settings) { var retval = value.replace(/<br[\s\/]?>/gi, '\n'); retval = retval.replace(/(<([^>]+)>)/gi, ''); return retval; } });

    Read the article

1 2  | Next Page >