I have the following setup:
index.html with <div id="container"></div> using anchor method I load different html content into this container.
My content contains div for modal dialog "dialog-form" and I initialise it with the custom function from the javascript included in index.html on successful ajax load using the callback $.get("callback.php",query, function(data){
$("#container").html(data);
initPos(); // here we run javascript to initialise modal dialog
});
Everything is ok until user click other menu (we load different content) and after that again clicks menu with this modal dialog, so page loads again, we call script again (everything is ok yet), dialog opens, information from the dialog is submitted to server and on sucessful sumbit I want to close the dialog with ('#dialog-form').dialog('close');it worked first time, but no longer works because we initialised this dialog twice and using Firebug I can see two different instances of ui dialog with the same name in the
div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
How to clean this up when the user selects different menu item?
What is the right way to do deal with this? Is there any way to close multiple dialogs with the same name?
Figured it out.
To remove this DIVs from body - before initPos() in ajax callback insert function InitializeDialog()
function InitializeDialog() {
$("div").remove(".ui-dialog");
$("div").remove("#dialog-form");
}
In general
When your Jquery UI dialog is returned along with <script> tag in response to ajax call. On this situation you have to remove dialog div as said above and then make a ajax call.
Hope this helps!
Related
I have a parent page that opens a modal dialog page. Modal dialog page has jabvascript in the header that retrieves grid information from parent page using the following javascript:
var ig$ = apex.region("pg_2_ig_grid").widget(),
view = ig$.interactiveGrid("getCurrentView");
apex.region("pg_2_ig_grid") returns null so I get an error. Not sure why this is happening. I also tried adding javascript to shared components but getting the same error. How can I access a grid on page 2 from modal dialog page 3?
I have not tested it, but try to put "parent" at the beginning of each javascript statement that should do something on the parent page. "parent.apex.region..."
I would like to create a usual dialog window:
The user clicks a link or button
The screen becomes blackish, a new window appears (a DIV is created)
By using Ajax, the DIV is populated with a form.xhtml
By clicking on a cross in the DIV, the DIV is removed and the blackish screen too.
I know how to do some of this stuff with usual CSS/Jquery. However, I am lost on how the JSF link/button should call the Jquery code to create the dialog (because I am supposing that JSF cannot do it alone) and make the Ajax call to get the form.
I am not using auxiliary libraries.
I have a page like home now what I want is if I click a button or link like a menu a corresponding view must load in that div in the home page. On every button click the views are must change inside the div without refreshing the entire page.
I know this can be done with ajax and jquery.
on click event of button call a javascript method, collect information which affect different views, send ajax request in a controller with post data, according to data, load a view like
$res = $this->load->view('myview1')
Remember, ajax request should not be of "json" type.
Ajax request will send a string, take this string in a javascript var.
now in javascript
$('#div_id').html(res);
I want to preserver state in MVC with js when browse page back. I tried all of the tricks below. None of the alerts appears?
all the alerts will appear if the code is placed in a page of a webform site, but none of them will appear if you place it in a page of a MVC site. In a MVC 3 page, I want to find a place to preserve checkboxes state with javascript WHEN users press the browser's "previous" button.
I can't use server side code such as
How to handle checkboxes in ASP.NET MVC forms? or Maintain state of a dynamic list of checkboxes in ASP.NET MVC because we need embed existing js code
Appreciate any helps with other ideals.
<body onunload="">
<script type="text/javascript">
alert('press previous button, reload1');
alert('press previous button, reload2');
history.navigationMode = 'compatible';
$(document).ready(function () {
//wire up checkboxes. //$("input[name='element12']") //($"input[name="addedFav"]")
// $("input[name='addedFav']").live('change', function (e) {
alert('press previous button, reload3');
});
window.onload = function () { alert('press previous button, reload4'); };
</script>
click me, then press the back button
</body>
It seems like you might have another javascript code block on your page that is throwing an unhandled error. Try checking your browser console for the exact line
..edit..
If all you want to do is store checkbox state, you should try using store.js. You can attach jquery click handlers to the checkboxes that serialize the selected checkboxes and store them. Then on page load you check to see if the store is populated, if so deserialize and select the appropriate checboxes
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});