JQuery :: Possible To "override"/"hook"/"replace" The Html() Method On Particular Elements?
Jul 22, 2010
[I posted this on the Developing jQuery UI forum as well, but perhaps it is more relevant in this forum since it is about the html() method...] Is it possible to "override"/"hook"/"replace" the html() method on particular elements, and if so, how? Or, are there any events raised when the html is changed by a call to html()? The reason I am asking is that I would like to detect when html() is called on an element in order to do some pre-processing before the html is changed and some post-processing after the html has changed. Further background: I am creating a ui widget myDialog, extending ui.dialog.
var myDialog = $('<div></div>').myDialog({...});
And if the user loads or changesthe content with
myDialog.html('here is some content');
I've seen an other post talking about not being able to perform a .html().replace() also, but no one replied.
[URL]
Why is this? I ran into the same problem and from what I was seeing, the replace() was only replacing the very first match. My work around was pretty simple, I just keep running replace() until it was done, but I'm dumbfounded as to why this would need to be done.
while (newLastRow.html().indexOf(settings.placeholder) > -1){ newLastRow.html(newLastRow.html().replace(settings.placeholder, curTotal)); }
As with the other post, I'm dynamically adding html to the page using a template, where the replace() method is updating the IDs of the fields when adding a new instance.
What's special about the value returned by the html() method? Is there a different preferred way to do this?
An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event.
The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction.
Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately.
HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction.
Problem #1: My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering.
Problem #2: Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI?
Code example:
You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me.
Can we override windows regional settings (including numeral symbols) in HTML pages?
Explanation:Go to control panel >> Regional and language options >> Regional options and Change Locale to Arabic (saudia arabia). Then click customize and change the 'Digit substituion' option to national. This would cause all the number symbols throughout your computer system to be changed from latin english '1234567890' to arabic number symbols '١٢٣٤٥٦٧٨٩٠ '. Even if you open up an HTML page, the numbers in it would be displayed in Arabic symbols.
I want my HTML pages to somehow override that customized locale behaviour. Despite having the windows regional settings locale and number symbols in Arabic...I want HTML page to display numbers in English Latin '1234567890'.
I don't think this is "do-able" but thought I'd better check. Say I want to replace certain names in some source code as long as they are not properties (dot properties) of objects. I could use a regular expression like:
source = source.replace(rx, function ($0, $1) {return $1? $0:map[$0]});
Dot properties like .name1 are not replaced by anything new and they need to be "skipped" over by this regular expression but other name1 identifiers need replacement with "a".
One problem with this approach is that dot properties like .name1 are replaced by themselves and this is just unnecessary work. Something like a "false" return to skip replacement would be nice but the following doesn't work.
source = source.replace(rx, function ($0, $1) {return $1? false:map[$0]});
There are other ways to get around this by using something else besides replace() but I wanted to see if it could be done with the replace() method.
I've got a rather odd situation (in so far as it is probably uncommon)- for a variety of reasons that I don't want to get into on here, I have to replace a DIV with another fairly similar DIV that has an identical ID to the original as well as several child elements that also have identical IDs to the content in the original DIV. This all happens after the page load is complete. The problem is that JQuery can't locate any of the new elements by ID. I assume that's because it's already generated a model of the DOM that contained elements with identical IDs, but now that the old IDs no longer correspond to valid objects, jquery has nothing to return when I search for the new elements.So question:Is there any way to force JQuery to rebuild the DOM model? Or alternatively, is there a way that I can force JQuery to index the new elements once they've been added to the page?
I encountered some code in "Javascript the good part" from Douglas Crockford.There is a way to passing callback function as second argument to string.replace() method.
Code:
var entity = { quot: '"', lt: '<',
[code]....
1. How do I know what the number of parameters should be in callback function ( function(a,b) ) ?
2. How do I know what will be passed in as a and b when I am defining the callback function?
I've an HTML table that uses the jQuery-datatables plug-in. One of the columns in the table includes a button for adding a new row to the table immediately following the row where the button was clicked from.
how do I hook a button click event so that my handler fires first but does not affect the firing of other clickhandlers for the same button?
What I want to do is hook all the form submit button click events. When a submit button is clicked, my handler will stuff some hidden fields into the form the button is contained within. Then the handler returns and the built in form submit button handler posts the form back to the server.
I need different definitions of tooltip on one page: 1/ Replace the default tooltip of all title elements
$('*[title]').tooltip({ delay: 500 });
AND
2/ Replace only Title elements within class "fast" (e.g. <a class="fast" href="..." title="fast tooltip">Fast</a> )
$('*[title].fast').tooltip({ delay: 0 });
But first definition overrides the second one all the time. I moved "general" definition 1/ on the first position of js and the "class based" 2/ on the last one but no success.
I've been using a hidden iframe for remote server scripting - how i've been doing it is that a load(); function changes the src component of the iframe with $_GET variables to pass to PHP:
The frame itself then has an "onload" function that calls a doLoad(); function that handles receipt of any information back from the server. declared this way:
The trouble with this as you may guess is that the page was reloading every time src was changed and the history list of the browser was messed up. So I did some research and came up with this method that solves that problem:
I use $().load() to place an HTML snippet from the server into a dialog box which i then need to position relative to the size of the element which has just had the HTML loaded into it. When the main HTML page DOM is ready, I hide() the dialog box, and then use fadeIn() to show with various click() events. I have managed to position the dialog box in the centre of the screen given that there is no content loaded.
However, it seems that when I load the new content into the dialog box the new dimensions aren't taken into account untill the next time load() is called.
Is there a way to get the new dimensions of the element before the dialog is shown in order to position it centre screen?
Here is my code:
function showDialogBox(sender) { var width = $(document).width(); var height = $(document).height();
I have problem getting dynamic form elements values created with .append method when submitting the form with POST method in Firefox. It seems to work only on Internet Explorer.
I want to replace all text in the html that contains the word "Hello" to "Hi" (quotes not included and not case-sensitive). Here's what I've made: if ($('body:contains("Hello")').length > 0) { $("*").each(function () { $('body').html($('body').html().replace('Hello','Hi')); });}
Without the: $("*").each(function () { It only searches for the first word so I added the line above to search within all elements (If this is correct). But the problem is, I notice that the line I added seems to cause the page to run slower than usual. Is there any other way to do this?
I'm having a problem where the serialize method isn't serializing form elements that are added to the DOM after the page load. Specifically, when the user clicks on a button some elements are displayed in a dialog that are generated from my server and returned via AJAX. I'm converting from Prototype and didn't run into this problem.
Can method replaceWith() be used to replace just ONE WORD in body of a tag (i.e., element.html()?) with another word? I have li's with "tab one", "tab two", "tab three" etc.. I have to replace dynamically ONLY the word "tab" with another word..
The following code is working great for all browsers except for Internet Explorer .. I've been investigating and the problem seems to be the html method. How can I change the script for it to work in Internet Explorer also? [code]
I'm working on adding a WYSIWYG editor (TinyMCE) to the PHPBB3 message board software.Right now I'm trying to make the installation as foolproof as possible (that is, minimize the amount of file editing a person has to do to install it).One big stumbling block I have is that an existing, stock piece of JS code needs to have "hooks" added to it.
For example, original code:
function initInsertions() { var doc;
[code]...
I need to add little pieces of code all over that one JS file. Rather than editing the file, is there a way I can "intercept" a function as it's called, insert or do MY added function, then continue on with the original code?The reason I can't simply provide an edited copy of that JS is because people may have added other mods to their code and installing my copy would "break" all of their other mods.
