How to bring a jsp into an existing modal window? - javascript

I have a modal window called kmodal, which has some links in it. When i click one link, it provides me with an accept button. Now when i click this button, i have to bring my jsp within this modal without closing it and i have to get rid of other links without disturbing the lay out. How can i achieve this ?
I tried this one :
jQuery('#button').load('myJSP', function() {
jQuery(this).show();
But this does not work.
Can any one suggest any ideas here ?

You just need to do load without the callback function - and you don't want to load the jsp inside your button.. You want it in the modal. You can read more about .load() here
jQuery('yourmodalcontainer').on('click','#button',function(){
jQuery('yourmodalcontainer').load('myJSP');
// this will load your jsp into the modal
});
My example uses delegation as I don't know how/when your button is created
You need to use delegation when your elements don't exist in the dom at the time of binding.. So I'm actually not sure when your modal or how it's created also.. It's best to bind to the closest parent element that is static and available at dom ready.. but to be safe you can bind it to the body
jQuery('body').on('click','#button',function(){

Related

How to call a function to an element dynamically loaded by Ajax?

I'm trying to use the jQuery Plugin SelectBoxIt, but my content is loaded by Ajax, and I'm not getting it to work.
I'm using Grails and I don't wanna put inline code, so I've tried to load it with the .on() jQuery method, but I can't get it since I don't want to put an event, I just want it to load when my content loads, and I can't find another solution.
I'm trying to do something like this:
My page calls a remote link:
<g:remoteLink controller="strategy" action="index" update="content-box"></g:remoteLink>
Then, ALL my HTML selects must trigger the plugin and turn from normal selects to the ones the plugin provides:
$(document).on('click', 'select', function(){
$('select').selectBoxIt()
})
But I don't want to trigger them with the click event, I want them to trigger right when the page is called.
Since my content is not added when the first page loads, I thought the .on() method was the right choice, but it makes me put an event, and I want to trigger when the page loads()
Thanks in advance.
Maybe read this, http://api.jquery.com/load/ and http://api.jquery.com/jQuery.ajax/. Sorry I can't be of more help.

How can I bind a javascript dialog using Knockout?

I've got a list of data in an observableArray and I want to show it in a javascript dialog window (I'm using jQuery.blockUI if it matters). Unfortunately the dialog seems to come unbound after the page is loaded. The dialog initializes correctly (the data is displayed), but it isn't updating with changes.
There are no Javascript errors and I've moved the binding to after the dialog is generated and added to the document (no effect). I've also tried calling ko.applyBinding on the main div that makes up the dialog but that, for some reason, causes part of the main page to hide (the DOM is there, but they are hidden).
EDIT: I've created a project on jsfiddle that reproduces the problem. The main culprit seems to be wrapping the content of the dialog in a div. If I show the content directly it seems to work (of course I can't do that, the wrappers provide a common style for our dialogs).
I'm recovering from the flu and could easily be missing something obvious, but I've been trying all day and nothing is coming to me. Any ideas?
The problem is that the dialog does not exist in the DOM (despite your calling $(document).append(). You cannot append a div as a child of the document itself). Instead, append the dialog to the body and hide it.
$dlg = $('<div></div>').hide();
$('body').append($dlg);
Works here: http://jsfiddle.net/yL6ds/4/

What is the best practice for presenting a modal view and binding events to it?

In a very common scenario, I have an HTML page with an "Add" button that opens a modal dialog (through Facebox) and asks the user to select an item from the list that appears in it.
The modal dialog gets its HTML snippet from the server asynchronously. I want this snippet to be reusable in many parts of my application so it shouldn't assume that I am using Facebox to load it. The only thing it should do is to trigger the item-selected event whenever the user selects an item in it. But since the snippet is loaded asynchronously, I cannot use $(document).ready. That is, I cannot trigger the event like this:
$(document).ready(function() {
$(".item").click(function() {
$(".items-modal-dialog").trigger("item-selected", this);
});
});
Also, I don't really like using the items-modal-dialog class to identify the enclosing DOM element.
I came up with some solutions to this, and I would like to know if there is some superior pattern that I am missing, because I think this is a very common problem.
Put the script after all the HTML so I am sure that the snippet DOM is loaded (I think this is a bad practice)
Creating a JavaScript function that loads the snippet with Facebox and then binds the events. This way I assume that I am using Facebox and also have to create a function for every type of modal dialog that I create. The only positive side I see in this is that I can create the items-modal-dialog DIV programmatically so I don't have to use a class to identify it.
Using jQuery live to bind the events.
Using an iframe and $(document).ready.
Any suggestions would be greatly appreciated.
Using jQuery's live or delegate function would be the best solution in my opinion.

Document.ready and a code that appears after it

I have a modal plugin on my page that shouts on $(document).ready but i also have another function (innerHTML) which puts the <a> 5-10 seconds after the page has been loaded, this way the modal doesn't work cause it's only working on the code that was there before it has been loaded.
I was thinking about making a function that will "click" on an existing <a> can it be done?
basically i need that when the <a> will appear it will open up the modal instead of going to chat.php
<a href=\"chat.php\" class=\"iframe\">
any help?
If you use bind method, or directly use onclick on your selectors, it will attach event to that specific control only if selector has results. Try to do same thing using live method, it will remember your event attachment even if your selector doesn't have any results, and if same kind of control is added later on, that event is automatically bonded to that control.
for example, if you are using
$('#btnSubmit').click(function(){ ... ); in document.ready replace it with $('#btnSubmit').live('click',function(){...}); this will fire click event even if you add btnSubmit after page load.

Dynamic content and loading of JQuery scripts several times

I am having a page that loads content dynamically. Depending on which menu item the user clicks, different tables are dynamically loaded and presented using jquery.
One column of each table is having an update linke used to update the content that specific row is representing. When clicking that link a JQuery UI Modal Dialog is presented with a form loaded from a server in which the user should update the content and post back.
This is how I understand it, please correct me if I am wrong. I need to load the jquery script at the same time as I load the dynamic content in order to bind the events between the javascript functions and the elements that is being loaded.
Assuming my assumption is correct I do load the content and the same JQuery UI Dialog scripts each time the user selects a different table. I load the content and jquery files from different javascript functions loaded together with the main index file.
The consequence is unpredictable behaviour (probably predictable using the same use case). When loading the table more than once and updating something so the modal dialog is presented, the dialog is not presented anymore after the first or second usage, as one example.
Could it be a problem that the jquery script is loaded more than once? If it is, what's the principle or patterna I should use for this kind of application. If all above is false assumption, still, what's the principle or patterns for designing this kind of solution where different kind of dynamic content is loaded at several places (all presented within the same index file) and all need the same jquery files.
Take a look a jQuery $.live() and $.delegate():
http://api.jquery.com/live/
http://api.jquery.com/delegate/
These will allow you to bind events to dynamically loaded content.
If I understand you correctly, you are asking how to bind events on dynamically generated content. You do not, in fact, have to load new script at the same time as new content in order to be able to hook events to said content.
What you want is the jQuery 'live' handler. You can specify the target of the binding using standard jQuery selectors. However, instead of the following syntax:
$('.foo').click(function(){ });
You would use
$('.foo').live('click', (function(){ });
The way this works is through event bubbling, where an event invoked on a child element (such as an input box) 'bubbles' up through all parent nodes. In this case, jQuery just watches the whole document for event bubbles, and then matches it against your specific selector conditions.
If I understand you correctly:
1) Multiple tables with an update link on each rows to update their content.
2) Update button opens a modal box with a form.
3) Form is posted and data is retrieved after being processed by the server to feed the concerned table row.
If the flow described above is correct, I don't see why you should load jQuery or jQuery ui more than once.
You should do something like
1) Load the page with all the scripts required.
2) Set up and ajax call with the jquery .ajax() method (doc)
3) Use the ajax call to submit the form data to the server and retrieve the results
4) Use the success callback of .ajax() to feed the row with the updated data. Within the success method you should be able to retrieve the context (a.k.a. the link you clicked) and identify the actual row you clicked.
I hope I make sense.
If by any chance you need to create new rows then you should consider checking the .live() and .delegate() method of jQuery.
Good luck.

Categories