I cannot find an answer on the following issue. I have managed to reload a specific part of my page (page A) by using AJAX (through document.getElementById). I would like to know if there is a way to choose which part of the document (page B) will be used to reload the content of page A. In other words, pick a specific DIV from a 2nd page (same domain) and use it to refresh the contents of my page. I have seen in other threads that it is not possible to do it with pages that aren't from the same domain. But in my case I will use a page from the same domain. Any ideas?
Thanks.
If you have page A loaded and your scripts run there, so this will do:
var ifr = document.createElement('iframe');
ifr.src = 'page B URL';
ifr.style.position = 'absolute';
ifr.style.left = '-1000px';
ifr.onload = function() {
document.getElementById('page A div id').innerHTML =
ifr.contentDocument.getElementById('page B div id');
}
document.getElementsByTagName('body')[0].appendChild(ifr);
Note: page B loads and runs completely. If you need the only div to be passed through the Internet connection, you need to implement server side logic.
Related
I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);
(sorry for my bad english)
I have a big problem with which I've been beating me for several days but to which I do not find any solution, even while going to excavate very far in subjects on known forums (and less known).
I develop a small application in Javascript which must recover an array of links. I open these links one by one in the same page, and I click on a button (which posts a name), then I check after a small lapse of time that the name is well posted and corresponds to that present on the page (in a fixed div). At this time, I turn over on the basic page, then I start the script again with the second link contained in the array.
The problem is that the code is not carried out anymore after the window.load() function.
I test the code on Google Chrome (in the Javascript console) and it turns over me an error: “Uncaught ReferenceError: init is not defined … onload ".
I hope that you will be able to help me to find how to once carry out the code with the launching of the page it is launched since each bond opens a page in the relationship page.
Before, I had tested in a popup with the function window.open () (without “_parent”) and I wanted to close it thanks to window.close () function, but the code did not include/understand where to act since the remainder of the code was to now deal with the popup and not of the page on which the code was carried out at the beginning.
Here's the code :
//Here i get the links in an array
function recupHref(){
var lesHref = new Array();
var lesLiens = document.getElementsByTagName("a");
for(var i = 0; i < lesLiens.length; i ++)
if(lesLiens[i].parentNode.getAttribute("class") == "pubrhead-text-right")
lesHref.push(lesLiens[i].getAttribute("href"));
return lesHref;
}
var resultat = recupHref(); //I store them in a variable
//The main function which open the links one by one
//The while loop allows us to know if were subscribed or not
var o = function openLinks(){
for(var leIndex = 0; leIndex < resultat.length; leIndex ++){
window.open(resultat[leIndex], "_parent");
//Do i use window.load instead of DOMContentLoaded ?
addEventListener("DOMContentLoaded", function() {
document.getElementById("enbut").click();
var pseudo = document.getElementById("nameho").innerHTML;
var pseudok = document.getElementsByClassName("pname")[0].textContent;
});
while (pseudo === pseudok) {
!(window.open("http://page-with-links.html", "_parent"));
};
}
}
I thank you in advance, and I hope that you will include/understand my problem.
Here is a little draw to explain better than words :
In other words, just what i need is that : store links (done) --> Open the link --> Click on the button (done) --> Check if the 2 names are the same --> Came back to the first page/close popup/ (or go directly to the seconde link in the array) --> do this for the 2nd link, etc, etc.
Good day/evening.
I have a page with a lot of images, each of them being wrapped with an onclick event. For example:
<a onclick=javascript:xxx(y,z)><img id="myclass" src="yyy"></a>
Following command returns all the images correctly:
$x("//img")
This doesn't (returns null):
$("img")
I assume, because these img tags were created dynamically, so are not directly in the source.
My idea was to add .click() at the end, but somehow it doesn't work.
So the question is:
How do I simulate clicking all images at once to trigger all associated javascript functions?
You can't .click() on collection as it is just a container for some objects and it doesn't have any methods from objects inside. You need to iterate over each object and call .click() individually:
for (var idx = document.images.length - 1; idx >= 0; idx--){ document.images[idx].click() }
I've just ran it in console and opened your profile and ad on sidebar.
I'm not using a Grid, just using the MvcContrib Pager. I have a partial view created for the Pager (so I can display it at top and bottom of the results easily), and it calls the #Html. Pager method as so:
#Html.Pager(Model.PagedPrograms).First("<<").Last(">>").Next(">").Previous("<").Format("Item {0} - {1} of {2} ")
This works without additional tweaking as long as all parameters are passed to the page via QueryString, since Pager knows to rebuild those back on the URLs.
I'd like to give the user the option to change the page size (say 20, 50, All) ... I can easily handle that on the controller end, and I could write something like
#if (Model is Foo) {
#Html.ActionLink<SearchController>(sc => sc.Foo(var1, var2, var3, 20), "20")
#Html.ActionLink<SearchController>(sc => sc.Foo(var1, var2, var3, 50), "50");
#Html.ActionLink<SearchController>(sc => sc.Foo(var1, var2, var3, -1), "All");
}
But I would have to do that for each Model type that might use this Pager... I might be overthinking this or coming at this completely backwards, but I thought I'd ask and see if anyone had insight.
Currently the Pager is only called from a view which takes IPagedProgramList (provides IPagination<ProgramDTO> { get; }), and I have two ViewModels implementing that interface (a simple search and an advanced search). But if this project grows and we add new ViewModels that use that Interface I would have to update the Pager partial view, and that seems bad / doesn't scale / etc.
So a nod to Ek0nomik who got me thinking outside the box on this one.
Step 1: Make sure all pages that are going to use the Pager controller are passing all parameters via GET not POST. Use RedirectToAction if you must accept post somewhere and just translate all the parameters into primitive types for the GET method.
Step 2: Don't worry about adding .Link() to the Pager. As long as everything's coming in via GET, you're fine. It will look at the URL for the page and adjust the page number parameter as it needs to when you're going forward/back.
Step 3 (optional but recommended): For consistency across your application, somewhere (probably your Global.ascx.cs file) you should define a list of the page sizes you will support. In my case I used Dictionary<int,string> so that I could pass -1 as the PageSize value but display All (and of course the data layer must know that -1 means disable paging).
Step 4: Add something like this to your pager partial view:
<ul class="pageSizeSelector">
#foreach (KeyValuePair<int,string> kvp in MvcApplication.AVAIL_PAGE_SIZES)
{
<li>#kvp.Value</li>
}
</ul>
Step 5: The javascript function changePageSize is so simple, I couldn't believe I hadn't thought of this first (note: no jQuery required... just in case you're not already using it, you don't need to just for this).
function changePageSize(size) {
var PSpattern = /PageSize=\d+/i;
var url = window.location.href;
url = url.replace(PSpattern, "PageSize=" + size);
window.location.href = url;
}
Step 6 (optional, unless you're an Internet Troll): Profit!
I have both stylish and grease monkey installed in Firefox 5. I want to know if either of them or another add on has the capability of finding text and replacing it with something else, or better yet locating a div by its id and replacing the span within with another string of text.
From OP comment:
I have a website with a div (id=siteLinkList), with a ul and multiple lis inside the div.
Each li has an a with text that needs to be replaced. I want the script to search for the div and then find and replace text inside that div.
Here is what I have so far:
var els = document.getElementsByTagName("*");
for(var i = 0, l = els.length; i < l; i++)
{
var el = els[i];
el.innerHTML = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.innerHTML = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
}
The script works but I fear that it delays the loading time.
Yes, Greasemonkey can do this. (Even Stylish can do this in a limited way with CSS content.)
There must be zillions of scripts that do this at userscripts.org.
See also, related SO questions like:
Greasemonkey script in Firefox 4, want to change one line of code on webpage
Use Greasemonkey to remove table
Find and replace in a webpage using javascript.
You need to post details of what the page is/should-be, before and after.
More specific answer based on update(s) from OP:
Speed up your code by focusing on the kinds of elements you want, AMAP, instead of a fetching every element.
Code like so, should work. :
var TargLinks = document.querySelectorAll ('div#siteLinkList ul li a');
for (var J = TargLinks.length - 1; J >= 0; --J)
{
/*--- Does "EGN1935: 5088, Summer B 2011" only appear in the text of
the link or in the href?
The first block will be more efficient if it works, otherwise use
the 2nd block.
*/
var el = TargLinks[J];
el.textContent = el.textContent.replace (/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.textContent = el.textContent.replace (/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
/* Only use this block if the first block did not work.
el.innerHTML = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.innerHTML = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
*/
}
You can do this with Firebug - http://getfirebug.com/. Once you install it, activate it by clicking the bug looking icon on the page you want to edit. A view of the HTML document tree will appear, and you can click arrows to drill further down. Alternatively, you can use the pointer icon inside Firebug to select any HTML element on the page (such as a div with a specific ID).
Once you have the element selected, you can select the text that it contains and edit it as you like.
You can edit a ton of other things with this plugin, but it's important to know that once you reload the page your edits will go away.