Controlling order of javascript execution PayPal Objects - javascript

I have a wordpress page. I have a number of links which go to PayPalObjects. PayPalObjects requires that you put code in the footer of the page with triggers to IDs for the elements which trigger a purchase. eg...
<a id="buysong_4" target="PPDGFrame" title="Click here to buy this song now.">$</a>
...and then in the footer of the page:
<script type="text/javascript">
var embeddedPPFlow1 = new PAYPAL.apps.DGFlow( {trigger : 'buysong_1'});
function MyEmbeddedFlow(embeddedFlow) {
this.embeddedPPObj = embeddedFlow;
this.paymentSuccess = function() {
this.embeddedPPObj.closeFlow();
window.location.href = "http://whatever.com/success/";
};
this.paymentCanceled = function() {
this.embeddedPPObj.closeFlow();
top.location.href = "http://whatever.com/fail/";
};
}
var myEmbeddedPaymentFlow1 = new MyEmbeddedFlow(embeddedPPFlow1);
</script>
Now, since I have dozens of such links, I wanted to avoid hard coding these ids into the content. eg...
<a class="buysong" target="PPDGFrame" title="Click here to buy this song now.">$</a>
So I added the following jQuery:
jQuery('.buysong').each(function(index, element) {
jQuery(this).attr('id', 'buysong_' + (index+1) );
});
The rendered page correctly adds the ID attribute to each link, BUT the PayPal js does not trigger properly. IOW: I have to 'hardcode' the ids into the page. This makes me think that the jQuery is firing -after- the PayPal script.
So... how do I 'tell' the PayPalObjects script to only execute -after- the jQuery has assigned the IDs? OR... even if I accomplished that, would it -still- not work because assigning the ID attr. dynamically isn't reliable for what I want to do?
TIA,
---JC

Related

How to make all website dead links redirect to particular page via JS?

Here's the issue:
Got multiple internal links on the web, still not connected to actual html files.
Im working with local files for the time being
Wanna make js redirect all of the dead links to one particular page (let's call the file: 404-error-page.html) up until I will finish the rest of html files to make those dead links active again
Purpose: wanna keep user away from seeing 404 blank page and instead show em some temporary page (404-error-page.html)
Sorry if that's messy - 1st time adding a question here.
HTML
<html><body><a href="random-link-directing-to-a-non-existing-page"></body></html>
JS
$('a').on('click', function(event) {
var $element = $(event.target);
var link = "404-error-page.html";
if(result.broken) {
if(result.http.response && ![undefined, 500].includes(result.http.response.statusCode)) {
event.preventDefault();
document.location.href = link;
}
}
});
I've already tried some alterations of this code but it's not working for me.
Firstly, need to make this functional on local files and then ofc online.
Any ideas?
Set the data-dead-link attribute to all your unfinished link tag as the follow.
Correct Link
<a data-dead-link>Dead Link</a>
<a data-dead-link>Dead Link</a>
Before the </body> tag insert the follow script
var deadLinks = document.querySelectorAll(`[data-dead-link]`)
deadLinks.forEach(el => {
el.href = "404-error-page.html"
})

AJAX back button

I've been reading about history.pushState and popstate but for a web-page that's populated with mostly AJAX requests (say a book store that allows users to add items to a cart), is there a function with the history object or something similar, that can rewind these additions?
A simpler representation of this is in the below example. A user clicks on a div and "Shown" appears in the respective div. Below these divs is the text, You have selected [detail]. This changes with respect to the selection and triggering the popState changes the text in the right way.
But the divs still have "Shown". Is there a way to remove these in order as they were added similar to how the line of text changes, or do I have to create a separate function to take care of this - which would be the opposite of the function that added "Shown" to the div?
I've added some function that I've edited in to achieve the above but I just don't like how hacky it is.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='name'></div>
<div class='age'></div>
<div class='sex'></div>
<p>You have selected <span>no color</span></p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$('div').on('click', function() {
var detail = $(this).attr('class');
showDetails(detail);
doPushState(detail);
});
function showDetails(detail) {
var classDeets = '.'+detail
$(classDeets).text("Showing " + detail);
$('p span').text(detail);
}
function doPushState(detail) {
var state = { selected : detail },
title = "Page title",
path = "/" + detail;
history.pushState(state, title, path);
}
function removeDetails(detail) {
var classDeets = '.'+detail
$(classDeets).text("");
}
function checkState(detail) {
var temp = document.getElementsByClassName(detail)[0].innerHTML;
if(temp.length == 0){
showDetails(detail);
}
else{
removeDetails(detail);
}
}
$(window).on('popstate', function(event) {
var state = event.originalEvent.state;
if (state) {
checkState(state.selected);
}
});
</script>
I'm not sure exactly what your use case is, but I immediately think of ajax loaded report and list pages that I do. I encode the options for the report after a "#". It makes the browser buttons work as intended for updating url based and it makes it linkable to others. You then just need to poll the # encoded data to detect changes and update accordingly. Since you use the # (in page link) it doesn't trigger a page load to the server. You just have to make sure that if you use encoded hash data that you don't use in-page links for page navigation. If this sounds like an option, let me know and I can post some helper code for setting it up.
Without more context, it's tough to rewrite your code. That said, you need to use history.replaceState() instead of history.pushState().
history.replaceState() modifies the state of a history entry. From MDN: "replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action."

HTML multiple onclick events not occurring when I want

When the user clicks read more, I want the page to change to the new page (News.html) and then scroll down a specific amount so that it lines up with the article, but what's happening is that when you click read more, the page lowers a specific amount and then changes to the top of the news.html page
<article>
<h3>Is Joe Hart right for Torino?</h3>
<img src = "News_Images/Joe_Hart_Torino.jpg" alt = "Joe" width="225" height="150">
<button class = "btn btn-block btn-primary" onclick ="Change(); scrollWin();">
<p>Read</p>
</button>
</article>
<script>
function Change(){
document.location.href = "News.html";
}
</script>
<script>
function scrollWin() {
window.scrollBy(100, 175);
}
</script>
You can use fragment for instance #content. Put in appropriate place on the
News.html page and update your function to something like
function Change(){
document.location.href = "News.html#content";
}
Btw when you click only one onclick event occurs it's not supposed to occur multiple events and in your case both functions are executed, just moving takes time and you see scrolling first. Using scroll with hardcoded value is not good idea, you'll need to update it every time you update content of News.html
**UPDATE**
procrastinator is right, see comment below, just use anchor if it's applicable for you.
When you move to another page, javascript reloads and does not continue execution from where you left off.
A solution to your problem could be using a request parameter.
Change your function to this:
function Change(){
document.location.href = "News.html?scroll=yes";
}
And in your News.html page, add this code to the page's onload event:
var url = new URL(window.location.href);
var param = url.searchParams.get("scroll");
if (param == "yes")
window.scrollBy(100, 175);

How to refresh DOM after changing data attribute

I'm coding little CMS for translations of static pages to many languages. It dynamically refreshes and loads translations etc, but I've got a few bugs which I cannot fix. One of them is when you try to preview page of id 1, but before you were editing page of id 2, it always redirects you to preview of page of id 2.
That's my button in template:
<div class="edit-template-container">
//other code
<button id="a-preview" href="#" class="btn btn-block" target='_blank'>
Preview template
</button>
</div>
And it's function to load preview in new window:
$('#a-preview').on('click', function () {
var pageId = $('#language-choice-select').data('page-id');
console.log(pageId);
window.open('/main/staticPages&staticPageId=' + pageId, '_blank');
});
Then I've read some articles about event-delegation and assumed it could be my problem so changed that code to:
$('.edit-template-container').on('click', '#a-preview', function () {
var pageId = $('#language-choice-select').data('page-id');
console.log(pageId);
window.open('/main/staticPages&staticPageId=' + pageId, '_blank');
});
But it stills redirects to page of id 2 if it was edited before. In DevTools Elements I can see that data-page-id is changed, but console.log always prints for example id: "2" if it was edited before.
Data 'page-id' attribute is changed when I choose page to edit in table, on function which looks like that:
$('table').on('click', '.edit-table-btn', function () {
var pageId = $(this).data("page-id");
//the rest of code
$('#language-choice-select').attr('data-page-id', pageId);
});
What should I do to change page-id data-attribute dynamically in DOM? What should I know about this, are there any fine articles?
Please refer to this existing post:
jQuery Data vs Attr?
Basically, when you use data() on a node, jQuery sets the value on the node object, not on the DOM element.
So, I suggest you to use attr() both to set and to read the value.

Load javascript in html within content pane

I have an html file that I want to be loaded from various pages into a dijit.contentpane. The content loads fine (I just set the href of the contentpane), but the problem is that javascript within the html file specified by href doesn't seem to be executed at a consistent time.
The final goal of this is to load an html file into a contentpane at an anchor point in the file (i.e. if you typed in index.html#tag in order to jump to a certain part of the file). I've tried a few different methods and can't seem to get anything to work.
What I've tried:
1.
(refering to the href of the dijit.contentpane)
href="page.htm#anchor"
2.
(again, refering to the href of the dijit.contentpane -- didn't really expect this to work, but decided to try anyways)
href="#anchor"
3. (with this last try inside the html specified by href)
<script type="text/javascript">
setTimeout("go_to_anchor();", 2000);
function go_to_anchor()
{
location.href = "#anchor";
}
</script>
This last try was the closest to working of all of them. After 2 seconds (I put the delay there to see if something in the dijit code was possibly loading at the same time as my javascript), I could see the browser briefly jump to the correct place in the html page, but then immediately go back to the top of the page.
Dojo uses hashes in the URL to allow bookmarking of pages loaded through ajax calls.
This is done through the dojo.hash api.
So... I think the best thing you can do is use it to trigger a callback that you write inside your main page.
For scrolling to a given position in your loaded contents, you can then use node.scrollIntoView().
For example, say you have a page with a ContentPane named "mainPane" in which you load an html fragment called "fragment.html", and your fragment contains 2 anchors like this :
-fragment.html :
Anchor 1
<p>some very long contents...</p>
Anchor 2
<p>some very long contents...</p>
Now say you have 2 buttons in the main page (named btn1 and btn2), which will be used to load your fragment and navigate to the proper anchor. You can then wire that up with the following javascript, in your main page :
<script type="text/javascript">
require(['dojo/on',
'dojo/hash',
'dojo/_base/connect',
'dijit/layout/BorderContainer',
'dijit/layout/ContentPane',
'dijit/form/Button'],
function(on, hash, connect){
dojo.ready(function(){
var contentPane = dijit.byId('mainPane');
var btn1 = dijit.byId('btn1');
var btn2 = dijit.byId('btn2');
btn1.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor1");
});
btn2.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor2");
});
// In case we have a hash in the URL on the first page load, load the fragment so we can navigate to the anchor.
hash() && contentPane.set("href", "fragment.html");
// This callback is what will perform the actual scroll to the anchor
var callback = function(){
var anchor = Array.pop(dojo.query('a[href="#' + hash() + '"]'));
anchor && anchor.scrollIntoView();
};
contentPane.on("DownloadEnd", function(e){
console.debug("fragment loaded");
// Call the callback the first time the fragment loads then subscribe to hashchange topic
callback();
connect.subscribe("/dojo/hashchange", null, callback);
});
}); // dojo.ready
}); // require
</script>
If the content you're loading contains javascript you should use dojox.layout.ContentPane.

Categories