How do I call a modal that is on view X using a button on view Y

Question

0.00/5 (No votes)

See more:

I have 2 views (X,Y)

X has the modal

Y has the button to show the modal.

How do I then call the modal on X using onClick of the button on Y

What I have tried:

var tbl_AttributesViewModel = new Object();
tbl_AttributesViewModel.Attr_Id;

$('document').ready(function () {
$('.alert-link').click(function () {
alert("hi")
tbl_AttributesViewModel.Attr_Id = $(this).attr("id");

$.ajax({
url: config.serverPath + "Attribute/AddOrEditAttribute/" + tbl_AttributesViewModel.Attr_Id,
type: "GET",
data: { id: tbl_AttributesViewModel.Attr_Id },//tbl_WBSViewModel,
success: function (d) {
$('#getAttrModal').modal('show');
}
});
});
});

$('document').ready(function () {
$('#btnChildAttr').click(function () {
$('#addAttrModal').modal('show');
});
});

Posted 11-Jul-19 2:02am

Member 14370529

Updated 11-Jul-19 2:59am

Add a Solution

Comments

F-ES Sitecore 11-Jul-19 9:19am

Views etc are a server-side concept, but your js code is running on the client, so what mark-up is in what view is irrelevant, js has no concept of "views". What matters is what the resulting mark-up in the browser is. If both views are included in the output (ie at least one is a partial view) then the browser treats that as a single document so just make sure the js works within that document. If one of the views is not included in the output then you can't access anything on it from js as js runs on what is sent to the browser.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

raddevus · Answer 1 · 2019-07-11T02:59:00

That call is a bootstrap call.

JavaScript

$('#getAttrModal').modal('show').

You are noticing that the code is not shared between Views and so you don't get re-use.

It is a distinct challenge in this situation. The first (and easiest) way to get it working is to copy the modal dialog layout to both views. Obviously, that's not great though.

The real answer is to add the modal dialog to a PartialView and then load that PartialView into each View. That way you have the code in one place but you can invoke the Modal from either one.

To add the Shared PartialView
In Visual Studio...
right-click the Views\Shared folder and select "Add View..."
NOTE: Very important you put in in Shared folder so it can be found by all Views.
A Create View dialog will appear...
In that Create View dialog you will name the View (something like DialogView)
Here's a snapshot: https://i.stack.imgur.com/GQTtj.png[^]

Notice that you have to select the checkbox that says, "Create as partial view".

It will create the view. You put your Bootstrap Modal dialog HTML in there.
Now, you can reference this PartialView in each of your pages to load it in the location where you want it to show up.

In each of the pages (CSHTML) where you want the modal dialog, use a line of Razor code (HTML Helper) like the following: