1

Background: I'm running A/B tests for a website via VWO. I can write a script that is run when the page loads, but I cannot access any of the website's preexisting scripts or alter their code in any way besides "overwriting" in JS (e.g. remove divs, change CSS properties, append divs) after their page loads.

Problem: When the page loads, there is an empty <div id="priceinfo"></div>. Elsewhere on the page, there is an <a href="javascript:RequestPriceInfo()" id="requestPrice"><img ...></a>. Inside RequestPriceInfo(), the function outputs HTML to div#priceinfo based on certain form field values on the page. It also appends an "order" button (which is actually not a button at all, but an image nested in anchor tags). I'm trying to change the source for the "button" image using JQuery's attr() function.

Progress: None. I have tried using $('a#requestPrice').click(function() {...} ); but it is not working to change the source of the image, I presume because the content has not yet loaded onto the page immediately when a#requestPrice is clicked and my function runs. I need a way to tell when RequestPriceInfo() has been fired and completed, but there is no callback parameter on RequestPriceInfo() and I don't have access to the script to alter it and add one.

Potentially Useful Info: There is a variable, priceRequested, which is changed from false to true when RequestPriceInfo() runs. Though I realize nothing about this solution is going to be elegant, it seems unreasonable to use Object.prototype.watch() to monitor the variable, but I'm running out of ideas.

How can I detect when RequestPriceInfo() has completed to execute my function without editing the function to add a callback parameter?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Kaitlyn Brown
  • 128
  • 5

2 Answers2

1

Here's one way

var oldRequestPrice = RequestPriceInfo;
RequestPriceInfo = function(){
  oldRequestPrice();
  // Function completed, handle here
}

EDIT

As the question seems to imply that RequestPriceInfo is an asynchronous API call, have a look at this question: Add a "hook" to all AJAX requests on a page

This will keep track of all Ajax requests happening on the page. You can pick out the one you need and fire your function/code on its success.

Community
  • 1
  • 1
sg.cc
  • 1,726
  • 19
  • 41
  • still assumes it is synchronous .. name of function almost implies a `request` – charlietfl Feb 16 '16 at 20:37
  • I suppose if it's async, OP can change the function accordingly (by adding `.then` or by passing in a callback into `oldRequestPrice`) – sg.cc Feb 16 '16 at 20:40
1

What about using CSS... your script could add a class to <div id="priceinfo"></div>, like maybe <div id="priceinfo" class="newButton"></div>. Then, in the CSS, you'd hide the img for #priceInfo.newButton and insert your new image as a background image for the anchor.

andi
  • 6,442
  • 1
  • 18
  • 43