Unable to display scrollbar when generating dynamic content with jquery ajax

I have a jQuery report where I am generating dynamic HTML content (nested divs, span, label) using JSON. The report utilizes jQuery, mCustomScrollbar, commons, and jQueryUI.

When I have a 

<div>...//some static code </div>
, everything works perfectly fine.

However, when I add dynamic code between this 

<div> // dynamic code using ajax  </div>
, the scrollbar does not appear.

Oddly enough, if I minimize/maximize the browser window or open 'firebug', the scrollbar suddenly appears.

Could this issue be due to dynamically generated CSS styles? I am new to jQuery and could use some assistance with CSS.

javascriptjqueryhtmlcssajax

Answer №1

If you are experiencing scrollbars from the mCustomScrollbar plugin, it is essential to utilize its update method after adding ajax content to the DOM.

$(selector).mCustomScrollbar("update");

For further information, refer to the documentation available at

Answer №2

Dealing with a similar issue, I found a solution by utilizing the destroy method within the mCustomScrollbar framework.

Whenever new content is added to the selector, I simply destroy the existing mCustomScrollbar.

$(selector).mCustomScrollbar("destroy");

Afterwards, I proceed to rebuild it; you can see the destroy and rebuild process in action by visiting this demo

Interestingly, the update method failed for me due to the default setting of updateOnContentResize being true, triggering the update method automatically. It's a bit baffling what exactly went wrong.

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

Having difficulty making changes to specific category fields in Magento 1.6

I've encountered an issue when trying to save specific fields in certain categories while editing them in Magento 1.6. The problem arises when attempting to edit the following fields within these categories: america/mini packages - description ameri ...

phpjavascriptmagentoe-commerce

In Internet Explorer, it appears that JQuery's .html() function is storing data in the cache unnecessarily

Encountering a minor issue with my MVC program while using Internet Explorer: A jQuery function is set up to communicate with a controller and retrieve a partial view, which is then loaded into a designated <div> element. function editSkills(projec ...

c#jqueryinternet-explorercachingpartial-views

What is the process for updating the source in an input box?

How can I use JavaScript to update the src value of an iframe based on input? <input class="url" id="url1" type="url" value="youtube url"> <input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to play ...

javascripthtmlcss

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping. I tried solving it with margins and paddings but believe there must be a simpl ...

javascripthtmljquerycssanchor

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular

Problem with Cakephp 2.2: Using Jquery Ajax with Js->link to save multiple entry ids on a single page

Is it possible that this question has already been addressed elsewhere? Despite my efforts, I have not been able to locate the answer. Cakephp is usually a reliable platform for me, but currently, it's causing me a lot of frustration. I am attempting ...

jquerycakephp-2.0

Start a Draft.js Editor that includes an unordered list feature

I am trying to pre-populate a draft.js editor with an unordered list made from an array of strings. Here is the code I have so far: const content = ContentState.createFromText(input.join('*'), '*') const editorState = EditorState.crea ...

javascriptreactjsdraftjs

What causes an exception to be thrown even after being caught in an async function?

Even if an exception is caught, the remaining code will still run. function problematic(){ //throw new Error('I am an exception') return Promise.reject("I am an exception") } ( async function (){ let msg = await problem ...

javascriptnode.jserror-handlingasync-await

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

Creating geometric designs on an image and storing them using PHP

I am attempting to retrieve an image from a specific location on my server, draw lines on it, and then save the modified image back to the same location. Below is the code I am using: function drawShapes($src_path, $json) { echo "---inside dra ...

phphtml

Revamp the style of the date field in a Material UI dialog

I'm currently working on a React project where I am using Material-UI's date picker component to display date items. However, I find that the default style does not meet my requirements. I would like to use a selector for displaying dates in the ...

javascriptreactjsdatepickermaterial-ui

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

When the specified width is reached, jQuery will reveal hidden circular text upon page load instead of keeping it hidden

My current issue involves utilizing jQuery to hide circular text when the window width is below 760px. Although the functionality works as intended, there is a minor problem when the page loads under 760px width - the text briefly shows up before hiding ag ...

javascripthtmljquerycss

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

javascripthtmlcss

Infinite loop triggered by jQuery dropdown menu on page resize was causing an issue

I have been working on developing a navigation menu for a website that displays as a horizontal bar on larger screens, but transforms into a jQuery dropdown menu when the window width is less than 980px. During initial page load with a window width below ...

javascriptjqueryloopsdrop-down-menunavigation

Secure HyperText Transfer Protocol prevents JavaScript from executing

My website's HTTPS version is having trouble loading JavaScript. All scripts are hosted on the same server. I've attempted: <script type="text/javascript" src="https://server.tld/js/jquery.js"> <script type="text/javascript" src="//ser ...

javascripthttpsapache2webserverblock

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

Woocommerce - On the Cart page, I would like the ability to transfer the total price when the quantities in the cart are updated

Hey there! I'm slowly navigating my way through this, so please bear with me. Let me explain what I'm working on here. I'm using Woocommerce with a theme called Flatsome, but the issue I'm facing seems to be related to how Woocommerce ...

phpajaxwordpresswoocommercecart

Validation check for zip codes that flags errors specifically for certain states

I am working on designing a form that triggers an error message when users enter a specific zip code or range of zip codes. For instance: If someone fills out a form and types in a zip code from Washington state, I would like an error message to appear i ...

javascriptjqueryvalidationzipcoderequired