I have an "article" page where the selected article is displayed by default and another articles are ajax-appended to the bottom after clicking on "next" button.
Every article has its own FB share button.
I can reinitialise all the buttons by FB.XFBML.parse(); command, but the existing buttons disappear for a short moment during reinitialisation.
Is there a way to reinitialise only last appended button or somehow to prevent visual disappearing of the buttons?
(Btw. this issue does not apply to twitter button, which can be reinitialised by twttr.widgets.load(); command)
FB.XFBML.parse() function takes a parameter with selected DOM element. Then it will only reinitialise share buttons that are present in the DOM element:
var buttons = newblog.find('.share-buttons')[0];
FB.XFBML.parse(buttons);
Related
I'm having an issue right now with getting the right element for a variable.
Here is what I want to accomplish
When a user click on a link from the sidebar, I want the following info :
Click text
Click URL
Click ID
Click Element
Click Classes
Page URl
At this moment I can have all but Click Classes which is empty ""
But I also want when I click the link or the button, I also want the title that is in the elementor container.
Image link : https://i.imgur.com/NoDv2wh.jpg
I already setup my TAG and Triggers
So I tried following some of the info I found one the forum, but clearly I have no idea how to accomplish that and I search a lot on Google without clear indications.
Here the code for my custom JS
function() {
return {{Click Element}}.closest(".elementor-widget-container").find('h4').text();}
Right now, I just want to be able to create a custom variable to get the header text when I click on a button or a link.
How do I make a panel refresh or load on button click in extjs?
I want to revert all changes in panel color to the default when I click the button go, next, or previous.
There are multiple options :
1. Get the reference to panel and delete it, then Ext.create('panle-class').Place this in place of destroyed panel.
2. Get the reference to panel change its styles to intended ones.
I've got a rails app using bootstrap with a form page that has the option to add additional form fields. The tutorial from this Railscast episode heavily influenced this form page add fields feature. I have a need to watch the add fields so that I can hide a warning panel in the new well created. Here is the code that will not work(in coffeescript):
$('#classifications_forms').on 'change', (event) ->
container = $('.classifications_form').last()
$('#premium-divide', container).hide()
Here is the code in jquery:
$('#classifications_forms').on('change', function(event) {
var container;
container = $('.classifications_form').last();
return $('#premium-divide', container).hide();
});
I have tried an on click event for the add fields button, but it's late in the event watching as it will not hide the panel. If I hit the button a second time, it will hide the panel on the previously created well, so I know the code was working to hide the panel. My thinking is to hide the panel on the last well created, and I thought that a change on #classifications_forms would give me the event needed to hide the last well, but I guess its missing something on the event. What is missing above?
Here is a jsfiddle demonstrating the problem.
Because I was using bootstrap, I found a class to apply to the panel which took care of my problem:
.hidden
I have an option in my page where in I can add new div on button click.
But when ever I add new div the page scrolls back to top, instead of staying focused on new item.
How can i make page stay focused on newly added div??
You can use .focus().docs are here.hope that helps.
As if that button is created using <a href="#"> tag then whenever you click on it due to href="#" it will automatically go to top of the page.
So you need to give either "ID" of that new appended DIV or "javascript:;".
If you passed ID of the DIV then that DIV focused and if you given "javascript:;" then that page will be there only it will perform the action whatever the action function written on click of it.
OR
If that DIV is loading after some service call then you need to handle it through JS you can use event.stopPropagation() function.
If that button is simple <button> element then add an attribute "type" as <button typr="button"> default type is submit so some times its perform some action if that button is included in some <form>
I am assuming the scenario because that Js Fiddle link is not accesible.
Hope it will helps.
My app deals with Tags and Films entities: Many-to-Many relation. Joining entity is named as "tagazation". I want user to be able to add tags to each film in modal window.
So I render hidden modal window to page for each film in the index action. The problem is in tag_id field:
I have twitter bootstrap's typeaheaded textfield in each forms. All these fields share common class "tags-input". On select event in textfield fires the set_id function:
$(document).ready(function() {
function set_id(item, val, text){
$(this).parent().children("#tagazation_tag_id").val(val);
}
$(".tags-input").typeahead({
source: [],
itemSelected: set_id
});
});
set_id function is supposed to change PARTICULAR hidden field in the same form as a textfield that fired that callback, but there are multiple hidden fields for tag id. That of course wouldn't be a big problem if we knew for what film exactly that set_id function is fired up.
I believe, that there is should be a "standart" way to cope with this propblem instead of my still-not-working browsing thru the DOM tree search.
If I understand what you're trying to do, I think the easiest solution would be to render only one hidden modal dialog to html instead of one modal dialog for every movie. Right before you open the modal, you can use javascript to set whatever text is needed to make the modal refer to the movie that was clicked.
If you only have one modal dialog, you can just refer to the hidden tag id field as $('#tagazation_tag_id'), with no confusion as to which input it refers to.