Changing modal content on MVC - javascript

I have a modal, and I'like to have 2 steps on it.
The first contains a (kind of) grid with one button on each line. When the user clicks a button, I have to go to other view sending the row's id selected. He may want to go back and change his selection.
I've tried this below, but it opens at the page, not at the modal:
[HttpPost]
public ActionResult Step1()
{
return RedirectToAction("Step2");
}
Is there any way to do this?
Tks.

I'd recommend you following approaches in order get that behavior:
Javascript: your modal should contain markup for 2 steps, but only one is visible at the moment; one user clicks button on the first step - populate 2nd step dynamically with javascript
AngularJS + Route: Similar to the previous, but different from tools stand point; angular knows how to insert peaces of html into your page; see a nice article with a demo on this; this approach might require some conceptual changes to your solution, but finally you'll be sutisfied
Hope this helps.

Step1 action should return a PartialViewResult.
In your grid, upon click the link that open step1, fire a JavaScript function that does the following:
1- fire ajax request to the action passing a query string parameter, ex: ID, you can pass this parameter when you draw the link in the grid, ex: Open
2- In the action, get the parameter, retrieve the data and return the partial view.
3- when the data comes from the ajax request, set its content to the modal dialog
4- show the modal dialog, you can use either bootstrap or jquery dialog

Related

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.

Call javascript from appended text (order cart)

Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/

How to reload JSP with changed actionbean variable using Stripes

I am new to working with Stripes. I have a dropdown ("show ## recordrs per page") and a paginated table on the JSP page and I want to display as many records per page in this table, as the value selected in the dropdown.
The action bean has a variable "recordsPerPage" and I am not able to figure out a way to set the value of this variable and reload the table, so as to change the number of records that are displayed per page. Please help.
---- Additional Info -----
The table that I use is a displaytag table, which accepts a PaginatedList. This table is within a stripes form.
-- EDIT:
What I did is, I added a <stripes:hidden/> with the name "recordsPerPage" and set the value to be the number of records I want to display. I also added a <stripes:submit> to the same form. The "name" attribute of this submit button is the method name of the action bean I have to call. When I click on this button, I am able to do what I want. But now, I am unable to do it through javascript. Please help.
Due to some reason, calling Dom.get('submitButton').submit() or Dom.get('myFormId').submit() does not fulfill the intended purpose. Taking a clue from being able to do what I wanted from the submit button click, I made this submit button hidden and the called click() on this button from javascript. Thus Dom.get('submitButton').click() produces the intended result. If someone can give me the explanation of why the submit method did not result in expected behavior, that'll be great.

Get elements of a query-set with a jquery get function. Django

In my django app I would like to display a text when a user clicks on a button, without refreshing the page. When the user clicks again, I would like an other text to be displayed, still without refreshing the page.
The informations (texts) I wan't to display are in a query set, named "information".
So I would like to know how to accomplish that.
Here is the way I try to do it:
I create a view where I store my query set:
def get_information (request):
information= Information.objects.filter(object1__id= X)
Then I create a jquery get function (in the template of the page where the user clicks) in order to get informations on this list:
function get_info(){
$.get('/mysite/get_information', {'information':information}, function(data) {
$('.information').html(data);
});
};
And then I render it in my template with a submit button and a onclick="get_info".
But I don't know how to make the request get a different information at each request, in order that the user does not get the same information twice.
Thank you a lot for your help.
Take a look in to Django Pagination. You could create the Paginator object in your view and then you can display message from the queryset based on the request from the client side. Let me know in case of any issues.

pass data from popup gridview to parent page

the explanation given here http://wiki.asp.net/404.aspx?aspxerrorpath=/themes/fan/pages/page.aspx/282/passing-value-from-popup-window-to-parent-form39s-textbox/
is exactly what I want , but Its not giving the output and parent page despite doing exactly as explained ,
can anyone please send sample website with northwind data base ? no need of mdf file ,just a tested demo I will attach Northwind .
The task s simple , In pop up window there is a grid with some databound column and one with button , my task is when buton is clicked it must return text from respective grd row to the parent page'control (any)
Maybe is not working to you because on the sample is hard code the button id, and this logically because on the popup window did not know how the button have been render.
getElementById("ctl00_ContentPlaceHolder1_TextBox2")
So ether correct this id to make it as its appear to your page, ether make the control id on TextBox2 static so is not change, and get it by name.

Categories

Resources