dynamicaly change an element if it is changed by a different script - javascript

I am writing a script that modifies the content on a page. The content is generated from a different script that I am unable to modify. My code works fine when the page is initially loaded. But when the user clicks a link (which causes the other script to run) then all my content modifications are lost. I am able to catch the event that causes the change by using $(a.pagination_button).on("click",function(){ code }) But whatever code I put in is not having any effect. It seems the other script is running after my .on function. What can I do to make my code execute after the other script so that my changes will be seen by the user?

Just listen on the document for clicks:
$(document).on("click","a.pagination_button",function() {
alert("exec code");
});

Related

Detect changes on the url

I need something to detect changes on the url but the page doesn't do post back, it changes dynamically adding just the div inside the html, so the URL page is something like this
http://www.examplepage/conversations/44455
and when I click on another section of the page it it is
http://www.examplepage/conversations/44874
it changes not only at the end but like this
http://www.examplepage/settings
without doing post back and reloading the javascript so my question is, is there a way to detect those changes? and event listener but how?
I search and everyone says hash event but I don't have any value after any hash so it doesn't work
EDIT
Just for the record I have no code of the page nor I have access, I'll explain better, I am doing a background google extension and I just added a slide out to an existing page, this page changes its url the way I explained above. the url changes like every page does, but they change the div inside the html so that the page doesn't have to charge everything again
You need to store the URL when the page loads as a starting point and setInterval to check for changes and modify based on that.
The following code does this check twice a second (500ms):
// store url on load
let currentPage = location.href;
// listen for changes
setInterval(function()
{
if (currentPage != location.href)
{
// page has changed, set new page as 'current'
currentPage = location.href;
// do your thing..
}
}, 500);
There is no "clean", event-based way to detect such URL changes from a content script.
They are done with history.pushState API - and using that API doesn't emit any DOM event.
Two possible indirect event-based approaches, besides the already mentioned poll-based one:
An extension can override history.pushState with an injected script to additionally emit a DOM event that can be listened to in a content script.
This approach is described in detail here.
The downside is that, depending on the code of the page in question, the injected script may need to be injected early, needing run_at: document_start which is suboptimal for page load performance.
Use a background page that listens to chrome.webNavigation.onHistoryStateUpdated event.
If you need to detect this in a background page — perfect,
you're done, without ever needing a content script.
If you need to detect this in a content script, you can use details.tabId in the event listener to send a message to the right content script.

jQuery not working when called into another page

I have this form on one page that we use as a tool. It's on page tool.html, in div id="tool"
Since this tool is to be shown on another page as well, I want to pull the tool in and not have to copy and paste (in case changes are done later on, this will reflect it everywhere)
Now, I have put all the jQuery functions in a separate file that I link in, so I can reuse it on many pages.
I can call in the form properly by using
<script>
$(document).ready(function() {
$("#lyristool").load("../path/tool.html #tool");
});
</script>
And I can confirm that the linked script page is loaded in properly, but it's not working at all.
Why will the linked script work on the original page, but not on the page when that whole containing div is pulled in?
Try to execute this line:
$("#lyristool").load("../path/tool.html #tool");
before loading the other script. I think your binding is not working because those elements don't exist on the page at the moment of binding.
In order to be able to do that, you should put all your binding code in a document.ready callback.

jQuery function and Page Reload issue (maybe)

I have this code (accepted solution).
This code snipped loads from a js file. When I put a breakpoint at this function, I see that this function getting called when the page (that includes it) is loaded.
After the initial page load, when I choose an option in this page, that anchor element is reloaded (Ajax) exactly same (js file does not reload) as part of the piece of data. However, now when I click on anchor link, it does not fire / open the outlook window.
Is it something about jQuery functionality that I am mis reading/using?
How do I resolve this?
If the element is reloaded you'll need to rebind the click event to it.
Alternatively to the way you are doing it you could bind to the window/body and just specify the id as the selector like this:
$('body').on('click', '#emailLink', function (event) {
// your code here...
});

Calling Content Script function on chrome.browserAction.onClicked

My question is fairly simple and I just want to figure out the easiest way to do this.
The current iteration of my chrome extension injects a DIV into the webpage with a button, which, when pressed, will execute a function.
I want to do this without injecting DIVs, by executing a function within one of my content scripts when the browser button is pressed in the toolbar. What's the simplest way to go about this? I believe I have to use the background page, and the only thing I see in documentation is registering some listening events on both ends. If this is the only/simplest way, how do I go about doing this?
Yes, contacting a content script from a browser or page action button is done using messages sent back and forth between the background script and the content script(s)
First step: Tell the background script what to do on browserAction/pageAction button click
chrome.browserAction.onClicked.addListener(function(tab) {
...
});
Step 2: Inside the browserAction.onClicked event listener you can then send a message to the content script (in fact to any code listening!):
chrome.tabs.sendMessage(tab.id, {<YOURMESSAGEPAYLOAD>});
Step 3: Inside the content script, you add a listener for incoming messages
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
// request contains the YOURMESSAGEPAYLOAD sent above as a Javascript object literal
});
You can also go the other way round and send messages from the content script to the background script by using the following inside the content script
chrome.runtime.sendMessage({<YOURMESSAGEPAYLOAD>});
and then use the onMessage listener inside the background script the same way as mentioned above.
devnull69 is correct, you need to use message passing. Also consider checking out chromeps. It's a small pubsub library I wrote for chrome extensions. Removes a lot of the overhead when writing message passing code.

Initialize Facebook like button post page load and script execution

So I have a like button on my page which loads fine when the script is executed in the bottom of the page. The problem is that I have an Ajax based popout which renders some HTML that also has the like button. How can I initialize that?
I've tried putting same script, but it doesn't get executed.
Is there a way to explicitly call any method to initialize the button?
FB.XFBML.parse() will do the trick

Categories