List items are loaded dynamically in an unordered fashion

Question

List items are loaded dynamically in an unordered fashion

I have been working on a jquery slider using flickerplate. Below is the code that works when the values are hardcoded:

<div class="flicker-example">

    <ul>
            <li data-background="lib/flicker-1.jpg">
            <div class="flick-title">Promo 1</div>
            <div class="flick-sub-text">25$ OFF FLAT !! Limited Offer!</div>
        </li>

        <li data-background="lib/flicker-2.jpg">
            <div class="flick-title">Promo 2</div>
            <div class="flick-sub-text">Bumper Sale !! Buy 1 Get 1 Free !!</div>
        </li>           
    </ul>
</div>

My goal is to load the content using a JSON array. Here is the code I have written:

<div class="flicker-example">
    <ul>
       <script type='text/javascript'>
        $(document).ready(function(){
                $.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
                        $.each(data, function(key, val) {
                            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        });
                });

        });
        </script>
    </ul>
</div>

I am having trouble making the dynamically loaded content work like the hardcoded one. Any help would be greatly appreciated. Thank you!

javascript jquery html css json

Answer 1

Answer №1

It seems like the plugin initialization occurs when the DOM is loaded. It's possible that you have code that resembles this:

$(document).ready(function() {
    $('.flicker-example').flickerplate();
});

This code works well when the content is static HTML because it is present when the code runs. However, in your case, you are loading JSON data asynchronously, so the sequence of events is as follows:

DOM ready
Flickerplate initialized
JSON AJAX request sent
JSON response received
HTML generated

You actually want step 2 to occur last, after step 5, so you need to modify the callback function for your $.getJSON call:

$(document).ready(function(){
    $.getJSON('http://example.com/data.json', function(data) {
        $.each(data, function(key, val) {
            $(".flicker-example ul").append('<li data-background="'+ val.image + '"><div class="flick-title">' + val.brand + '</div><div class="flick-sub-text">' + val.variant + '</div></li>');
        });
        $('.flicker-example').flickerplate(); // initiate the plugin after the HTML elements are in place
    });
});

Answer 2

It seems like the plugin initialization occurs when the DOM is loaded. It's possible that you have code that resembles this:

$(document).ready(function() {
    $('.flicker-example').flickerplate();
});

This code works well when the content is static HTML because it is present when the code runs. However, in your case, you are loading JSON data asynchronously, so the sequence of events is as follows:

DOM ready
Flickerplate initialized
JSON AJAX request sent
JSON response received
HTML generated

You actually want step 2 to occur last, after step 5, so you need to modify the callback function for your $.getJSON call:

$(document).ready(function(){
    $.getJSON('http://example.com/data.json', function(data) {
        $.each(data, function(key, val) {
            $(".flicker-example ul").append('<li data-background="'+ val.image + '"><div class="flick-title">' + val.brand + '</div><div class="flick-sub-text">' + val.variant + '</div></li>');
        });
        $('.flicker-example').flickerplate(); // initiate the plugin after the HTML elements are in place
    });
});

Answer 3

Answer №2

Experiment with this: Implement CORS (Cross-Origin Request) on your server. Here's an example for Apache in your .htaccess file:

Header set Access-Control-Allow-Origin "*"

Alternatively, you can use this code snippet in PHP:

 header("Access-Control-Allow-Origin: *");

Answer 4

Experiment with this: Implement CORS (Cross-Origin Request) on your server. Here's an example for Apache in your .htaccess file:

Header set Access-Control-Allow-Origin "*"

Alternatively, you can use this code snippet in PHP:

 header("Access-Control-Allow-Origin: *");

Answer 5

Answer №3

<?php

$checkLogin = file_get_contents("http://testdb2.weby.biz/deallist.php");

// Removing unwanted characters
for ($i = 0; $i <= 31; ++$i) { 
    $checkLogin = str_replace(chr($i), "", $checkLogin); 
}
$checkLogin = str_replace(chr(127), "", $checkLogin);

// Handling the beginning of the file
if (0 === strpos(bin2hex($checkLogin), 'efbbbf')) {
   $checkLogin = substr($checkLogin, 3);
}

//$checkLogin = json_decode( $checkLogin );
//print_r($checkLogin);

?>




<div class="flicker-example">
    <ul>
       <script type='text/javascript'>
        $(document).ready(function(){
                    /* calling the php file that contains the json_encoded php array */
                //$.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
            //alert(JSON.stringify(data));
                        /* data will contain the php array as a javascript object */
        $.each(<?php echo $checkLogin; ?>, function(key, val) {
                            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        });
                //});

        });
        </script>
    </ul>
</div>

More information available at: json_decode returns JSON_ERROR_SYNTAX but online formatter says the JSON is OK

Answer 6

<?php

$checkLogin = file_get_contents("http://testdb2.weby.biz/deallist.php");

// Removing unwanted characters
for ($i = 0; $i <= 31; ++$i) { 
    $checkLogin = str_replace(chr($i), "", $checkLogin); 
}
$checkLogin = str_replace(chr(127), "", $checkLogin);

// Handling the beginning of the file
if (0 === strpos(bin2hex($checkLogin), 'efbbbf')) {
   $checkLogin = substr($checkLogin, 3);
}

//$checkLogin = json_decode( $checkLogin );
//print_r($checkLogin);

?>




<div class="flicker-example">
    <ul>
       <script type='text/javascript'>
        $(document).ready(function(){
                    /* calling the php file that contains the json_encoded php array */
                //$.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
            //alert(JSON.stringify(data));
                        /* data will contain the php array as a javascript object */
        $.each(<?php echo $checkLogin; ?>, function(key, val) {
                            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        });
                //});

        });
        </script>
    </ul>
</div>

More information available at: json_decode returns JSON_ERROR_SYNTAX but online formatter says the JSON is OK

Answer 7

Answer №4

If the data in your array is formatted correctly like this:

arr[0]
Object {title: "Special Deal 1", text: "50% OFF Today Only!"}
arr[1]
Object {title: "Special Deal 2", text: "2 for the Price of 1!"}

Then take a look at this demo:

http://jsfiddle.net/m6o3nyt8/1/

Answer 8

If the data in your array is formatted correctly like this:

arr[0]
Object {title: "Special Deal 1", text: "50% OFF Today Only!"}
arr[1]
Object {title: "Special Deal 2", text: "2 for the Price of 1!"}

Then take a look at this demo:

http://jsfiddle.net/m6o3nyt8/1/

List items are loaded dynamically in an unordered fashion

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Restrict the height of posts created in the summernote editor

Using JavaFX to create a TreeTableView with nodes of varying sizes

Transform JSON data into a dropdown menu using select and option elements

Utilizing jQuery to Adjust Tab Transparency

Is it possible to adjust the color of this AnchorLink as I scroll down?

What is the process for generating a null result cursor upon publication?

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

Click the button to dynamically add a Bootstrap select element

Laravel and Vue: Retrieve complex data with multiple relationships

Using VB.NET with Selenium to locate and interact with dropdown elements

Optimizing web content for iOS Safari with min-height media queries

When working with Node.JS, is it necessary to include 'event' if you include 'net' using the require statement?

How can I pass an object into EJS templates from views in Express 3.x?

"Having trouble with jQuery datepicker in Ruby on Rails? It seems to only function properly after

There are no functions or classes returned when using NPM Link with the module

Guide to transforming a random hash into a visually appealing HTML table

Angular JS failing to display error messages

Minimize the gaps between items within a CSS grid design

What is the procedure for transforming a JSON response into an array?

Having trouble with ion-item click not functioning in Ionic 3?