So I'm having issues with my onclick function that I wasn't having before. When I originally implemented it on the page, it was working perfectly. Then, once I changed the location of the JS file to a subfolder in the directory, (and changed the location in my HTML) the onclick link I made stopped calling the JS function.
function namePrompt() {
var x=prompt("Enter your first and last name:");
if (x) {
window.location.href = "http://database.gchandel.com/app_edit.php?name="+x;
}
}
Above is the JS code I'm using, and below is the line that calls the function.
<a onclick="namePrompt()">click this link to view your entry.</a>
I've tried everything from moving the file back to its original location, to refreshing the page many times, to changing things like function name and file name and none of this has given me any luck.
Also, here's the link to the site I'm working on: database.gchandel.com
The problem is in your prompt syntax, check it here
Syntax of prompt is
prompt("", "");
While working one is here
Related
I have a simple wordpress navbar where I wanted to include a tel: link to automatically call the company's website.
Due to milions of issues with storing a <a> link inside the navbar I've opted for a <button> and added JS code to perform the redirecting.
document.querySelector('.btn--call').addEventListener('click', function () {
window.open('tel:' + this.innerText, '_self'); //same effect for using `_system`)
});
The problem is when I click the button I get redirected to the phone page but the number I'm calling is blank.
The variable retrieved is proper because console logging this.innerText prints the expected value.
The issue is also not with the website because I have a <a href="tel:...> in some other spot and it works like a charm.
I've tried to use window.location.href='tel:' + this.innerText; but the effect was the same.
Is there any way I could make the number properly parse without having to change it to <a>?
Any help would be greatly appreaciated.
Try this, it is accessing the element via target, instead of this on the event handler.
document.querySelector('.btn--call').addEventListener('click', function (e) {
location.href = 'tel:' + e.target.innerText;
});
I'm currently using window.location.href.indexOf in my current project. I've noticed that it doesn't seem to work properly. For example this code that I made.
$(document).ready(function () {
//Show Sign Up drawer if user clicks on referral link
//It will show the Sign Up drawer once the word "referral" is found in the URL
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
This code what it does is to add a class in an element if the word referral is found in the URL. The add class being inserted will then slide a sign up drawer. Here is what happened during testing.
In my first test, I tried inserting the word referral in the url. After typing in the word and pressing the Enter key, the javascript I'm trying to run did not trigger
But after refreshing the browser or inserting the word again it now works. It currently shows the sign up section.
How can I ensure that the code window.location.href.indexOf will work in the first try or without refreshing the browser again. The website is built on a angular framework
If you only change the URL after the # sign, the page won't reload, since you're only changing the anchor part of the URL.
Your code wrapped in $(document).ready(function () { ... will only run once, when the page loads.
What you want to do is to add a listener for the route change event and run your code in that handler, something like this:
$rootScope.$on("$routeChangeSuccess", function() {
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
It does not work because your script (e.g: main.js) is executed only one time when the page load.
You might want to use window.historyto manipulate the browser history. You can update the query string with pushState()
History API
Hope it helps.
To insert a link to specific files I want to add a button to the link-Dialog, which opens my own php-filebrowser.
In this filebrowser I can browse specific directories to finally select a pdf-file.
By clicking on a file I want to pass the url of this file to the link-dialogs url-field. And that is the point where I do not get ahead.
The url I alert when clicking the file is the one I need.
All I need is the javascript to pass it to the opener's url-field.
I have tried several proposed solutions I found in this forum but nothing helped.
In my filebrowser I have a list of files.
Each file has a link like this one:
*filename*
This is the javascript part I tried in my filebrowser:
<script>
function passvalue(url) {
alert (url);
opener.SetValue(url, 'url');
window.close();
}
</script>
The script alerts the correct value. But the next line doesn't pass the value back.
Instead of "opener.SetValue(url, 'url');" I also tried
window.opener.CKEDITOR.tools.callFunction(ckeditorfuncnum, url);
with the ckeditorfuncnum passed to the script and
opener.SetUrl(url);
UPDATE:
it seems as if the second try ('window.opener.CKEditor...') would be the right one. Since no value is displayed in my input field, I tried to return an error message...
The error message is being displayed in the window with the CKEditor-Fields.
For everyone who might run into the same problem here is the solution:
function passvalue(url) {
var dialog = window.opener.CKEDITOR.dialog.getCurrent();
dialog.setValueOf('info', 'url', url);
dialog.setValueOf('info', 'protocol', 'http://');
window.close();
}
I have a simple javascript program that runs onclick of an image.
However, whenever I clicked the image, the page reloaded.
After a lot of debugging I found that the page doesn't reload until right as the script completes.
There are several setTimeouts in the code, but I noticed the page was reloading instantly. I even changed these timeouts to 15000 milliseconds, but it still reloads immediately.
I am using jquery, if it makes any difference.
I also want a different result from the program every time you click it, so that each time you click it a different script runs and a some text changes in a specific order. I did this by changing the onclick attribute of the images in each script to the name of the next script, so that script one would switch onclick to script two, and so on. I set a timeout on these switches so that one click doesn't race through every single script. script two isn't running, so that much works.
my code:
function getSounds() {
console.log("script. initiated");
$("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
console.log("new message");
$("#soundwebGetSoundA").attr('href',"");
console.log("href eliminated");
setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000);
console.log("onclick to findFile()");
}
function findFile(){
console.log("FINDFILE")
$("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below. Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end. Once you have all that stuff typed, click the icon again.");
console.log("FIND IT, DARN IT!!");
$("#soundwebGetSoundPathInput").css("opacity",1);
console.log("diving into reader");
setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000);
}
function readFile(){
console.log("loading...");
$("#soundwebGetSoundDirections").html("loading...");
if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
}
}
and the HTML that's linked to,
<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
<img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
</a>
Thanks for any help,
Lucas N.
If you don't want clicking the image to cause the anchor tag to load the href, then move the image tag outside of the anchor tag.
You aren't using setTimeout correctly. You should be passing in a function not a statement. So, for example, instead of
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
you should use
setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);
I think the same goes for setting the onclick attribute but I've never tried dynamically changing an onclick attribute like that.
Since you're already using jQuery you could try using .on('click'... and .off('click'... if your current setup isn't working.
I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.