Search Results

Search found 185 results on 8 pages for 'unbind'.

Page 2/8 | < Previous Page | 1 2 3 4 5 6 7 8  | Next Page >

  • backbone.js removing template from DOM upon success

    - by timpone
    I'm writing a simple message board app to learn backbone. It's going ok (a lot of the use of this isn't making sense) but am a little stuck in terms of how I would remove a form / html from the dom. I have included most of the code but you can see about 4 lines up from the bottom, the part that isn't working. How would I remove this from the DOM? thx in advance var MbForm=Backbone.View.extend({ events: { 'click button.add-new-post': 'savePost' }, el: $('#detail'), template:_.template($('#post-add-edit-tmpl').html()), render: function(){ var compiled_template = this.template(); this.$el.html(compiled_template); return this; }, savePost: function(e){ //var self=this; //console.log("I want you to say Hello!"); data={ header: $('#post_header').val(), detail: $('#post_detail').val(), forum_id: $('#forum_id').val(), post_id: $('#post_id').val(), parent_id: $('#parent_id').val() }; this.model.save(data, { success: function(){ alert('this saved'); //$(this.el).html('this is what i want'); this.$el.remove();// <- this is the part that isn't working /* none of these worked - error Uncaught TypeError: Cannot call method 'unbind' of undefined this.$el.unbind(); this.$el.empty(); this.el.unbind(); this.el.empty(); */ //this.unbind(); //self.append('this is appended'); } });

    Read the article

  • jquery: problem with unbinding mousenter() upon mouseup()

    - by Haroldo
    I'm building an interface for marking dates on a calendar as being booked. The user 'paints' on the dates they want to mark as booked. here's how it looks: here are the functions: function load_red_paint(){ $('td').bind('mousedown', function(){ $(this).addClass('booked'); $('td').bind('mouseenter', function(){ $(this).addClass('booked'); }); unbind_brush(); }) } function unbind_brush(){ $('td').bind('mouseup', function(){ $('td').unbind('mouseenter'); }); $('table').bind('mouseleave', function(){ $('td').unbind('mouseenter'); }); } the problem: My unbind_brush() function works great except for if the user mouseup's outside of the calendar, i tried to fix this my also unbinding on mouseleave of that calendar with this bit: $('table').bind('mouseleave', function(){ $('td').unbind('mouseenter'); }); but with no joy, am i missing something obvious?!!!

    Read the article

  • jQuery Autocomplete: how to refresh list?

    - by cinematic
    I have a form with a variable number of autocomplete fields that use the same select list. These fields are added and removed as needed. Whenever a parameter on the page is changed, I (try to) update the list for all the fields by first calling unbind() then autocomplete() with a new parameter added to the url. $('input.foo').unbind().autocomplete(url?new_param=bar); The problem is that unbind() does not seem to be unbinding. When I type in the input field, it fires off the entire history of autocomplete events. I also tried flushCache to no avail. How do I clear out the old events? Thanks.

    Read the article

  • forward rendering and multiple shadow maps

    - by Irbis
    I have two light sources on my scene. I created two fbo's which store depth textures for these lights. A render loop looks like this: bind fbo1 save depth values for first light unbind fbo1 bind fbo2 save depth values for second light unbind fbo2 enable additive blending bind first depth texture render scene bind second depth texture render scene disable additive blending For one light source the program works fine. For many light sources I use an additive blending to acumulate lighting results but then some objects become transparent (for example when an object which is further away from the camera is drawn before an object which is closer to the camera). How to resolve that problem ? How should I accumulate lighting effects for many light sources (many shadow maps) ? P.S. I use OpenGL/GLSL 3.3+

    Read the article

  • How can I determine/use $(this) in js callback script

    - by Rabbott
    I am using Rails and jQuery, making an ajax call initiated by clicking a link. I setup my application.js file to look like the one proposed here and it works great. The problem I'm having is how can I use $(this) in my say.. update.js.erb file to represent the link I clicked? I don't want to have to assign an ID to every one, then recompile that id in the callback script.. EDIT To give a simple example of something similar to what I'm trying to do (and much easier to explain): If a user clicks on a link, that deletes that element from a list, the controller would handle the callback, and the callback (which is in question here) would delete the element I clicked on, so in the callback delete.js.erb would just say $(this).fadeOut(); This is why I want to use $(this) so that I dont have to assign an ID to every element (which would be the end of the world, just more verbose markup) application.js jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript,application/javascript,text/html")} }) function _ajax_request(url, data, callback, type, method) { if (jQuery.isFunction(data)) { callback = data; data = {}; } return jQuery.ajax({ type: method, url: url, data: data, success: callback, dataType: type }); } jQuery.extend({ put: function(url, data, callback, type) { return _ajax_request(url, data, callback, type, 'PUT'); }, delete_: function(url, data, callback, type) { return _ajax_request(url, data, callback, type, 'DELETE'); } }); jQuery.fn.submitWithAjax = function() { this.unbind('submit', false); this.submit(function() { $.post(this.action, $(this).serialize(), null, "script"); return false; }) return this; }; // Send data via get if <acronym title="JavaScript">JS</acronym> enabled jQuery.fn.getWithAjax = function() { this.unbind('click', false); this.click(function() { $.get($(this).attr("href"), $(this).serialize(), null, "script"); return false; }) return this; }; // Send data via Post if <acronym title="JavaScript">JS</acronym> enabled jQuery.fn.postWithAjax = function() { this.unbind('click', false); this.click(function() { $.post($(this).attr("href"), $(this).serialize(), null, "script"); return false; }) return this; }; jQuery.fn.putWithAjax = function() { this.unbind('click', false); this.click(function() { $.put($(this).attr("href"), $(this).serialize(), null, "script"); return false; }) return this; }; jQuery.fn.deleteWithAjax = function() { this.removeAttr('onclick'); this.unbind('click', false); this.click(function() { $.delete_($(this).attr("href"), $(this).serialize(), null, "script"); return false; }) return this; }; // This will "ajaxify" the links function ajaxLinks(){ $('.ajaxForm').submitWithAjax(); $('a.get').getWithAjax(); $('a.post').postWithAjax(); $('a.put').putWithAjax(); $('a.delete').deleteWithAjax(); } show.html.erb <%= link_to 'Link Title', article_path(a, :sentiment => Article::Sentiment['Neutral']), :class => 'put' %> The combination of the two things will call update.js.erb in rails, the code in that file is used as the callback of the ajax ($.put in this case) update.js.erb // user feedback $("#notice").html('<%= flash[:notice] %>'); // update the background color $(this OR e.target).attr("color", "red");

    Read the article

  • bug in my jquery code while trying replace html elements with own values

    - by loviji
    I today ask a question, about using Jquery, replace html elements with own values. link text And I use answer, and get a problem. function replaceWithValues not works same in all cases.I call this function two times: 1. btnAddParam click 2. btnCancelEdit click $("#btnAddParam").click(function() { var lastRow = $('#mainTable tr:last'); var rowState = $("#mainTable tr:last>td:first"); replaceWithValues(lastRow, rowState); var htmlToAppend = "<tr bgcolor='#B0B0B0' ><td class='textField' er='editable'><input value='' type='text' /></td><td><textarea cols='40' rows='3' ></textarea></td><td>" + initSelectType(currentID) + "</td><td><input id='txt" + currentID + "3' type='text' class='measureUnit' /></td><td><input type='checkbox' /></td><td></td></tr>"; $("#mainTable").append(htmlToAppend); }); //buttonCancelEdit located in end of row $('#mainTable input:button').unbind().live('click', function() { var row = $(this).closest('tr'); var rowState = $(this).closest('tr').find("td:first"); replaceWithValues(row, rowState); $(this).remove(); }); //do row editable -- replaceWithElements $('#mainTable tr').unbind().live('click', function() { if ($(this).find("td:first").attr("er") == "readable") { var rowState = $(this).closest('tr').find("td:first"); replaceWithElements($(this), rowState); } }); function replaceWithValues(row, er) { if (er.attr("er") == "editable") { var inputElements = $('td > input:text', row); inputElements.each(function() { var value = $(this).val(); $(this).replaceWith(value); }); er.attr("er", "readable"); } } function replaceWithElements(row, er) { if (er.attr("er") == "readable") { var tdinit = $("<td>").attr("er", "editable").addClass("textField"); $('.textField', row).each(function() { var element = tdinit.append($("<input type='text' value="+$.trim($(this).text())+" />")); $(this).empty().replaceWith(element); }); row.find("td:last").append("<input type='button'/>"); //$('.selectField') ... //$('.textAreaField') ... } } $("#btnAddParam").click() function works well. it call function replaceWithValues. I call $('#mainTable tr').unbind().live('click', function() { } to do row editable, and it creates a button in the end of row. After user can click this button and call function $('#mainTable input:button').unbind().live('click', function() {}. and this function call function replaceWithValues. but in this case it doesn't work.

    Read the article

  • Jquery menu with less code

    - by Sergio
    I'm using Jquery for menu created like: <div class="prof_info1">home</div><div class="prof_info2">info2</div><div class="prof_info3">info3</div> And Jquery code like: $(document).ready(function(){ $(".prof_info1").unbind("click").click(function(event) { $("#main").html('<img src="img/spin.gif" class="spin">'); location.replace("?&id=<?=$id?>") return false; }); $(".prof_info2").unbind("click").click(function(event) { $("#main").html('<img src="img/spin.gif" class="spin">'); $("#main").load('?a=2&id=<?=$id?>'); return false; }); $(".prof_info3").unbind("click").click(function(event) { $("#glavni").html('<img src="img/spin.gif" class="spin">'); $("#glavni").load('?a=3&id=<?=$id?>'); return false; }); }); Is there any easier way to do write this Jquery code and make it with less code? Something like if click somethind{ ... }elseif{ ....}

    Read the article

  • keyup bindings not working in Firefox

    - by Jarred
    Hi. You can see my project here - http://www.inluxphoto.com/custom/jsgallery/index.php I am attempting to make the left and right arrow keys move the slideshow. I was able to get it to work in all browsers by following exactly the instructions on the front page of jqueryfordesigners.com (sorry I am only allowed one link). However, it is necessary that the keyup be unbinded until the animation completes, so the user cannot do a quick double tap of the key, which breaks the show. This led me to the following function - function keyCommands() { //Bind Keys according to keyAssignments function keyCommandBind() { $(document.documentElement).bind('keyup', keyAssignments) } //Bind functions to specific keys function keyAssignments() { if (event.keyCode == 37) { leftArrow(); } if (event.keyCode == 39) { rightArrow(); } if (event.keyCode == 32) { spaceBar(); } } function leftArrow() { //unbind, do stuff, rebind } function rightArrow() { //unbind, do stuff, rebind } function spaceBar() { //unbind, do stuff, rebind } keyCommandBind(); } This works in all browsers except Firefox & Camino. Firebug tells me event (ie event.keyCode) is not defined. That's true, it's not defined, and I understand that. However I don't understand why, if it's not defined, does it work in all other browsers. How can I appropriately define this? Or, am I doing it wrong? Any help would be most appreciated, thanks for your time!

    Read the article

  • How to bind to another event after ajax call in jquery

    - by robert
    Hi, I'm creating a graph using flot javascript library. I have enabled clickable event and the div is binded to plotclick event. So, when a datapoint is clicked, an ajax call is made and the result is used to replace the current div. After this i need to bind the div to a new event. I tried to call bind, but it is still bound to old callback. When i call unbind and bind, the new callback is not called. var handleTeacherClick = function( event, pos, item ) { if( typeof item != "undefined" && item ) { var user_id = jQuery( 'input[name="id' + item.datapoint[0] + '"]' ).val(); jQuery.ajax({ type: 'POST', url: BASEPATH + 'index.php/ajax/home/latest', data: { "user_id": user_id }, dataType: 'json', success: function ( result ) { jQuery.plot(jQuery('#stats_prog'), result.progress_data, result.progress_options); jQuery.plot(jQuery('#stats_perf'), result.performance_data, result.performance_options); jQuery('.stats_title'). html('<span class="stats_title">'+ ' >> Chapter '+Math.ceil(item.datapoint[0])+'</span>'); jQuery('#stats_prog')./*unbind("plotclick").*/ bind('plotclick', statClickHandler ); jQuery('#stats_perf')./*unbind("plotclick"). */ bind( 'plotclick', statClickHandler ); }, }); } }

    Read the article

  • Dynamic change .click value Jquery IE issue.

    - by user326100
    Hello guys.. it's i first time i'm asking here. Sorry if the answer is available already. I have a very small jQuery script that canges the paramether for onclick attr on a DIV. IT works like as right and left arrows for some content in the middle. BAsically i set the onclick="foo(1)" then when get clicked sld change the value 1 to 2, and keep changing everytime i click. on jQuery functio i'm using: $("#v_arrow_r").attr('onclick','').unbind().click(newclick_next); it works like a charm on FF and Chrome, but does not work on IE !!!! Argh... here the the code: if (start == 24) { var a = 0; var b = 0; } else { var a = start-6; var b = start+6; } next = "home_featured_videos(" + b + ");"; newclick_next = eval("(function(){"+next+"});"); prev = "home_featured_videos(" + a + ");"; newclick_prev = eval("(function(){"+prev+"});"); $('#video-module').css('background',''); $('#video-module').html(response); $("#v_arrow_l").attr('onclick','').unbind().click(newclick_prev); $("#v_arrow_r").attr('onclick','').unbind().click(newclick_next); The html: //CONTENT So like i said.. i define the attr onclick when page open. It work well on IE. but when i click the arrow and call the function the oncli is set to null and i add the function to .click. IE stop working. the click is dead. If anybody have idea why this is happening. Thanx in advance. Kind Regards Varois

    Read the article

  • JQuery:bind.blur() is not working

    - by user198880
    Hello, I need to add a row to a table.I am using jQuery to add the row.But i my Add() function everyhing is working fine except that the blur function for the input fild "txtQuantity" is not getting triggered for the newly added row.Here is my function, function Add() { var rowPart = $('#trPart0').clone(true).show().insertAfter('#tblPart tbody>tr:last'); var index = document.getElementById("hdnMaxPartId").value; $("#tblPart tbody>tr:last").attr("id", "trPart" + index); $("td:eq(0) img", rowPart).attr("id", "imgPartDelete" + index).attr("onclick", ""); $("td:eq(1) input:eq(0)", rowPart).attr("id", "hdnWODefPartId" + index); $("td:eq(1) input:eq(1)", rowPart).attr("id", "hdnPartCost" + index); $("td:eq(1) input:eq(3)", rowPart).attr("id", "txtPart" + index).attr("name", "txtPart" + index).attr("onkeyup", ""); $("td:eq(2) input", rowPart).attr("id", "txtQuantity" + index).attr("onblur", ""); $("td:eq(3) div", rowPart).attr("id", "divPartCost" + index); $("td:eq(4) div", rowPart).attr("id", "divPartUnit" + index); $("#imgPartDelete" + index).unbind().bind('click', function() { DeletePart(index); } ); $("#txtPart" + index).unbind().bind('keyup', function() { ajax_showOptions(this,"getPartForAC",event,2,"replace","div_part_list"+index); } ); $("#txtQuantity" + index).unbind().bind('blur', function() { ChangeClassForObject(this,"clsSpText_blur"); CalculateCost(index,this,"divPartCost"+index); } ); }

    Read the article

  • disable all hotkeys with dconf-editor

    - by Gijs
    I'm building a deb package that will create a kiosk user account. When you login to this account, the browser automatically starts and navigates to a pre-given website. Also all the hotkeys should be disabled except for one you defined. Now I'm at the part that the browser starts and my disable script is excecuted on logon but for exaple, I can still close the browser with Alt + F4. And when i check the dconf-editor for the hotkeys, for every single one the bind is deleted, but mine for close isn't added. Like you can see in the printscreen. I disabled all these keys with this code, one line for evere hotkey gsettings set org.gnome.desktop.wm.keybindings begin-resize [] So this seams to work, but at the bottom of my disable script this line should be executed. gsettings set org.gnome.desktop.wm.keybindings close ['<Alt>b'] Does anyone know why i'm able to unbind all these hotkeys in my dconf-editor but they are able to still do their job? And when it is possible to unbind them, why cant I bind mine? I searched the web for a solution but couldn't find one fitting my needs, I hope some of you know the answer to this. Regards Gijs

    Read the article

  • BeansBinding Across Modules in a NetBeans Platform Application

    - by Geertjan
    Here's two TopComponents, each in a different NetBeans module. Let's use BeansBinding to synchronize the JTextField in TC2TopComponent with the data published by TC1TopComponent and received in TC2TopComponent by listening to the Lookup. The key to getting to the solution is to have the following in TC2TopComponent, which implements LookupListener: private BindingGroup bindingGroup = null; private AutoBinding binding = null; @Override public void resultChanged(LookupEvent le) { if (bindingGroup != null && binding != null) { bindingGroup.getBinding("customerNameBinding").unbind(); } if (!result.allInstances().isEmpty()){ Customer c = result.allInstances().iterator().next(); // put the customer into the lookup of this topcomponent, // so that it will remain in the lookup when focus changes // to this topcomponent: ic.set(Collections.singleton(c), null); bindingGroup = new BindingGroup(); binding = Bindings.createAutoBinding( // a two-way binding, i.e., a change in // one will cause a change in the other: AutoBinding.UpdateStrategy.READ_WRITE, // source: c, BeanProperty.create("name"), // target: jTextField1, BeanProperty.create("text"), // binding name: "customerNameBinding"); bindingGroup.addBinding(binding); bindingGroup.bind(); } } I must say that this solution is preferable over what I've been doing prior to getting to this solution: I would get the customer from the resultChanged, set a class-level field to that customer, add a document listener (or action listener, which is invoked when Enter is pressed) on the text field and, when a change is detected, set the new value on the customer. All that is not needed with the above bit of code. Then, in the node, make sure to use canRename, setName, and getDisplayName, so that when the user presses F2 on a node, the display name can be changed. In other words, when the user types something different in the node display name after pressing F2, the underlying customer name is changed, which happens, in the first place, because the customer name is bound to the text field's value, so that the text field's value will also change once enter is pressed on the changed node display name. Also set a PropertyChangeListener on the node (which implies you need to add property change support to the customer object), so that when the customer object changes (which happens, in the second place, via a change in the value of the text field, as defined in the binding defined above), the node display name is updated. In other words, there's still a bit of plumbing you need to include. But less than before and the nasty class-level field for storing the customer in the TC2TopComponent is no longer needed. And a listener on the text field, with a property change listener implented on the TC2TopComponent, isn't needed either. On the other hand, it's more code than I was using before and I've had to include the BeansBinding JAR, which adds a bit of overhead to my application, without much additional functionality over what I was doing originally. I'd lean towards not doing things this way. Seems quite expensive for essentially replacing a listener on a text field and a property change listener implemented on the TC2TopComponent for being notified of changes to the customer so that the text field can be updated. On the other other hand, it's kind of nice that all this listening-related code is centralized in one place now. So, here's a nice improvement over the above. Instead of listening for a customer, listen for a node, from which the customer can be obtained. Then, bind the node display name to the text field's value, so that when the user types in the text field, the node display name is updated. That saves you from having to listen in the node for changes to the customer's name. In addition to that binding, keep the previous binding, because the previous binding connects the customer name to the text field, so that when the customer display name is changed via F2 on the node, the text field will be updated. private BindingGroup bindingGroup = null; private AutoBinding nodeUpdateBinding; private AutoBinding textFieldUpdateBinding; @Override public void resultChanged(LookupEvent le) { if (bindingGroup != null && textFieldUpdateBinding != null) { bindingGroup.getBinding("textFieldUpdateBinding").unbind(); } if (bindingGroup != null && nodeUpdateBinding != null) { bindingGroup.getBinding("nodeUpdateBinding").unbind(); } if (!result.allInstances().isEmpty()) { Node n = result.allInstances().iterator().next(); Customer c = n.getLookup().lookup(Customer.class); ic.set(Collections.singleton(n), null); bindingGroup = new BindingGroup(); nodeUpdateBinding = Bindings.createAutoBinding( AutoBinding.UpdateStrategy.READ_WRITE, n, BeanProperty.create("name"), jTextField1, BeanProperty.create("text"), "nodeUpdateBinding"); bindingGroup.addBinding(nodeUpdateBinding); textFieldUpdateBinding = Bindings.createAutoBinding( AutoBinding.UpdateStrategy.READ_WRITE, c, BeanProperty.create("name"), jTextField1, BeanProperty.create("text"), "textFieldUpdateBinding"); bindingGroup.addBinding(textFieldUpdateBinding); bindingGroup.bind(); } } Now my node has no property change listener, while the customer has no property change support. As in the first bit of code, the text field doesn't have a listener either. All that listening is taken care of by the BeansBinding code.  Thanks to Toni for help with this, though he can't be blamed for anything that is wrong with it, only thanked for anything that is right with it. 

    Read the article

  • A jQuery Plug-in to monitor Html Element CSS Changes

    - by Rick Strahl
    Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. The need for this arose out of wanting to build generic components that could 'attach' themselves to other objects and monitor changes on the ‘parent’ object so the dependent object can adjust itself accordingly. What I wanted to create is a jQuery plug-in that allows me to specify a list of CSS properties to monitor and have a function fire in response to any change to any of those CSS properties. The result are the .watch() and .unwatch() jQuery plug-ins. Here’s a simple example page of this plug-in that demonstrates tracking changes to an element being moved with draggable and closable behavior: http://www.west-wind.com/WestWindWebToolkit/samples/Ajax/jQueryPluginSamples/WatcherPlugin.htm Try it with different browsers – IE and FireFox use the DOM event handlers and Chrome, Safari and Opera use setInterval handlers to manage this behavior. It should work in all of them but all but IE and FireFox will show a bit of lag between the changes in the main element and the shadow. The relevant HTML for this example is this fragment of a main <div> (#notebox) and an element that is to mimic a shadow (#shadow). <div class="containercontent"> <div id="notebox" style="width: 200px; height: 150px;position: absolute; z-index: 20; padding: 20px; background-color: lightsteelblue;"> Go ahead drag me around and close me! </div> <div id="shadow" style="background-color: Gray; z-index: 19;position:absolute;display: none;"> </div> </div> The watcher plug in is then applied to the main <div> and shadow in sync with the following plug-in code: <script type="text/javascript"> $(document).ready(function () { var counter = 0; $("#notebox").watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); var sh = $("#shadow"); var propChanged = data.props[i]; var valChanged = data.vals[i]; counter++; showStatus("Prop: " + propChanged + " value: " + valChanged + " " + counter); var pos = el.position(); var w = el.outerWidth(); var h = el.outerHeight(); sh.css({ width: w, height: h, left: pos.left + 5, top: pos.top + 5, display: el.css("display"), opacity: el.css("opacity") }); }) .draggable() .closable() .css("left", 10); }); </script> When you run this page as you drag the #notebox element the #shadow element will maintain and stay pinned underneath the #notebox element effectively keeping the shadow attached to the main element. Likewise, if you hide or fadeOut() the #notebox element the shadow will also go away – show the #notebox element and the shadow also re-appears because we are assigning the display property from the parent on the shadow. Note we’re attaching the .watch() plug-in to the #notebox element and have it fire whenever top,left,height,width,opacity or display CSS properties are changed. The passed data element contains a props[] and vals[] array that holds the properties monitored and their current values. An index passed as the second parm tells you which property has changed and what its current value is (propChanged/valChanged in the code above). The rest of the watcher handler code then deals with figuring out the main element’s position and recalculating and setting the shadow’s position using the jQuery .css() function. Note that this is just an example to demonstrate the watch() behavior here – this is not the best way to create a shadow. If you’re interested in a more efficient and cleaner way to handle shadows with a plug-in check out the .shadow() plug-in in ww.jquery.js (code search for fn.shadow) which uses native CSS features when available but falls back to a tracked shadow element on browsers that don’t support it, which is how this watch() plug-in came about in the first place :-) How does it work? The plug-in works by letting the user specify a list of properties to monitor as a comma delimited string and a handler function: el.watch("top,left,height,width,display,opacity", function (data, i) {}, 100, id) You can also specify an interval (if no DOM event monitoring isn’t available in the browser) and an ID that identifies the event handler uniquely. The watch plug-in works by hooking up to DOMAttrModified in FireFox, to onPropertyChanged in Internet Explorer, or by using a timer with setInterval to handle the detection of changes for other browsers. Unfortunately WebKit doesn’t support DOMAttrModified consistently at the moment so Safari and Chrome currently have to use the slower setInterval mechanism. In response to a changed property (or a setInterval timer hit) a JavaScript handler is fired which then runs through all the properties monitored and determines if and which one has changed. The DOM events fire on all property/style changes so the intermediate plug-in handler filters only those hits we’re interested in. If one of our monitored properties has changed the specified event handler function is called along with a data object and an index that identifies the property that’s changed in the data.props/data.vals arrays. The jQuery plugin to implement this functionality looks like this: (function($){ $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 100; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var data = { id: id, props: props.split(","), vals: [props.split(",").length], func: func, fnc: fnc, origProps: props, interval: interval, intervalId: null }; // store initial props and values $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data); }); function hookChange(el$, id, data) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, data.fnc); else data.intervalId = setInterval(data.fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var data = el.data(id); try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, data.fnc); else clearInterval(data.intervalId); } // ignore if element was already unbound catch (e) { } }); return this; } })(jQuery); Note that there’s a corresponding .unwatch() plug-in that can be used to stop monitoring properties. The ID parameter is optional both on watch() and unwatch() – a standard name is used if you don’t specify one, but it’s a good idea to use unique names for each element watched to avoid overlap in event ids especially if you’re monitoring many elements. The syntax is: $.fn.watch = function(props, func, interval, id) props A comma delimited list of CSS style properties that are to be watched for changes. If any of the specified properties changes the function specified in the second parameter is fired. func The function fired in response to a changed styles. Receives this as the element changed and an object parameter that represents the watched properties and their respective values. The first parameter is passed in this structure: { id: watcherId, props: [], vals: [], func: thisFunc, fnc: internalHandler, origProps: strPropertyListOnWatcher }; A second parameter is the index of the changed property so data.props[i] or data.vals[i] gets the property and changed value. interval The interval for setInterval() for those browsers that don't support property watching in the DOM. In milliseconds. id An optional id that identifies this watcher. Required only if multiple watchers might be hooked up to the same element. The default is _watcher if not specified. It’s been a Journey I started building this plug-in about two years ago and had to make many modifications to it in response to changes in jQuery and also in browser behaviors. I think the latest round of changes made should make this plug-in fairly future proof going forward (although I hope there will be better cross-browser change event notifications in the future). One of the big problems I ran into had to do with recursive change notifications – it looks like starting with jQuery 1.44 and later, jQuery internally modifies element properties on some calls to some .css()  property retrievals and things like outerHeight/Width(). In IE this would cause nasty lock up issues at times. In response to this I changed the code to unbind the events when the handler function is called and then rebind when it exits. This also makes user code less prone to stack overflow recursion as you can actually change properties on the base element. It also means though that if you change one of the monitors properties in the handler the watch() handler won’t fire in response – you need to resort to a setTimeout() call instead to force the code to run outside of the handler: $("#notebox") el.watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); … // this makes el changes work setTimeout(function () { el.css("top", 10) },10); }) Since I’ve built this component I’ve had a lot of good uses for it. The .shadow() fallback functionality is one of them. Resources The watch() plug-in is part of ww.jquery.js and the West Wind West Wind Web Toolkit. You’re free to use this code here or the code from the toolkit. West Wind Web Toolkit Latest version of ww.jquery.js (search for fn.watch) watch plug-in documentation © Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  JavaScript  jQuery  

    Read the article

  • Render To Texture Using OpenGL is not working but normal rendering works just fine

    - by Franky Rivera
    things I initialize at the beginning of the program I realize not all of these pertain to my issue I just copy and pasted what I had //overall initialized //things openGL related I initialize earlier on in the project glClearColor( 0.0f, 0.0f, 0.0f, 1.0f ); glClearDepth( 1.0f ); glEnable(GL_ALPHA_TEST); glEnable( GL_STENCIL_TEST ); glEnable(GL_DEPTH_TEST); glDepthFunc( GL_LEQUAL ); glEnable(GL_CULL_FACE); glFrontFace( GL_CCW ); glEnable(GL_COLOR_MATERIAL); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glHint( GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST ); //we also initialize our shader programs //(i added some shader program functions for definitions) //this enum list is else where in code //i figured it would help show you guys more about my //shader compile creation function right under this enum list VVVVVV /*enum eSHADER_ATTRIB_LOCATION { VERTEX_ATTRIB = 0, NORMAL_ATTRIB = 2, COLOR_ATTRIB, COLOR2_ATTRIB, FOG_COORD, TEXTURE_COORD_ATTRIB0 = 8, TEXTURE_COORD_ATTRIB1, TEXTURE_COORD_ATTRIB2, TEXTURE_COORD_ATTRIB3, TEXTURE_COORD_ATTRIB4, TEXTURE_COORD_ATTRIB5, TEXTURE_COORD_ATTRIB6, TEXTURE_COORD_ATTRIB7 }; */ //if we fail making our shader leave if( !testShader.CreateShader( "SimpleShader.vp", "SimpleShader.fp", 3, VERTEX_ATTRIB, "vVertexPos", NORMAL_ATTRIB, "vNormal", TEXTURE_COORD_ATTRIB0, "vTexCoord" ) ) return false; if( !testScreenShader.CreateShader( "ScreenShader.vp", "ScreenShader.fp", 3, VERTEX_ATTRIB, "vVertexPos", NORMAL_ATTRIB, "vNormal", TEXTURE_COORD_ATTRIB0, "vTexCoord" ) ) return false; SHADER PROGRAM FUNCTIONS bool CShaderProgram::CreateShader( const char* szVertexShaderName, const char* szFragmentShaderName, ... ) { //here are our handles for the openGL shaders int iGLVertexShaderHandle = -1, iGLFragmentShaderHandle = -1; //get our shader data char *vData = 0, *fData = 0; int vLength = 0, fLength = 0; LoadShaderFile( szVertexShaderName, &vData, &vLength ); LoadShaderFile( szFragmentShaderName, &fData, &fLength ); //data if( !vData ) return false; //data if( !fData ) { delete[] vData; return false; } //create both our shader objects iGLVertexShaderHandle = glCreateShader( GL_VERTEX_SHADER ); iGLFragmentShaderHandle = glCreateShader( GL_FRAGMENT_SHADER ); //well we got this far so we have dynamic data to clean up //load vertex shader glShaderSource( iGLVertexShaderHandle, 1, (const char**)(&vData), &vLength ); //load fragment shader glShaderSource( iGLFragmentShaderHandle, 1, (const char**)(&fData), &fLength ); //we are done with our data delete it delete[] vData; delete[] fData; //compile them both glCompileShader( iGLVertexShaderHandle ); //get shader status int iShaderOk; glGetShaderiv( iGLVertexShaderHandle, GL_COMPILE_STATUS, &iShaderOk ); if( iShaderOk == GL_FALSE ) { char* buffer; //get what happend with our shader glGetShaderiv( iGLVertexShaderHandle, GL_INFO_LOG_LENGTH, &iShaderOk ); buffer = new char[iShaderOk]; glGetShaderInfoLog( iGLVertexShaderHandle, iShaderOk, NULL, buffer ); //sprintf_s( buffer, "Failure Our Object For %s was not created", szFileName ); MessageBoxA( NULL, buffer, szVertexShaderName, MB_OK ); //delete our dynamic data free( buffer ); glDeleteShader(iGLVertexShaderHandle); return false; } glCompileShader( iGLFragmentShaderHandle ); //get shader status glGetShaderiv( iGLFragmentShaderHandle, GL_COMPILE_STATUS, &iShaderOk ); if( iShaderOk == GL_FALSE ) { char* buffer; //get what happend with our shader glGetShaderiv( iGLFragmentShaderHandle, GL_INFO_LOG_LENGTH, &iShaderOk ); buffer = new char[iShaderOk]; glGetShaderInfoLog( iGLFragmentShaderHandle, iShaderOk, NULL, buffer ); //sprintf_s( buffer, "Failure Our Object For %s was not created", szFileName ); MessageBoxA( NULL, buffer, szFragmentShaderName, MB_OK ); //delete our dynamic data free( buffer ); glDeleteShader(iGLFragmentShaderHandle); return false; } //lets check to see if the fragment shader compiled int iCompiled = 0; glGetShaderiv( iGLVertexShaderHandle, GL_COMPILE_STATUS, &iCompiled ); if( !iCompiled ) { //this shader did not compile leave return false; } //lets check to see if the fragment shader compiled glGetShaderiv( iGLFragmentShaderHandle, GL_COMPILE_STATUS, &iCompiled ); if( !iCompiled ) { char* buffer; //get what happend with our shader glGetShaderiv( iGLFragmentShaderHandle, GL_INFO_LOG_LENGTH, &iShaderOk ); buffer = new char[iShaderOk]; glGetShaderInfoLog( iGLFragmentShaderHandle, iShaderOk, NULL, buffer ); //sprintf_s( buffer, "Failure Our Object For %s was not created", szFileName ); MessageBoxA( NULL, buffer, szFragmentShaderName, MB_OK ); //delete our dynamic data free( buffer ); glDeleteShader(iGLFragmentShaderHandle); return false; } //make our new shader program m_iShaderProgramHandle = glCreateProgram(); glAttachShader( m_iShaderProgramHandle, iGLVertexShaderHandle ); glAttachShader( m_iShaderProgramHandle, iGLFragmentShaderHandle ); glLinkProgram( m_iShaderProgramHandle ); int iLinked = 0; glGetProgramiv( m_iShaderProgramHandle, GL_LINK_STATUS, &iLinked ); if( !iLinked ) { //we didn't link return false; } //NOW LETS CREATE ALL OUR HANDLES TO OUR PROPER LIKING //start from this parameter va_list parseList; va_start( parseList, szFragmentShaderName ); //read in number of variables if any unsigned uiNum = 0; uiNum = va_arg( parseList, unsigned ); //for loop through our attribute pairs int enumType = 0; for( unsigned x = 0; x < uiNum; ++x ) { //specify our attribute locations enumType = va_arg( parseList, int ); char* name = va_arg( parseList, char* ); glBindAttribLocation( m_iShaderProgramHandle, enumType, name ); } //end our list parsing va_end( parseList ); //relink specify //we have custom specified our attribute locations glLinkProgram( m_iShaderProgramHandle ); //fill our handles InitializeHandles( ); //everything went great return true; } void CShaderProgram::InitializeHandles( void ) { m_uihMVP = glGetUniformLocation( m_iShaderProgramHandle, "mMVP" ); m_uihWorld = glGetUniformLocation( m_iShaderProgramHandle, "mWorld" ); m_uihView = glGetUniformLocation( m_iShaderProgramHandle, "mView" ); m_uihProjection = glGetUniformLocation( m_iShaderProgramHandle, "mProjection" ); ///////////////////////////////////////////////////////////////////////////////// //texture handles m_uihDiffuseMap = glGetUniformLocation( m_iShaderProgramHandle, "diffuseMap" ); if( m_uihDiffuseMap != -1 ) { //store what texture index this handle will be in the shader glUniform1i( m_uihDiffuseMap, RM_DIFFUSE+GL_TEXTURE0 ); (0)+ } m_uihNormalMap = glGetUniformLocation( m_iShaderProgramHandle, "normalMap" ); if( m_uihNormalMap != -1 ) { //store what texture index this handle will be in the shader glUniform1i( m_uihNormalMap, RM_NORMAL+GL_TEXTURE0 ); (1)+ } } void CShaderProgram::SetDiffuseMap( const unsigned& uihDiffuseMap ) { (0)+ glActiveTexture( RM_DIFFUSE+GL_TEXTURE0 ); glBindTexture( GL_TEXTURE_2D, uihDiffuseMap ); } void CShaderProgram::SetNormalMap( const unsigned& uihNormalMap ) { (1)+ glActiveTexture( RM_NORMAL+GL_TEXTURE0 ); glBindTexture( GL_TEXTURE_2D, uihNormalMap ); } //MY 2 TEST SHADERS also my math order is correct it pertains to my matrix ordering in my math library once again i've tested the basic rendering. rendering to the screen works fine ----------------------------------------SIMPLE SHADER------------------------------------- //vertex shader looks like this #version 330 in vec3 vVertexPos; in vec3 vNormal; in vec2 vTexCoord; uniform mat4 mWorld; // Model Matrix uniform mat4 mView; // Camera View Matrix uniform mat4 mProjection;// Camera Projection Matrix out vec2 vTexCoordVary; // Texture coord to the fragment program out vec3 vNormalColor; void main( void ) { //pass the texture coordinate vTexCoordVary = vTexCoord; vNormalColor = vNormal; //calculate our model view projection matrix mat4 mMVP = (( mWorld * mView ) * mProjection ); //result our position gl_Position = vec4( vVertexPos, 1 ) * mMVP; } //fragment shader looks like this #version 330 in vec2 vTexCoordVary; in vec3 vNormalColor; uniform sampler2D diffuseMap; uniform sampler2D normalMap; out vec4 fragColor[2]; void main( void ) { //CORRECT fragColor[0] = texture( normalMap, vTexCoordVary ); fragColor[1] = vec4( vNormalColor, 1.0 ); }; ----------------------------------------SCREEN SHADER------------------------------------- //vertext shader looks like this #version 330 in vec3 vVertexPos; // This is the position of the vertex coming in in vec2 vTexCoord; // This is the texture coordinate.... out vec2 vTexCoordVary; // Texture coord to the fragment program void main( void ) { vTexCoordVary = vTexCoord; //set our position gl_Position = vec4( vVertexPos.xyz, 1.0f ); } //fragment shader looks like this #version 330 in vec2 vTexCoordVary; // Incoming "varying" texture coordinate uniform sampler2D diffuseMap;//the tile detail texture uniform sampler2D normalMap; //the normal map from earlier out vec4 vTheColorOfThePixel; void main( void ) { //CORRECT vTheColorOfThePixel = texture( normalMap, vTexCoordVary ); }; .Class RenderTarget Main Functions //here is my render targets create function bool CRenderTarget::Create( const unsigned uiNumTextures, unsigned uiWidth, unsigned uiHeight, int iInternalFormat, bool bDepthWanted ) { if( uiNumTextures <= 0 ) return false; //generate our variables glGenFramebuffers(1, &m_uifboHandle); // Initialize FBO glBindFramebuffer(GL_FRAMEBUFFER, m_uifboHandle); m_uiNumTextures = uiNumTextures; if( bDepthWanted ) m_uiNumTextures += 1; m_uiTextureHandle = new unsigned int[uiNumTextures]; glGenTextures( uiNumTextures, m_uiTextureHandle ); for( unsigned x = 0; x < uiNumTextures-1; ++x ) { glBindTexture( GL_TEXTURE_2D, m_uiTextureHandle[x]); // Reserve space for our 2D render target glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexImage2D(GL_TEXTURE_2D, 0, iInternalFormat, uiWidth, uiHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL); glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0 + x, GL_TEXTURE_2D, m_uiTextureHandle[x], 0); } //if we need one for depth testing if( bDepthWanted ) { glFramebufferTexture2D(GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, m_uiTextureHandle[uiNumTextures-1], 0); glFramebufferTexture2D(GL_FRAMEBUFFER_EXT, GL_STENCIL_ATTACHMENT, GL_TEXTURE_2D, m_uiTextureHandle[uiNumTextures-1], 0);*/ // Must attach texture to framebuffer. Has Stencil and depth glBindRenderbuffer(GL_RENDERBUFFER, m_uiTextureHandle[uiNumTextures-1]); glRenderbufferStorage(GL_RENDERBUFFER, /*GL_DEPTH_STENCIL*/GL_DEPTH24_STENCIL8, TEXTURE_WIDTH, TEXTURE_HEIGHT ); glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, m_uiTextureHandle[uiNumTextures-1]); glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_STENCIL_ATTACHMENT, GL_RENDERBUFFER, m_uiTextureHandle[uiNumTextures-1]); } glBindFramebuffer(GL_FRAMEBUFFER, 0); //everything went fine return true; } void CRenderTarget::Bind( const int& iTargetAttachmentLoc, const unsigned& uiWhichTexture, const bool bBindFrameBuffer ) { if( bBindFrameBuffer ) glBindFramebuffer( GL_FRAMEBUFFER, m_uifboHandle ); if( uiWhichTexture < m_uiNumTextures ) glFramebufferTexture(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0 + iTargetAttachmentLoc, m_uiTextureHandle[uiWhichTexture], 0); } void CRenderTarget::UnBind( void ) { //default our binding glBindFramebuffer( GL_FRAMEBUFFER, 0 ); } //this is all in a test project so here's my straight forward rendering function for testing this render function does basic rendering steps keep in mind i have already tested my textures i have already tested my box thats being rendered all basic rendering works fine its just when i try to render to a texture then display it in a render surface that it does not work. Also I have tested my render surface it is bound exactly to the screen coordinate space void TestRenderSteps( void ) { //Clear the color and the depth glClearColor( 0.0f, 0.0f, 0.0f, 1.0f ); glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); //bind the shader program glUseProgram( testShader.m_iShaderProgramHandle ); //1) grab the vertex buffer related to our rendering glBindBuffer( GL_ARRAY_BUFFER, CVertexBufferManager::GetInstance()->GetPositionNormalTexBuffer().GetBufferHandle() ); //2) how our stream will be split here ( 4 bytes position, ..ext ) CVertexBufferManager::GetInstance()->GetPositionNormalTexBuffer().MapVertexStride(); //3) set the index buffer if needed glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, CIndexBuffer::GetInstance()->GetBufferHandle() ); //send the needed information into the shader testShader.SetWorldMatrix( boxPosition ); testShader.SetViewMatrix( Static_Camera.GetView( ) ); testShader.SetProjectionMatrix( Static_Camera.GetProjection( ) ); testShader.SetDiffuseMap( iTextureID ); testShader.SetNormalMap( iTextureID2 ); GLenum buffers[] = { GL_COLOR_ATTACHMENT0, GL_COLOR_ATTACHMENT1 }; glDrawBuffers(2, buffers); //bind to our render target //RM_DIFFUSE, RM_NORMAL are enums (0 && 1) renderTarget.Bind( RM_DIFFUSE, 1, true ); renderTarget.Bind( RM_NORMAL, 1, false); //false because buffer is already bound //i clear here just to clear the texture to make it a default value of white //by doing this i can see if what im rendering to my screen is just drawing to the screen //or if its my render target defaulted glClearColor( 1.0f, 1.0f, 1.0f, 1.0f ); glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); //i have this box object which i draw testBox.Draw(); //the draw call looks like this //my normal rendering works just fine so i know this draw is fine // glDrawElementsBaseVertex( m_sides[x].GetPrimitiveType(), // m_sides[x].GetPrimitiveCount() * 3, // GL_UNSIGNED_INT, // BUFFER_OFFSET(sizeof(unsigned int) * m_sides[x].GetStartIndex()), // m_sides[x].GetStartVertex( ) ); //we unbind the target back to default renderTarget.UnBind(); //i stop mapping my vertex format CVertexBufferManager::GetInstance()->GetPositionNormalTexBuffer().UnMapVertexStride(); //i go back to default in using no shader program glUseProgram( 0 ); //now that everything is drawn to the textures //lets draw our screen surface and pass it our 2 filled out textures //NOW RENDER THE TEXTURES WE COLLECTED TO THE SCREEN QUAD //bind the shader program glUseProgram( testScreenShader.m_iShaderProgramHandle ); //1) grab the vertex buffer related to our rendering glBindBuffer( GL_ARRAY_BUFFER, CVertexBufferManager::GetInstance()->GetPositionTexBuffer().GetBufferHandle() ); //2) how our stream will be split here CVertexBufferManager::GetInstance()->GetPositionTexBuffer().MapVertexStride(); //3) set the index buffer if needed glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, CIndexBuffer::GetInstance()->GetBufferHandle() ); //pass our 2 filled out textures (in the shader im just using the diffuse //i wanted to see if i was rendering anything before i started getting into other techniques testScreenShader.SetDiffuseMap( renderTarget.GetTextureHandle(0) ); //SetDiffuseMap definitions in shader program class testScreenShader.SetNormalMap( renderTarget.GetTextureHandle(1) ); //SetNormalMap definitions in shader program class //DO the draw call drawing our screen rectangle glDrawElementsBaseVertex( m_ScreenRect.GetPrimitiveType(), m_ScreenRect.GetPrimitiveCount() * 3, GL_UNSIGNED_INT, BUFFER_OFFSET(sizeof(unsigned int) * m_ScreenRect.GetStartIndex()), m_ScreenRect.GetStartVertex( ) );*/ //unbind our vertex mapping CVertexBufferManager::GetInstance()->GetPositionTexBuffer().UnMapVertexStride(); //default to no shader program glUseProgram( 0 ); } Last words: 1) I can render my box just fine 2) i can render my screen rect just fine 3) I cannot render my box into a texture then display it into my screen rect 4) This entire project is just a test project I made to test different rendering practices. So excuse any "ugly-ish" unclean code. This was made just on a fly run through when I was trying new test cases.

    Read the article

  • Need Help with Jquery TableSorter Pager plugin.

    - by chobo2
    Hi I am using the tablesorter plugin: http://tablesorter.com/docs/ with jquery 1.4.2 Now my problem is this. The user can dynamically add rows to the table. But this seems to mess up the paging. Like first it gets added to the first "page" of rows but if you would go to the second page and you go back to the first page. You newly record is gone. I don't know where it goes but it is just gone. I tried to do this $('#pagerid').unbind('click'); $('#tbl tbody ').append(response.HtmlRow); $('#tbl').trigger('update'); So I tried to unbind the pager click method and do a trigger update but that does not seem to work. I then tried to add this line after the above 3 lines. $('#tbl').tablesorterPager({ container: $('#pagerid') }); but it seems to do nothing too. http://tablesorter.com/docs/example-pager.html

    Read the article

  • How to dispose NHibernate ISession in an ASP.NET MVC App

    - by Joe Young
    I have NHibernate hooked up in my asp.net mvc app. Everything works fine, if I DON'T dispose the ISession. I have read however that you should dispose, but when I do, I get random "Session is closed" exceptions. I am injecting the ISession into my other objects with Windsor. Here is my current NHModule: public class NHibernateHttpModule : IHttpModule { public void Init(HttpApplication context) { context.BeginRequest += context_BeginRequest; context.EndRequest += context_EndRequest; } static void context_EndRequest(object sender, EventArgs e) { CurrentSessionContext.Unbind(MvcApplication.SessionFactory); } static void context_BeginRequest(object sender, EventArgs e) { CurrentSessionContext.Bind(MvcApplication.SessionFactory.OpenSession()); } public void Dispose() { // do nothing } } Registering the ISession: container .Register(Component.For<ISession>() .UsingFactoryMethod(() => MvcApplication.SessionFactory.GetCurrentSession()).LifeStyle.Transient); The error happens when I tack the Dispose on the unbind in the module. Since I keep getting the session is closed error I assume this is not the correct way to do this, so what is the correct way? Thanks, Joe

    Read the article

  • How to stop Jquery load function

    - by Sergio
    The Jquery load function don't stop if there is multiple click on the links in the menu. The jquery code looks like: $(document).ready(function(){ $(".menu_rfr").unbind("click").click(function() { $("#main").html('<img src="img/spin.gif" class="spin">'); location.replace($(this).attr('rel')); }); function handleClick() { $(this).unbind("click"); $("#main").html('<img src="img/spin.gif" class="spin">'); $("#main").load($(this).attr('rel'), function() { // reactivate it after some loading has completed $(this).click(handleClick); }); } $(".menu_clickable").click(handleClick); }); You can see the sample page at link text How can I prevent users clicks if the DIV content is not loaded completely and never ending DIV loading?

    Read the article

  • Another passing variable through function jQuery/JS problem...

    - by dallen
    Here's my code: function mouseOver(variable) { return function() { $(variable).fadeIn(100); }; } function mouseOut(variable) { return function() { $(variable).fadeOut(100); }; } function lawyer(var1, var2, var3, var4) { return function() { $(var1).bind('mouseenter', mouseOver(var2)).bind('mouseleave', mouseOut(var2)).click( function() { $(var1).unbind('mouseenter').unbind('mouseleave'); $(var1).removeClass('off').addClass('on'); $(var3).bind('mouseenter', mouseOver(var4)).bind('mouseleave', mouseOut(var4)); $(var3).removeClass('on').addClass('off'); $(var4).hide(); }); } } lawyer("#group", ".b", "#group2", ".l"); What would be the reason for this not working? It works in that it hides $(var4).hide();, but clicking on the object doesn't seem to do anything. It works if I take the code out of a function and just copy/paste it a few times and change the targets. I'm not seeing it... Any help would be appreciated!

    Read the article

  • jQuery is only returning first item

    - by Andy
    For some strange reason, whenever I have a selector and expect to get multiple items, jQuery is only returning the first item, instead of the entire collection. This is the HTML I have: <a id="reply-424880" class="reply" href="#" rel="nofollow">Reply</a> <a id="reply-424885" class="reply" href="#" rel="nofollow">Reply</a> And the selector: $('.reply').unbind('click').click(function(event) { ... } I have tried debugging using FireBug, and still get the same results. Using the work around I can get it to work: $('a').each(function (index, element) { if ($(element).attr('class') == 'reply') { $(this).unbind('click').click(function(event) { ... }); } }); I would like to use the built-in functionality instead of my work around. Any idea why only the first element would be returned?

    Read the article

  • Monitoring Html Element CSS Changes in JavaScript

    - by Rick Strahl
    [ updated Feb 15, 2011: Added event unbinding to avoid unintended recursion ] Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. For example, I have a some HTML element behavior plugins like a drop shadow that attaches to any HTML element, but I then need to be able to automatically keep the shadow in sync with the window if the  element dragged around the window or moved via code. Unfortunately there's no move event for HTML elements so you can't tell when it's location changes. So I've been looking around for some way to keep track of the element and a specific CSS property, but no luck. I suspect there's nothing native to do this so the only way I could think of is to use a timer and poll rather frequently for the property. I ended up with a generic jQuery plugin that looks like this: (function($){ $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 200; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var itId = null; var data = { id: id, props: props.split(","), func: func, vals: [props.split(",").length], fnc: fnc, origProps: props, interval: interval }; $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data.fnc); }); function hookChange(el$, id, fnc) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, fnc); else itId = setInterval(fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w.fnc); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var fnc = el.data(id).fnc; try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, fnc); else clearInterval(id); } // ignore if element was already unbound catch (e) { } }); return this; } })(jQuery); With this I can now monitor movement by monitoring say the top CSS property of the element. The following code creates a box and uses the draggable (jquery.ui) plugin and a couple of custom plugins that center and create a shadow. Here's how I can set this up with the watcher: $("#box") .draggable() .centerInClient() .shadow() .watch("top", function() { $(this).shadow(); },70,"_shadow"); ... $("#box") .unwatch("_shadow") .shadow("remove"); This code basically sets up the window to be draggable and initially centered and then a shadow is added. The .watch() call then assigns a CSS property to monitor (top in this case) and a function to call in response. The component now sets up a setInterval call and keeps on pinging this property every time. When the top value changes the supplied function is called. While this works and I can now drag my window around with the shadow following suit it's not perfect by a long shot. The shadow move is delayed and so drags behind the window, but using a higher timer value is not appropriate either as the UI starts getting jumpy if the timer's set with too small of an increment. This sort of monitor can be useful for other things as well where operations are maybe not quite as time critical as a UI operation taking place. Can anybody see a better a better way of capturing movement of an element on the page?© Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  JavaScript  jQuery  

    Read the article

  • What is a better abstraction layer for D3D9 and OpenGL vertex data management?

    - by Sam Hocevar
    My rendering code has always been OpenGL. I now need to support a platform that does not have OpenGL, so I have to add an abstraction layer that wraps OpenGL and Direct3D 9. I will support Direct3D 11 later. TL;DR: the differences between OpenGL and Direct3D cause redundancy for the programmer, and the data layout feels flaky. For now, my API works a bit like this. This is how a shader is created: Shader *shader = Shader::Create( " ... GLSL vertex shader ... ", " ... GLSL pixel shader ... ", " ... HLSL vertex shader ... ", " ... HLSL pixel shader ... "); ShaderAttrib a1 = shader->GetAttribLocation("Point", VertexUsage::Position, 0); ShaderAttrib a2 = shader->GetAttribLocation("TexCoord", VertexUsage::TexCoord, 0); ShaderAttrib a3 = shader->GetAttribLocation("Data", VertexUsage::TexCoord, 1); ShaderUniform u1 = shader->GetUniformLocation("WorldMatrix"); ShaderUniform u2 = shader->GetUniformLocation("Zoom"); There is already a problem here: once a Direct3D shader is compiled, there is no way to query an input attribute by its name; apparently only the semantics stay meaningful. This is why GetAttribLocation has these extra arguments, which get hidden in ShaderAttrib. Now this is how I create a vertex declaration and two vertex buffers: VertexDeclaration *decl = VertexDeclaration::Create( VertexStream<vec3,vec2>(VertexUsage::Position, 0, VertexUsage::TexCoord, 0), VertexStream<vec4>(VertexUsage::TexCoord, 1)); VertexBuffer *vb1 = new VertexBuffer(NUM * (sizeof(vec3) + sizeof(vec2)); VertexBuffer *vb2 = new VertexBuffer(NUM * sizeof(vec4)); Another problem: the information VertexUsage::Position, 0 is totally useless to the OpenGL/GLSL backend because it does not care about semantics. Once the vertex buffers have been filled with or pointed at data, this is the rendering code: shader->Bind(); shader->SetUniform(u1, GetWorldMatrix()); shader->SetUniform(u2, blah); decl->Bind(); decl->SetStream(vb1, a1, a2); decl->SetStream(vb2, a3); decl->DrawPrimitives(VertexPrimitive::Triangle, NUM / 3); decl->Unbind(); shader->Unbind(); You see that decl is a bit more than just a D3D-like vertex declaration, it kinda takes care of rendering as well. Does this make sense at all? What would be a cleaner design? Or a good source of inspiration?

    Read the article

  • jQuery - how to check/uncheck a checkbox

    - by Renso
    $('#PrimaryContacts').unbind().change(function() {         if ($('#PrimaryContacts option:selected').val() == 0) {             $('#filterPrimaryContact').removeAttr('checked').trigger('click');         }         else {             $('#filterPrimaryContact').trigger('click');         }     }); Also, in the example above, triggering the checkbox does not change the checkbox value. As depicted above, based on a dropdown box changing and no contact being selected from the drop down box, automatically uncheck the checkbox and trigger it in invoke any event handlers on the checkbox.

    Read the article

  • How to change key binding for Tmux

    - by Severin
    I want to change the key binding in Tmux so I can use Ctrl + Alt instead of Ctrl + b This is my (unfortunately) not working try to do so. unbind C-b set -g prefix M-C What's wrong with this? Thought I followed the documentation for the keys.

    Read the article

  • LDAP ACLs with ldapmodify & .ldif file grand user access only

    - by plaetzchen
    I want to change the settings my new LDAP server let only users of the server read entries and not anonymous. Currently my olcAccess looks like this: olcAccess: {0} to attrs=userPassword,shadowLastChange by self write by anonymous auth by dn="cn=admin,dc=example,dc=com" write by * none olcAccess: {1} to * by self write by dn="cn=admin,dc=example,dc=com" write by * read I tried to change it like so: olcAccess: {0}to attrs=userPassword,shadowLastChange by self write by anonymous auth by dn="cn=admin,dc=example,dc=com" write by * none olcAccess: {1} to * by self write by dn="cn=admin,dc=exampme,dc=com" write by users read But that gives me no access at all. Can someone help me on this? thanks UPDATE: This is the log read after the changes mentioned by userxxx Sep 30 10:47:21 j16354 slapd[11805]: conn=1437 fd=28 ACCEPT from IP=87.149.169.6:64121 (IP=0.0.0.0:389) Sep 30 10:47:21 j16354 slapd[11805]: conn=1437 op=0 do_bind: invalid dn (pbrechler) Sep 30 10:47:21 j16354 slapd[11805]: conn=1437 op=0 RESULT tag=97 err=34 text=invalid DN Sep 30 10:47:21 j16354 slapd[11805]: conn=1437 op=1 UNBIND Sep 30 10:47:21 j16354 slapd[11805]: conn=1437 fd=28 closed Sep 30 10:47:21 j16354 slapd[11805]: conn=1438 fd=28 ACCEPT from IP=87.149.169.6:64122 (IP=0.0.0.0:389) Sep 30 10:47:21 j16354 slapd[11805]: conn=1438 op=0 do_bind: invalid dn (pbrechler) Sep 30 10:47:21 j16354 slapd[11805]: conn=1438 op=0 RESULT tag=97 err=34 text=invalid DN Sep 30 10:47:21 j16354 slapd[11805]: conn=1438 op=1 UNBIND Sep 30 10:47:21 j16354 slapd[11805]: conn=1438 fd=28 closed pbrechler should be a valid user but has no system user (we don't need it) admin does't work also List item

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8  | Next Page >