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
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 have a MVC 4 project I am currently working on and need some advice on how to implement modal popups, preferably in jQuery.
For instance, on my view I have a zip code text box, with a lookup button next to it. The user can enter in the zip code directly, or click the lookup button. If the user clicks the button, I want to have a modal popup where the user can enter in a city and state and get a list of zip codes, select one, and then have that value posted to the zip code box on the original form.
This is just one example, I have more on that view, but this is the easiest to explain.
Anyone have any tips, links, or example code?
Thanks in advance on any help.
how to implement modal popups, preferably in jQuery.
Generally jQuery dialog with modal : true and handled beforeClose is what you want
$(foo).dialog({
modal: true,
beforeClose: function(event, ui) { ... }
})
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
});
I have a page with several forms on one page. I have a button (outside all forms) that I want to submit only ONE form, but all form data is getting submitted from all forms.
$("#indiv_save").click( function() {
alert($("#indiv_form").serialize()); // Shows only correct form
$.post("/admin/update", $("#indiv_form").serialize(), function(data) {
notify(data); // quick and easy feedback
});
});
The alert() call shows exactly what I want to submit, but then Firebug shows fields being submitted from all forms after the .post(), even though the serialize() function is identical.
All forms have different names and element ids.
What am I doing wrong?
You are making an ajax POST and returning. Depending on your button, it's going to attempt to submit the page's forms. What you need to do is prevent the default action:
$('#indiv_save').click(function(e)
{
e.preventDefault();
// Your Code Here
});
The default action for your button is probably "submit the form", and you are not preventing it.
Return false from your click function should do it.
The forms can't be inside a single all encompassing <form> tag, they have to be separated out in individual <form>'s instead.
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!