Display content within DIV element without causing a page refresh


I'm experiencing a small issue with loading addresses in my divs. I have a link that triggers a dialog box and loads the linked address into it, but when I click on the link, the dialog box opens briefly and then everything disappears!
Here's what the link looks like:

<a href="http://localhost:9090/info.aspx?ID=1341" class="clinfo">INFO</a>

and the dialog trigger script:

        $(".clinfo").click(function () {
        $("body").on("click", ".ui-widget-overlay", function () {
            $('#divInfo').dialog("close");
        });
        $("#divInfo").dialog("open");
        $('#divInfo').empty();
        $("#divInfo").load($(this).attr("href"));
    });

I can't seem to pinpoint where the problem lies. Strangely, when I load divInfo from an iFrame, it works perfectly and loads the page into divInfo as expected. But outside of the iFrame, it opens divInfo and then redirects the whole page!

javascriptjqueryhtmlcss

Answer №1

Consider implementing event.preventDefault() in your code


$(".clinfo").click(function (event) {
    event.preventDefault();
    $("body").on("click", ".ui-widget-overlay", function () {
        $('#divInfo').dialog("close");
    });
    $("#divInfo").dialog("open");
    $('#divInfo').empty();
    $("#divInfo").load($(this).attr("href"));
});

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

IE displaying "slow script" alert due to Knockout malfunction

Within my grid of observables and computed observables, the first row serves as a multiplier for all subsequent rows. Users can modify this percentage rate and Knockout automatically updates all relevant values accordingly. Additionally, I require a textbo ...

javascriptinternet-explorerknockout.js

Transferring information through AJAX to the current page using a foreach loop in Laravel 5

As a newcomer to ajax and laravel 5, I am eager to learn how to pass data with ajax to populate a foreach loop in laravel 5 on the same page. <div class="row" style="margin:3% 0px 0px 0px"> @foreach($warung_has_kategoriwarungs['i want pass ...

javascriptphpjqueryajaxlaravel-5

Creating a Simple HTML Table Using PHP Arrays

I attempted to create a simple PHP array table, but the output of my code did not meet my expectations. <?php $names = array ( 'First Name' => array('Alfre', 'Beka', 'Charlie'), ...

phphtml

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

javascripthtmlcssgoogle-mapsgridstack

HTML Styling Origin Finder - Locate the Source of Your Website's Style

In my ASP.NET project, I am facing an issue with determining the source of a textbox's style. There are multiple style sheets in use on the page, and I need a tool or editor that can pinpoint which styles are being applied to render the textbox. Your ...

asp.nethtml

Having difficulties loading my stylus stylesheet onto my jade HTML page using expressjs

Within my express application, I am attempting to load the style properties from a styles module engine. Unfortunately, I am facing difficulties in loading my style. Here is the structure of my folders: myNodeApp -node_modules -styles - ...

htmlnode.jsexpressstylus

The implementation of pipelining for server-side processing

Initially, this function is set up to work with $_GET. However, after incorporating feedback from this discussion, I made adjustments to the function which resulted in an error message being displayed by Firebug. The error message reads: "json.aaData is ...

javascriptjqueryajaxdatatablespipeline

Transmit information to the controller using jQuery in a C# MVC environment

Here is my jQuery script code snippet. The script works perfectly and stores the data array/object in a variable called dataBLL. var dataBLL = []; $('#mytable tr').each(function (i) { dataBLL.push({ id: $(this).find('td:eq(0)').text( ...

javascriptc#jsonajaxasp.net-mvc

"Exploring JSON data with jQuery: A guide to efficient search techniques

I have a local file containing JSON data which I successfully loaded using jQuery. My current task is to specifically find the pId with the value of "foo1". The JSON data { "1":{ "id": "one", "pId": "foo1", "cId": "bar1" }, "2":{ ...

javascriptjqueryjson

Having trouble with the second jQuery AJAX request not functioning properly?

I'm having trouble figuring out where I'm going wrong. The second ajax call isn't functioning properly, unlike the first one. $(".payment").click(function(){ visitorID = $(this).attr('id'); alert("Modal says "+visit ...

ajaxjquery

Ways to determine in each() whether the current div contains a specific class or not

My task is to verify if the div contains the class 'completed', and then insert the text "Hello". However, my current code is displaying "Hello" even when the div does not have the class 'completed'. jssfiddle ...

jquery

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

The output does not show the response from the method in React Native

I am facing an issue with a method in my code (React Native). I have an array of IDs and I need to send a 'GET' request for each ID to display a preview card for each. To achieve this, I have used the 'map' method on my array. The req ...

javascriptreact-native

Showing JSON data in AngularJS

I need help with AngularJS to display JSON output. Is using gridOptions the best approach for this? I'm trying to print labels starting from the root in reverse order - label/parent's label/parent's parent's label/... { artifac ...

javascriptjsonangularjs

Output information to the specified divID using Response.Write

Currently, I have knowledge of javascript and I am currently expanding my skills in ASP.NET C#. My goal is to achieve the following task using javascript: document.getElementById('divID-1').innerHTML= '<p>Wrong Password< ...

javascriptc#htmlasp.netstring

What could be causing my for loop to become unresponsive?

My for loop seems to be populating all fields with the last object parsed. http://codepen.io/anon/pen/EKxNaN This is my current code. I created something similar on CodePen since I can't access JSON from the original source there. var championMaste ...

javascriptjqueryjsonajaxloops

Innovative manipulation of arrays using Javascript

Let's say I have some sample input data: data = [ { color : 'Red', number : 5}, { color : 'Blue', number : 3 }, { color : 'Green', age : 8 }, { color : 'Red', number : 7 } ] and I am looking to combine ...

javascriptarraysobjectdynamic

Transition within Vuejs moves forwards and backwards, with a unique feature that allows it to skip directly to

I am in the process of developing a slider element that consists of only 2 items. My goal is to ensure that these items smoothly slide back and forth to the left and right when I click on the back or next button. While everything functions correctly when I ...

javascriptvue.jsvuejs2

What is the best way to display all the steps in a Material UI stepper when preparing a page for

I'm currently developing a React component that utilizes Material UI stepper functionality. The challenge I am facing is ensuring that the data is printable effectively. It's necessary for all steps to be expanded and printed, which goes against ...

cssreactjsmaterial-ui

Using conditional statements to render content based on a certain condition within a

One of my requirements is to dynamically render a React component in the following manner: parent.ts ... <Parent> <Child/> <Parent> ... child.ts ... return (someBoolean && <Component/>) ... While ...

javascriptreactjstypescript