actually i´m having some trouble with a webiste.
I´m trying to get a div content that is created by a javascript.
Sadly I can´t figure out which Javascript actually is filling this div.
How could I find that script ?
<div id="messageContent" class="msg_content textBeefy textCenter">
<script>
<form action="http://s124-de.ogame.gameforge.com/game/index.php?page=messages&displayCategory=9&displayPage=1" name="delMsg" method="POST">
<input id="new_msg_count" type="hidden" value="0" />
<table id="mailz" class="list" cellspacing="0" cellpadding="0">
<tbody>
<tr class="first">
<tr id="TR30739146" class="entry trigger " />
<tr id="TR30738105" class="entry trigger alt" />
<tr id="TR30734795" class="entry trigger " />
<tr id="TR30734031" class="entry trigger alt" />
<tr id="TR30731272" class="entry trigger " />
<tr class="last" />
</tbody>
</table>
</form>
The tables including those TR30739... are created by that unkown script.
I´ve tried to checkout the scripts I found with firebug one by one but I´m not sure if I´m calling them correctly and may not notice if it´s the one I´m looking for.
You question boils down to: How do I know what code is modifying a given DOM element?
You can do that with Chrome's Dev Tools (probably others as well), if you can get a chance to set a "DOM breakpoint" before the code in question runs:
Open the page
Open Dev Tools
Right-click the table and click Inspect
Right-click the table element in the DOM window and choose Break on... > Subtree modifications
Then when the table is modified, Chrome will stop the script and show you where the modification is happening in the JavaScript code. Then if you look at the call stack you should be able to find the code in question.
The trick, of course, is getting the breakpoint set before the code modifying the table runs.
Another option, again with Chrome, is to use the old deprecated mutation events. The new (and in most ways better) MutationObserver callbacks are not made synchronously with the code modifying the DOM, but old mutation event callbacks are:
Open a blank tab
Open Dev Tools
In the console, type (but don't press Enter yet)
function setBreak() { var elm = document.getElementById("mailz"); if (!elm) { setTimeout(setBreak); return; } elm.addEventListener("DOMSubtreeModified", function() { debugger; }); } setBreak();
In the address bar, paste the page's URL and then **as quickly as possible* switch back to the console and press Enter
Or of course, if you can modify the content of the page, just put that in a script element.
That code looks for the mailz element and, if it finds it, sets a DOMSubtreeModified listener on it that uses the debugger; statement. If the code doesn't see the element (yet), it schedules itself to run again at the next opportunity. When the event fires, the debugger; statement tells Chrome to stop the code and bring up the source pane. Then, again, inspect the call stack.
Related
I'm attempting to made a collapsible (and hopefully simple) DIV and was working with another answer I had found here on stack overflow but I cannot seem to get it to work on my website. I do have a fiddle with the full links and coding which shows that its actually working (in the fiddle) but then I input the code into my page and it hides the stuff beneath the first picture (using that as the divider) but when I click on it nothing happens (it doesn't display)
Below is the snippet of HTML coding:
<p class="expand-one"> <img src="https://www.mywebsite.net/something/vip1.png"></p>
<p class="content-one">
<td width="33%" align="center" valign="top">
<br>
</td>
<td width="33%" align="center" valign="top">
<a href="http://www.mywebsite.net/bigslice" title="The Big Slice: Home of the Edge">
<font color="#dace77">[ m u s i c ]</font>
</a><br>
<font color="#FAF9B6">$ROOMNAME bigslice$</font><br>$USERLIST bigslice$<br>
</td>
</tr>
</p>
and up in my CSS I have the simple addition of:
<style>p.content-one {
display: none;
}
</style>
And down before the body ends where all my JS scripts are I have
<script>
$('.expand-one').click(function() {
$('.content-one').slideToggle('slow');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Since the answer was as simple as jQuery not loading before the code using it, I thought I'd post the troubleshooting steps I suggested as an answer. The question may be marked as a duplicate, but if not, maybe someone will stumble upon it and be helped... idk.
Ensure any code using jQuery is added after the jQuery library is included (typically I include jQuery at the end of the body and any custom script after that, but that's personal preference).
Check the brower console (F12) for errors- typically these are easy to grok, or you can search for the error message.
If jQuery attempts to select an element before the element is added (either because the jQuery comes before the HTML code, or because the HTML code is dynamically added after loading), it won't find an element- thus adding a listener won't do anything. Either ensure the code comes after the element, attach the listener to a parent/ancestor and specify which element to listen for (e.g. $(document).on('click', 'p', function() { /*...*/ }) will attach a listener to the entire document which will only run when a paragraph is clicked), or use $(function() { /* code here */ }) to ensure your code doesn't run until the page is done loading.
console.log() is extremely helpful if you're not sure if code just won't run, or if it's running and just not affecting anything. If nothing logs, the code isn't running.
I am just learning JS and while implementing AJAX I ran into some strange behavior.
In my code I have the following
<div id="saved_listing_form"></div>
an onchange in a select element runs a script where ajax fills the above div with a preview of the saved listing along with a form populated with fields that can be edited in order to edit the listing if desired.
There is a button in the form that is used to preview the changes to the listing before saving them.
Below is the code that will be populated by the "preview" script that does not respond to JS
<article class="listing" id="listing_preview" style="display:none;" title="">
<a href="" id="preview_url" target="_blank"><img id="preview_picture" src="" alt=""><h3 id="preview_name"></h3>
<span id="preview_phone"></span><address><span id="preview_address_1"></span><br><span id="preview_address_2"></span>
<span id="preview_city_state_zip"></span></address>
</a>
</article>
I tried manipulating the listing through the console in Firefox as a last resort. The console is able to find the article,
document.getElementById('listing_preview')
but cannot produce changes in the DOM
document.getElementById('listing_preview').style.display = 'block';
will not make it appear
I can even
make changes to the object in the console, but that will not show up on the page.
ie document.getElementById('preview_name').innerHTML = 'Hello';
This change will show up in the console, but not in the page.
Here is the strange part. The already-saved listing that is populated by ajax in the saved_listing_form works perfectly and can be manipulated via the console and scripts as expected.
<article class="listing" id="listing" title="Dr. Peter Griffin of Q'Hog, RI"><img id="saved_image" src="images/clients/Peter_Griffin20200827180833.jpg"><h3>Peter Griffin, D.C.</h3>+11234567890<br><address>123 Spooner St<br>Q'Hog, RI 12345</address></article>
Are there any reasons that part of the ajax-populated div works as expected while other DOM objects within the same div would not? I don't appear to have any broken html elements that would throw things off.
The reference to the JS that controls the preview is loaded in at the very end of the code that ajax populates.
Any help would be much appreciated.
I have an HTML page with that creates a dropdown window on-the-fly when a link is clicked, as shown in the following (edited) javascript function:
tbiObj._login = function (objEle) {
var windowName = 'TBIOBJ_LOGIN';
var tabObjLoginWindow = tbiObj.getWindow(windowName);
//if tabObjLoginWindow doesn't exist then create it here (code excised)
var windowDiv = tabObjLoginWindow.getWindowId('body');
var windowHTML = $('LOGINDIALOG').innerHTML;
$(windowDiv).innerHTML = windowHTML;
tabObjLoginWindow.show('dropdown', objEle);
}
The template (LOGINDIALOG) that supplies the "innerHTML" is defined later in the page as follows, using display:none:
<div id="LOGINDIALOG" style="display:none;">
<div id="LOGIN.ERRORS" style="display:none; color:red;"></div>
<table>
<tr>
<td class="GrBlue" style="white-space:nowrap;">User Name:</td>
<td>
<input class="GrBlueEdit" type="text" id="LOGIN.UNAME" / style="">
</td>
</tr>
<tr>
<td class="GrBlue" style="white-space:nowrap;">Password:</td>
<td>
<input autocomplete="off" class="GrBlueE" type="password" id="LOGIN.PWORD" / style="">
</td>
</tr>
</table>
I have the need to change some of the attributes and add a handler to the elements in the dropdown window. I have been experimenting (I'm not an experienced js or jquery coder) and have tried to get to the template elements to change them BEFORE the window is created and the HTML copied. I have been able to change only the "type" attribute of LOGIN.UNAME and LOGIN.PWORD but not others (e.g. style, class) nor can I add event handlers like onkeydown nor can I change the value. My thought was that I might need to "get to" these elements AFTER they've been loaded into the body of the window, but I don't know how. I can display the variable windowHTML defined in the function but that's it. So my questions are:
1. Why is it not possible, via js or jQuery (or if it is then where am I failing) to change the value, style, class, etc. of the elements LOGIN.UNAME and LOGIN.PWORD, and why is it not possible to add event handlers (e.g. onkeydown)?
2. How can I access the DOM of the window contents after it has been created?
Now, chances are, I might even be making mistakes in asking these questions, but I'd like to work through this. Any pointers to resources or hints would be appreciated.
What I am doing here is, I am rendering DOM(having check box) in a div (id="euiview") programmatically . my code is like
var iHtml='<span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p>';
domConstruct.place(iHtml,"euiview");
where I have a div in html page is like.
<div id="euiview" data-dojo-type="dojox.mobile.View">
</div>
Now the problem is I am unable to check or un check the check box in some android device browsers but it is working fine in desktop browser. can I render html this way or I need to create DOM programmetically? Please help me. Thanks
It depends on when you're parsing your page. If you parse your page after you add the new HTML, there will be no problem. However, if you parse your page before you add the new HTML, Dojo won't parse that DOM into widgets and so your checkbox won't work.
I assume you're parsing the page on DOM load, so it really depends on what's getting executed first. A solution that might work is the following:
var iHtml='<div id="new-content"><p><span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p></div>';
domConstruct.place(iHtml,"euiview");
parser.parse("new-content");
With this, you can make sure that the new content is parsed. I also noticed that you're closing your </p> tag but you didn't put a <p> in front of it.
I have a calendar asp page that users schedule times and everyone's times are displayed on this table (similar to Google calendar but only month view). I have it up and running and it works great but I need to edit the page on printing to ensure everything fits on one page. The table is generated through an ASP loop but here is basic structure
<table id='calendar' class="cal">
<tr class="cal">
<td class="cal" onclick="shoForm('5_10');">10
<div class="cellDiv" id="5_10"></div>
</td>
</tr>
</table>
I populate this table using jQuery and AJAX so an example item under one of the cells could be like so:
<div id='1' class='item'>
<span name='itmUserName' id='User1'>User1</span>
<span class='dnPrint'><br/></span>
Project: <span name='tasks' id='2'>Reviewing</span>1.5 hrs
</div>
In jQuery, then I append items to cells like so (where curItemDay is the date for the item):
$("#"+curItemDay).append(
"<div id='"...see above.../div>"
);
Now this all works fine and dandy and visually the web page loads perfect. However, I am trying to hide certain pieces when they click on a "Print" button.
function printThis(){
var names=document.getElementsByName("itmUserName");
for(var i=0;i<names.length;i++){
if(names[i].innerHTML.split(" ").length>1)
names[i].innerHTML=names[i].innerHTML.charAt(0)+names[i].innerHTML.split(" ")[1].charAt(0);
names[i].innerHTML="["+names[i].innerHTML+"] ";
}
...more code....
}
This works fine in FF but in IE it does not work. When I look through the code in IE using the developer console (F12) it doesn't even show the items that were added via jQuery. The page loads and displays everything, but the code doesn't seem to be reflecting what is on the page.
<td class="cal" onclick="shoForm('5_16');">
Text - 16
<div class="cellDiv" id="5_16"/>
</td>
NOTE: IE version is 8.0.6001.18702
You are excessively abusing the innerHTML property.
Instead, why not do something like this:
<span name="itmUserName"><span class="printOn">[</span>J<span class="printOff">ohn </span>S<span class="printOff">mith</span><span class="printOn">]</span></span>
Then use this CSS:
#media screen {.printOn {display:none}}
#media print {.printOff {display:none}}
This will show/hide the relevant parts when the user is printing or viewing on-screen.
I found the answer here: Accessing getElementsByName array after Jquery Ajax IE
Changed
var names=document.getElementsByName("itmUserName");
To
var names=$('[name="itmUserName"]');
And now it works like it should.