Hide User Snap Button - javascript

I have a button:
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src ="my user snap api key";
const firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);
script.id = "userSnap";
I want to hide it when a certain event is called:
I have tried this but it doesnt disappear
document.getElementById('userSnap').remove()
the button is still there...
There is no css for it in it or anything so i cant adjust a css file it is just dont through user snap

The UserSnap script adds a button to the DOM. You can't hide the effects a script has had on the DOM by removing the script after it has run, instead you need to manipulate the DOM to hide or remove the button itself.
Use your browser's developer tools to figure out if the button has some kind of unique identifying attribute like an ID or class name, and use that to select and remove the button.

Please try this
<div id="userSnap">
just testing
</div>
remove
<script>
function remove_(){
document.getElementById('userSnap').remove();
}
</script>
Fiddle

Related

How to make Chrome fire the load/onload event on a script tag without jQuery

Problem: Chrome not firing load/onload on script elements.
The issue has been mentioned previously in,
Chrome not properly observing onload event on script tags?
Trying to fire the onload event on script tag
It looks like a proper answer hasn't been given about how to make it happen without jQuery.
Im using somting like this in script and it works ok.
const url = `https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js`
const script = document.createElement('script');
script.async = true;
script.onload = () => console.log("script loaded")
script.src = url;
document.head.appendChild(script)

How to display external <script> using div in Reactjs?

I am trying to learn how to display small widgets (for example plane tickets brower) onto my website built in Reactjs. The code that's supposed to work instantly according to the provider is as below ("just copy and paste into website"):
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
<script src="https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget" async></script>
I tried to Google for answers and my idea atm looks like this:
function OfferBrowser() {
const script = document.createElement("script");
script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
script.async = true;
return(
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
)
}
The other this I tried was also to put {script} into the tag like this, but it doesn't work as well.
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-">{script}</div>
How should I approach this?
While I don't know React, I believe I have found the problem with the second chunk of code. You have created a script element, but have not added it to the DOM, and therefore it's not loading the script.
After looking around for a bot, I believe I've found a fix.
const script = document.createElement("script");
script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
script.async = true;
// append the script tag to the body
document.body.appendChild(script);
I think this needs to run after the component is mounted, so that the div is in the DOM.

How to change Accuweather widget location in HTML

I'm trying to load an Accuweather widget which can change in location using a dropdown list. It works when there's no loaded location at first. But when i try to change the location, it doesn't work anymore. My guess is I should recall the Accuweather script or function (but I don't know how). Here's the link of the image of what I've done.
And here's a part of my JS code:
$('#awcc1414464209059').attr('data-locationkey',selected); //change the div's data-location-key to the selected location's key
$('#awcc1414464209059').attr('class',"aw-widget-current");
$('#awcc1414464209059').attr('data-unit', "c");
$('#awcc1414464209059').attr('data-language',"en-us");
$('#awcc1414464209059').attr('data-useip', "false");
$('#awcc1414464209059').attr('data-uid',"awcc1414464209059");
getweather();
function getweather(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "assets/js/accuweather.js";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
PS: It would be better if I can load multiple widgets at once, so that I can display all the locations for users' convenience. (I tried it already but I can't make it work)
I have made it work out. For those who need help with the same problem, you need to reload the script file for accuweather.
for ($m=0; $m < sizeof($mun_name); $m++) {
$echo .= '
<div id="awcc1414464'.$weather_id[$m].'" data-locationkey="'.$weather_id[$m].'" class="aw-widget-current" data-unit="c" data-language="en-us" data-useip="false" data-uid="awcc1414464'.$weather_id[$m].'"></div>
<script>getweather()</script>';
}
In my code, the getweather() function loads the script and adds it to the html head, thus giving me the result in this link.

Javascript onclick event call to a webservice

Is it possible to call the below script on button click?
<script type="text/javascript" src="https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&e=false"> </script>
I want to use a custom button.
It depends on the logic in script but basically yes you can. See example code below. Then you have to add click event to your button with this function.
function addscript() {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script);
}
It appears you are using the Paga Service api. If you plan on submitting with your custom button, then after the script is loaded, you need to trigger $('#__paga_btn').click() which is can be found from Using the chrome dev tools to inspect element and get the id of the link. #__paga_btn, NB, the script is required to be loaded after the form element. Something like this would suffice for your case
function addscript() {
var head = document.getElementsByClassName("pagalink")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxxxxxxxxxxxxxx&e=false&layout=V";
head.appendChild(script); //Figure out a way to detect when script has loaded.
$('#__paga_btn').click(); // needs to be called after the script as loaded to submit the form.
}
the pagalink node need to be placed below the form element on the page. Since that is where you would actually put the script. The script isn't really customizable since it modifies the dom on load.

How to dynamically insert jquery code

I am trying use jQuery's rich animation features on dynamically loaded content.
I can dynamically insert script into an element like so:
var element = document.createElement("div");
element.innerHTML = "some html here";
var script = document.createElement("script");
script.type = "text/javascript";
script.text = 'alert("Alert!");';
element.appendChild (script);
The problem occurs when I try to insert jquery code into the script element. This does not work and causes the script to not run at all.
var element = document.createElement("div");
element.innerHTML = "some html here";
var script = document.createElement("script");
script.type = "text/javascript";
script.text = 'alert("Alert!");\n';
script.text = script.text+'$("div").animate({height:300,opacity:0.4},"slow");\n';
element.appendChild (script);
I can successfully append javascript code to change the elements I want, but using jquery functions will simplify things.
With firebug I can see the script elements has been loaded into the dom, however when I add the jquery code to it, nothing happens, not even the alert.
I have included the jquery source file in my main document and wrapped all of my code into a window.addEventListener('load', function()) to call the functions that initiates the code above when the page finishes loading.
Is there a way to dynamically create calls to jquery functions? Am I going about this the right way? I've been stumped for a while and google hasnt solved this one for me, any help is appreciated.
This should do what you want:
$('body').append('<s' + 'cript>console.log("lol");</script>');
But why are you not wrapping your code into a function which you can then call whenever you please?
function iAnimateThings() {
$("div").animate({height:300,opacity:0.4},"slow");
}
hey nothing wrong with your code you just missed one single inverted comma on this line
script.text = script.text+'$("div").animate({height:300,opacity:0.4},"slow")';
here is your working fiddle
http://jsfiddle.net/vYut9/

Categories

Resources