Develop Reference

How can I share javascript/html among several elements on a page?

I have web page with two textboxes on it. Upon clicking on the first, I have a bootstrap modal that displays with a searchable treeview. You click an item in the treeview, the modal closes, and the selection appears in the textbox. Works perfectly!
Now I have decided that for the other textbox I want to do the same thing. The only difference is the modal has a different title, and the source data for the modal treeview comes from a different endpoint. All the other javascript to support searching and highlighting within a treeview, opening and closing a modal, etc, is the same.
To get it to work, I duplicated all html for the modals and the js code and just changed the ID's to avoid clashes between the two. I cannot live with myself for doing this!
So in the end, I have some js and html that work together as a component that I want to reuse on a page among several textboxes or whatever type of widget I may create. How can I design my app so I can share this code and not duplicate it all over the page?

I think webcomponents is the way to go. You could create a component that receives the id and other needed data as parameters and then create instances of it...

There is a lot to unpack in this question. High level, to achieve what you're asking with JS…
You could:
Build a method that accepts an event object (or jQuery event object) as its argument; and handles extracting extracting data from the attributes of that element, setting the title, AJAXing the treeview, and returning the selection/setting the text box value
embed the unique data in data-attributes on each text box
set the click event listener to pass the event.target element, with its unique data- attributes to the method
Markup:
<input type="text" id="foo" data-endpoint="/path/to/endpoint_1" data-title="Modal Foo" value="" />
JS
function on_click_modal_spawning_textbox( event ) {
// get the salient data from the `data-` attributes on the `event.target`
// do modal stuff, programmatically replace the modal title, AJAX treeview, et cetera…
}
// assuming you're using jQuery, otherwise this would be a vanilla `.addEventListener()`
$( document ).on( 'click', 'input[ data-endpoint ]', on_click_modal_spawning_textbox );

Using JavaScript / jQuery to populate modal content

I am using a calendar widget that uses jQuery's load() function to populate the content of the event modal. The example can be found here.
For the purposes of my calendar system, the modal content is generated on the same page as the calendar, where as the example has the modal content in a separate file.
The function that populates the modal is this:
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
where the .attr('data-content')+'.html .event-info > *', is the content in the html file.
For my project, I have the modal content in a div with a PHP generated ID like so:
<div id=\"shift-".($i+1)."\" class=\"event-modal-content-form\">
<p>This is the modal content</p>
</div>
The event-modal-content-form class is a simple class that just hides the div so it doesn't obstruct the calendar formatting.
So, I need to change the javascript to populate the modal with the content of this div rather than what the code is searching for now, and I've tried several different methods.
Right now what I have is:
this.modalBody.find('.event-info').getElementById(.attr('data-content')), function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
But I get an unexpected token error for the .attr in getElementById()
Any pointers in the right direction would be immensely helpful.

select asp.net grid view row on jquery dialog box and populate on text fields on parent form

I have an asp.net page that contains gridview. It has one or more record. If a user choose a row, it will close jquery dialog modal and populate parent form
I have attached the sample. It does not look nice, but it is easier for me to create in word than try to prototype on ASP.NET
Once user click the button (pick this one), let's say first one, id (1) and name (a) will be populated on the parent page
I have researched many websites. Most websites have helpful hints if there is a static button. When a user click the button, something happen. However, the griview is constructed dynamically, so are the buttons. Obvious, binding the button on jquery dialog box model will not work.
What is the best approach to handle this
Thank you

Why wont Jquery work? I'm sure the buttons have an id or name..
`$('#tableID tbody').on("click", "tr td:nth-child(1) a", function () {
var $row = $(this).closest("tr");
var ID = $row.find('$row td:nth-child(2) label').val();
$.get("/Home/MyModal/" +ID, function (data) {
$("#modalDiv").html(data);
$("#modal").modal('show');
});
});`
In the example I make a call to the mvc controller which returns a partial view loaded with the modal data. That html data returned from the controller is then passed to a div with an ID of 'modalDiv'. Then I open the modal using modal.show event.
Not sure if this is what you were looking for but this will load a modal with the information

I did a lot research. I ended using postmessage method.
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
I really don't like this solution. I am doing research on security risk related to postmessage. if anyone has better, let me know.
Here is the algorithm
1) Once the user clicks one of the links/buttons (remember they can be multiple rows), save the current row information in the hidden fields
2) call javascript to postmessage (see the link)
3) in the parent listen to the event (see the link)
4) assign the hidden fields to the various text fields on the parent form
5) oh reference the fields in iframe is little bit tricky. Luckily, someone on the internet shows me this trick
http://codedisplay.com/jquery-to-get-set-read-access-iframe-content-textbox-value-data-using-asp-net-c-vb-net/
6) close jquery dialog box
My original plan was creating some kind of events on dialog box during the creation to do all the work. I am hoping people here can help me that.
At least i figure out the solution. I just need to address the security issue.

Trying to build a clickable index with PHP / Javascript that displays data for each item clicked

I have spent a lot of time trawling the web for help on this, but I haven't found anything that does what I'm looking for and having tried to cobble together solutions from multiple sources, have basically run into a dead end.
What I'm trying to do is create a web page to list musicians on one part of the page so that I can click on the name of an individual musician and load a list of their albums, songs, lyrics, etc. on another part of the same page. The data is all in a MySQL database and each item in the database has a unique ID.
I can get the data out of the database and into an array and I can create a list of musicians and also a list of their info on a separate part of the page if I manually set a the ID. If I can get a click to return the ID I can then focus on trying to get my head around using Ajax to load the required data, and I guess JQuery to display it where I want it on the page, but I am stuck on getting the clickable list working.
I am using Joomla 3.1 to create the site but the code is just PHP and Javascript.
My most recent effort is as follows:
<ul id="nav" style="list-style:none">
<?php
foreach ( $this->items as $item ) {
echo '<li id='.$item->itemid.' onclick="$(this).index()" >'.$item->title.'</li>';
}
?>
"</ul>"
<script>
linkClicked = function (index) {
alert($('#nav li').get(index).id);
}
Like all my other efforts this creates a nice list but nothing happens when I click on any of the listed items and I am clearly way off track. I had intended that this would display an alert showing the id of the item selected, but no alert appears. I have a feeling that the solution is pretty trivial but I am just not getting it and any help would be very gratefully received.
For anyone not familiar with Joomla, it provides functions that load MySQL data into an array, with individual items being accessed using the name of the relevant column from the database. So $item->title gives the value of the 'title' field for the current row of data.

you need to fire your code when the document is ready. your code is not triggered. You need to bind a click event to your li tags on document ready like so:
//on document ready
$(function(){
//select the li tags from #nav and bind a click event to them
$('#nav li').on('click', function(){
//When li is clicked: alert the attribute "id" from the clicked element (this = li element)
alert($(this).attr('id'))
})
});
with delegation:works also for elements that are dynamical added to the dom (after the page has loaded, for example by an ajax call)
$(function(){
$('#nav').on('click', 'li', function(){
alert($(this).attr('id'))
})
});

How To Access Dynamically Created Page Elements with jQuery

I have a web app which uses jQuery to append rows onto the end of a table. Each row has a textarea to make notes, and an edit button which pops up a window so more information can be entered. The code to do so looks something like this: http://jsfiddle.net/H3m4z/
That is a trimmed down version of the actual code because the real code it involves an AJAX call to save data from each table row into a database when it is added. rowID is unique in the proper script so I can refer to the textareas of each row by 'notes[rowID]'.
This is what I do when users enter more info on the edit popup window. Any new notes entered are saved into the database but to make the web app feel more 'live' and responsive the new notes are copied across from the edit window to their corresponding notes field in the parent table like so:
window.opener.$('#notes[' + rowID + ']').text(newnotes);
This works absolutely fine for rows which already existed when the parent page was loaded, like the first table row in my example. However it does not work for table rows which were dynamically added by jQuery. I'd guess the answer involves live(); somehow but I'm not exactly sure where or how.

To make use of event delegation with on() (which replaces live()):
$('#table').on('click', 'td button', function(e){
});
Or you could just wrap your html in a jQuery function and bind the events right away (simplified example):
var $tr = $('<tr><td>foo</td></tr>').on('click', function(e){
});
$tr.appendTo('#table');
This would obviously bind the event to the actual <tr>, but you get the idea.