Navigating to an ASPX page with details from a clicked event in FullCalendar - A step-by-step guide

I am currently working on a hybrid project involving FullCalendar in MVC and Webforms for other pages. When I click on an event, all the details are displayed as expected. Recently, I added a 'More Details' button to the 'eventClick' modal so that I can navigate to an ASPX page showing detailed information about the event. However, I have been struggling to find a solution. Any suggestions?

View Picture of 'eventClick' Modal

@section Scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

<script>
    $(document).ready(function () {
        // Your script logic goes here
    })
</script>}

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><span id="eventTitle"></span></h4>
        </div>
        <div class="modal-body">
            <p id="pDetails"></p>
        </div>
        <div class="modal-footer">
        <a type="button" class="btn btn-default" href="" onclick="this.href = 'EqDetails.aspx?idid=' + document.getElementById('eventTitle').value">More Details</a>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

Answer №1

I created a sample for another situation, but you can also apply the same method to retrieve the necessary data for display. Make sure to manage the Page_Load section.

To navigate to the page using the hyperlink, you should use the following:

<a type="button" class="btn btn-default" href="javascript:;" onclick="javascript:document.location.href='EqDetails.aspx?id='+document.getElementById('eventTitle').innerHTML">More Details</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform a C# DateTime object into a JavaScript DateTime object

I'm attempting to convert a C# DateTime variable into a format that can be passed into a JavaScript function using NewtonSoft.Json. Currently, I am using the following code: var jsonSettings = new JsonSerializerSettings(); jsonSettings.DateFormatStr ...

Calculating the time gap between two consecutive "keyup" occurrences

I am in need of creating a basic point of sale system using Javascript. I have a barcode scanner that functions like a keyboard. My goal is to automatically identify when the input is coming from the barcode scanner and then generate a report with the sc ...

leveraging angular service with ionic framework

(function () { 'use strict'; angular .module('app') .factory('UserService', UserService); UserService.$inject = ['$http']; function UserService($http) { var service = {}; ...

Obtain the ID of element 1 by clicking on element 2 using JQuery

In the world of javascript/jquery, When button1 is clicked, we can get its id like this: var button1id = $(this).attr("id"); If button2 is clicked, how do we retrieve button1's id? This brings us to the question: How does button2 access the i ...

Background image covering entire page is exclusive for the home/index page only

I'm facing an interesting dilemma.. I've built a single-page application with a layout that includes a header, footer, and uses ui-router to display views. Now, my challenge is to have a full-page background on the homepage (index.html) and a wh ...

How to Handle Overlapping Divs in HTML?

I have a sizable container div with various dynamic divs nested inside. These child divs are often padded to the left and contained within another div that is also padded on the left. My goal is to make the overall container div (which has a border) adju ...

What is the best way to conceal a browser's menu bar?

I'm currently working on an ASP.NET project for an online quiz platform. The questions are being selected randomly from a pool of options. Everything is functioning correctly, but I am looking to restrict users from saving or printing the test by hidi ...

WebDriverError: The preference value for network.http.phishy-userpass-length in Firefox is not valid: exceeds maximum allowed length

Attempting to initiate a new test case using gecko driver (v0.15) with a specific Firefox profile in Protractor 5.1.1. I created the profile based on this guidance: Set firefox profile protractor Upon starting the execution through the protractor configur ...

Discrepant functioning of window.location in Internet Explorer versus Chrome

I am encountering an interesting issue with a webpage that has 3 levels in its URL structure, such as example.com/1/2/3. The code snippet I am using is as follows: window.location.replace(""); When running this code in IE11, it navigates to example.com/1 ...

Exploring the values of a JavaScript promise while iterating through a for loop

I find myself wandering in the land of possibilities and would greatly appreciate some direction. After spending 2-3 hours scouring through countless SO questions and documentation related to my current predicament, I still seem to be missing the mark. Ove ...

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

I am attempting to create a collapsing menu on click functionality with additional modifications. One of the changes I would like to implement is altering the background of another element when the menu collapses. Currently, the code snippet only works fo ...

Issue with Local Storage: Value not being saved, instead [object MouseEvent] being stored

I am truly grateful for the help from @zim as it allowed me to drastically simplify my code for 2 buttons that store true/false values locally. However, I am facing an issue where the button click is registering as [object MouseEvent] instead of True/False ...

Troubles encountered when populating the array within a Vue component

I am experiencing an issue with my ProductCard component where the addItem method is not successfully adding a new item to the array. <template> <div class="card"> <div v-for="item in TodoItems" :key="item.id ...

Once the recursive function executes (utilizing requestAnimationFrame), socket.emit can finally be triggered

My current issue involves sending an array to my server from the client side using a recursive function, but the responses from the server are delayed and only arrive after the recursive function completes. I'm uncertain whether the problem lies with ...

Determining the meeting time of two objects in motion with varying angles

I am faced with a scenario where two objects are moving at different angles, and I need to determine when they will meet. The goal is to calculate the meeting time of these objects, with the return type being a time value or "infinite" if they will never m ...

Is there a way to trigger a function in Javascript without manual intervention, similar to how

I've recently embarked on a journey to unravel the mysteries of jQuery. Consider this scenario where you want an action to be triggered when an anchor tag is clicked. Let's analyze the code snippet below: $('.selector').click The symb ...

Generate 2 configurations for webpack

Currently, I am facing a challenge while building a webpack file. The issue arose when I needed to incorporate the 'node' target due to conflicts with an 'fs' function that reads certain files. Subsequently, I decided to split my config ...

"Encountering issues when trying to retrieve a global variable in TypeScript

Currently facing an issue with my code. I declared the markers variable inside a class to make it global and accessible throughout the class. However, I am able to access markers inside initMap but encountering difficulties accessing it within the function ...

Locate the maximum and minimum elements from within each nested array using JavaScript

Here is an array I'm working with: var arr = [[12,45,75], [54,45,2],[23,54,75,2]]; I am trying to determine the largest and smallest elements in this nested array: The minimum value should be: 2 while the maximum should be: 75 I attempted using t ...

Using Google Script Code in Sheet to input a key and click on the submission button

Is there a way to enable using the Enter key in addition to clicking the submit button to input data and save it to a cell? I'm having trouble getting my current code to work. Any suggestions on how to modify it? <script> var itemBox = document ...