Looking to invoke a div element on a new line using JavaScript and AJAX?

How can I call div from JavaScript without them stacking on top of each other?

Here is the code for page 1:

     <script>               
        function jvbab(content) {
        var request = $.ajax({
                type: "get",
                url: "ceking.php",   
                data: {bab: content}
               });

            request.done( function( msg ) {
                $("#myboxmin").html(msg); 
            });
            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });
        }
        </script>

And here is the code for page 2:

    <script>               
    function jvpasal(content) {
    var request = $.ajax({
            type: "get",
            url: "cektopik.php",   
            data: {pasal: content}
           });

        request.done( function( msg ) {

            $("#mybox").html(msg); 
        });
        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
    </script>

When I run this code, the divs stack on top of each other like this:

<div id="myboxmin">
   <div id="mybox">
   </div>
</div>

I want to have these two divs separate like this:

<div id="myboxmin">
</div>

<div id="mybox">
</div>

Is there a solution to separate these divs? Thanks.

In my PHP file, I have included the following code:

<?php
session_start();
$bab = $_GET['bab'];
$_SESSION['bab']=$bab;

include '../koneksi.php';
?>

<html>
<head>

            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta name="keywords" content="" />
            <meta name="description" content="" />
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <title>Klasifikasi Al-Quran</title>

            <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
            <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

            <script type="text/javascript" src="sitemapstyler.js"></script>
            <link href="../css/default.css" rel="stylesheet" type="text/css" media="all" />
            <link rel="stylesheet" href="../css/jquery-ui.css" />

            <script>               
            function jvpasal(content) {
            var request = $.ajax({
                    type: "get",
                    url: "cektopik.php",   
                    data: {pasal: content}
                   });

                request.done( function( msg ) {

                    $("#mybox").html(msg); 
                });
                request.fail(function(jqXHR, textStatus) {
                    alert( "Request failed: " + textStatus );
                });
            }
            </script>

</head>
<body>
    <br><br><h1></h1><br><br>
    <h3>Pasal</h3><br>
    <?php                 

    $r=mysql_query("SELECT DISTINCT id_pasal,nama_pasal FROM nama_pasal_topik
                    WHERE id_bab = '$bab' ") or die (mysql_error());

       while($rr=mysql_fetch_array($r)){                   
             $nama_pasal=$rr['nama_pasal'];
             $id_pasal=$rr['id_pasal'];?>

             <a href="#"  id="pasal" name="pasal" onclick="jvpasal('<?php echo $id_pasal; ?>');" ><?php echo $nama_pasal; ?></a>
             <br>  
       <?php } ?>


    <div class="mybox">
    m
    </div> <!--tutup mybox-->
</body>
</html>

Answer №1

To solve this problem, locate the parent of myboxmin and add a new div element inside it.

request.done(function(msg) {
    $("#myboxmin").parent().append(msg);
});

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

The process of enabling NPM packages for use with ES6 and ECMAScript

Currently, I am working on developing an NPM package using TypeScript. My main concern is how to ensure that this package can be made available for both ES and Node modules. To achieve this, I have configured Rollup along with a few settings: rollup.conf ...

Prevent submission of form until recaptcha3 g-recaptcha-response value is obtained

SEO has a significant impact on site load speed nowadays. Adding Google reCAPTCHA3 can reduce site speed by 35-40% in Google Lighthouse results. To combat this, I chose to load the reCAPTCHA3 library only when the user clicks or fills out a form field. I i ...

I have successfully set up micro-cors on my system, and as I tried to compile, I received the following outcome

While working on the Next.js Stripe project, I ran into an unexpected problem that I need help with. ./src/pages/api/webhooks.ts:3:18 Type error: Could not find a declaration file for module 'micro-cors'. 'E:/Project/longlifecoin/node_module ...

What are some ways to stop animated scrolling text from unexpectedly resetting in HTML and CSS?

I created this code snippet on CodePen to illustrate my point: https://codepen.io/sakana-boy/pen/wvBedWo .scroll-text { overflow: hidden; position: relative; } .scroll-text * { white-space: pre; transform: translateX(100%); animatio ...

Drawing a line in THREE JS where the endpoint is a vector not related to the object or its parent

In my scene, I have a hierarchy of objects where one is the parent and the other is the child. My goal is to determine a Vector3 relative to the deepest child object that points towards a specific vector in the scene (look_point). var grandParent = new T ...

Unable to send an API request from Postman to a database through express and mongoose technology

This is my server.js: const express= require('express'); const app = express(); // const mongoose= require('mongoose'); // load config from env file require("dotenv").config(); const PORT = process.env.PORT || 4000; // middl ...

Discovering which dependencies rely on the eval function can be done by examining

I've been working on a chrome extension, but I keep encountering an error that mentions the use of eval. Surprisingly, my code doesn't include eval, so it must be coming from one of my dependencies. Is there a quick and efficient method to pinpoi ...

Save the text found within an element to Appim wd.js

I am a beginner with Appium and I am currently exploring the workshop Git project, which utilizes wd.js and Grunt. From my research in the documentation and forums, I have learned that there are two methods for accessing the text of native elements within ...

Pass along complex JSON data structure from the view to the model

Is there a way to efficiently send Nested JSON data from the view to the model? Most solutions I've found don't account for variable keys within the object. Here's an example of the JSON object: "Login": { "userId": "harshal.bulsara", ...

Resize image to fit within a div using Bootstrap

I'm attempting to resize some images to fit into horizontal cards created with Bootstrap-5, but I'm having trouble filling up the div completely. I've been using a main.scss file to manage the Bootstrap CSS and have tried using classes like ...

Building a responsive HTML5 site optimized for various screen sizes

I'm working on a website design that includes just one <div>. I have managed to make it responsive to different screen resolutions, but when testing it on a laptop, the horizontal and vertical scrollbars are automatically appearing. Does anyone ...

Passing a selected value from the child to the parent component through state in React using hooks

I'm currently working on a Dropdown component that includes a select tag. When the user changes the value in the select, the state is updated to reflect the selected option. The StyledDropdown component is used for styling the select element. const D ...

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

AJAX request lacks the 'access-control-allow-origin' header

I'm currently integrating a weather API into my app to display real-time weather information. Although I've used this API before, I am now attempting to fetch the data asynchronously using AJAX to avoid full page reloads. Below is the JavaScrip ...

Challenges with sending JSON encoded Arrays from WordPress to PHP results in empty or NULL responses

My Plugins site has multiple Inputs that I need to gather values from and push them into an array. Then, I utilize the jQuery.post method to send this data to my PHP script. Javascript: var json = JSON.stringify(output); // output is an array with multip ...

Tips for creating a responsive layout to ensure that H2 achieves its optimal font size in a one-line DIV

Is there a way to ensure that an H2 headline fits within the width of a DIV element? I am looking for a solution where the font size of the H2 automatically adjusts to display its full text without overflowing or breaking into a second line inside the DIV ...

The task "gulp js src - duplication and implementation of base" involves duplicating

My gulp task is set up to copy JavaScript files. The initial setup below did not work: gulp.src('./**/*.js', {base: '../src/main/'}) .pipe(gulp.dest('../target/dist')); After making some adjustments, the following code ...

Adjust Image Sizes with Jquery for Stylish CSS Images

Implementing twitter bootstrap responsive for scaling images using css has been challenging. Currently, I have set the images to 100% width with auto heights. The issue arises when WebKit struggles to handle animations, especially during page scrolling, i ...

After selecting a delivery method, the checkout feature on opencart 1.5.6.4 is malfunctioning

Check out my online shop at store.suhaskhamkar.in. I've set it up using OpenCart version 1.5.6.4, but I'm facing an issue with the checkout process. It seems to get stuck at step #4, which is the Delivery method selection. Upon checking the conso ...

Transitioning from jQuery post to AJAX is a unique process that requires slightly different coding techniques

Is there a way to convert a jQuery $.post call to an AJAX post call? I need to send an ARRAY to the controller. $.post(url, function (data) { $('#myModal .modal-title').html($link.text()); $('#myModal .te&apo ...