We Keep Coding

How To pass data from one Page component to another page Component.?

I have a crud application where i click on the delete button and it should reflect me a modal, in which i want to ensure delete or not ,while clicking on delete it should delete the data specific.
I have Tried calling it,but i don't know to pass the actual data is not getting it is reflecting me undefined.what should i do for passing the data from one component to another page modal component.
giving you stackbltiz.
while clicking on delete button after confirmation it should delete.and getting error of the undefined id.

You are using ng-bootstrap modal. You can open the modal using the syntax after importing the deleteModalComponent :
modalOptions: NgbModalOptions;
let modalRef = this.modal.open(DeleteModalComponent, this.modalOptions);
When you are in the deleteModalComponent then you can use this:
modalRef.componentInstance.deleteEvent.
pipe(takeWhile(() => keepPvSubscription)).
subscribe(delete => {
modalRef.close();
},
});

Add a button to open pop up in jQuery Data Table

In my app, I used jQuery Data Table to show the results of a query made by form. I have now a new task: I must add, in this table, a column where for each row I have a button (or a link, no matter which of this 2).
The focal point is that when a user click this button or link, a popup must be open to allow the operator to modify some value in the db (so it's for this that I need a button for each row; every row may have a value to modify, or not).
The question is: how can I add this button/link and how can I force, after click, the popup opening?

You can do this like:
$('#data_table').DataTable( {
data: data
});
$(document).on('click', '#data_table tbody tr', function(){
// alert('hello');
$('#dialog').dialog();
});
Working Fiddle
Note: In this example I am using jquery ui dialog, you can use Bootstrap modal as well

Use bootstrap Modal. Bootstrap modal will allow you to do the operation you want

Dropdown list using Jquery menu list disappear when click on drop down list button after postback

I have strange issue. I am using few editable cascading dropdownlist controls inside updated panel on my asp.net page. These are also using JQuery for autocomplete feature and these dropdowns loading from database. It works ok very first time and user can select facility and click save button and save facility and page data. After saving, user click new button to enter a new entry. When click new button it keeps all the previous values inside dropdown selection. When try to change facility value and click on dropdown button to open the list and select value but list items/menu inside dropdownlist appears and disappears suddenly so that user is unable to select any value. Not sure exactly what causing this. I have checked if there is any memory leak or viewstate causing this but everything seems fine.
Did anyone experience same issue? Any help will be appreciated. Let me know if require additional information.
Thanks in advance.

Place Your jQuery code within:
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
//Here Your $(document).ready(function () {
}
}

Change content on click of button in jquery

So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})

First order by items then use accordion jquery

Same ID's in jQuery Tabs

I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, id for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks

You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the name attributes for the input elements the same but change their IDs to be unique.
You can select an element by its name attribute like this: $('[name="foobar"]')
Update
In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:
Whether or not to cache remote tabs content, e.g. load only once or
with every click. Cached content is being lazy loaded, e.g once and
only once for the first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need to provide an extra
cache: false flag to ajaxOptions.
Source: http://jqueryui.com/demos/tabs/

You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });

Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.
That should remove the div content and any event handlers that are bound to it.

If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
$("#someDuplicatedId", activeTab).doStuff();
Or if caching the content is not important, go with Jasper's answer.