I am using a calendar widget that uses jQuery's load() function to populate the content of the event modal. The example can be found here.
For the purposes of my calendar system, the modal content is generated on the same page as the calendar, where as the example has the modal content in a separate file.
The function that populates the modal is this:
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
where the .attr('data-content')+'.html .event-info > *', is the content in the html file.
For my project, I have the modal content in a div with a PHP generated ID like so:
<div id=\"shift-".($i+1)."\" class=\"event-modal-content-form\">
<p>This is the modal content</p>
</div>
The event-modal-content-form class is a simple class that just hides the div so it doesn't obstruct the calendar formatting.
So, I need to change the javascript to populate the modal with the content of this div rather than what the code is searching for now, and I've tried several different methods.
Right now what I have is:
this.modalBody.find('.event-info').getElementById(.attr('data-content')), function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
But I get an unexpected token error for the .attr in getElementById()
Any pointers in the right direction would be immensely helpful.
Related
I am using AJAX to render javascript partials using Ruby on Rails 5.3. How can I reference the element within in which it has been rendered using javascript/jquery, once the render is complete?
I have various form partials that are rendered in a single element stored in the footer. Previously I have referenced some javascript in the bottom of my form partials which initialises the modal.
I now want to have two different types of modals, with the possibility of having both open at once. With the creation of the second modal wrapper I now need to work out how I can initialise the correct modal (I may open a modal within a modal, and so must avoid re-initialising an already open modal).
Any help would be great! Thanks all.
I render the partials with the following code: these occur separately as different requests.
$('#modal_partial_normal').html('<%= escape_javascript(render('form1')) %>');
$('#modal_partial_footer').html('<%= escape_javascript(render('form2')) %>');
The JS that initialises the modals follows the documentation from Materialize here.
$("#modal_partial_footer").modal("open");
And the HTML:
<div id="form_modal_wrap">
<div id="modal_partial_footer" class="modal bottom-sheet modal-fixed-footer">
... partial rendered here ...
</div>
<div id="modal_partial_normal" class="modal modal-fixed-footer">
... partial rendered here ...
</div>
</div>
The JS is working for a single type of modal, but I currently render every modal as a 'footer' modal type so I just trigger it after any rendering of a modal partial. I would like to be able to render some as footers, and others as normal modals. I need to open the normal modal, from the footer modal.
Attempts at a solution
I am trying to work out when a modal has been rendered and initialise the correct type - i.e. the footer or normal type.
Checking for the successful completion of the AJAX request triggers just once, when I would like it to, but I cannot tell which element it has been rendered within.
$('a[data-remote="true"]').on("ajax:success", function(evt, xhr, settings){
console.log("AJAX request successful");
});
Recognising changes to the DOM tree doesn't work as it fires too often and the initialisation fails, although it does let me tell which element has had the partial rendered within it.
$("footer").on('DOMSubtreeModified', "*[id^='modal_partial']", function() { ... });
I am trying to show a bootstrap modal with dynamic content so one of the values being passed to the modal is the HTML to be shown in it.
My problem is that in the HTML content being passed, I have a script tag that returns an object on execution, so when the modal is shown the script tag is not being executed.
Is there any way I can execute the script tag before the modal is shown so that I get the object in he HTML before I pass it to the modal?
Hello you can use the below events :
//The dropdown is about to be shown.
$("#selectGroup .dropdown").on('show.bs.dropdown', function(){
});
//The dropdown is now fully shown.
$("#selectGroup .dropdown").on('shown.bs.dropdown', function(){
//your code here
});
Of course you change the DOM elements to fit yours.Hope helps good luck.
I have a few data items that are displayed in card view of bootstrap table plugin as seen below:
At the bottom of this card, I want to add a custom fb share button that uses information displayed in the card and posts that on Facebook.
So far, I have added the Facebook Javascript SDK at the top of my HTML document and the following code after my closing body tag within a new script tag:
$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});
Since the Bootstrap table plugin utilises AJAX to fetch database contents, I am thinking of adding a button field in my database that hold the following record:
Share
However, even though the share link is displayed, it doesn't open the familiar Facebook share popup, how do I make that open with my custom content?
Since your updating the content of your table dynamically, you need to have delegated event handler, which can be achieved using jQuery's .on().
JQUERY COODE:
$('<selector of static parent element>').on('click','.btnShare',function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});
The target selector has to be the selector of the element which will contain the table content being added dynamically later.
More info # Jquery api page...
Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/
My store's collection pages have the quick-view feature where hovering over products images allow you to click 'Quick View' to open a modal dialog window with summary info about the products. This is done with the leanModal plugin.
See: http://froy.com/collections/beds-mattresses for example. Store is powered by Shopify.
The problem is, when the page initially loads, all the elements within the modal are loaded despite being hidden. This unnecessarily slows down the site. I'd like to load the contents within the modal only after the user clicks on 'Quick View.'
<div class="quick_shop"> <!--This is the modal trigger-->
<div class="quickview-text">Quick View</div>
</div>
<div class="modal">
<!--All contents of the modal dialog window go in this div-->
</div>
Script:
$('.quick_shop').leanModal(); //Calls the function on the modal trigger
(function($){$.fn.extend({leanModal:function(_1)...});})(jQuery);
//The above line of code is for leanModal. I didn't paste entire thing cause it's long
Any help would be much appreciated! I'm new and learning so this is all very exciting.
The purpose of the modal div is to have a precise view on one specific element.
In your case (on the webpage you provided), the modal is loaded for each element, which breaks the sense of what you're trying to achieve.
I've never used the leanModal plugin but I guess you could try doing the following:
When the "Quick view" is pressed, find the closest element with jQuery .closest() method by searching the element with class .quick_shop, THEN leanModal that single element and display it:
$(".quickview-text").on("click", function(e){ $(this).closest(".quick_shop").leanModal(); //Then display it with .show() if it's hidden by default });
Once the modal is closed you can delete the element instead of hiding it with the jQuery's remove() method.