addthis share button not working when I open the modal twice - javascript

I'm using addthis share button in my website, but the click of the button is in a modal that is loaded dynamically, so when the modal html is loaded, I call the script of addthis this way:
var addthisScript = document.createElement('script');
addthisScript.id = 'addthisscript';
addthisScript.setAttribute('src',
'//s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript);
So, when I open the modal at first time, it works!
But, if I close the modal and open again and click the button to share again, it just reload the page.
After reloaded the page, starts to work again, but just once.
I already try remove the script from DOM and create again, but still doesn't work!!
When the modal is closed, I remove the entire HTML, this way:
$(`#${id_modal}`).on("hidden.bs.modal",() => {
$(`#${id_modal}`).remove();
}
And every time that I open the modal, I call the function addthis() that create the script above.
Any help?

Related

Know which button pressed led to this page

I have a menu with ~6 buttons, each that lead to the same page.
In that page, there is a drop down menu.
The purpose of the 6 buttons is that when one of those buttons is clicked, the page is redirected, and then the drop down menu opens to the correct tab.
However, all scripts are killed when a page is redirected, so I cant do something like this:
<body>
<a id="buttonID" onclick="GoToPage('buttonID')">All</a>
</body>
<script>
function GoToPage(buttonID){
redirect to page.html;
open menu to tab related to buttonID
}
</script>
Instead I would probably have to create a function that executes when the page loads, and then attempts to find from which button did it get there from, and opens the menu to the correct configuration based on that.
Should I use something like:
window.onload = ....
And how would I be able to pass which button redirected the page to this?
Opening the dropdown menu should be the responsibility of the destination page, not the source page. Since the server doesn't care about the dropdown menu state, send that information in the fragment identifier:
<a id="buttonID" href="page.html#all">All</a>
On the receiving end, you can retrieve the identifier with
document.addEventListener('DOMContentLoaded', (event) => {
let target = window.location.hash; // target = "#all"
// modify your menu as appropriate
});
The load event doesn't fire until the page has completely finished loading: images, stylesheets, everything. Modifying the dropdown menu doesn't require any of that, so use the DOMContentLoaded event instead. It fires when the HTML page has been loaded and parsed and is ready for DOM manipulation.

failing to add a close button into a jquery load function modal

I have a modal box that loads a full PHP page using the jQuery load() method,
I was wondering how can I add a close button that close to the modal after the call and refresh the load request every recall to the function.
the code:
$('body').on('click','#more',function(){
var i = $(this).data("info");
$('body').append("<div id='modal_box'></div>");
$('#modal_box').load('post.php?info='+i);
});

Destory CSS Bootstrap Modal

I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.
You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();
Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.
A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>

Open link in same page and once link is open, execute some code

I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...

How to redirect to a specific page from a JS displayed page in asp.net

I have an asp.net application with master page. In one of the pages I have a button click event which opens another page using javascript as shown below.
string urlVerify = "VerifyEnrollmentEntries.aspx";
string fullURLVerify = "var newVerifyDataWindow = window.open('" + urlVerify + "','_blank','height=600,width=950,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,titlebar=no' );
ClientScript.RegisterStartupScript(this.Page.GetType(), "OpenWindow", fullURLVerify, true);
This popup page doesn't have a master page. This is just a stand alone page, but part of the project. When the user clicks the close button on this popup page, I want to close this page and redirect to a specific page in the asp.net. Right now when the close button is clicked, the page closes and the parent page which caused the popup is shown.
Before closing your popup, execute JS code:
opener.location.href = "YourRedirectUrl.aspx"
It will redirect parent to that URL

Categories