Popup Not Working in Javascript - javascript

When the popup link is between the <script> tags it does not work.
if(data.userdata["money_back"] == 1){
chat_list += '<a data-popup-open="popup-90">Download</a>';
}
I am pushing the
When it is between the <body> tags it works fine
<body><a data-popup-open="popup-90">Download</a></body>
Does "data-popup-open" not work between <script> tags?
Here is a JSFiddle of basically what I'm trying to do:
http://www.jsfiddle.net/tkkpf9dp

Something like that?
var popup = '<a data-popup-open="popup-90">Download</a>';
document.body.innerHTML += popup;

I think the problem is with the event handling. The event that should open open the pop up window may not be triggering. This is because you are creating a dynamic DOM element. The event handling of dynamic elements works in a different way. If you are using jQuery you can need to use something like this
Just add a class 'popup' to the 'a' tag like this
<a class="popup" data-popup-open="popup-90">Download</a>
and in JavaScript
$('body').on('click','.popup',function() {
var popup = $(this).data('popup-open');
console.log(popup); // For this example you will get the output 'popup-90' in the console
// You can write the code to open the pop up here
});

Related

hooking up button in JS without using the onclick event

<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer
You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.

Trigger onload, inline javascript event

I've a pop-up that can be called trough a link. The problem is that i need to call it onload, an I can't find a way to do this.
This is the code of the pop-up
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
target="_blank">Click Here to Subscribe</a>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js">
</script>
I've tried to trigger the "Click Here to Subcribe" in different ways, like the following, without success:
Jquery how to trigger click event on href element
jQuery(document).ready(function(){
jQuery("#add_redirect").trigger('click');
});
Window.location.href (this open the link but in another page, not as a pop-up)
UPDATE N.1
I've bypassed the problem loading the pop-up URL through the <object> tag.
I've put the <object> inside a Bootstrap modal so it still works like some kind of pop-up.
<html>
<head>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js"></script>
<script>
var displayPopup = function(){
var element = document.getElementById('popUp');
element.click();
}
</script>
</head>
<body onload="displayPopup();">
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/" id="popUp"
target="_blank">Click Here to Subscribe</a>
</body>
</html>
I am using plan JS. When body JS object is completely formed or in other words when body's content is completely loaded then onLoad event is fired . I wired a displayPopup function to this event.
In displayPopup function i retrieve the anchor tag and manually click it .
Use this following code
jQuery=jQuery.noConflict();
jQuery(document).ready(function(e){
e.preventDefault();
jQuery("#add_redirect").click();
});
The solution by #Prashanth Reddy should work if you have jQuery loaded on your page.
For a simple implementation using plain javascript, you'll need to change the target attribute on your tag to '_self' from '_blank'. This will open the popup in your existing page instead of a new page.
then add the following at the end of the body section of your html:
<script>
(function() {
document.getElementById('add_redirect').click();
})();
</script>
see here for a working example: jsfiddle
If you want to avoid inline script tags, you'll need to add an event listener to your javascript code. Here is a good starting point for how to do that:
plain js equivalent to jquery $.ready

onclick function on a button in an embedded html in js file not working

I have a string which has embedded html in it which is in js file. I have an onclick funtion on a button which calls a js function. but the control is not going inside the function.
info += "<html><body bgcolor='#f1f7fe'><b>" +
"<input type=\"button\" onClick=\"sendVehicleId()\">button text</input></a></b><hr>" +
"</body></html>";
function sendVehicleId()
alert("hello");
}
I dont know whats wrong in this
If you are using jQuery, then try the .on('click', function(){}) method & call the function here rather than directly adding it in the element declaration. Dynamically added elements are sometimes missed/ignored in DOM. Hope this helps.
Your Html is not in proper format,
here is sample which works fine at my end.
var info = "<html><body bgcolor='#f1f7fe'><b><input id=\"btnOnclick\" type=\"button\" onClick=\"sendVehicleId()\">button text</input></a></b><hr></body></html>";
function sendVehicleId(){
alert("hello")
}
I think you have some issues in you code.
1 : You html code may have some issues. (Missing <a> tag)
2 : Where do you "inject" this html ? Could you show the web page where you have your html ?
Go to your page, then "inspect element" and see if your button has a onClick tag.

Show url with jQuery

i have a script, after finishing something, a button with an link will appear, before the button is not clickable. but i have a problem.
this is the code:
FB.ui(e, function(t) {
if (t["post_id"]) {
//your download content goes here
// Do something there
var secret_data = "<a href=\"http://TEST.com\">";
jQuery("#results").html(secret_data);
}
})
<div id="results"><img src="img/button.png"></a>
I thought that after finishing this action that the code would look like this:
<img src="img/button.png">
But it isn't..
So does someone have the answer ?
If you are trying to wrap an <a> around an existing image use wrap()
$('#results img').wrap('');
Using html() replaces everything in the target element with the new content
Your html for button should be a div with button image(not clickable) like
<div id="results"><img src="img/button.png"></a>
And Javascript code to add the active button should be like
var secret_data = '<img src="img/button.png">';
jQuery("#results").html(secret_data);
This should do the trick.

JavaScript: changing the value of onclick with or without jQuery

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:
Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().
Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js = "alert('B'); return false;";
// Set with JQuery: doesn't work
$("a").attr("onclick", js);
// Set with setAttribute(): at least works with Firefox
//document.getElementById("anchor").setAttribute("onclick", js);
});
</script>
</head>
<body>
Click
</body>
</html>
You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .click()
$(document).ready(function(){
var js = "alert('B:' + this.id); return false;";
// create a function from the "js" string
var newclick = new Function(js);
// clears onclick then sets click using jQuery
$("#anchor").attr('onclick', '').click(newclick);
});
That should cancel the onClick function - and keep your "javascript from a string" as well.
The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.
You also said:
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().
No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors
BTW, without JQuery this could also be done, but obviously it's pretty ugly as it only considers IE/non-IE:
if(isie)
tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
$(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index
Anyway, just so that people have an overall idea of what can be done, as I'm sure many have stumbled upon this annoyance.
One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.
So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.
The click event in JQuery is the click function $("myelt").click (function ....).
just use jQuery bind method !jquery-selector!.bind('event', !fn!);
See here for more about events in jQuery
If you don't want to actually navigate to a new page you can also have your anchor somewhere on the page like this.
<a id="the_anchor" href="">
And then to assign your string of JavaScript to the the onclick of the anchor, put this somewhere else (i.e. the header, later in the body, whatever):
<script>
var js = "alert('I am your string of JavaScript');"; // js is your string of script
document.getElementById('the_anchor').href = 'javascript:' + js;
</script>
If you have all of this info on the server before sending out the page, then you could also simply place the JavaScript directly in the href attribute of the anchor like so:
Click me
Note that following gnarf's idea you can also do:
var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;
That will set the onclick without triggering the event (had the same problem here and it took me some time to find out).
Came up with a quick and dirty fix to this. Just used <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>
Hope this helps

Categories

Resources