Rectangle 27 38

If you're using caching for your tabs, then this solution is propably a better fit, it only shows the ajax loading if the content isn't already on the page.

$(".tabs").tabs({
   cache:true,
   load: function (e, ui) {
     $(ui.panel).find(".tab-loading").remove();
   },
   select: function (e, ui) {
     var $panel = $(ui.panel);

     if ($panel.is(":empty")) {
         $panel.append("<div class='tab-loading'>Loading...</div>")
     }
    }
 })

That's a really helpful post, thanks. I find it bizarre that jQ UI 1.8 trims any HTML content inside the function, but I only really need a message anyway.

it's cool, but somehow it does not work for the first tab which is automatically selected. I worked it around by inserting div manually and than, your code removes it.

newer version of jQ UI (as for now i'm using 1.11) doesn't have select event. use beforeLoad instead. this also answering what's @m1k3y3 facing (doesn't work on first tab) because AFAIK select are equal to activate in the newer version and the first tab are automatically activated

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

JQuery UI Tabs - "Loading..." message - Stack Overflow

jquery jquery-ui jquery-ui-tabs
Rectangle 27 7

I used a different method to this myself. I wanted the tab titles to remain as they were, and have the 'loading' information in the tab itself.

The way I did it is as follows:

$("#matchTabs").tabs({
      spinner: "",
      select: function(event, ui) {
        var tabID = "#ui-tabs-" + (ui.index + 1);
        $(tabID).html("<b>Fetching Data.... Please wait....</b>");
      }
    });

Like the previous poster, I used the spinner method to prevent the tab titles from being changed. The select event fires when a new tab is selected, so I got the ID of the currently selected tab and added one to create a variable that would reference the DIVs in which the ajax content is loaded by default.

Once you have the ID, all you need to do is replace the HTML inside the DIV with your loading message. When the Ajax completes, it will replace it again for you with the actual content.

JQuery UI Tabs - "Loading..." message - Stack Overflow

jquery jquery-ui jquery-ui-tabs
Rectangle 27 4

Balu, I recently needed to something similar. In my project, I wanted the tabs to retain the tab title, but append an ajax-loading type animation. Here is what I used:

$(".tabs").tabs({ spinner: '',
                select: function(event, ui) { 
                    $(".tabs li a .loader").remove();
                    $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
                    },
                load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
                });

The "spinner" option removes the "Loading..." effect on click of the tab. The "select" event allows us to get the selected tab and append a new span containing the animation. Once the content has loaded we use the "load" event to remove the animation. To prevent multiple user clicks from destroying the tabs, we remove() all animations on any tab select.

Did you already solve this issue? If so, please share the solution.

hello.... it didn't work for me, though ur logic is sound.. may be something wrong with the selector.. the below sol worked .. thanks for sharing

JQuery UI Tabs - "Loading..." message - Stack Overflow

jquery jquery-ui jquery-ui-tabs
Rectangle 27 2

Issue #2 - Loading complete, but not displayed

According to your comments about the error logs the product page is doing a redirect to itself, and getting stuck in that loop. This explains the "10 internal redirects" error message. The access log error is likely just a side effect of having so many of the same repeat requests in such a brief time window.

Note that I could not reproduce this issue, but I got a very similar issue (below). I was unable to determine why this is happening through poking around. This may take some code investigation (aka, on your end). Is this a custom WP theme?

A second type of error occurs which is similar. Middle-click or open a product in a new tab. Or click on a direct link to a product, such as: http://museiam.ca/product/black-cut-sleeve-sweater/

The content will load, but it will be a white page. In this case, the javascript has loaded content but did not complete the loading event to make it visible.

You can confirm the second issue by opening your dev tools (for chrome: F12), and entering the following javascript into the script console:

jQuery('.global_content_wrapper').css('opacity', 1)

EDIT: It seems issue #2 is also inconsistent, sometimes it does work - though much less often than following a link from within the website. These two issues may be one in the same.

Hello. Thank you for the reply. I was playing around with some plugins which is why you may have seens tons of code.. I tried the js and it seemed to load the content, however sometimes without the descriptions like you said. When you delete your cache then click a product, it will work fine. However, if you try to reload the page or access the same product again it will show blank. I'm stumped and have no clue as to why this is? I'm, thinking its a cache issue or something, as this started only happening recently & I've really only been doing minor css tweaks. I even deleted w3tc with no luck

I am also using a child theme of the theme "The Retailer". However I never had this problem before and I'm not sure it is theme related, again, it just happened yesterday and I've only been doing minor css tweaks. I did play with w3tc a bit but I completely removed it and the problem still persists. So you are saying it is not related to the error in the error log? Thx!

Ah ok, that explains the content problem. The loading issue seems to only pop up if something is missing. I believe that something is caused by a script error. When the content doesn't load, a JavaScript error is thrown that explains NProgress is undefined. On pages where it loads successfully, NProgress is defined. Hopefully that helps, you might try your dev tools and see what other errors might pop up.

Hello. what do you think is missing that is causing this problem to happen? Is it the tab descriptions? Could it be caused by a css error or syntax issue? do you know how I can go about solving the problem or what I should look at more closely because really I have no clue lol

Hello again. After more testing it seems the issue was just caused by a plugin that was causing conflicts with other plugins. After deactivating that plugin the problem is has completely disappeared and product pages load fine.. Thanks for your help though!

css - Woocommerce product pages blank? - Stack Overflow

css wordpress caching woocommerce product
Rectangle 27 1

In jQuery UI v1.12 you can use the beforeLoad Handler:

$('#tabs').tabs({                
beforeLoad: function(event, ui) {
    ui.panel.html('Loading')
}
});

JQuery UI Tabs - "Loading..." message - Stack Overflow

jquery jquery-ui jquery-ui-tabs
Rectangle 27 36

I think I've found an answer. Buried deep in the jQuery Mobile documentation, there is information about setting the data-url on the div with data-role="page". When I do this, I get the nice jQuery Mobile AJAX stuff (page loading message, page transitions) AND I get the url in the browser updated correctly.

Essentially, this is how I'm doing it...

[HttpPost]
public ActionResult Products(...)
{
    // ... add products to cart
    TempData["DataUrl"] = "data-url=\"/Cart\"";
    return RedirectToAction("Index", "Cart");
}
<div data-role="page" data-theme="c" @TempData["DataUrl"]>

On my HttpPost actions I now set the TempData["DataUrl"] so for those pages it gets set and is populated on the layout page. "Get" actions don't set the TempData["DataUrl"] so it doesn't get populated on the layout page in those situtations.

The only thing that doesn't quite work with this, is when you right-click... view source... in the browser, the html isn't always for the page you are on, which isn't unusual for AJAX.

wow man, this has also bothered me for ages! in my case I'm using PHP so here's what worked for me data-url="<?=$_SERVER['REQUEST_URI']?>"

TempData["DataUrl"] = "data-url=" + Url.Content("~") + "controller/action";

Also if you don't have an Action keep the trailing slash - "jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced."

Thanks, I'm using Rails, but the data-url tag was exactly what I was looking for.

asp.net mvc 3 - jQuery Mobile/MVC: Getting the browser URL to change w...

asp.net-mvc-3 jquery-mobile asp.net-mvc-routing
Rectangle 27 1

If so, it's possible that scripts in the page you're loading aren't running, and the link you're clicking is reverting to its href instead of using an onclick event like it should.

From DynamicDrive's source, here is the function called to load content into a tab:

ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
    var divId=tabinstance.contentdivid
    document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(divId).innerHTML=page_request.responseText
        ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
    }
}

As you can see, this just sets the innerHtml property of the target element. A known side effect of innerHtml is that it does not automatically execute script tags when updating the property in this way. JQuery has extra logic built in that basically steps through the new HMTL and invokes any script tags it finds. I do not recommend attempting to reinvent that feature.

1) The quick and dirty solution: Change this line:

document.getElementById(divId).innerHTML=page_request.responseText
$("#" + divId).html(page_request.responseText);

Get the power of jQuery without changing your existing code. DD's code might be broken in other places too...

2) Use a better tab library (i.e. the ones built into jQueryUI: http://jqueryui.com/demos/tabs/). More maintainable in the future.

As an aside, I tend to thing most anything on DynamicDrive is obsolete now and stray away from their solutions most of the time.

Ok.. the solution one did not completely work, but I accepted it anyway. changing the line you mentioned in the solution 1, the frame opened properly but didn't load the form as it was supposed to.. I was using DD's tab and seems that I might be short sighted when I decided to use it (probably stepped on another bug now). I'll just go with jqueryui.

jquery - Loading external page (containing ajax) via ajax - Stack Over...

jquery ajax colorbox
Rectangle 27 1

Use a fixed position div that is the height/width of the containing div (uni-form) and probably jack it's z-index up so it is definitely on top of the form when visible.

var h= $(.uni-form).height();
var w= $(.uni-form).width();

Position the loading icon wherever appropriate.

You can use CSS to set the opacity of the overlaying (loading) div so they can see the form behind it and that it's on it's way. When the form is done loading, fade the overlaying div out.

Hopefully that helps. I recommend this route if you are trying to keep the user from poking around while everything loads.

i think the blockui plugin is a cheap, but effective way out. thank you for the response -- also solid.

vb.net - add loading message partial view jquery mvc3 - Stack Overflow

jquery vb.net asp.net-mvc-3 razor partial-view
Rectangle 27 3

This would make the buttons disappear, then an animation of "loading" would appear in their place and finally just display a success message.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 3

This would make the buttons disappear, then an animation of "loading" would appear in their place and finally just display a success message.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 3

This would make the buttons disappear, then an animation of "loading" would appear in their place and finally just display a success message.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 12

I just made a jQuery 3.2.1 bookmarklet with error-handling (only load if not already loaded, detect version if already loaded, error message if error while loading). Tested in Chrome 27. There is no reason to use the "old" jQuery 1.9.1 on Chrome browser since jQuery 2.0 is API-compatible with 1.9.

drag & drop it in your bookmark bar

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";vara=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery"+jQuery.fn.jquery+"loadedsuccessfully.")};a.onerror=function(){deletejQuery;alert("ErrorwhileloadingjQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery("+jQuery.fn.jquery+")isalreadyloaded!")}else{alert("jQueryisalreadyloading...")}}})())

I ran this, and still got "Uncaught TypeError: $ is not a function"...

Maybe the website on that you are trying to use this sends a custom Content-Security-Policy header.

Include jQuery in the JavaScript Console - Stack Overflow

javascript jquery
Rectangle 27 12

I just made a jQuery 3.2.1 bookmarklet with error-handling (only load if not already loaded, detect version if already loaded, error message if error while loading). Tested in Chrome 27. There is no reason to use the "old" jQuery 1.9.1 on Chrome browser since jQuery 2.0 is API-compatible with 1.9.

drag & drop it in your bookmark bar

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";vara=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery"+jQuery.fn.jquery+"loadedsuccessfully.")};a.onerror=function(){deletejQuery;alert("ErrorwhileloadingjQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery("+jQuery.fn.jquery+")isalreadyloaded!")}else{alert("jQueryisalreadyloading...")}}})())

I ran this, and still got "Uncaught TypeError: $ is not a function"...

Maybe the website on that you are trying to use this sends a custom Content-Security-Policy header.

Include jQuery in the JavaScript Console - Stack Overflow

javascript jquery
Rectangle 27 12

I just made a jQuery 3.2.1 bookmarklet with error-handling (only load if not already loaded, detect version if already loaded, error message if error while loading). Tested in Chrome 27. There is no reason to use the "old" jQuery 1.9.1 on Chrome browser since jQuery 2.0 is API-compatible with 1.9.

drag & drop it in your bookmark bar

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";vara=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery"+jQuery.fn.jquery+"loadedsuccessfully.")};a.onerror=function(){deletejQuery;alert("ErrorwhileloadingjQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery("+jQuery.fn.jquery+")isalreadyloaded!")}else{alert("jQueryisalreadyloading...")}}})())

I ran this, and still got "Uncaught TypeError: $ is not a function"...

Maybe the website on that you are trying to use this sends a custom Content-Security-Policy header.

Include jQuery in the JavaScript Console - Stack Overflow

javascript jquery
Rectangle 27 1

You can have jQuery to wait for the click of the link and when the link is clicked show the display loading message.

Basically you want a progress bar monitor, which I have never seen it done with just javascript, but with flash or ajax.

Here is a File Upload Demo that should help.

asp.net - Showing page load progress with JavaScript - Stack Overflow

asp.net javascript jquery download
Rectangle 27 97

Along with what Jonathan and Samir suggested (both excellent answers btw!), jQuery has some built in events that it'll fire for you when making an ajax request.

ajaxStart

Show a loading message whenever an AJAX request starts (and none is already active).

...and it's brother, the ajaxStop event

Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.

Together, they make a fine way to show a progress message when any ajax activity is happening anywhere on the page.

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>
$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });
.ajaxStart
$(document).ajaxStart(function(){}).

Jonathan's answer was very in-dept, but this for me was the best for its simplicity.

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 97

Along with what Jonathan and Samir suggested (both excellent answers btw!), jQuery has some built in events that it'll fire for you when making an ajax request.

ajaxStart

Show a loading message whenever an AJAX request starts (and none is already active).

...and it's brother, the ajaxStop event

Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.

Together, they make a fine way to show a progress message when any ajax activity is happening anywhere on the page.

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>
$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });
.ajaxStart
$(document).ajaxStart(function(){}).

Jonathan's answer was very in-dept, but this for me was the best for its simplicity.

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 97

Along with what Jonathan and Samir suggested (both excellent answers btw!), jQuery has some built in events that it'll fire for you when making an ajax request.

ajaxStart

Show a loading message whenever an AJAX request starts (and none is already active).

...and it's brother, the ajaxStop event

Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.

Together, they make a fine way to show a progress message when any ajax activity is happening anywhere on the page.

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>
$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });
.ajaxStart
$(document).ajaxStart(function(){}).

Jonathan's answer was very in-dept, but this for me was the best for its simplicity.

How can I create a "Please Wait, Loading..." animation using jQuery? -...

jquery animation
Rectangle 27 7

If you're validating in JS, Select2 has an example for dynamic loading/generating data which overrides query() to just repeats the user's input.

I solved a similar problem (server-side) with JQuery UI 'autocomplete'. Here, I took the approach of returning objects wrapping both a label with possible explanatory message, a text value without decoration, and a combined ID value & status flag. I overrode select to store the Text & ID to hidden fields.

In my case, I was distinguishing between existing Customers to reference, or creating a new Customer with the entered name. I was able to list options of matching existing customers or creating "ABC New Customer", quite nicely:

User enters: "Alphabet Soup" and sees a choice of:

good stuff. it'd be nice to see a working example

I noticed that by using this approach my ajax implementation gets ignored, is there a way to call my ajax logic before or after query is executed?

@MaksimVi. query is the fundamental datasource API, ajax is a shortcut for common AJAX/JSONP datasources. They are alternative ways to provide the datasource, it obviously does not make sense for Select2 to call both! If you want to do AJAX manually, put it in your query handler code.

@ThomasW I just want to reuse the logic provided in ajax object (call it manually).

query

javascript - Entering values into a jquery-select2 that are not in the...

javascript jquery jquery-select2
Rectangle 27 9

Couple of things to start with is that you need to remember the default ModelBinder is recursive and it will try and work out what it needs to do ... so quite clever. The other thing to remember is you don't need to use the html helpers, actual html works fine as well :-)

So, first with the Model, nothing different here ..

public class ParentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<ChildViewModel> Child { get; set; }
}

public class ChildViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
}

Parent partial view - this takes an instance of the ParentViewModel

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ParentViewModel>" %>

<h2>Parent</h2>
<%: Html.TextBox("parent.Name", Model.Name) %>
<%: Html.Hidden("parent.Id", Model.Id) %>

<% foreach (ChildViewModel childViewModel in Model.Child)
{
    Html.RenderPartial("Child", childViewModel);         
}
%>

Child partial view - this takes a single instance of the ChildViewModel

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ChildViewModel>" %>

<h3>Child</h3>
<%: Html.Hidden("parent.Child.index", Model.Id) %>
<%: Html.Hidden(string.Format("parent.Child[{0}].Id", Model.Id), Model.Id)%>
<%: Html.TextBox(string.Format("parent.Child[{0}].FirstName", Model.Id), Model.FirstName) %>

Something to note at this point is that the index value is what is used for working out the unique record in the list. This does not need to be incremental value.

So, how do you call this? Well in the Index action which is going to display the data it needs to be passed in. I have setup some demo data and returned it in the ViewData dictionary to the index view.

public ActionResult Index()
{
    ViewData["Message"] = "Welcome to ASP.NET MVC!";

    ViewData["Parent"] = GetData();

    return View();
}

private ParentViewModel GetData()
{
    var result = new ParentViewModel
                     {
                         Id = 1,
                         Name = "Parent name",
                         Child = new List<ChildViewModel>
                                     {
                                         new ChildViewModel {Id = 2, FirstName = "first child"},
                                         new ChildViewModel {Id = 3, FirstName = "second child"}
                                     }
                     };
    return result;
}

In the real world you would call a data service etc.

And finally the contents of the Index view:

<form action="<%: Url.Action("Edit") %>" method="post">
    <% if (ViewData["Parent"] != null)  { %>

        <%
            Html.RenderPartial("Parent", ViewData["Parent"]); %>

    <% } %>
    <input type="submit" />
</form>

So now we have the data displayed how do we get it back into an action? Well this is something which the default model binder will do for you on simple data types in relatively complex formations. So you can setup the basic format of the action which you want to post to as:

[HttpPost]
public ActionResult Edit(ParentViewModel parent)
{

}

This will give you the updated details with the original ids (from the hidden fields) so you can update/edit as required.

You mentioned in your question loading in custom templates via ajax, do you mean how to give the user an option of adding in another child without postback?

Add action - Need an action which will return a new ChildViewModel

[HttpPost]
public ActionResult Add()
    {
        var result = new ChildViewModel();
        result.Id = 4;
        result.FirstName = "** to update **";
        return View("Child", result);
    }

I've given it an id for easy of demo purposes.

You then need a way of calling the code, so the only view you need to update is the main Index view. This will include the javascript to get the action result, the link to call the code and a target HTML tag for the html to be appended to. Also don't forget to add your reference to jQuery in the master page or at the top of the view.

<script type="text/javascript">

   function add() {

        $.ajax(
            {
                type: "POST",
                url: "<%: Url.Action("Add", "Home") %>",
                success: function(result) {
                    $('#newchild').after(result);
                },
                error: function(req, status, error) {

                }
        });
    }

</script>

<form action="<%: Url.Action("Edit") %>" method="post">
    <% if (ViewData["Parent"] != null)  { %>

        <%
            Html.RenderPartial("Parent", ViewData["Parent"]); %>

    <% } %>
    <div id="newchild"></div>

    <br /><br />
    <input type="submit" /> <a href="#" onclick="JavaScript:return add();">add child</a>
</form>

This will call the add action, and append the response when it returns to the newChild div above the submit button.

I hope the long post is useful.

your long post is very useful and much appreciated. Looks like it's exactly what I needed.

ASP.Net MVC2 Custom Templates Loading via Ajax and Model Updating - St...

asp.net-mvc ajax asp.net-mvc-2 partial-views