Get id value stored in data passed to a function

[multichild]

I have a function which has values being passed into it via ‘data’ as below:

function LoadNewCategoryForm(data){

console.log(data);

When using console.log as above I can see what I need as below:

<div id="cardCategory56" class="card category-card categoryHead" data-category-id="56">
    .....
</div>

This is just a part of it, but I need to grab the first div’s id, which in this case is ‘cardCategory56’, and then store that in its own var

[Dormilich]

@multichild

I need to grab the first div’s id, which in this case is ‘cardCategory56’, and then store that in its own var

// get the ID of the first <div>
var id = document.querySelector('div').id

[multichild]

Hi Dormilich, but all I have access to is data which is being passed into the function. So will I need to look inside data, and then get the div id, so do you mean

var id = data.querySelector('div').id

[Dormilich]

@multichild

but all I have access to is data which is being passed into the function.

and what data type is that data variable?

[multichild]

It contains a whole string of html, which is a complete div.

Basically whats happening is Im dynamically adding a new div after a user has added a new category via a modal, as the page doesnt refresh. Its to add the new category in without the need to refresh

[Dormilich]

@multichild

Its to add the new category in

Add what category to where?

[multichild]

That bit works fine, this is a seperate operation I need to where I use that id value to pass to another function to make something else work.

The data bit is all working fine, its just this new bit I need and it will only work once I can grab that unique id and pass it into its own var like this

$('#cardCategory56').hover(ShowCardEditButtons, HideCardEditButtons);

[Dormilich]

Wouldn’t it make more sense to use delegated events, so that new elements automatically work with the event listener?

https://learn.jquery.com/events/event-delegation/

[multichild]

OK I think I have managed to do it.

function NewCategorySuccess(data) {

    $(data).insertAfter($("div.category-card").last());

    var categoryId = $(data).data('category-id');

    ApplyEditButtonsHover($('#cardCategory' + categoryId).find('.card-header'));

    CheckEmptyDivs('sections');

    $("#mdlModuleCategory").modal("hide");

    // ToastAjaxResponseMessage(data);
}

[Dormilich]

I still think a delegated event would be better.

[multichild]

Ye im all up for doing whats right, could you explain

[Dormilich]

Did you read the link I posted?

[multichild]

Ah no, didnt see it, sorry. will take look