update javascript in updatepanel - javascript

lets say I've got a function that iterates over an array. The function is outside the updatepanel, the array is defined within the update panel. The items of the array are dynamically created. On the first try I've realized, that the values of the array do not update when the update panel loads again.
Would be glad if someone can provide a solution for this.

Step one: Remove that update panel. Replace it with a proper AJAX call. Update panels will murder your performance and create all manner of maintenance headaches. I am in a world of pain thanks to our dev team using update panels as a way to get AJAX on the quick and dirty.

Related

How to manipulate precise element of an array with redux

Today,I tried to make a list with redux where you can add and remove elements as you want visible here. My list is in fact an array updated every time user click on "Add to the list" or "Remove last added element".
Now I try to do one thing but I don't know how to do it. Indeed I what I wanted to do is, if for example the user try to add Tristan again, the FromControl with Tristan became 'sucess' (I use bootstrap too) but I don't know how to reach this element precisely, because if I used a variable in my reducer and i said the style of my FromControl depends of the state of this variable, every FormControl will become 'sucess'.
Thanks in advance for your help :)
(Sorry for my english level too)
You can use Array.prototype.findIndex() to get the index of the element in your array and work your way up from there.
I see as well that you have a lot of warnings in the console, I suggest you to add the key in your components when inside a foreach and move the setState calls to componentWillMount or another appropriate place.

cfselect bind and jquery on events clashing

I am using <cfselect>'s bind attribute to bind load a list of states. That bind is associated with another <cfselect> which loads associated cities. Those two work fine.
Now I need to add a third select list. When the first cfselect is changed, I want to pass the value of both cfselect's to jQuery, to load a third list. The third list is a plain html <select>. This is basically a old inherited code so I know mix of both things is a bad idea.
So here is what is happening. The first calls go fine. It passes the correct cityid. The next time I change the state, its state changes through cfselect, but it passes the old cityid rather than new one. This creates an issue for the third drop-down, which does not load the results.
So basically the structure is like this:
First cfselect bind loads states
Second cfselect bind loads the cities based on the stateid passed
Third select gets the state and city values from the first two cfselect's to load zip codes
Now the jQuery code:
$(document).on('change',function() {
var a = $("#cfselect1").val();
/*
The next line seems to be a problem area. It always fetches
the old cityid. Maybe due to the ext js bind is loading
later than jquery being first
*/
var b = $("#cfselect2").val();
$ajax({ajax code here})
});
I hope I made a question clear.
As you've already au fait with jQuery and can use it, rip the <cfselect> out completely and do the whole lot with a vanilla <select> and jQuery's .ajax() method. This way you remove the clashing.
You have basically run up against the fundamental flaw of using ColdFusion's UI wizards: they are poorly written and do not inter-op with other requirements at all well. <cfselect> is not designed to be implemented in conjunction with other JS technologies. It's basically an evolutionary dead end (and the dead end occurred about ten years ago).
Here is some guidance for ripping out <cfselect> out: "CFSELECT-CHAINED"

Destroy typeahead after the menu has been closed

I have a searchbox on which I initialize typeahead when I click on it, to some data from the server. Depending on the current page, I need to show/hide a footer in the search dropdown.
I went for the approach to destroy the typeahead and then recreate it, according to my needs. In this way, I also refresh the data from server, in case there's something changed.
For destroy I use this this.$("#searchQuery").typeahead('destroy'); right at the top of the function that needs to initialize the typeahead, but the problem is that the menu is not destroyed. If I look at the dom, there are 4-5 or even more typeahead menu created.
So my question is, how can I properly 'reinitialize' a typeahead menu?
I forgot to mention I am using twitter typeahead
You don't need to reference jQuery via this like you showed here
this.$("#searchQuery")
You should just do
$("#searchQuery").typeahead("destroy");
Without seeing more of an example I would say your problem might be because this inside your function is being bound to a different object than the one you were expecting.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Your line is inside your function so you can not guarantee that this will be Window and you have no need to use it in this case.
If this is not the problem then please provide a full html and javascript example, preferably on JsFiddle.

How to Group IDs and call them with Jquery

Is there a way to group div IDs that are scared across multiple pages but get to be called to the same page at some point with Jquery.
I want to hide or show all the divs in a group while showing only a certain group. The reason some group gets to be included in other functions and writing all the list of this many div IDs is somehow not wise.
2nd question.
How do I program a button to reload page and then after run a function with jquery?
ok let me add some code to make sense of this reload problem.
$('#accountresult').click();
location.reload(); //Should reload page 1st and then function
$('#button').show("slow");
$("#Atresult").load("source_cxchange.html #account");
$("#result, #homeresult, #appleresult" ).empty()
});
but rather, it only runs reload and dies, someone please correct the syntax of putting two functions to successively follow one another.
My advice would be to group them using a class rather than a collection of ids. That way you can target them all at once with:
$('.someClass').hide()
As for reloading the page and running a function afterwards that gets a bit trickier can you explain what you are trying to achieve?
When you refresh the page you lose the javascript callstack so you will have to set a querystring or use cookies/local storage to persist a value. You can then use jQuery's onLoad() function to run your function only if the url parameter or cookie exists.
1) Assign some class to those ids and use $('.someclass') to refer them.
2) To reload page, you will need to call 'location.reload();'. then you can do whatever you should in $(function() {});, which is called whenever page is loaded.

Angular.js change on one item of ng-repeat causing filters on all other items to run

I'm still running into the same problem, filters and functions inside ng-repeat being called all the damn time.
Example here, http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview, anytime you change something on a single row, someFilter filter is called 1000 times.
Apparently it's because any change on a child scope bubbles up to its parent, causing $digest to run, causing all filters to run(https://stackoverflow.com/a/15936362/301596). Is that right? How can I prevent it from happening in my particular case?
How can I make it run only on the item that has changed?
In my actual use case the filter is called even when the change is not even on the items of ng-repeat, it's so pointless and it is actually causing performance problems..
// edit cleared all the unnecessary stuff from the plunker
http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview
This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?
From another answer:
This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
And the answer it references: How does data binding work in AngularJS?
Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.
You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/

Categories

Resources