jQuery Core 3.1.0
Chrome, Firefox
Below is a model of jquery.ajax() success behaviour.
Shortly: I managed to fetch data via AJAX. In this model example the data is represented by "Just something" placeholder. Now I want to add the data to the document.
<script>
var add_date = $("#add_date");
function add_date_ajax(){
$('.frame_date').append("Just something");
debugger; // 1
}
debugger; // 2
add_date.click(add_date_ajax);
</script>
A problem: the data appear and then disappear in half a second.
I placed breakpoints.
When the page is loading, it stops at breakpoint 2. That is correct.
When I click #add_date element, the script stops at breakpoint 1. That is also correct.
But when I click "resume script execution", the script again goes to breakpoint 2. This seem strange to me. As if the page is reloaded. Maybe that is why the added text disappears.
Could you help me cope with the problem?
Added later:
https://jsfiddle.net/mv1yu3zw/1/
It disappears because you are reloading the page. The html
Add date
should be
Add date
To bind all your events, you should use the ready on document.
To avoid the reloading of your page (because of the href of the a tag), you have to call preventDefault or use a button.
You should write your code like this:
$(document).ready(function() {
$("#add_date").on("click", add_date_ajax);
});
function add_date_ajax(event) {
event.preventDefault();
$('.frame_date').append("Just something");
}
Related
I've checked many other answers on StackOverflow but none of them work for some reason.
I'm trying to use something simple like
window.onload = function() {
sleep(5000)
clickButton()
}
But as far as I can tell the button on a page I want clicked loads AFTER page load. So window.onload doesn't work at all. That's why I tried to use a custom sleep function to force the code to run after-after page load but nope. Code "sleeps" by preventing page from fully loading, then runs clickButton(), then the page loads. Useless.
I know my actual button clicking code works in practice because I just fed into the browser console line by line and it worked fine. But the button I'm targeting loads after my code is executed!
I have also tried these which also do not work:
window.addEventListener('load', function () {
clickButton()
})
setTimeout(clickButton(), 5000)
setInterval(clickButton(), 5000)
...
Also I'm using:
document.querySelector("[data-a-target='button-name']");
instead of:
document.getElementById("button-name");
since this button does not have an id.
...
Also I have never used jquery before if that is the answer.
...
How on earth do I get js to click a button immediately as soon as it loads?
The order in which you write your code plays an important role here.
Firstly, put the script tag at the very bottom of the body element of your html page. That forces the browser to have already read through the entire html page before getting to the script tag with your Javascript.
Secondly, I assume you have an event listener for a click on the button. Write the event listener before you let the button be clicked.
For example, I wrote this little code to test my assumption out:
button.addEventListener('click', function () {
console.log('Clicked');
});
button.click();
This should hopefully work for you too. Good luck
It comes javaScript and jQuery are beeing a big challenge for me. Like it's not enough I've started to use ajax to get over my problem - which is:
I've got some empty tables on my page. Each cell of a table has got its own id. A php-script is parsing a .xlsx file and puts the right link to the cell of my html table through javaScript code like:
document.getElementById("cellNrXY").innerHTML = "someLink";
If the link is clicked, then a Modal (Bootstrap) appears and loads the remote content (which is different depending on the clicked link).
My problem was that the remote content was cached in modal, so it worked only on first run. After closing the modal and choosing another link the previous modal appeared und didn't change to the new remote content.
I've read a lot solutions here that are based on:
$(this).removeData('bs.modal');
but had no luck with it. After some trying with different solutions one worked properly. The only problem was: when I've clicked the second time on some other link, the modal opened up with previous content and it took some seconds for the modal beeing updated. This is why I wanted to show a rotating element while the new modal content is beeing loaded. Somewhere here I've read a solution tu use ajax for this, which I've added "on luck" and ... it worked:
$("#myModal").on("show.bs.modal", function(e) {
$.ajax({
beforeSend: function() { $('#myModal')
.html('<div class="rotatingElement"></div>')
.show(); },
complete: function() { $('#myModal').html.hide(); }
});
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
The only thing is - I've no idea why this is working. Is there any chance that somebody here explain the functionality of this code to me?
if you read about the event show.bs.modal you will know that this event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. Learn more about Events
so what is happening is every time you open a modal this event triggers and makes an ajax call which you see like this $.ajax({ wchi has 2 options set
A pre-request callback function beforeSend
A function to be called when the request finishes complete
so whenever the modal triggeres the ajax requet is made and every time ajax request i made just before sending the request the modal html is overridden $('#myModal').html('<div class="rotatingElement"></div>').show(); and a loader is added in form of a div element with class rotatingElement and as soon as the requet completes that loader is removed via complete function $('#myModal').html.hide(); and then the e.relatedTarget property as described above gets the anchor object and the href of that anchor .../remoteContent.php is loaded in side the modal body in the following 2 steps
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved
I am trying to avoid my page being refreshed after submitting my form. In order to do this I've added into my javascript section
$("body").on('click',"#register",new_user_pop);
$("body").on('click',"#screen",pop_out);
$("body").on('click',"#new-user",pop_registration);
$('form[name=new-user-form]').on('submit',function(event) {
event.preventDefault();
alert("Not refreshing");
The function works properly as in order to debug it I pasted it on the Terminal from the Chrome's developer tools and it started working.
But for some reason I do not know it does not work it does not get loads at the beginning.
The previous function $("body").on('click')... work all fine.
Make sure your code runs after you've defined the HTML elements you want to attach your events to.
You can either do this by placing your script below the HTML bit you need.
Or you can wrap your code in an onready/load callback:
$(document).ready(function () {
/* code goes here */
});
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.