How to make a auto click on a webpage onload? - javascript

I have a webpage. I want to write a javasript function that will make the html page as a huge excel sheet and put a place holder on a particular row and column. Thus on loading the webpage the place holder will be called by the function and a auto click will be made on that particular row and column.
Does anyone know how to code this function?
I can provide the raw script of the webpage if asked.
Thanks.

if foo has a click event then
$('#foo').trigger('click');
will call the event.
If you are just trying to focus on particular control you can just use :
$('#foo').focus();

Use jQuery:
$(document).ready(function(){
$("#ThisMustBeClickedId").trigger('click');
});
Provided you may add jQuery, that you can foresee the id, or otherwise select the cell or what it is..

If you're using jQuery:
$(document).ready(function(){
$('#your-cell-selector').click();
})

Related

Require a parameter type for input tag in html

I'm working on a custom focus method for my page, which is the following:
<script type="text/javascript">
function myFunction() {
document.getElementById("name").focus();
}
</script>
The reason why I'm using this and not just autofocus is that I'm moving from one page to another. Therefore I need to click on a button on one html page and then have focus on the input tag for another page. My function is working correctly as I have been able to test it using this:
<input type="text" onmousemove=myFunction() id="focus">
However I don't want to use onmousemove, I want it to be automatic. So when the page is loaded it will then focus immediately. Is there are tag for this? If there is a possibility of using the button from HTML page 1 and get it to focus on the input box on HTML page 2, that would be good but I'm unsure how/if that is possible. Thanks.
There are multiple ways you could do this:
1: You pass query parameters in the URL of the second page using a ?:
document.getElementById("linkId").setAttribute("href","https://example.com?something");
And have javascript on the second page to check for it.
2: A better way of doing it would be to use localStorage.
localStorage.setItem("focus","true");
Code on second page:
if(localStorage.getItem("focus")==="true"){
element.focus();
}

How to pass the value from a dynamically created table into a new database query using JQuery?

So far I've created a table from a database query using the input from a dropdown menu. Now I want the user to be able to click on a cell in that table and using the the value of that cell query the database again for further information. Here's what I have:
echo "
<tr>
<td>".$value['Time']."</td>
<td>".$value['First_Name']."</div></td>
...
This continues on for the rest of the information but thats the code for my initial table. The user should then click on First_Name for further information provided by an AJAX request. My jQuery so far looks like this...I haven't even been able to start the AJAX as I can't pass in the value of the table cell.
$(document).ready(function(){
$('#tables').on('click','td', function(){
var module= $(this).val();
alert(module);
})
Once I figure out how to pass this value then I can move ahead with the database query but this is holding me back. Do I even need to do this if Im using JQuery AJAX? Any help is appreciated.
if you want get the text inside the element tag. Please use .text() not .val()
example:
var module= $(this).text();
I hope this usefull :)
It would be better to bind click event on <a> instead of <td>. That will work good too.
Now question is you want to pass some value through AJAX to PHP script. Good practice to do this is by setting data-* attributes to <a> element.
So your HTML/PHP code will look something like this,
<td>".$value['Time']."</td>
<td>".$value['First_Name']."</div></td>
In above code we've given a class to <a> to bind click event on each element having this class. (Useful for multiple records generated using loop), we have also set data-modelvalue attribute to <a>.
Now update your jQuery code like this,
$('#tables').on('click','.myLink', function(e){
e.preventDefault();
var module= $(this).data('modelvalue');
alert(module);
});
In above code we have bind click event on myLink class elements. Also we're fetching data-modelvalue using .data() jQuery method.
e.preventDefault() forces default action of the event to not be triggered, in our case page won't get refreshed(which is default action of any hyperlink).
References:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
https://api.jquery.com/data/
https://api.jquery.com/event.preventdefault/

Javascript focus does not work on dynamically loaded input box

I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).
Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :
$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()
Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.
Any way to focus it properly?
I know the code is very less here but the question is self explanatory I believe.
if you are using jquery then you can use .on() on dynamically generated elements
$("#prescribe-input").on( "focus", function() {
//do what ever you want
});
You should do this in the callback function:
$(selector).html(response, function(){
$("#prescribe-input").focus();
})

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?
If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

Possible to manipulate javascript generated elements?

I have a page dynamically generated with javascript and it contains several input fields and a button. When I click the button, nothing happens...Is it because it is a javascript object and not a "real" dom object? If so, is there a way to interact with the object?
I just wrote a simple alert to see if the button is even working.
jQuery("#button").click(function() {
alert("yes it's working");
});
On first page load this works...I believe on first page load it is PHP generated and when I click to another section, this same button will show up BUT the page does not refresh so this leads me to believe when I click on to another section, it is dynamically re-generated with JS.
Now if I click the button, nothing happens...no errors or no alerts...
You need to use .live because at the point in time when you assign the handler the element doesn't exist.
$('#button').live('click', function() {
});
You should also look into delegate if you're doing this with multiple elements for efficiency purposes.
I think I get what you're saying.
When you run jQuery('#button'), it searches for the elements then and there. The event is attached to the button itself, not to the query string #button.
jQuery does, however, offer the behavior you want.
jQuery('#button').live('click', function () { /* on click event */ });
live attaches to the query string, not the elements, so it will apply to any #button ever generated in the future.

Categories