How to get value from tinymce

Question

I am using tiny mce. I want to get the html elements from the textarea of tiny mce. I try to do tat with a ajax call. And I have a pdf button that will generate from the html a PDF. I have this:

public ActionResult GeneratePDFFOrProductHandler(EditProductModel model, string data)
{
    SubmittedForm sf = new SubmittedForm();
    string schema = requestSchema;
    customer_DbConnection db = new customer_DbConnection();
    RenderFormController renderController = new RenderFormController();
    renderController.GeneratePdf(data, db, sf);
    return RedirectToAction(model.DesignId, "Prdocut/Edit");
    //return View(model);
}

and the ajax call:

function GenerateHTMLTOPDF() {        
        $.ajax({
            type: "POST",
            url: '@Url.Action("GeneratePDFFOrProductHandler", "Product")',
            data: {},
            success: function (data) {

                alert(tinyMCE.get('tinymce').getContent());
                alert("data from ajax = " + data.toString()); // data is html               
                $("#tinymce").html(data);        // does not set anything
            },
            error: function (request, status, error) {
                alert(tinyMCE.activeEditor.getContent());

                alert(request.responseText);
            }
        });  

    }

The method in the controller is called. But data is every time null.

Thank you

For the button that Generate PDF is this:

 <button type="submit" value="GeneratePDFFOrProductHandler" id="btnGeneratePDF" onclick="GenerateHTMLTOPDF()" class="btn btn-success"><i class="fa fa-fw fa-check"></i> @Resources.Action.Navigation.GeneratePDF</button>

But how to generate the pdf in a new tab of the browser?

Thank you

But If I try this:

 function GenerateHTMLTOPDF() {
        var data = tinyMCE.get('tinymce').getContent();
        $.ajax({
            type: "POST",
            url: '@Url.Action("GeneratePDFFOrProductHandler", "Product")',

            data: {data:data},
            success: function (data) {
                alert('success');                             
                alert("data from ajax = " + data.toString()); // data is html                               
            },
            error: function (request, status, error) {
                alert(tinyMCE.activeEditor.getContent());

                alert(request.responseText);
            }
        });  

    }

the controller method is even not called

you do not send anything to the controller.. `data: {},` this is what you send to your method — Mihai Tibrea, Jun 23 '15 at 13:03
Regarding the new tab thing: You can never force this since it's a local browser setting. However, you can suggest opening a new tab/window and if the user's settings allow it it'll do it. Take a look at this question: http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-using-javascript — JNYRanger, Jun 23 '15 at 13:23
The reason the second call is not hitting your method is because dataType is not specified. Try adding dataType: 'json', or see answer bellow. — Daniel Hoffmann-Mitscherling, Jun 23 '15 at 14:04

Daniel Hoffmann-Mitscherling · Answer 1 · 2015-06-23T14:07:51.517

The data being sent to your controller is null because no data is being sent in your AJAX call.

This line:

data: {},

Should contain the data you wish to return.

In your case you can restructure your call as follows:

function GenerateHTMLTOPDF() {        
        $.ajax({
        var d = $('#tinymce').html( tinymce.get('tinymce').getContent() );

        dataType: 'json',
        type: "POST",
        url: '@Url.Action("GeneratePDFFOrProductHandler", "Product")',
        data: {d},
        success: function (data) {
             window.location.href = data;
        },
        error: function (request, status, error) {
             //Error handling
        }
    });  

}

Also you cannot redirect via an AJAX post, this line:

return RedirectToAction(model.DesignId, "Prdocut/Edit");

will not function as intended.

return Json(Url.Action("Prdocut", "Edit"));

The above will return JSON data with the window location that you can navigate to using javascript. This will not pass the pdf model that was created in GeneratePDF. You will have to restructure your code to do that as the current structure makes it difficult to achieve the functionality you are looking for.

AJAX is not meant to pass complex Objects back and forth similar to how controllers can, it passes data in the form of datatypes such as JSON/HTML/XML, full docs can be found here (navigate to datatypes). If necessary you can serialize an object, send it, change it in the backend, retrieve it as a JSON structure of a complex object and reassemble the object, however it's simpler and better practice to reevaluate what you are trying to do and creating a proper MVC architecture.

Oke, but how to get the data of the tinymce in it? – InfinityGoesAround Jun 23 '15 at 13:26 — InfinityGoesAround, Jun 23 '15 at 13:26

score 0 · Answer 2 · answered Jun 23 '15 at 13:21

0

Here

data: {},

you should have the data you intend to pass.

Instead of

return RedirectToAction(model.DesignId, "Prdocut/Edit");

at server side, you need to redirect inside your success function, by changing the value of window.location.href.

answered Jun 23 '15 at 13:21

Lajos Arpad

64,414
37
100
175

How to get value from tinymce

2 Answers2