-1

I have successfully updated the href value, but when clicked on the original link is active. But looking at the source, after the href is updated the value gets updated, but not when clicked on.

The temporary data I used was test, just so I can see if it effectively changed.

This is the code I have used:

<a id="productIMGLarge6128" href="http://www.mysite.com/originalLarge.jpg" title="MyLargeImage" class="floatbox">
<span class="zoomIcon""><img src="styling/zoom.png" alt="zoom" /></span>
<img id="productIMGSmall6128" src="http://www.mysite.com/originalSmall.jpg" alt="MySmallImage" />
</a>

The script

<script>
    $(document).ready(function() {
        $("#button").click(function(){
            $("#button").spin("small", "#FFF");

            $.ajax({
                type: "POST",
                url: "_/process/roofbox.php",
                data: { color: "B", product: "6128"  },
                dataType: "json",
                success: function(data){
                    $("#productIMGSmall6128").attr("src",data.productIMGSmall);
                    $("#productIMGLarge6128").attr("href","test");
                    $("#price6128").html(data.price);
                    console.log(data);
                    $("#button").spin(false);
                }
            });
            return false;
        });
    });
</script>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
SmileyWar
  • 25
  • 1
  • 9
  • Sorry, you're going to have to explain this a little better cause I don't understand what you mean :( – Luke Nov 12 '12 at 16:24
  • 1
    Are you definitely waiting till the ajax call has a response before clicking the link? – Reinstate Monica Cellio Nov 12 '12 at 16:27
  • Aside from excessive id usage, code looks good. How are you testing the link's alteration? If you're viewing source, it's going to fail. Using a tool like Firebug in Firefox to view live DOM changes. – tgormtx Nov 12 '12 at 16:30
  • 1
    Not related to your question, but you might consider refactoring your javascript to not include any php... Mixing syntax as you have in your example just further adds to the confusion. – Matthew Blancarte Nov 12 '12 at 16:30
  • @Coulton the a href link needs to be changed after the jquery click function has been activated with the returned value from roofbox.php which is ID productIMGLarge'.$productID.' Now it works only that it seems when you click on the link which enlarges the image, loads up the original link and not the updated one from the ajax form. – SmileyWar Nov 12 '12 at 16:31
  • @Archer So the link already has a link before the ajax call which works, after the call it updates but when clicked on it loads the original and not the updated one. – SmileyWar Nov 12 '12 at 16:31
  • @MatthewBlancarte very true i will update this script so it dosent add confusion thanks. – SmileyWar Nov 12 '12 at 16:31
  • Are you seeing the Item's Title and Small SRC change? – tgormtx Nov 12 '12 at 16:33
  • @tgormtx everything changes visually, the thumbnail updates to the the new image, it's only the a href link that when clicked on will not use the link that i have provided. – SmileyWar Nov 12 '12 at 16:39
  • Sounds like a dumb question, but you are replacing the href with a valid URL, correct? – tgormtx Nov 12 '12 at 16:42
  • @tgormtx Using chrome inspect element, i can see the thumbnail and link has changed visually, but when clicking on the link it will open the old link zoomDynamic 800 Gloss Titanium – SmileyWar Nov 12 '12 at 16:52
  • What version of JQuery are you using, as of 1.6 you should be using the .prop() function to change the href like $("a").prop("href", "http://www.google.com"); http://stackoverflow.com/questions/5874652/prop-vs-attr –  Nov 12 '12 at 17:11
  • Hiya, that dosn't seem to work ether, when i hover over the image i can see that the url has been updated but when clicked on its not showing the new one, but it shows the old one. Ill see if it has something to do with floatbox cashing the url when its presented, and how to update it when my click form is active. – SmileyWar Nov 12 '12 at 17:22
  • Btw i have read that as of 1.6.1 they reverted back to attr of href update rather then prop – SmileyWar Nov 12 '12 at 19:57

1 Answers1

0

Apparently Floatbox inventories all enabled anchors, So you need to activate the fb.ajax() function to update any new content.

So this was my problem, and thanks to the floatbox admin for solving my problem.

http://floatboxjs.com/instructions#dynamic

SmileyWar
  • 25
  • 1
  • 9