HTML keys: How do I link to an AJAX ActionLink?


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by John C on 7th June 2017
Thank you for your help this month. I am trying to use the links in HTML Keys to go to an ActionLink, which is an ajax call that puts a partial view into a modal. I'm able to get to the ActionLink, but no matter what I've done, it puts the results in a new page, not the modal I have set up. I know the modal works, because I have identical code elsewhere in my project that executes it successfully using Ajax.ActionLink. I am using this site's HTML Keys page as a template:

links: [
                 "javascript: window.open('www...');" +
                 "event.stopPropagation()"
        ],

Do you have hints as to where I'm going wrong?

- John C
Posted by Richard on 7th June 2017
Hi there,

Well this worked for me in Chrome, Firefox and IE11:

links: ["javascript: window.open('www.foo.com'); event.stopPropagation()"],

Keep in mind that the string will be enclosed by double quotes ("), so, as above, always start your string with double quotes.



Richard
Posted by John C on 9th June 2017
That worked for you to open a modal? My 'www...' links to an Ajax ActionLink which opens the modal. Instead of a modal, I get a new page. Is that my problem?
Posted by Richard on 9th June 2017
Hi there,

Not a modal window - just a regular new browser window. By default it doesn't have an address bar but you change that with one of the arguments to the function.

If it's a modal dialog that you want try this:

www.rgraph.net/canvas/docs/integrating-RGraph-with-external-libraries.html


BTW I've never heard the term "ActionLink" - I'm assuming that you mean something like this:

<a href="javascript: alert('Foo')">My link</a>


Richard
Posted by John C on 9th June 2017
ActionLink is an HTML and AJAX helper in MVC. Thank you for that link concerning modals. The catch is, I don't want to open a modal with the charts on it. I want to open a modal when they click on the legend keys, displaying more details regarding that item. The page you showed me doesn't say how to do that.

- John
Posted by Richard on 9th June 2017
Hi there,

links: [
     "javascript: window.open('www.google.com',null, 'top=10,left=24,width=976,height=500'); event.stopPropagation()"
],

Well this would result in the first key item becoming a link, which in HTML would look like this:

<a href="javascript: window.open('www.google.com',null, 'top=10,left=24,width=976,height=500'); event.stopPropagation()">...



You could also do this to open a modal dialog (three links, one for each key item (assume you have three key items)):

links: [
     "javascript: showModal(0); event.stopPropagation()",
     "javascript: showModal(1); event.stopPropagation()",
     "javascript: showModal(2); event.stopPropagation()"
],

Then elsewhere on the page you could define the function and have it do whatever you want:


<script>
     function showModal (index)
     {
         // Do whatever you need to do to show the modal here
         alert(index);
     }
</script>


Richard
Posted by John C on 9th June 2017
I've tried that, but it doesn't work. However, based on your earlier reply, I think a clue to how to do it is in:

www.rgraph.net/canvas/docs/integrating-RGraph-with-external-libraries.html

I'm sure now I need to include the RGraph.modaldialog.js in my project. But I think I need do something more on the link that will make it into a modal. I'm going to try just and see if it turns into a modal with this added, but if you have any other ideas that I should add, I'd appreciate it.

Thank you for all your help. RGraph is the best free third party chart tool I've found.

- John

Posted by Richard on 9th June 2017
Hi there,

Ok how about this then (which is supplying the dialog HTML that gets displayed as a string):




links: [
     "javascript:showDialog()"
],




And the showDialog function is like this:




<script>
     function showDialog ()
     {
         ModalDialog.Show('string:<h1>My Dialog</h1><button onclick="ModalDialog.Close()">Close</button>');
     }
</script>


Richard
Posted by John C on 12th June 2017
Thank you, that finally gets me a dialog box to open. Unfortunately, I'm having trouble using ModalDialog.Show() to direct it to a link such as:

ModalDialog.Show('/Home/Index?id=123')

I get this strange error:

Unable to get property 'innerHTML' of undefined or null reference

What is the proper way to insert a link into ModalDialog.Show?

- John
Posted by Richard on 12th June 2017
Hi there,

That's because that isn't supported. What you could do though is use an IFRAME in your dialog - and then set the src to the URL - like this:

<script>
     function showDialog ()
     {
         ModalDialog.Show('string:<iframe src="/Home/Index?id=123"></iframe>');
     }
</script>


Richard
Posted by John C on 13th June 2017
I haven't used IFrame before, and it's been years since I used <frame></frame>. But it works, and after all this, that's good enough. One last question on this topic: for some reason, none of the ways I've tried to close the Iframe has worked. I'm not sure if I'm supposed to close (or hide) the frame, or the graph, and I've tried many ways online. Do you know where I should look?

- John
Posted by Richard on 13th June 2017
Hi there,

Not sure why you differentiate IFrame and <iframe> - but here's an example:

www.rgraph.net/fiddle/view.html/a-modaldialog-iframe-example

Note whilst creating this URLs from a different domain didn't load - which might well be a security protection (which also might due to some headers that are sent with my site).


Richard

Add a reply

 




« Back to message list
Share RGraph!