I have a div that looks like this:
<div id="scriptDiv">
<script src="URL" id="someId" my-token=""></script>
</div>
I can´t run the script tag within that scriptDiv until I have a token and that token is given when the user presses a button. I can´t render that token until I know that the user want to choose this choice.
So I have a button that renders some JS code when it´s pressed and adds the token to the div with this code:
$('#someId').attr('my-token', token);
So the issue is that the scriptDiv is called when the HTML page renders and I get an error. I only want the scriptDiv to be called when the user has pressed my button.
So is it possible to only call the scriptDiv when the button is pressed and not when the page is rendered?
If you don't want a script to be executed don't put it in the html or dom until you are ready
<div id="scriptDiv"></div>
Then in your button event create the script element, set it's src to the url, and then append it to the document
$("#button").click(function(){
var s = document.createElement("script");
s.src = "http://www.example.com/jsfile.js";
s.setAttribute("my-token","whatever your token is");
$("#scriptDiv").append(s);
});
You should set the token attribute of script tag inside the button click event as below.
$('#buttonId').click(function (){
$('#someId').attr('my-token', token);
});
I think you're going about this the wrong way. Look into doing a callback for when you want your code to run and bind that with an event to your button. You can control how that is done in JavaScript. For example, sorry I'm using jQuery here,
$('#myButton').on('click', function(){
//your code here
});
This way it will only run when your button is clicked.
You could put the js you want to run in a function e.g.
function scriptDiv(){
// Your js here
}
When you want the script to run (when the token is set) just use something that calls the function like:
<button onclick="scriptDiv()"></button>
You could also check every second if the token is set e.g.
setInterval(function(){if (tokenIsSet) {scriptDiv}},500);
Related
This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you
I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!
You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".
A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.
I have a rails app, if the user is not logged in, I am redirecting to a page, which has one br tag with a class. Like this
<br class="logged">
In the Javascript on ready of that function, I am triggering a modal as follows.
$(document).ready(function(){
$('.logged').ready(function(){
$('#open-login').click();
});
});
This is working fine, except this modal is getting triggered on every page of the app. I mean that br tag is there in only page of the app, how it is ready for every page is what I don't understand. If anyone can tell what went wrong with my approach, it would be of great help.
ps: It's rails application
You can try this:
$(document).ready(function(){
if ($('.logged').length > 0)
$('#open-login').click();
}
});
Into if condition you can declare an element of specific page and in only that page you can execute an action.
The jQuery .ready() method can only be called on a jQuery object matching the current document. Attaching it to a $('.logged') selector still makes its handler function get called when the document is ready - it doesn't care about the selector.
MarcoSantino's answer will work for your needs, although you may find it cleaner to add the logged-in class to the body tag instead of inserting a new br tag, and then use the following in your JavaScript:
$(document).ready(function(){
if ($(body).hasClass('logged-in')) {
$('#open-login').click();
}
})
I am passing some values through a link "Like",I want to set the property such that the link is hidden or disabled if it is clicked once..
have tried this code
onclick="this.style.display='none';"
But it does not seems to be working.Please help as where to put the js or any other alternate method..
Like;'
As it has been said this functions is better to be implemented with javascript.
First assign a valid id for the link and follow this:
//create a function for the click like:
$('#buttonId').click(hideButton);
Afterwards, in your javascript code:
function hideButton(){$('#buttonId').css({'visibility':'hidden'})};
Remember to import jquery library and import the .js when your code has been displayed if you does not use a .ready function.
Edit: note that in the way previously exposed you will still get the box where the link was, but it is displayed hidden.
If you need to pass some values as well as hide element i thing you should use ajax. As you are passing a url to href attribute it will redirect you to that page. A java script function can work better. Call a javascript function on onClick event like
Like
<script>
function hide(){
// ajax call to send parameter
// hide element
}
</script>
Define a class for anchor tag , and user ajax post to send the request and then you can just hide the element with hide().
See below example:
$(".like").on("click", function (e) {
e.preventDefault();
$.post(this.href);
$(this).hide();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" href="like1?sellerid=-1">Hide me</a>
Hello I have some JavaScript code to fill some table of page1 and auto click its submit button, then it jump to another page2.
What I want is to execute some other codes after page2 is fully loaded. I know methods like window.onload and jQuery.ready but i don't know how to set this method to page2. For example if i write window.onload then the window reference to the current page.
Can anyone help?
You could achieve it the following way.
example :
Add unique identification classes to each of the page body.
page 1
<body class='page1'></body>
page 2
<body class='page2'></body>
JavaScript
in your javascript file, use the following to run the code.
if($('body').hasClass('page1')){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
Then import the file to both pages at the bottom of the body tag. the script will run as needed.
Update
To get the current browser url just use window.location.href to get the url. The url is a unique page identifier so just update the condition to the following.
if(window.location.href == 'page1-url'){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
I would prefer using the window.location.pathname since it would just return the page path without the host, but the above will work too.
You can use $( document ).ready() if page 2 is a new document.
If "page 2" is at a scroll point in the same document, you can use an if statement with the scroll point using .scroll(). Add your script in the head of your new document or a link to a new js file.
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/