l am making an jax call and the data is coming back fine inserted into the specific div correctly.

However my css is broken after the AJAX call. the h1 are too big some menu items disppear.

See code below

 jQuery('#section').change(function()
    {
        jQuery('#loading')
        .bind('ajaxStart', function() {
            jQuery(this).show();
        })
        .bind('ajaxComplete', function() {
            jQuery(this).hide();
        //    jQuery('#section').remove();
        });
        var url = 'index2.php?option=com_custom&task=getOptions';
        var section = jQuery(this).val();
        url = url+'&section='+section;
        jQuery.ajax({
            timeout: 60000, // Timeout of 60 seconds
            type:'GET',
            url:url,
            dataType:'html',
            success:function(html,textStatus)
            {
                jQuery('#price').html(html);

            },
            error:function(xhr,textStatus,errorThrown)
            {
                alert('An error occured! ' + (errorThrown ? errorThrown :xhr.status));
            }
        });
    });

This often happens due to the styles of the your container (div) does not suit the amount of the returned data from the request , to solve that , you need to develop
a strategy for the styles of the container , for example you need to set some padding inside it and set font size for the returned data especially of you have heading elements h1-h6 or any block level element such as images and so , its also good practice to set the overflow to hidden if you wanna show specific data or you can set it to scroll if you wanna show all data and so on , try to experience that yourself , and if you have any questions , please ask

also remember that as web designer or developer you have to build accessible content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.