Rectangle 27 175

To stop the user from getting annoyed when the whole text gets selected every time they try to move the caret using their mouse, you should do this using the focus event, not the click event. The following will do the job and works around a problem in Chrome that prevents the simplest version (i.e. just calling the textarea's select() method in a focus event handler) from working.

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>
$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

I think it's better to implement this stuff using a separate "select all text" button since automatically selecting the text on focus or click events is realy annoying.

@TimDown: you are right, I was being a bit over zealous - actually it does work correctly on 'click', but fails if you tab into the textarea - the your other solution works for both cases :)

javascript - jQuery - select all text from a textarea - Stack Overflow

javascript jquery forms textarea selection
Rectangle 27 3

this is exactly how it CAN work without jQuery and AJAX and it's working very well using a simple iFrame. I LOVE IT, works in Opera10, FF3 and IE6. Thanks to some of the above posters pointing me the right direction, that's the only reason I am posting here:

<select name="aAddToPage[65654]" 
onchange="
    if (bCanAddMore) {
        addToPage(65654,this);
    }
    else {
        alert('Could not add another, wait until previous is added.'); 
        this.options[0].selected = true;
    };
" />
<option value="">Add to page..</option>
[more options with values here]</select>

<script type="text/javascript">
function addToPage(iProduct, oSelect){
    iPage = oSelect.options[oSelect.selectedIndex].value;
    if (iPage != "") {
        bCanAddMore = false;
        window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
        window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
        window.hiddenFrame.document.formFrame.submit();
    }
}
var bCanAddMore = true;</script> 

<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

the php code generating the page that is being called above:

if( $_GET['p'] == 'addProductToPage' ){  // hidden form processing
  if(!empty($_POST['iAddToPage'])) {
    //.. do something with it.. 
  }
  print('
    <html>
        <body>
            <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');
}

Don't use PHP print to print HTML code. Just close php tag ?> and add the html code after. And avoid using exit it it isn't necessary (fatal errors, ...)

That's a lot of work on this answer, but there are many others.

php - Submit form without page reloading - Stack Overflow

php javascript html forms
Rectangle 27 8

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 7

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

javascript - How can I upload files asynchronously? - Stack Overflow

javascript jquery ajax asynchronous upload
Rectangle 27 3

This should be done in javascript or using a form instead of anchor. There's nothing you could put in the place of your ?? to make it work. You cannot set these values server side because they might be changed on the client side. So basically you need to hook up at the onchange event of your two selects and update your link url with the new values or just use a form.

<% using (Ajax.BeginForm("SubList", new AjaxOptions() { 
    UpdateTargetId = "theList" 
})) { %>
    <%= Html.DropDownList("branchId", Model.Branches) %>
    <%= Html.DropDownList("regionId", Model.Regions) %>
    <input type="submit" value="Filter" />
<% } %>

<div id="theList">
    <% Html.RenderPartial("SubList", Model.List); %>
</div>

Thanks Darin, Ajax.BeginForm was the concept I was looking for.

jquery - ASP.NET MVC Ajax: How to pass argument values to Ajax action ...

jquery asp.net-mvc ajax asp.net-ajax
Rectangle 27 1

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
$('.ui-multiselect-menu').each(function () {
    $(this).remove();
});
$('#uc_DDiscipline select').multiselect({
    header: "-- View All --",
    multiple: false,
    noneSelectedText: "-- View All --",
    selectedList: 1,
    minWidth: 265
});
});


//On Page Load
$(function () {
$("#uc_DDiscipline select").multiselect({
    //multiple: true,
    header: "-- View All --",
    multiple: false,
    noneSelectedText: "-- View All --",
    selectedList: 1,
    minWidth: 265
});
});

All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working

asp.net - Jquery multiselect widget - Single select inside update pane...

jquery asp.net jquery-ui github jquery-plugins
Rectangle 27 42

UPDATE [Sun 08/26/2012] This answer has become so popular that I decided to make it into a full-fledged blog/tutorial Please visit My Blog Here to see the latest in easy access information to working with tabs in jQueryUI Also included (in the blog too) is a jsFiddle

Update! Please note: In newer versions of jQueryUI (1.9+), ui-tabs-selected has been replaced with ui-tabs-active. !!!

I know this thread is old, but something I didn't see mentioned was how to get the "selected tab" (Currently dropped down panel) from somewhere other than the "tab events". I do have a simply way ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

And to easily get the index, of course there is the way listed on the site ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

However, you could use my first method to get the index and anything you want about that panel pretty easy ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS. If you use an iframe variable then .find('.ui-tabs-panel:not(.ui-tabs-hide)'), you will find it easy to do this for selected tabs in frames as well. Remember, jQuery already did all the hard work, no need to reinvent the wheel!

Question was brought up to me, "What if there are more than one tabs areas on the view?" Again, just think simple, use my same setup but use an ID to identify which tabs you want to get hold of.

$('#example-1').tabs();
$('#example-2').tabs();

And you want the current panel of the second tab set:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

And if you want the ACTUAL tab and not the panel (really easy, which is why I ddn't mention it before but I suppose I will now, just to be thorough)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

Again, remember, jQuery did all the hard work, don't think so hard.

Excellent, thanks! If you want you could also provide this as an answer to stackoverflow.com/q/1864219/11992.

jQuery UI Tabs Get Currently Selected Tab Index - Stack Overflow

jquery jquery-ui
Rectangle 27 2

As I think you've figured, the reason the current approach isn't working is that the IngredientSelectModel created for and updated by the AddIngredient action is separate from the one used to populate the ListBox.

If Ajax and unobtrusive JQuery are set up correctly (the browser URL shouldn't change when you select an ingredient), @pinhead's answer will send the selected value to the action, but SelectedIngredients won't accumulate the values you select because its value isn't included in the ajax data. For that to work you need to change the multi-select to be bound to SelectedIngredients:

@Html.ListBoxFor(
    model => model.SelectedIngredients,
    new MultiSelectList(Model.SelectedIngredients),
    new { style = "width:50%;" })

...and move it inside the form declaration so its value is posted to the action along with the new ingredient to add.

That said, I wouldn't say you're doing enough work to justify a round-trip to the server, so after making the above change you could just add the ingredient entirely on the client side like this:

@Html.DropDownListFor(
    model => model.SelectedIngredient, 
    Model.Ingredients, 
    "Select Ingredient", 
    new { @onchange = "$('#SelectedIngredients').append('<option>' + $(this).val() + '</option>')" })

asp.net - MVC update ListboxFor with selected values from DropDownList...

asp.net ajax asp.net-mvc
Rectangle 27 3

I tried with 3.4.0 version enable and disable is working fine and also add

list_html += ' <option value=""></option>';

Above line along with the code, then placeholder will also show..I have paisted the edited code below

//generate <options from JSON
            var list_html = '';
            list_html += ' <option value=""></option>';

            $.each(data, function(i, item) {
                list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>';
            });
            //replace <select2 with new options
            $('#make_id').html(list_html);
            //set to enabled|disabled
            if (data.length > 1) {
                $('#make_id').select2('enable', true); //enable form
                $('#make_id').select2({placeholder: data.length +' results'});

            }else{

                $('#make_id').select2('enable', false); //disable form
                $('#make_id').select2({placeholder: 0 +' results'});


            }

That worked, thanks! I still dont really understand why it worked, but at least I can get on with this project... have waisted many hours on little things like this. Tx!!

Jquery select2 ajax chained selects - Stack Overflow

jquery jquery-select2
Rectangle 27 2

I had a similar problem with a product search form I was working on. I know that this has already been answered, but I figured it can't hurt to submit my code, right?

$('#product-search').focus(function(){
    $('#product-search').mouseup(function(){
        $(this).select(function(){
            $(this).off('mouseup');
        });

        $(this).select();
    });
});

The advantage being that it only selects the text when the form first gets focus, rather than every time the form gets clicked, such as when a user wants to select a portion of the text.

You da MAN! This is exactly what I was looking for.

Hmmm not exactly a good solution because you cannot select partial areas of the textbox for deletion or editing.

asp.net - Select all text on focus using jQuery - Stack Overflow

jquery asp.net
Rectangle 27 2

I had a similar problem with a product search form I was working on. I know that this has already been answered, but I figured it can't hurt to submit my code, right?

$('#product-search').focus(function(){
    $('#product-search').mouseup(function(){
        $(this).select(function(){
            $(this).off('mouseup');
        });

        $(this).select();
    });
});

The advantage being that it only selects the text when the form first gets focus, rather than every time the form gets clicked, such as when a user wants to select a portion of the text.

You da MAN! This is exactly what I was looking for.

Hmmm not exactly a good solution because you cannot select partial areas of the textbox for deletion or editing.

asp.net - Select all text on focus using jQuery - Stack Overflow

jquery asp.net
Rectangle 27 1

I found an answer. You cannot select the child elements as container and sortable element at the same time. Thanks everyone for their time and effort. Here is the full answer: Nest jQuery UI sortables

javascript - jQuery sortable label click event is not working - Stack ...

javascript jquery ajax jquery-ui
Rectangle 27 1

I found an answer. You cannot select the child elements as container and sortable element at the same time. Thanks everyone for their time and effort. Here is the full answer: Nest jQuery UI sortables

javascript - jQuery sortable label click event is not working - Stack ...

javascript jquery ajax jquery-ui
Rectangle 27 45

The problem is that iScroll cancels the default behavior of your select tag (Not a very good implementation if you ask me).

This occurs in the _start() function on line 195:

e.preventDefault();

If you comment that out you'll notice the select tag works again.

But commenting it out means you've hacked the library which might break other desirable iScroll functionality. So here's a better workaround:

var selectField = document.getElementById('Field10');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
    e.stopPropagation();
}, false);

That code will allow the default behavior to occur, without propagating the event to iScroll where it screws everything up.

Since your JS is not inside any jQuery-like onReady() event, you'll have to make sure to you put this code AFTER the HTML where your select elements are defined.

touchstart
mousedown

By the way, have this up and running here if you want to test it or see the full source: edrooth.com/test

@sym3tri - Thanks for answer. Will it also solve the problem in Android browser? and Instead of 'Field10' can't we use 'select' because I want to fix all select elements on page.

It should work in Android too, but I can't say for sure b/c I don't have an android phone. I tested it in the iPhone and it works. And sure, you can do the same thing for all select tags, just call getElementsbyTagName('select') and loop through them all.

javascript - iScroll 4 not working with form