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 );
Related
so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.
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.
My app deals with Tags and Films entities: Many-to-Many relation. Joining entity is named as "tagazation". I want user to be able to add tags to each film in modal window.
So I render hidden modal window to page for each film in the index action. The problem is in tag_id field:
I have twitter bootstrap's typeaheaded textfield in each forms. All these fields share common class "tags-input". On select event in textfield fires the set_id function:
$(document).ready(function() {
function set_id(item, val, text){
$(this).parent().children("#tagazation_tag_id").val(val);
}
$(".tags-input").typeahead({
source: [],
itemSelected: set_id
});
});
set_id function is supposed to change PARTICULAR hidden field in the same form as a textfield that fired that callback, but there are multiple hidden fields for tag id. That of course wouldn't be a big problem if we knew for what film exactly that set_id function is fired up.
I believe, that there is should be a "standart" way to cope with this propblem instead of my still-not-working browsing thru the DOM tree search.
If I understand what you're trying to do, I think the easiest solution would be to render only one hidden modal dialog to html instead of one modal dialog for every movie. Right before you open the modal, you can use javascript to set whatever text is needed to make the modal refer to the movie that was clicked.
If you only have one modal dialog, you can just refer to the hidden tag id field as $('#tagazation_tag_id'), with no confusion as to which input it refers to.
I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.
I know that I can get the (numerical) index of the currently selected tab like this:
$('.selector').tabs('option', 'selected');
Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.
I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.
I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.
As far as I know, selected tab has class ui-tab-selected. You may use
$('.selector').find('.ui-tab-selected a');
to fetch selected tab. It was element, where href attribute - identifier of active panel.
#Matt Ball
You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:
var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];
'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.