Bootstrap Popover Reinitialization (To refresh Content) - javascript

So i managed to find a way to do what i want, but I'm not sure it's exactly the smartest and most efficient way....
What I'm currently doing is using a popover to show whether or not the user has met the password conditions to set a password. Because there are 5 fields, i decided it would be easier to create it in a hidden html (using the hide class), and then use JQuerys .html() to provide the content to the popover.
This worked, until i attempted to refresh the content while it was still open. I looked at several solutions after i couldn't figure it out by myself, and one of them recommended to use the .popover('destroy'); and then show it again with the new content. However this requires that you reinitialize everything else as well.
There were other solutions, but they appear to require you to use the data- attributes method of initialization, which i couldn't figure out a nice way to do (Because i wanted to create the content in the html while it was hidden.)
Since i couldn't find any working solution, i went with reinitializing everything, so i created a basic JavaScript function, and call .popover('destroy');, reassign everything, and the call .popover('show');, Then call this function whenever i want to update the popover's content.
I was wondering if this is the most efficient way of updating the content of a bootstrap 3.0 popover, that has been created from JavaScript...?

Related

Best way to display a popup container with lots of data

So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.
In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!

Advanced Custom Fields - Toggleable Options for the Backend?

I'm building a website using the ACF plugin (Version 5 Pro), and I'm setting up a button on a page template, which by itself isn't the problem. The problem is that depending on the specific content of each individual page using that template, the button can have one of several different appearances. What I'm trying to do is set things up so that I can upload all the buttons into the default value section of the ACF field ahead of time, and then every time I make a new page using that template, simply select the appropriate button from a radio button, a dropdown menu, or something similar on the backend of the page. I plan to be constantly uploading small amounts of content using this template, so not having to manually select the appropriate images on each page would save me a lot of time.
I've googled around and there wasn't a good answer I could find anywhere, so I'm hoping one of you more knowledgeable folks could help me out!
(And before anyone proposes this as a solution, no, the content of each page isn't something I can define just using programming. It's a little more abstract and needs human input. If all else fails I can just make multiple templates and simply select the appropriate one when I go to make a page, but the way I'm trying to do it now would be a lot cleaner).
You can try ACF Flexible Content:
https://www.advancedcustomfields.com/add-ons/flexible-content-field/
Using Flexible Content field, you will be able to create multiple fields (button 1, button 2, etc) including a WYSIWYG editor and build the buttons HTML adding the default value of the field.
You can read:
https://support.advancedcustomfields.com/forums/topic/html-default-values/
However, I think you'll get in trouble making your buttons dynamic with this approach... so I'd suggest it will be better if you keep some parts of the buttons (like URLs) dynamic, using an extra field to enter the URL, anchor, etc.

jQuery UI dialog remembers the first submit

I am trying to create a simple, non-WYSIWYG bbCode editor using jQuery. My approach is to make it modular, so that I can separately add different buttons with different actions to the editor toolbar. However - as a beginner in JavaScript -, I am facing with a problem.
Here is the simplified version of my code, which still produces the bug.
The dependencies
jQuery core
jQuery UI
jQuery selection plugin
a HTML page which has a <textarea> of the bbEditor class, like this one
The problem with the dialog
The bug is somewhere around my showUrlDialog() function. First time, after the page loaded, the insert URL action works fine. But at the following attempts somehow the dialog remembers the first-time given values, and inserts them instead of the currently given values.
My assumption is that the dialog object stays in the DOM, but I don't understand, how. It should disappear as the containing showUrlDialog() function ends.

Need help making a design decision with jQuery tabs

There will be a list of "plans" that the user has, and I want to be able to click on any of them (separated by divs) and have its information dynamically loaded from the database.
My question is whether I should use a jQuery tab interface and load the content that way, or a button which triggers an ajax call? Is there any easier/prettier way to do this that I'm not thinking of?
Thank you for any help, it is much appreciated!
There are many existing solutions online . You can roll your own too . Here are some samples which has many with AJAX content loading . You can either use existing or change then as you need.
http://flowplayer.org/tools/demos/tabs/ajax.html . You can change .html to your own php,asp ,jsp what ever pages and pass plan id and page can return HTML .
http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
I used the jquery-jvert-tabs plugin for something very similar. Each tab had its content dynamically loaded and the whole div was called via ajax, it worked pretty well together.
Talking about which one is prettier, it doesn't matter whichever you choose if you just make sure is cohesive with your overall design :)
I would use tabs- no need to have a separate button if the plan name can be the tab name.
Design should almost always focus on usability and it seems like this approach would serve that goal well.
If your list of plans; however, is dynamic or can grow overtime then I would go with a dropdown populated with the list and a button that gets the details or wire up on onchange event and get the data.
The question is a bit vague so maybe if you provided more information we could better help you here.

Dynamically change a value on a asp.net page without actually refreshing it

I have a label, let's call it LblA. I have a SqlDataSource, let's call it sds. Now, I have selected out and managed to get specific values using the select function. I want to set LblA's text to the value selected out of sds. I need this to occur every 5 (or as many as I specify really) seconds. I orignally used a timer object, however, for any of you who have used the timer object before, it likes to refresh the page, this makes it very hard to navigate off of the page; not only that, it's sloppy. Does anybody know a way to easilly update LblA's text from sds without refreshing the actual page.
I've read around and came to the conclusion that I need to use ajax, err... jQuery. However, I really don't know anything about the two except that they are both Javascript libraries? I need a simple way, you might even have to explain it to me like I'm an idiot.
I'm using VB.net and ASP.net just so you know.
Thanks so much!
If you want it simple use UpdatePanel If you want more control and efficiency, use jQuery's Content

Categories

Resources