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();
...
Related
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
I am Using Ignite UI Control I am facing a sorting issue
Let me explain the scenario
I am opening an igDialog and in that dialog box I am opening a Grid view using igGrid which looked like below
Fig(1)
For the first time it working fine now when I click on each column is grid sorting is executed once but when I clicked on the add button the I replace the the dialog contents with the add content now this dialog box will be look like that.
Fig(2)
When click on the cancel button Above it again load the content of listing view and show Fig (1).
The problem I faced is actually when I clicked on any column it called the sorting function twice and it hit my controller action twice.
No of times I go to add view and then back to list view it called sorting multiple times.
Now I don’t know what's happening here ?
Note : I am using $(gridId).igDialog("content", html); to loaded content dynamically
It would be better if you can include the code which handles the view changes inside the dialog. What you're describing sound like grid events are attached multiple times on the same elements. If you're not disposing the grid, or attaching custom events every time it's shown, then this would be the result.
I will update the answer to be more concrete once you include the code in the question.
Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).
I tried successfully to disable every input and select in my page:
$('input').prop('disabled',true);
$('select').prop('disabled',true);
But in my page I have two picklist, the second one is dependent from the first in SFDC.
And when I disable every select, the dependent is not disabled.
I try to hide it, but it doesn't work either!
It only works from the Console, but I need to put these controls in a Js function.
I've found that dependent picklists are not rendered on the page in time for code in a ready function to affect them. The only way I've been able to make changes to the dependent list is to do it in a setTimeout method that fires in 1000 milliseconds or so. It's not ideal, but it does seem to work.
I am developing a webpage with different divs which are located in different files.
I have my index.html with several links. Every link is placing a different div from a file into the body of the main file.
OnLoad() event happens only when the page first loads.
My problem is that one div has a form with input fields. When I click on save, I open a confirmation page which is on another div.
I need to put the values inside the fields before the user is clicking to save the details but I don't have any event that triggers in order to perform the initialization of the elements.
To simplify my problem:
I have index.html with a link.
When clicking on the link it opens a div from a file named form_div.html.
form_div.html has a form with input fields and a continue button.
When clicking on the continue button it opens another div from a file named confirm_div.html.
The values from form_div.html need to be set into the labels in confirm_div.html
At this step I am not aware about any event that happens in order for me to set the DOM elements with the values from the URL.
Note: I am NOT looking for something with JQuery.
If what you're looking for is something like a kind of "rolling" on-load event, that will fire every time the DOM is injected with new content, I regret to tell you it doesn't exist. If you're already listening to the onclick event of the links (in order to retrieve and inject the new div) then why can't you just do what you need to do there as well?