JQuery :: Can't Use .live To Re-initialise A Plugin When Dom Is Updated / Why Is So?
May 24, 2011
Here is a live view of the problem I have:As you can see I am building a page which has an image cycle/carousel. On each of the images I would like to also have a zoomable loupe - I am using the jQzoom plugin to achieve this. Hover over the first image and you will see the zoom appear.
However, whilst all works fine on the first image, as soon as I click the next arrow (just visible at present top left of image as CSS tweak needed) to load the second image and hover over for the zoom, the second zoomed image fails to load. Anyone know why?
I am presuming it's because the cycle plugin hides the images so the jqZoom plugin can't 'grab' them.
I've been reading up on .live() function - can I use this to solve the problem? If so, could you provide some pointers...?
I am new to this discussion but hope you would post reply for my query and encourage me to keep in touch with this discussion. Well here is my problem. I have made an edit in place form in which we can add and remove the elements. I have used jquery.jeditable.mini.js and jquery.duplicate-remove.js plugins for edit in place and add and remove action. I have live() function to access the dynamically ganerated elements like this. $(".addressDiv span").live("mouseover", function(){ clickable function here...
frist of all, im a newbe on jquery. i have a table where i can add new "<span>" and i can edit it with editInPlace plugin but i have a problem. when i load the web with those elements (<span>), i cant edit it after i add a new item, then, all the items are editable
I am currently working on a project where I am using the jQuery Calculation plugin [URL] to do some math functions in a dynamic form, the issue is that when a new set of fields is created the calculation script only pulls data from the ones there when the page loaded, I am fairly certain that what I need to do is use the live function, however I am not very familiar with it and still learning. My jQuery for the plugin is : $("input[name^=emem]").sum("keyup", "#totalMem");
I have a page with UI Tabs. With a very small amount of content in each one. It has been working brilliantly but a problem started today. When the page loads for a split second it displays the tabs as the raw html. So it shows the tabs as the list items and displays the content of all tabs stacked beneath them. The page then switches to how it should look. This happens on every refresh. This is not a critical error but looks bad to a user of my page.
Is there a way to catch when a div content is updated through javascript? I update a div content through rjs and I need to call tablesorter every time the div is updated.
I have a number of methods on my page which are instantiated on page load (such as an image zoom method). How can I force a reinstantiation of this method when I update the DOM? For example I will have a list of Images that magnify on mouseover. I then change this image (and use the .attr method to substitute new arguments). However when I mouseover the method only shows the previous instantiation from when the page first loaded.
Nutshell version: I need to fire off a javascript call whenever an ASP.NET UpdatePanel is updated, and I'm not sure how to do it. Detailed version: I have an ASP.NET page that has several UpdatePanels. Some of these are in my own code and I have access to, some are used by third party controls (e.g. ReportViewer) and I don't have direct access to them.
My website also uses jQuery Mobile to render the controls in a mobile friendly way. The problem I'm having is that whenever something in an UpdatePanel is updated, the newly updated contents don't get re-parsed by jQuery Mobile, and so they revert to their original style(s).
[Code]...
The problem I'm having is that I can't figure out how to make that happen. document.Ready() doesn't refire on an AJAX update. I've tried using $('div').live(),$('div').load(),$('div').change() and a few others (I am adding these to the Master page for the website) but nothing seems to fire off when the DIV updates.
My problem involves input elements not being visibly updated after $('#selector').val(...) and non-working datepickers (the hasDatepicker class is attached, but the datepicker control doesn't fire up when the input gains focus).
I have a calendar, based on fullCalendar and the fcalendar bundle which chains the fullCalendar to a datepicker and a MySQL/PHP backend.
Now, the base functionality of datepicker works, but it is not sufficient; I need some more attributes for my calendar entries, including date information (including the start and end values, since they must be editable, rather than changing them via drag'n'drop only). Since the html of the form is somewhat complex, it is loaded from a .php page, which is a major change related to fcalendar, where id (#myGeneratedEditor, in my case) is built using HTML code in formStart and formEnd
Here is some code:
The summary of problems: the values which are attached via .val() don't show up the datepickers (one so far) don't / doesn't show up
Been playing with this plug-in for several hours now, very cool. Managed to build a decent non-linear presentation tool with play controls and multiple hotspots per slide. I noticed what I think are a few minor bugs concerning the opt.currSlide value, could also just be my lack of experience with the plug-in and JQuery. When using the 'next' and 'prev' options, the opt.currSlide value does not appear to be updated. I'm using this value to trigger hiding and showing of overlays in 'after' code. Works fine when a jump is initiated via cycle(num, trans) but not when initiated via cycle('next') or cycle('prev').
Also the "none" transition does not appear to call all of the before, after, etc.. events. As a work around, I defined a custom transition based on fade that animates the left property from 0 to 0 rather than opacity. Finally, I'd like to suggest an enhancement to the cycle method to accept cycle(num, trans, args). An example of why this is needed... cycle(3, 'wipe', {clip: 'l2r'}). Meaning jump to slide 3 using a wipe transition with clip set left-to-right. As a workaround for this limitation, I defined custom transitions for each of the wipe options.
I have to save the state of a form in a var before submitting it with the whole html, but if I alert the var, I get the original html without the updated input fields.
Problem in the timing of the script. The problem is that when I try to get an id of an object that was added by ajax, the script doesn't recognize it. The html: <select id="categories" name="categories"> <option value="3">aa</option> <option value="43">bbb</option> </select>
When I load the page, there is this script that get the value of the #categories and use ajax to fill another select and in the same ajax, I load images by another function using the new select input that was created: function fill_subcategories(){ parent=$("#categories").val(); $.ajax({ type: "post", url: "ajax/sub_galleries.php", data: 'parent='+parent, success: function(data){ $('#sub_categories').html(data); }}); show_exist_imgs() }
This fills this div: <select name="sub_categories" id="sub_categories"></select> Right after filling the #sub_categories, I use another ajax that get images of the new id of the #sub_categories, and here I get the problem.. the js: function show_exist_imgs(){ g_id=$('#sub_categories').val(); $.ajax({ type: "post", url: "ajax/show_exist_imgs.php", data: 'g_id='+g_id, success: function(data){ $('#exist_files').html(data); }}); } This script doesn't recognize the id of the new $('#sub_categories') select input.. why is that?
I pull product price from another page. Then I multiply it with quantity entered in the quantity input field. The problem is, if I forget to enter quantity value before I pull product information or if I change the quantity field later, the final total price is not updated.
Take a look at the following two examples:EXAMPLE 1 (Undesired Effect):EXAMPLE 2 (Desired Effect):I am currently working on a HTML/CSS Tab interface that is using jQuery. I downloaded the original example files from somewhere that used an old version of jQuery (version dated back from 2006).When I open the TABS.HTM file in the browser, I see the desired effect (as in Example 2 above), where the first tab is auto selected. Nice!Now, when I updated the jQuery .JS library with the latest build (version 1.3.2), I get the undesired effect, as illustrated in Example 1I have absolutely no idea what is going on and I am totally new to jQuery. I am assuming with the new version of jQuery, the JS initiator code is different. Please can someone take a look? I've included the old jquery-Version2006.js and the new jquery-1.3.2.min.js libraries in the attached zip.
You can download the example files here: http://hotfile.com/dl/7659319/7e95c76/jQuery_Tabs.zip.html or from:
I have an external script that looks for a specific id. Right now (im a noob to scripting btw) id have to have a version of this script in my header for each id or create an external script per id. I would like to have the script use a placeholder where "1stID" is, so that when i call the external script i can just say what the id is.
myscript.js (truncated) <script> var v = getelementbyid("1stID"); </script>
I want to call it like: <script src="myscript.js" #ID </script>
I have a setup where when the user changes the item on the dropdown, the price is updated by ajax.I want the price to pulsate with jquery ui after the price is updated.How can I do this? Here's my javascript:
Code: <script type="text/javascript"> function getxmlHttpObj() {[code]....
I have a site with a 3 column layout. Because the size of the columns may be different onLoad, I am using Javascript to make each of the columns the same height. This works great when I load the page.
However, my site updates these columns using AJAX. After the update, one column may have become longer than the others. I am trying to find a way to detect this change and then again make all 3 columns the same height.
My first approach was with an event handler that detected "onsubtreemodified" for these DIVs. Unfortunately, this is a fairly new W3C DOM event that is not currently supported by most browsers.
My next idea was to simply call the function that did the resize with the onClick event when the user did anything that would update the columns. This does not work because Javascript does not wait until the DOM is finished updating before executing the code that checks sizes. So, it still sees the columns as the same height and doesn't make adjustments.
I'm working on right now to make a website for our game clan in Special Force... Then want a part of their website to be viewed directly on my website.. The link to what i'm talking about is bit.ly/vUNUCi .maybe I can get that html codes then paste it in my website code.but the problem is that when I do it.. It is just there but when any changes happen occur to our clan it will not be updated.. so here's a picture of visualization.. bit.ly/tPQbax (also attached) the red part is the updated part I want to have in my website and those blue-boxed elements in there are those that can be changed/updated... so how can I put that Updated Part of Website to Mine?
I use a very handy function (onsubmit) to validate empty fields in a form:
PHP Code: function validate_form(){ var x = document.getElementById("form1"); for(var i=0; i<x.length; i++){ if((x.elements[i].value == "") && (x.elements[i].title)){ [Code]....
It worked like a charm, until I had to change a dropdown dynamically with ajax. I have two dropdowns, the second being populated with ajax (php, mysql) by the option selected in the first one. The second dropdown has the title attribute filled so the previous function can validate and ask the user to select something. However, it seems like fields loaded dynamically with ajax wont appear inside the x.elements[] array. I've tested it over and over, it keeps ignoring it. It isn't even in the array. Why?
I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?
Can anyone point me in the right direction where i could learn how to make a text box that checks itself to see if x=y and then it updates an image on the page? or what language i would have to use to do this?
If you use javascript/dhtml to, say, add a text field to a web page. If you then navigate away from this page and back again using the back button the added text field is lost and the web page is back to how it was prior to any dhtml changes.
I assume this is because the browser is using the cached version and not the changed dhtml version.
How can I force the changed web page to be cached so that when returning to the page the dhtml version is the page I see with the added text field?
