Issue with Jeditable feature on the Castle Monorail platform

Exploring the use of Jeditables (http://www.appelsiini.net/projects/jeditable) within my debut castle monorail mvc application

Successfully displayed the textbox and executed the ajax call. However, encountering an issue post ajax call where the edited text remains unchanged and unable to retrieve the response after the call

Showcasing my page below:

<head>
 <link href="../../Styles/Main.css" rel="stylesheet" type="text/css" />
    <script src="../../JavaScript/jQuery1.4.2.js" type="text/javascript"></script>
    <script src="../../JavaScript/EditInLine.js" type="text/javascript"></script>

 <script type="text/javascript">
  $(document).ready(function() {
   $('.editable').editable('/Home/Save', { 
        id        : 'editableId',
           name    : 'editableText',
     type      : 'textarea',
     cancel    : 'Cancel',
     submit    : 'OK',
     indicator : '<img src="img/indicator.gif">',
     tooltip   : 'Click to edit...',
     width     : '200',
     style     : 'display: inline',
     callback   : function(value, settings) {
        alert(value);  
      return value;
    }

    });
  });
 </script>

</head>
<body>    


<label id='1' class='editable '>Some text</label>


</body>
</html>

Also including my controller code:

using Castle.MonoRail.Framework;
using System;
using EditInLine.Model.Interfaces;
using EditInLine.Model;

namespace EditInLine.Controllers
{
    [Layout("Default"), Rescue("Default")]
    public class HomeController : SmartDispatcherController
    {
        private EditableElement editableElement;
        private EditableElement EditableElement
        {
            get
            {
                if (Session["EditableElement"] == null)
                {
                    Session["EditableElement"] = new EditableElement { Id = 1, Text = "Some text", CssClass = "editable" };
                }
                return (EditableElement)Session["EditableElement"];
            }            
        }


        public void Index()
        {
            PropertyBag["IsAdmin"] = true;
            PropertyBag["element"] = EditableElement;
        }

        public void Save()
        {
            var elementId = Convert.ToInt32(Request.Form["editableId"]);
            var text = Request.Form["editableText"];  

            var element = new EditableElement { Id = elementId, CssClass = "editable", Text = text };

            Session["EditableElement"] = element;            

        }


    }
}

Any assistance on this matter is greatly appreciated. Thank you!

Answer №1

The issue encountered with the Save() function was the absence of a return string to display in the browser. This can easily be resolved by utilizing the RenderText() method. It is also advisable to make use of parameter binding rather than directly manipulating the Request.Form object:

public void Save(int editableId, string editableText)
{
    var element = new EditableElement { Id = editableId, CssClass = "editable", Text = editableText};

    Session["EditableElement"] = element;

    RenderText(editableText);
}

Answer №2

Eureka! I have discovered the answer.

public void Persist()
        {
            var contentId = Convert.ToInt32(Request.Form["editableId"]);
            var content = Request.Form["editableText"];  

            var editableContent = new EditableElement { Id = contentId, CssClass = "editable", Text = content };

            Session["EditableContent"] = editableContent;            

 Response.Write(content);
 AbandonView();
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing elements with duplicate attributes using jQuery

Is there a way to hide duplicate elements in a list based on a specific attribute value using jQuery? Here is an example list: <div data-title="big hero 6">title</div> <div data-title="big hero 6">title</div> <div data-title="a ...

The selected items in the Combobox are displaying as [object, Object] instead of their actual String values

Below is the code I have for a ComboBox with a checklist: <sq8:ComboBox runat="server" ID="ComboBox1" CheckBoxes="True" CheckedItemsTexts="DisplayAllInInput" Width="340px" OnClientItemChecked="ShowAlert"><Items> <sq8:ComboBoxItem runa ...

Changing the positions of objects on a resized HTML Canvas

I am currently developing a tool that allows users to draw bounding boxes on images using the Canvas and Angular. Everything was working smoothly until I encountered an issue with zooming in on the canvas causing complications when trying to draw bounding ...

Clicking on React opens the full picture

I'm encountering an issue in my react project where the pictures I fetch from a JSON file don't open in full screen when clicked individually. Instead, they all open at once. As a newcomer to React, I suspect that my current approach might be inc ...

remove duplicate div using jquery

I inserted several layers dynamically in the following manner <div><p class="locid">2<p></div> <div><p class="locid">1<p></div> <div><p class="locid">2<p></div> <div><p class ...

The image is currently not being displayed

I am experiencing an issue where the image is not showing up on my HTML page. The Image Path values are correct and there are no errors in the code. What could be causing this problem? import React from 'react'; import {Wrapper, Title} from &apos ...

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

I am facing an issue with displaying data from two tables in my PHP script. The personal information is being displayed correctly, but the books related to each person are not showing up. I suspect that my approach might not be efficient enough for handlin ...

The RGB values of a dynamically loaded image being drawn to a canvas in JavaScript are slightly off

After hosting some .PNG images on my NGINX webserver, I noticed a discrepancy in the RGB values when loading and drawing them on a canvas using context.drawImage(img, 0, 0); and retrieving the image data using context.getImageData(x, y, 1, 1).data. Interes ...

Guidance on changing the user's path within the same domain using a button click in express

Currently, I am working on a basic web application where I need to implement a feature that redirects users to different paths within my project upon clicking a button. My project consists of two versions - one in English and the other in Polish. I am util ...

Is it possible to utilize a localhost set up with node.js to save all website data without using SQL or any database, only relying on HTML?

I have a question that may sound simple: is it possible to store data submitted on a textarea in a server application created with node.js? Most server side applications I've encountered involve databases like SQL, so I'm curious about this possi ...

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

Avoiding an excessive number of function calls in JQueryTips on reducing the

My issue involves an element that automatically saves its content through an AJAX call. Right now, the autosave function is triggered every time the content changes. However, I'm looking to optimize this process by limiting the number of server reques ...

When invoking a service repeatedly in Angular within a loop, the result is returned on the second iteration rather than the first

I've run into an issue where I'm attempting to invoke a service in Angular within a for loop and store the result in a Map. map = new Map<string, string[]>(); this.effectivitiesList = this.trimEffectivities.split(","); for (let ...

Defining the range of an array of numbers in TypeScript: A complete guide

When working with Next.js, I created a function component where I utilized the useState hook to declare a variable for storing an array of digits. Here is an example: const [digits, setDigits] = useState<number[]>(); I desire to define the range of ...

Using a variable value as a regular expression pattern: A beginner's guide

I'm at my wit's end - I can't figure out where I'm going wrong. I've been attempting to replace all instances of '8969' but I keep getting the original string (regardless of whether tmp is a string or an integer). Perhaps ...

eslint alert: The aria-current attribute must have a value that is a single token from the following list: page, step, location, date, time, true

<div role="button" tabIndex="0" className="nav-link pad-0-r" aria-current={'${selectedTab === item ? 'page' : 'false'}'} onClick={()=> onClick(item)} onKeyDown= ...

Function that returns an Observable<Boolean> value is null following a catch block

Why is the login status null instead of false in this method? // In the method below, I am trying to return only true or false. isLoggedIn(): Observable<boolean> { return this .loadToken() .catch(e => { this.logger ...

What is the best way to navigate through a complex array in React that includes objects and nested arrays?

I have been working on a JavaScript array that includes subobjects with arrays nested in them. My goal is to iterate through the entire parent object using React. Although I attempted the following approach, unfortunately it did not yield the desired outco ...

Is there a way to streamline the process of connecting multiple ajax requests automatically?

After reviewing the lower portion of my function, I realized that I need to repeat info(url_part1 + next + url_part2, function(next) { multiple times. Is there a more efficient way to accomplish this task, perhaps utilizing some type of loop? I have been b ...

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

I have a component that displays items using *ngFor. My goal is to scroll down to the element with anchor #3. Here's the code snippet: @Component({ selector: 'my-app', template: ` <button (click)="scroll(3)">scroll 2</butt ...