Modify div after it's created [duplicate] - javascript

This question already has answers here:
Detect changes in the DOM
(11 answers)
Closed 7 years ago.
I've a php page with a menu.
One of the items of the menu, invokes another php, which returns a div element filled with data, that is inserted into the former page (that the user is already seeing).
I'm trying to modify this div content using JavaScript, after loading it. However, I can't achieve it.
I've tried using ready() method, but since it happens at a random time after loading it, this method doesn't work.
I've also tried with a load() method I found which seemed to trigger after the item is loaded completely, but I didn't complete it neither. This was something like:
$( "#overlay #overlay_text div #panes div #tableInOverlay" ).load(function() {
alert("The table has been loaded");
});
How can I achieve it?
Thank you in advance
Edit: in order to try to make it clear
User access to the web page (File 1) -> User clicks in (File 1) Menu -> File 2 is invoked, which creates a response with a div element -> (File 1) gets the response, and insert it into the HTML code, so the new div is shown.
Then, at this moment, I need (File 1) to modify this div that it just received.

There is no html event that is triggered when elements are inserted, modified or removed.
Possible solutions:
1- Trigger an even yourself in the callback:
$('#myDiv').load('url', function(){
$('#myDiv').trigger('foohappened')
});
$('#myDiv').on('foohappened', function(){
// modify content
});
NOTE: myDiv is an element on the page, not the one that loads via ajax
2- Change the data before inserting
$.ajax({
success: function(data){
var loadedElement = $.parseHTML(data);
var modifiedContent = modifyContent(loadedElements);
$('#myDiv').insert(modifiedContent);
}
})

Can you try this?
$(window).load( function() {
// YOUR CODE HERE
});
also, if you know the amount of the delay, you could postpone your function using setTimeout()

Related

How do I link to an internal page and click on an element on the linked page with vanilla JS?

I can't figure out how this is done:
I want to link to an internal page with an addEventlistener function. When the linked page loads I want to open a div that is hidden. So something along the line of:
button.addEventListener("click", () => {
const hiddenDiv = document.getElementById("hidden-div")
window.open("/newPage.html" + hiddenDiv.click())
});
I know the code above won't work, but I don't know how it could work, since window.open() ends the execution of the code.
Is there a way to store the function after the page refreshes (without localstorage)? Is there a way to handle it via the url? Or should be done with localstorage?

jQuery calling div element that has been loaded by ajax, or inserted via html() method

It's my first post on stackoverflow. I've searched similiar questions here and found a couple of answers but couldn't really find a solution to this particular problem that would help me.
I have a webpage which loads main contents by ajax. Simply like this:
function loadContent(content) {
if(localStorage.content != content) {
$("#content #content_loading").css("display", "block");
}
var userID = Cookies.get("UserID");
$.ajax({
url: '../game/data/load_content.php',
type: 'post',
data : { ID : userID, Content : content },
success: function(response) {
$("#content #content_loading").css("display", "none");
$("#content #import").html(response);
localStorage.content = content;
$("#header").html("<div class='header_text'>"+content+"</div>");
}
}); }
It loads other ajax functions, html and css. Since I have thousands and thousands lines of code simple things get trickier. Now I simply want to create an universal 'close' button for popup windows. All of the popup windows are in a box, and the close button is inside the box header. Now I want to close all popup windows with a single function:
$('.close').click(function() {
$(this).parent().parent().fadeOut();
});
This simply selects the parent of the close element, which is header and then parent of that parent which is the whole box. One of the popup functions looks like this:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
}
This function is included in the main document (<script src="script"></script>).
Then the other popup is directly loaded upon loadContent(content) function, so it's loaded with ajax call. And it's simply HTML that looks like this:
<div id="nearby_players">
<div class="header">PLAYERS NEARBY <div class="close"></div></div>
<ul> </ul>
</div>
Now if I insert the 'close' function upon click in the document that ajax is loading it will work. And if I change the loadPopup() function to this:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
$(".close").click(function() {
$(this).parent().parent().fadeOut();
});
}
It works too. But what I want to do is to create a single click function attached to the main document that will close all the possible popups that are being loaded on the webpage or already are on the webpage. I thought it was a problem since 'close' element was an ID not a class. And since it should be unique I've changed it to class. So my question is. How do I refer to all of the elements with class 'close' whether they are being loaded with ajax, and then within that ajax they get loaded again with another ajax and so on. And also the popups that are already inserted into document when the webpage gets loaded?
How do I add these elements to the DOM so jQuery actually finds it?
Regards,
Hazes!
You create elements dynamically, which means that events are not attached to them.
Please read how to attach events to dynamically created elements: http://api.jquery.com/live/

Added data disappear

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");
}

Ensure my javascript is the last thing executed when dom is modified [duplicate]

This question already has answers here:
Detect changes in the DOM
(11 answers)
Closed 9 years ago.
I am working on a page where javascript from various sources is being executed .
I want to ensure my custom js is only executed AFTER everthing else has been done .
The "other" js is call on various events like clicking some buttons etc ..all of which change/alter the Dom in some way .I want to detect in my custom js when this DOM change is complete I want to do something(which may also change the DOM but thats fine as it may result into execting my js twice which i can afford ) But the main question is how to I know that the other js is done with the DOM ?
You can put your code inside DOM ready handler:
$(document).ready(function() {
// Code goes here
});
If you want to run code once the entire page (images or iframes), not just the DOM, is ready, then use:
$( window ).load(function() {
// Code goes here
})

jQuery code repeating problem

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.

Categories

Resources