Get member's id from member form helper

[inkredible]

I have added a 

new \IPS\Helpers\Form\Member('botuserpanel_administration_username', NULL, TRUE)

which works fine. However I would like to access the member_id of the selected member. I can see that it is being returned to the ajax request, but I wouldn't be able to access it to send it via a websocket for example. Is there a possibility to add a data-id attribute in the according <li> node?

 

Right now the HTML looks like this:

<li class="cToken" data-value="MemberName">MemberName<span class="cToken_close" data-action="delete">×</span>	</li>

What I'd be looking for:

<li class="cToken" data-value="MemberName" data-memberId="42">MemberName<span class="cToken_close" data-action="delete">×</span>	</li>

 

Any other way to get the member's member id from the Member's form helper is appreciated.

[Adriano Faria]

When you submit the form, you'lll got:

$values['botuserpanel_administration_username']->member_id

 

[inkredible]

15 hours ago, Adriano Faria said:

When you submit the form, you'lll got:

$values['botuserpanel_administration_username']->member_id

 

Hey,

yes I got this serversided, but I need to access the member_id in my client sided javascript so that I can send this id via websockets after I have selected a member.

[inkredible]

Bump

[TAMAN]

{{$memberid = settings.botuserpanel_administration_username;}}		
{{$member = \IPS\Member::load($memberid);}}
<li class="cToken" data-value="{$member->name}" data-memberId="{$memberid}">{$member->name}<span class="cToken_close" data-action="delete">×</span>	</li>

 

[inkredible]

10 minutes ago, TAMAN said:

{{$memberid = settings.botuserpanel_administration_username;}}		
{{$member = \IPS\Member::load( $memberid );}}
<li class="cToken" data-value="{$member->name}" data-memberId="{$memberid}">{$member->name}<span class="cToken_close" data-action="delete">×</span>	</li>

 

I don't see why this would work. The member form helper does an ajax request which offers member suggestions. Once I click one of these suggested members I want to have the selected member id available in my clientsided javascript (because I need to send that member_id via websockets). 

[TAMAN]

2 minutes ago, inkredible said:

I don't see why this would work. The member form helper does an ajax request which offers member suggestions. Once I click one of these suggested members I want to have the selected member id available in my clientsided javascript (because I need to send that member_id via websockets). 

Is that setting is in a plugin or application? if yes then it should work

 

[inkredible]

Just now, TAMAN said:

Is that setting is in a plugin or application? if yes then it should work

 

It's an application. I am not sure if you understood what I am trying to achieve. You have provided code which will be executed upon template rendering, but what I am trying to achieve happens after the template has been built already and it is not reloading the template.

[TAMAN]

1 minute ago, inkredible said:

It's an application. I am not sure if you understood what I am trying to achieve. You have provided code which will be executed upon template rendering, but what I am trying to achieve happens after the template has been built already and it is not reloading the template.

mmm, then I answered what are asking for in the first post lol

maybe add a little more explanation so someone else can help  

[inkredible]

Just now, TAMAN said:

mmm, then I answered what are asking for in the first post lol

maybe add a little more explanation so someone else can help  

Hmm no that's the same question, but yes it requires one to know the Form\Member helper element. Hmm I don't know how to explain it in more detail, because the problem itself is very easy. I have recorded a video showing the Form\Member element: https://streamable.com/esubu . Once I have selected this member I'd like to know the member's id without doing another ajax request / full page refresh. 

The ajax request which requests the autocomplete suggestions returns the member_id already, hence it should be possible to access the selected member's id somehow

[BomAle]

$content = <<<HTML
<script>ips.templates.set('core.autocomplete.memberItem', " \
	<li class='ipsAutocompleteMenu_item ipsClearfix' data-value=\"{{value}}\" data-id=\"{{id}}\" role='option' role='listitem'>\
		<div class='ipsPhotoPanel ipsPhotoPanel_tiny'>\
			<span class='ipsUserPhoto ipsUserPhoto_tiny'><img src='{{{photo}}}'></span>\
			<div>\
				<strong>{{{name}}}</strong><br>\
				<span class='ipsType_light'>{{{extra}}}</span>\
			</div>\
		</div>\
	</li>\
");
$('[data-ipsautocomplete]').on('autoCompleteReady', function(e,data){
	$('#' + data.elemID + '_results').on('click', '[data-value]', function (e) {
		var id = $( e.currentTarget ).attr('data-id');
		Debug.log(id);
	});
});</script>
HTML;
$form->addHtml( $content );

on one my project I have this

it works because findMember on applications/core/modules/front/system/ajax.php return json with this data

$results[] = array(
				'id'	=> 	$member->member_id,
				'value' => 	$member->name,
				'name'	=> 	\IPS\Dispatcher::i()->controllerLocation == 'admin' ? $member->group['prefix'] . htmlspecialchars( $member->name, \IPS\HTMLENTITIES | ENT_QUOTES, 'UTF-8', FALSE ) . $member->group['suffix'] : htmlspecialchars( $member->name, \IPS\HTMLENTITIES | ENT_QUOTES, 'UTF-8', FALSE ),
				'extra'	=> 	\IPS\Dispatcher::i()->controllerLocation == 'admin' ? htmlspecialchars( $member->email, \IPS\HTMLENTITIES | ENT_QUOTES, 'UTF-8', FALSE ) : $member->groupName,
				'photo'	=> 	(string) $member->photo,
			);

My advice is to create a new one template like core.autocomplete.memberItemcustom and define it inside IPS\Helpers\Form\Member constructor (avoiding override exist template)

new \IPS\Helpers\Form\Member( 'hello', NULL, TRUE, array( 'autocomplete' => ['resultItemTemplate' => 'core.autocomplete.memberItemcustom'] ) )

 

[inkredible]

@bfarber @BomAle is it possible to use a custom "tokenTemplate" too? I think that would be even easier and more flexible for me as I can immediately store the member's id along with the selected tokens. The full template name is: 'core.autocomplete.token' but I didn't see an option to pass a custom template name instead.

Instead of:

ips.templates.set('core.autocomplete.token', " \
	<li class='cToken' data-value='{{value}}'>\
		{{{title}}} <span class='cToken_close' data-action='delete'>&times;</span>\
	</li>\
");

I would like to use:

ips.templates.set('core.autocomplete.tokenCustom', " \
	<li class='cToken' data-value='{{value}}' data-id='{{id}}'>\
		{{{title}}} <span class='cToken_close' data-action='delete'>&times;</span>\
	</li>\
");

 

Edit: By the way is there a reason that IPS doesn't show the data-id field? It's passed along with the ajax response anyways?

[sweethoney]

to make your life easier why you just dont add this

member-id

[inkredible]

48 minutes ago, sweethoney said:

to make your life easier why you just dont add this

member-id

Because I am not even working with userprofiles here :D. Also I don't want/can use other's plugins when I create an application which is supposed to run without any dependencies.

[BomAle]

yes but id is not what you want because token.add data use id for other purpose...

inputItem.before( ips.templates.render( options.tokenTemplate, {
					id: elemID,
					value: value,
					title: value
				}));

then to get the member id from results you must edit resultItemTemplate and edit it like:

ips.templates.set('core.autocomplete.memberItem', " \
	<li class='ipsAutocompleteMenu_item ipsClearfix' data-value=\"{{value}}\" role='option' role='listitem'>\
		<div data-id=\"{{id}}\" class='ipsPhotoPanel ipsPhotoPanel_tiny'>\
			<span class='ipsUserPhoto ipsUserPhoto_tiny'><img src='{{{photo}}}'></span>\
			<div>\
				<strong>{{{name}}}</strong><br>\
				<span class='ipsType_light'>{{{extra}}}</span>\
			</div>\
		</div>\
	</li>\
");

and watch on tokenAdded event like

$('[data-ipsautocomplete]').on('autoCompleteReady', function(e,data){
	$('#' + data.elemID).on('tokenAdded', function (e, datatoken) {
		var id = $(datatoken.html).attr('data-id');
		$('#' + data.elemID + '_inputItem').parent().find('[data-value="' + datatoken.token + '"]').attr('data-id', id);
		Debug.log(id);
	});
});

this thanks to dev/js/framework/common/ui/ips.ui.autocomplete.js token.add line 1102-1113

if( dataSource.type != 'none' ){
	html = resultsElem.find('[data-value="' + value.replace("\\", "\\\\") + '"]').html();
} else {
	html = value;
}
elem.trigger('tokenAdded', {
	token: value,
	html: html,
	tokenList: tokens.getValues(),
	totalTokens: tokens.total()
});

 

[bfarber]

On 4/28/2017 at 10:59 AM, inkredible said:

@bfarber @BomAle is it possible to use a custom "tokenTemplate" too? I think that would be even easier and more flexible for me as I can immediately store the member's id along with the selected tokens. The full template name is: 'core.autocomplete.token' but I didn't see an option to pass a custom template name instead.

Instead of:

ips.templates.set('core.autocomplete.token', " \
	<li class='cToken' data-value='{{value}}'>\
		{{{title}}} <span class='cToken_close' data-action='delete'>&times;</span>\
	</li>\
");

I would like to use:

ips.templates.set('core.autocomplete.tokenCustom', " \
	<li class='cToken' data-value='{{value}}' data-id='{{id}}'>\
		{{{title}}} <span class='cToken_close' data-action='delete'>&times;</span>\
	</li>\
");

 

Edit: By the way is there a reason that IPS doesn't show the data-id field? It's passed along with the ajax response anyways?

Because we haven't had a need. I already brought up your request internally for consideration in a future release.

You can only define the result template, as BomAle showed.

[LaCollision]

On 4/29/2017 at 12:38 AM, BomAle said:

 

and watch on tokenAdded event like

$('[data-ipsautocomplete]').on('autoCompleteReady', function(e,data){
	$('#' + data.elemID).on('tokenAdded', function (e, datatoken) {
		var id = $(datatoken.html).attr('data-id');
		$('#' + data.elemID + '_inputItem').parent().find('[data-value="' + datatoken.token + '"]').attr('data-id', id);
		Debug.log(id);
	});
});

 

 

Hi!

Thanks ?

Where do you put this JS code above?