CODEWITHSUNDEEP
javascriptjqueryhtml
Simon Hume
Simon Hume

Reputation: 1012

Updating a DIV with HTML using jQuery on click

Annoying issue I've got here with a site, which I need to fix!

Basically, I've got a series of ingredients which can be dragged onto a mixing bowl, they then appear on the blackboard, the ingredient fades out and the URL is updated.

That all works great!

The problem i've got, is that we offer another way of the user to add ingredients to their mixing bowl, by simply clicking an "add to bowl" button.

You can see it in action here.

This method will update the "ingredients" array ok, but it won't update the blackboard, update the URL or fade away the jar on the shelf.

To see this working, just click a jar on the shelf and you'll see what I mean!

So, in the code, the snippet in question is this:

$(".ingredients_add").click(function () {

     // hide the ingredient box
     //$("#ingredients_box").toggleClass("hidden");
     $("#ingredients_box").toggleClass("visible");

     if( ingredients.length <= 4 ){

        // get the topping name
         var htmlString = $("#ingredients_box > .ingredients_name_label").text();
         $('.choc2_flavour').text(htmlString);

         //Add item to the array
         ingredients.push( htmlString );

         // test alert to check array is populating
         //alert(ingredients);

         // fade out jar --------- we need this to fade out the ingredient jar that has been added. Out of scope??
         ui.draggable.fadeOut(500);

         //Output the ingredients array -------- this isn't firing and updating the blackboard
         drawIngredients();

     } else {
         //Maybe show an alert here? The ingredient will revert automagically...

        alert("You've already added the maximum number of ingredients!");

        //ui.draggable({ revert: 'invalid' });
     }
 });

It doesn't seem to want to fire the drawIngredients function. Which looks like this:

//Function to redraw the ingredients list
function drawIngredients(){
    //alert("I'm going to draw me a list!");//#DEBUG

    //alert(ingredients);//#DEBUG

    //Clear down the ingredients div and querystring
    $('#ingredient_list').html('');
    ingString = "";

    //Get the URL
    var _href = $("a.to_step_4").attr("href");

    //Split the URL
    var _hrefs = _href.split("&");

    //alert(_href);//#DEBUG
    //alert(_hrefs);//#DEBUG

    //Add each ingredient into the div
    ingredients.forEach( drawIngredient );

    //Set the flavour part of the querystring;
    _hrefs[2] = "flavour="+ingString;

    //alert(_hrefs[2]);//#DEBUG

    var _href = _hrefs[0]+"&"+_hrefs[1]+"&"+_hrefs[2];

    $("a.to_step_4").attr("href", _href);
 }

 function drawIngredient( elem, index ){
    $('#ingredient_list').append('<p class="choc_ingredient '+index+'">'+elem+'</p>');
    ingString += elem+"|";
 }

Neither does it fade away the jar (maybe due to it being out of scope?).

Can anyone help?

Simon

Upvotes: 0

Views: 50

Answers (1)

Chris Macksey
Chris Macksey

Reputation: 261

The variable ui is a parameter in the drop handler, so it is out of scope at the point where you are calling it. That is preventing the drawIngredients() function from being called.

If you need to fade out the jar, you're going to need to use some other mechanism of getting the current selected jar - storing it for later use by the dialog.

Perhaps the best way is to store a data-ingredient attribute on the jar, e.g.:

<li class="drag_me_ingredients ui-draggable" 
    style="position: relative;" data-ingredient="blueberries">...</li>

And then later use:

 $('li[data-ingredient="' + ingredient + '"]').fadeOut(500);
 drawIngredients();

That way, you can look at the data-ingredient on the parent <li> when you invoke the dialog and save it for later use by the ingredient add routine.

Upvotes: 1

Related Questions