I'm using the tooltipster plug in, and using AJAX to reload a section of the page.
I have Tasks in a div that are dynamically generated in a list, each task has a 'complete' button next to it, which when clicked loads a tooltip, which works great.
When I then run a function to add a new task, I am taking the div of the task list and reloading it, so the newly made task shows up.
As the whole div reloads, the tooltips attached to all of the tasks then disable and stop working.
Any ideas on how I fix this?
Thanks
Related
I have created a JS Viz in Spotfire using Datatables.js
I want to navigate to another page, by clicking on a number in the table (each column corresponds to a specific page/tab in spotfire)
I know that navigation can be done by triggering a script , but thats usually bound to an action item having a "spotfire id"(uniquely generated).
I'm totally lost on how I can achieve this, can anyone give me a direction to work on?
Ok, I'll try to explain this as best as possible.
I have a main html page with a dropdown. When the dropdown is clicked, the jquery loads another external html into a DIV on the page. There are a couple of dropdown items, so 2 different external htmls are being loaded into the same DIV depending on which dropdown selection was made. That works fine.
The issue I'm having is that on the additional html files that get loaded, I have some jquery that updates labels based on buttons or links clicked in the page. Everything works fine till I use the main dropdown to change the page/div selection, and then any jquery inside the additional HTML files seems to act multiple times, with the # of times equaling how many times the dropdown has been selected.
So for example, if I select "users" from the main dropdown, it loads an html with a list of users where I can remove or add new users and then add some groups to that user. The first time I load this template, things work fine. If I go back and reselect "users" from the main dropdown, now whenever I add a group or click a link to make user changes, it acts as if I have clicked it multiple times. If I reload the entire main page, this issue stops till I reselect the dropdown again more than once.
Is this an issue somewhere with jquery or could it be some other bug?
The fix was to add event.stopImmediatePropagation(); inside the click handler in the div template.
$(document).on('click',"[name=removeCategory]",function(event) {
event.stopImmediatePropagation();
...
I am really new to all the AJAX stuff and now I wanted to convert a small homepage I created with CakePHP to an full AJAX page.
The functions I use are mainly:
View Dashboard with a List of "Book"s
View a "Book"
Create a "Book"
Edit a "Book"
Delete a "Book"
Each function uses its own view and should be shown in a modal. It is important that modals can overlap. In the beginning I added the JavaScript I needed to each view. So AJAX was loading the HTML view (+new AJAX) and displayed it in an modal. I was able to click on "View Book" and then "Edit Book", so two modals would overlap.
This was working fine, but Chrome threw a few warnings because it didn't like reloading AJAX.
So I decided to put all the AJAX logic into the Dashboard View and created an event handler for every possible button that could be clicked. Because my modals might overlap (and I don't know which ones would overlap) I created an empty div for every modal that could occur.
Currently it is working fine, but what if I add way more functionality?
Would I need in my Dashboard View an empty div for every modal that could show up and do I have to load ALL the AJAX functionality when the page is loaded?
Where should I put all the logic? Do I load all at once, even though I might just use a tiny part of the logic? How would I handle many overlapping modals with different content?
I hope you got some advice for me, because I think my solution will make it a big mess as soon as the project grows.
Thanks a lot!
Cheers
A little context on my problem.
I am updating the MathML in this div that is currently displaying HTML. When I load the page the first time, if runs the MathJax script and displays all the MathML perfectly.
When I click "Preview Changes", a button that takes the current changes made in a text area and displays them on the preview div, the MathML disappears.
I think problem here is that refreshing the div doesn't trigger the MathJax script. I have tried $.getScript(), and I tried adding a script using document.createElement(script) everytime the preview changes button is clicked, but all that to no avail.
I was hoping if someone could help me w/ this.
Thank you in advance.
MathJax.Hub.Typeset() is the JavaScript command that can re-render the math content within your page or within individual elements that have been updated by current changes. If you are sure that all typesetting is finished, then you can call it directly, but in general it is good to use the safe way to call it, like this MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
Read more instructions for how to use it here: http://docs.mathjax.org/en/v1.1-latest/typeset.html
For instance, MathJax.Hub.Queue(["Typeset",MathJax.Hub,"previewdiv"]); would re-render the updated contents of the HTML element with an ID of previewdiv after you have updated its contents using your jQuery call.
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().