Convert an Input value to a placeholder

Development
1

Hi,

is it possible, and if “yes” how, to convert a input value to a placeholder?
The value is set via JS.

Background:
Content shows via pdoResources. Each pdoresources-Item has a button to open a Bootstrap-Modal.
When this modal came up, there is content shat should only show to user with a specific state.
(this state came from a custom-user-field.)
The pdoresources-Item has a TV with a string e.g. (Test1, Test2, test3).
The custom-user-field has e.g “Test3”.
The “secret-content” should only displayed if the custom-user-field and the TV of the pdoresurces-Item has the same word (e.g. Test3)

So my thought was 1.) to read out the custom-user-field and then 2.) convert the input-value, (given by the button to open the Bootstrap-Modal and a custom data-id (which has the value of the TV), to a placeholder.
And then 3.) check with Filters if this matches.

But is it possible this way?

2

You set a value with JS client-side in the browser.
A placeholder is set in PHP on the server.

How do intend to you transfer this value from the client to the server? As a parameter in an AJAX request?

3

Good question. I’m not sure yet. I thought it goes like this.

But it seem that the only way is a Ajax-Request to had the values in POST an then I can convert it into placeholders.

4

Still stuck with that thing. I build a AJ-Request:

$('.checkpermission').click(function(){

    var project_id = $(this).data('id');
	var friendly_types = $(this).data('id2');

    $.ajax
    ({ 
        url: '[[~[[+id]]]]',
		data: "project_id="+project_id + "&friendly_types="+friendly_types,
        type: 'post',
        success: function(result)
        {


			var dataModal = new bootstrap.Modal(document.getElementById('myModal'))
			dataModal.show()

        }
    });
});
</script>

The Ajax-Thing work. If I a do an

alert (friendly_types);

Inside the “success-part” it has the right content.

Then I build a litte Snippet and place it inside the Modal (getAjaxContent):

<?php
$friendly_types = $_POST["friendly_types"];
$project_id = $_POST["project_id"];

$modx->setPlaceholder('project_id',$project_id);
$modx->setPlaceholder('friendly_types',$friendly_types);

The modal do open. I have the snippet inside the Modal and I want to output the placeholder. But the placeholder(s) seems empty:

[[!getAjaxContent]]
[[+project_id]]

What can it be?

5

The placeholder must be uncached as well.

[[!+project_id]]
6

The same result. Placeholders seems empty.

7

If I edit the snippet getAjaxContent like so:

if (!empty($_POST["friendly_types"])) {
	$friendly_types = $_POST["friendly_types"];
	}
	else {
	$friendly_types = "not set";
	}

if (!empty($_POST["project_id"])) {
	$project_id = $_POST["project_id"];
	}
	else {
	$project_id = "not set";
	}
...

The “not set” message appers. So it might be a problem with the ajax-request?

The complete snippet:

if (!empty($_POST["friendly_types"])) {
	$friendly_types = $_POST["friendly_types"];
	}
	else {
	$friendly_types = "not set";
	}

if (!empty($_POST["project_id"])) {
	$project_id = $_POST["project_id"];
	}
	else {
	$project_id = "not set";
	}


$modx->setPlaceholder('project_id',$project_id);
$modx->setPlaceholder('friendly_types',$friendly_types);
return $output;
8

It might be something with the JS:

<script>
$('.checkpermission').click(function(){



    var project_id = $(this).data('id');
	var friendly_types = $(this).data('id2');

    $.ajax
    ({ 
        url: '[[~[[*id]]]]',
		data: "project_id="+project_id + "&friendly_types="+friendly_types,
        type: 'post',
        success: function(data)
        {


			console.log(data); 
             if(data.success == true)
             {
                alert('OK');
             }
             else
             {
                 alert('Error');
             }

			var dataModal = new bootstrap.Modal(document.getElementById('kontaktanforderungModal'))
			dataModal.show()

        }
    });
});
</script>

I Add the " if(data.success == true) part" and it give me the alert with

> error

But I dit not know what can be worng.

9

have a look into your browsers dev console.
What is the response of your ajax request?

10

The console show me the complete code of the page. I did not know what this mean.

11

well, sure. You are calling url: '[[~[[*id]]]]',
So, what did you expect?

12

Chrome Dev-Tools → Network → XHR say Status 200

I dit not know what I can expect inside the console because I dit not have so much experience with it.

13

OK, If I look on the Code inside the console it writes there the content of the Placeholder…
but on the other hand it gives me the errors. :scream:

14

OK I get more and more confused:

  1. If I check inside JS on success, via alert(variable), ist has the right content.
  2. But the if(date.success… give me the Error (unknown)
  3. The Modal open up and give me the error message from the setplaceholder-snippet “not set”
  4. But inside the Console the placeholders are correctly with the right content

What is this?

15

The data you get back from your AJAX call is HTML. There is no success property.

You either have to call a different page with AJAX that returns JSON content, or with the current setup you could extract the correct part from the response HTML and add it to your page.

16

Unfortunately I don’t understand that exactly. Could you please be more specific or show it with an example?

17

maybe you should try to explain, exactly, what your goal is.
Maybe there are other ways to get what you need.

You could for example load all the needed data with your pdoResources call, so no need for an ajax-request at all.

18

You AJAX request currently returns the whole page (<html><head>...</head><body>...</body></html>) but you only need a specific part. All the rest of the page is already loaded.

Let’s say in your page you have an element with the id modal_content.

<div id="modal_content">[[!+project_id]] [[!friendly_types]]</div>

In your JS code you could then find this element in the data that is returned and replace the content (of #modal_content) on the current page with it.

success: function(data)
{
	$('#modal_content').html($(data).find('#modal_content'));
}
19

An alternative way is to create a new resource as an AJAX endpoint:

  • Select (empty) as the template
  • Change “Content Type” to JSON
  • In the content call a custom snippet uncached. E.g. [[!myAjaxEndpoint]]

In the custom snippet (myAjaxEndpoint) return some JSON data:

<?php
if (!empty($_POST["project_id"])) {
	$project_id = $_POST["project_id"];
} else {
    $project_id = "not set";
}

$output = ["success" => true, "project_id" => $project_id];
return json_encode($output);

Then on your page that makes the AJAX-request, change the url to the ID of your AJAX endpoint (e.g. url: '[[~43]]').
Now your response is JSON (instead of HTML) and there is a success property:

success: function(data)
{
	if(data.success)
	{
		$('#modal_content').html(data.project_id);
	}
}
20

Ok, I think that I kind of get the point. I let that sink in for me. Thank you all for that good informations.