I tried to remove my current button that creates JSON table but after I removed button I could not get my table to load. Here is my code:
<body>
<button type='button' id="build" onclick="getTable()">Build Table</button>
</body>
and here is my function:
function getTable(){
var one= [];
var k1 = [];
var k2 = [];
myTbl="<table id='tbl1'><tbody><th>Selection Box</th><tr>"
for(key in myJSON){
}
}
How I can get my page to load without using button/function?
I tried to remove button and function and just reload the page but that did not work. If anyone can help please let me know.
You can use onload() on body tag.
<body onload="getTable()">
use jquery for that, then just use document ready, like this, this will wait untill the document is loaded and then execute the function.
$( document ).ready(function() {
getTable();
});
It's because you need to call your function. When you using button, you have onclick event, which call your function every time you are clicking on it. The easiest way is to do it like this:
<body>
<script>
getTable();
</script>
</body>
Related
So, I have following jquery function:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
});
}
})
This creates an lightbox at the bottom of <body> like below:
Before lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
</body>
After lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
<div class="lightbox">Lightbox content</div>
</body>
Problem is that none of the jQuery function inside of this lightbox works as it was created after the page was loaded.
How do I "re-render" a js file after the lightbox is created?
Thanks!
Here is an example:
jQuery('#tags').keyup(function(e){
console.log(e);
if(e.which == 188) {
var tag = ...;
var data = '<button>tag</button>';
tags.push(tag);
jQuery('.tags ul').append(data);
jQuery(this).val('');
}
});
Here, a tag input will be "appended" or added to a div class="tags". However inside of the lightbox, this function is not executed at all.
Re-rendering a JS file is not how javascript is supposed to work.
What I recommend you to do is to run the a function in the afterContent callback.
As you can see in the featherlight documentation, there is a plenty of callbacks that can help you with this.
Example:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
afterContent: function () {
// Do your code here
// The lightbox content will be ready
}
});
}
})
The proble here is that the light ox is dynamically added.
If you need any triggers to work inside or on that lightbox element you will need to use:
$(document).on('click', '.lightbox .button', function(){
...
});
Note that you do not want this code inside that lightbox, but inside your regular js file. Simply because we do not like inline js, and second you can trigger every dynamic content on the fly with above code.
I'm trying to write a click event for an arbitrary button on an html page. I'm referencing jQuery and the JavaScript file in the here:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/product-swap.js"></script>
and the button here:
<button class="btn">Click Me</button>
I'm really just trying to have an alert appear on the screen to test the references. JavaScript:
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Won't you appear, please!?");
});
When I click the button...nothing happens. Nothing appears in the log or in the console or in an alert window.
I know this is probably something arbitrary and stupid but I'm fairly new to JavaScript/jQuery and I'm racking my brain over this one.
Thanks!
try with this man:
$(document).ready(function(){
$('.btn').on('click', function() {
console.log("STUPID LOG");
// Reset the window object
delete window.alert;
alert('test');
});
});
Is the button after the script? If so then you can either move the button to before the script, or wrap the script in a
$(function(){ /* Code goes here */ });
Put your JQuery lines inside this:
$( document ).ready(function() {
//your code.
});
The HTML page isn't ready when you call the script, enclose your code with $(function(){...});, it will wait until the page is ready.
$(function(){
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Fantastic, I will appear!");
});
});
I also recommend you to put your script tags at the end of your HTML page, the render of visual elements will be faster.
u can try like this too
function myFunction() {
alert("I am an alert box!");
}
<button onclick="myFunction()">Click Me</button>
Basically, I'm working with static HTML that is written in stone. I cannot add an onclick to the dropdown menu, which is usually what I would do.
The following is what I have:
<script type="text/javascript">
function replicate() {
var tb1 = document.getElementById("ctl00_ContentPlaceHolder1_DropDownList_Country_17");
var tb2 = document.getElementById("ctl00_ContentPlaceHolder1_TextBox_State_19");
tb2.value = tb1.value;
}
</script>
Of course, this works fine for the actual "transfer" of data from the drop down to textbox, but it never gets executed. Usually I would execute the function "onclick" in the HTML, but I cannot do that. Is there another way to "listen" for a click on that dropdown?
Just register the handler:
document.getElementById("yourdropdownID").onchange = replicate;
can you use JQuery? Link to JQuery (like all javascrip files) and do the following in a script tag somewhere (or add to your current script tag.
<script>
$(document).ready(function(){
//Use the ID of the control here:
$("#ct100_ContentPlaceHolder1_DropDownList_Country_17").change(function(){
replicate();
});
});
<script>
Please look at this code:
<script>
var mygrid;
function lock(){
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function doInitGrid(){
mygrid = new SomeClass;
}
</script>
</head>
<body onload="doInitGrid()" dir=rtl>
<div id="mygrid_container" style="width:905px;height:550px;"></div>
<script>lock();</script>
<button onclick="addRow()">Add Row</button>
<button onclick="removeRow()">Remove Row</button>
<button onclick="lock()">lock Row</button>
</body>
Why when I run lock function (Without the button), my var is undefined, and when I click on the button everything is ok?
This is a timing issue, not a scope issue.
You call doInitGrid() only onload so it won't assign a value to mygrid until after the document has finished loading.
When you call lock() inline, you do so as the document loads.
Presumably you have waited until the document has finished loading before clicking on the button.
If by "my var is undefined" you mean that the variable mygrid is undefined, that's because you initialise it inside the function doInitGrid() which is not called until onload of the page. The onload event happens after the whole page has finished loading. Other inline script runs when the browser encounters it as it parses the document.
I am not sure when you have called the lock function without clicking button. But it appears that that the doInitGrid function was not executed when you have executed the lock function. The below code may work
function lock(){
if(!mygrid){
doInitGrid();
}
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
You are calling load() before the document gets loaded completely. So your variable is not assigned as doInitgrid is not yet called.(it gets called only after document is fully loaded)
You are instantiating mygrid inside the function doInitGrid() which is called only on onload. But your script statement <script>lock();</script> executes before the page is loaded as it is part of the page HTML. When this script block executes, the value of mygrid is undefined which is the default value set by JS for all variables declared without an initial value.
If you want to call lock() when the page loads up, call it on onload after the call to doInitGrid() like this:
<body onload="doInitGrid(); lock();" dir=rtl>
Quentin has answered your question, But I'd like to add that it would be better to clean up your code a bit. Something like this.
<script>
function lock(mygrid){ //pass in the grid var
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function getInitGrid(){
//some initialization code here maybe. Otherwise just take this out
return new SomeClass;//return an instance
}
var mygrid = getInitGrid();
//and then pass in the mygrid variable wherever you call lock
lock(mygrid);
</script>
In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...