jQuery Forum

I use the autocomplete/combobox solution as explained here: http://jqueryui.com/autocomplete/#combobox

Finally applied via a $('element').combobox() as in the example code.

 

I use several comboboxes and I want to "empty" the value of, say, "combobox 3" if, say, "combobox 1" gets changed.

The problem is that I cannot find out the id of that element. The cause of this is that combobox is actually "converted" to an INPUT element that shows the current selection of the comboxbox/select and it doesn't have any attributes for identification.

 

For instance a typical INPUT shows like

So, I can get this.tagName, but nothing that identifies the INPUT or even the SELECT that's tied to it.

I also tried to get info via $(this) and ui.item, but I'm not able to get an id or name.

 

Can I get this with some method/property of the autocomplete widget/combobox method?

 

Or should I, for instance, change the code and push some identifier in the title or class or a custom attribute? Probably in _create? Or something else?

 

Thanks!

 

Addition.

In a completely different approch I tried now something like

where #tdOrt is the id of the td that surrounds the combobox area. That works for hover. But if I try to apply it to a form event it doesn't fire, e.g.

Moving from jQuery UI 1.8.24 to 1.9.0 breaks sortable in my application. (If I change back to 1.8.24 it works again.) JQuery is at 1.8.2. Can't provide a sample.

I get an error "cannot call methods on sortable prior to initialization; attempted to call method 'enable'". I wonder if this has anything to do with this announcement from http://jqueryui.com/changelog/1.8.6/ "Removed: Don't throw errors for invalid method calls (wait till 1.9 to add this back)."

Code goes like this:

This is embedded in the page via <script> tag. I'm not using $(document).ready(function(). However, the page surely is fully loaded and other jQuery code ($.ajax) works just fine.

(Edit: wrapping it in document ready doesn't make a difference.)

I have a form where about 90% of the fields are text fields where I do not want to submit all of them, only the changed ones. (But I want to submit the other fields, no matter if changed or not.)

The solution with IE8 was easy. Basically a one-liner. Don't use a name attribute and provide a name on the change event, e.g.

Only the named attributes get submitted. Just what I want.

 

Unfortunately, this very simple solution doesn't work with higher IE versions and other browsers. From research it seems now you have to explicitely add the fields to the form via DOM operation, for instance

 

The problem with this approach is that the field disappears from the form and appears at the "first" position of the form (as there is no other input field node in the form at this time) and so on. Also one might get duplicates if a field changes twice before submission.

 

Is there a better way to make the form "aware" of these input fields, so they get submitted?

 

The other solution I would have in mind is clone the existing input fields, add a name, make them hidden and add to the form. I haven't tried if this works. Does this look like a good solution?

 

Googling comes up with a completely different solution that I don't really like. It seems to be some overkill and requires me to submit *only* changed fields (which I do not want, I want to submit a few fields all the time, no matter if changed or not - this makes the programming on the server side simpler). For reference: http://stackoverflow.com/questions/5221633/select-submit-only-changed-form-fields-with-jquery

 

Thanks!

 

I'm using a dialog that is filled with content that is 5 or ten times larger. So, there is a scrollbar. When opening the dialog with a click it opens with the scrollbar automatically scrolled to the middle of the dialog.

This is largely undesired, I want to see the top first. I checked in Firefox and IE and I use very basic code (see below), so this seems to be a general problem of the dialog plugin. If that is the case, wouldn't it be better to change the default behavior to stay on top? And in any case, how can I prevent this from happening?

 

$(function() {
  $('#debugBox').dialog({ autoOpen: false, width: '450px', height: $(window).height()-50, position: ['right','top'] })
 });
 $('#openDebugBox').click(function(event) {
  event.preventDefault();
  $('#debugBox').dialog('open');
 });

 

Note, this is not a question about placement (position) of the dialog as in some other questions I found. It concerns the scrolled position in the dialog.

I'm removing an element with jQuery remove(), then add it in HTML, then check if it exists - it doesn't (length shows 0). What's going on here? Do elements exist "at the same time", although I create them serial?

 

Background:

I'm using ajax to update a part of the page. At the same time I have a dialog on the page that I want to update, too. The dialog shows debugging information from the server-side and should be from the same request processing. So, I cannot make a second Ajax call to fill just the dialog. I have to use the data from one call.

 

What I do is send the HTML data for the replacement area (an editing area) and then add the HTML for the dialog to it. It's enclosed in a span wrapper (#debugBoxRefresh) with display:none and the content (#debugBox) is used for the replacement action. Then I insert the html within the wrapper (#debugBox) in the dialog (thus refreshing the dialog with the new data) and remove the original data from the wrapper. There are other occasions where I don't replace that editing area but just use the HTML/script sent to update a few values on the page and refresh the dialog box directly (in this case I insert the sent data directly in the dialog).

I found that sometimes I seem to end up with more than one element named #debugBox and so the inserting in the dialog doesn't refresh the content because it's actually inserting the "first" (old) occurence of it. That's why I added the removal of the element in the wrapper and then also added a "look-ahead" removal before it.

However, as it turns out, this removal before insertion seems to stop the insertion or removes it right at insertion time, so it's not available for inserting in the dialog.

 

What is causing this or is there a better method to achieve what I want?

 

Here's a condensed version of the code used.

<here's the html/script for the replacement area that is directly shown in that area>

<span id="debugBoxRefreshWrapper" style="display:none">

<script>
$('#debugBoxRefreshWrapper #debugBoxRefresh').remove();
</script>

<span id="debugBoxRefresh">the new debugging data</span>

<script>

$('#debugBox').dialog('option', 'title', "title: new title"); //this always works!

$('#debugBox').html($('#debugBoxRefresh').html()); //see below for detail

$('#debugBoxRefreshWrapper #debugBoxRefresh').remove();

</script>

 

If I remove the first remove() line then it works when not directly replacing the dialog with "data", but then sometimes the direct replacement of the dialog doesn't work because I have more than one element with that id on the page.

 

I hope this is enough to unterstand and solve the problem.

 

I added a

$('#debugBoxRefreshWrapper').remove();

to the end of the script and removed the first removal line.

It then seems to work for both cases. And I see the same phenomenon concerning the "time order". An earlier alert shows 0 for length if I remove #debugBoxRefreshWrapper after the alert.

However, I also noticed that the script is carried out multiple times. I had noticed this earlier already and postponed the problem. But after reading a parallel post on the same topic (http://forum.jquery.com/topic/jquery-load-loading-a-javascript-in-to-div-calls-a-function-multiple-times) I checked again and see that it is indeed carried out multiple times. Even if I remove the wrapper that also contained the script code in the first place. Is there no way to "remove" the script other than to prevent it's running as per the forum post referenced above?

 

I think I must have misunderstood something about events on selectors.

I was using code like this:

HTML: <a href="someurl" id="propStatus"><b>sometext</b></a>

jQuery: $(document).on('click', '#propStatus', function(event)

and picking up the target url with event.target.href

This worked for some days and then suddenly stopped working.

On further inspection event.target.href was undefined and checking for event.target.nodeName showed "B", e.g. the inner node of the anchor. I had to move the B outside of the A to make it work again.

Latest jQuery, IE8.

 

My question is:

Is the latter behavior (picking up the target from B) the expected one?

If yes, why? I'm under the impression that the event happens on the A element.

If yes, why did it work for some days the other way?

Also, is there a simple way in jQuery to get the target from the A if there's another element within? (other than explicitely looking for it with closest() or so)

If no, how can I get that earlier behavior back?

 

Thanks,

I refresh the content of a dialog with jQuery ajax and then want to refresh the title (titlebar) as well. Unfortunately, this doesn't work. The title gets refreshed, but the titlebar doesn't change. Is this a known limitation or oversight or am I doing something wrong?

Maybe the title gets only set on open()? Should I file this as a feature request on the bug tracker?

This is jQuery 1.8.2 with jQuery 1.8.18 (which was the latest only a few days ago ...)

 

I tried all of these:

$('#debugBox').attr('title', "Debug-Box {$smarty.now|date_format:'%d.%m.%Y %H:%M:%S'}");
$('#debugBox').prop('title', "Debug-Box {$smarty.now|date_format:'%d.%m.%Y %H:%M:%S'}");

$('#debugBox').dialog("title: Debug-Box {$smarty.now|date_format:'%d.%m.%Y %H:%M:%S'}");

 

Thanks!

I'm obviously lacking some Javascript skills in this area and can't figure this out myself. See code below, stripped by all irrelevant (I hope) code.

An element is clicked and triggers an Ajax request to the server. In case of success or error I want to have some indication of that, in this case I want to change the color of a parent element for a short time with the help of the queue function. This works very well if I can use $(this) or a specific selector. However, in this case I don't know the selector or the parent element, because there are lots of identicals "structures" on the page. So, I store the selector found in the myEl variable and pass it along. I have no idea how to do that for the "myEl.delay(3000).queue(function(myEl) { myEl.css ..." line. myEl within the { } is undefined. I tried to use $(this) within the brackets. Then there is no error, but nothing happens, so $(this) must be referring to something else in this case, not myEl. How do I correct this, so that the function gets the correct selector/element?

 

I have a similar question about the error function for this event. I started by using  $(document).ajaxError(function() {});. Again, this works fine as long as I know the elements I want to manipulate. However, in this case I don't know again. How do I tell the error function?

 

Thanks,