Rectangle 27 2

$(document).ready won't work in a partial. It is only executed when the page is loaded initially.

So you need to shift those scripts, inside the partial, to the callback function of your ajax call.

Thanks for the response. That's what I gathered, but nothing I tried had worked. The answer turned out to be a combination of that AND this: stackoverflow.com/questions/12978254/ For reasons I don't really understand I had to add .datepicker{z-index:1151;} to my css.

Hmm strange. The z-index fix looks like the datepicker was hiding behind the modal. Bootstrap modal has a z-index of 1050 hence datepicker is given a higher z-index value.

asp.net mvc 4 - Getting jquery event to fire for element in ajax loade...

jquery asp.net-mvc-4 twitter-bootstrap asp.net-ajax
Rectangle 27 27

Bootstrap nav tabs and pills work with a JS plugin. The plugin is loaded on the page and takes care of the highlighting and the remembering of the currently active tab or pill. It disables the href attributes if they link to other pages, simply because when you click on a link to another page, a new page is loaded. The JS is then reloaded for this new page, and it does not know about which tab or pill is currently active. They are designed to work with single page apps or links to anchors on the same page, and they work fine for that purpose.

The jQuery approach fails for the same reason, but might be easier to explain.

$('ul.nav-pills li a').click(function (e) {
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

You click on a link, JS goes off and changes the class, only if it has enough time to do so before the next page is loaded, this next page is loaded because the href attribute on the link tells the browser to navigate to a new page. And the new page loads your JS again, it can't possibly remember the variables from the previous page, like which tab or pill is meant to be active.

If you are going to navigate to other pages, you might as well just set the active class on the right tab for the specific page that is being loaded.

If you really need to do this on the client side, you could do something like this, and load it on each page.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'http://myweb.com/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});

It sets the active tab based on the last part of the URL, it's kind of specific to your scenario (and previously my scenario) though. You'd have to adapt it if there were file extensions or query parameters involved. Every page needs to at least have a link to itself on it. And it preferably has the exact same header with the same tabs and pills rendered on it as all the other pages.

Both of these last points again raise the thought in my mind "if you have to have this much control over what exactly is being rendered onto the page, you probably have access to the server side", and if that is the case, you might as well fix it there, as every link does a new request to the server anyway. And your solution wouldn't have to rely on some not so robust JavaScript to work.

So this is what I had going at one stage, you could improve it, or implement a solution where you post some data to the next page and read it with JavaScript there (which would probably be easier and more robust if you had file extensions or query strings to deal with).

Good luck with it! :)

Updated the answer to explain it a bit better using the jQuery as example.

The hint is in the last sentence. JS isn't the place for storing things that need to be remembered across a number of pages. You could implement an approach where your JS takes over the navigating instead of the links, and then posts some values to the new page. But if you are going to be navigating between actual pages, it is a much better idea to just have some server side logic decide which tab or pill is going to have the active class before it sends the page to the client. Or if they are static pages, just add the active class to the right tab or pill for every page.

May be i can send a get or post in the hyperlink. And on my pages check for the parameters to make a class active. right ?

jquery - Twitter Bootstrap Tabs active class toggle not working - Stac...

jquery html css twitter-bootstrap tabs
Rectangle 27 0

There's another mistake in this code which is that the carousel indicators aren't clickable. They should be links that take you to the appropriate panel.

You need to add a hashtag to the data target:

<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>

Bootstrap 3 Carousel won't work. (Yes, I have jQuery loaded before Boo...

jquery twitter-bootstrap carousel twitter-bootstrap-3
Rectangle 27 0

I copied your code into Plunker and included these lines in the <head> section of my index.html. You need to make certain that Jquery, Bootstrap, and Angular are properly loaded in your project. Jquery needs to be before Bootstrap since Bootstrap depends on it. Once I added these dependencies, the AngularJS directives in your code worked. If you're working in Visual Studio, you could add these to your project through the NuGet Package Manager.

<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>

Thanks for your effort! Is working in Plunker, but idk why it's not working on my browsers. Trying to fix this right now.:) Thanks again.

What program are you using to run your code?

javascript - Angular.JS Custom Directive doesn't work - Stack Overflow

javascript html angularjs
Rectangle 27 0

After putting a placeholder div into my html markup and using that to load the modal html it works fine.

$(".popup-dialog-link").click(function (e) {
        e.preventDefault();

        $('popup-dialog-modal').load(this.href, function () {
            $(this).find('#myModal').modal();
        });
    });

MVC, Twitter bootstrap modal dynamically loaded from partial via jquer...

jquery twitter-bootstrap modal-dialog partial
Rectangle 27 0

You need to destroy the table prior to re-initalizing by either adding destroy: true option or calling destroy() API method.

You could let DataTables handle Ajax request and use ajax.reload() API method to refresh the data.

function getPositions(){
    $("#datatable").DataTable().ajax().reload();
}

$("#datatable").DataTable({
   ajax: {
      url: "positions",
      dataSrc: "",
      cache: false
   },
   columns: [
      { title: "#", data: "id" },
      { title: "Account", data: "id_sec_account" },
      { title: "Security", data: "id_sec" },
      { title: "Quantity", data: "quantity" },
      { title: "Status", data: "status" }
   ]
});

setInterval(getPositions, 3000);

@dorrakhribi, have you tried it?

javascript - jquery function of datatable bootstrap plugin does not wo...

javascript jquery ajax twitter-bootstrap datatables
Rectangle 27 0

Perhaps it doesnt work when using $(document).ready() since the elements aren't present at the time this event is fired?

$(document).on("ajaxComplete", function(){ # rest of your code # });

I wrapped my code inside the ajaxComplete method and now the plugin is validating. Saved my day. Thanks

jquery - form loaded in bootstrap modal via ajax does not work - Stack...

jquery twitter-bootstrap modal-dialog jquery-validate bootstrap-modal
Rectangle 27 0

This is probably a z-index problem. Set the z-index of the TokenInput to be higher than the modal pop-up, using the parameter in the TokenInput set up.

hi - thanks for that. still no, ill keep trying to figure out why tho - very odd..

@FrancoisBrand really? Odd- Are you able to knock up a demo on jfiddle or something?

jquery - TokenInput stops working when loaded in bootstrap modal - Sta...

jquery bootstrap-modal jquery-tokeninput
Rectangle 27 0

As far as I can see you have not loaded the jQuery-Library. As indicated on Bootstrap's page, you need jQuery for any Javascript-Component of Bootstrap, see here

Make sure to load it before the Bootstrap Javascript, like this:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Then you should be all set up.

I have now added in the jQuery to my footer links as suggested but it is still not working.

javascript - Modal not working - Stack Overflow

javascript jquery twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

Ok so I think there is a couple of step missing here. Your Jsfiddle doesn't work at all so it is hard to really understand what your problem is. So I'll address every concern I can think you are missing.

First, ar you using angular-strap? It defines most directives for Bootstrap components and integrates better with "Angular Way".

Then, instead of using href (wich, in angular, can be manage with the $routeProvider), you can use your scope to, for example, select the right item to show by passing it the id of the element

<a href="#myModal" class="btn" openmodal>Open modal</a>

can become something like

<a ng-click="show(item.id)">Show this item</a>

Where show is a function define in your controller that triggers the modal and selects the right item to display.

Then if you want to use it as a directive, you can inject this element in your directive and display it. You might need

return {
    scope: true, // Isolated scope -> not shared between all components
    link: function(scope, element, attrs){ 
       // ...
    },
};

Try something like and don't hesitate if you have any questions!

jquery - Angular: Load bootstrap modal loaded with data of the element...

jquery twitter-bootstrap angularjs scope bootstrap-modal
Rectangle 27 0

var _jquery = function () {
    $(document).ready(function () {
        // do jquery stuff
        console.log("jQuery loaded");
        $("#jq").html("jquery version " + jQuery().jquery + " ready")
    })
};

var _bootstrap = function () {
    // do bootstrap stuff
    console.log("bootstrap loaded");
    $(".btn").trigger("click")
    .promise().done(function(el) {
      setTimeout(
      function() {
        $(el).trigger("click")
      }, 3000
      )
    });
};

var _load = function (url1, url2, test, callback) {
    var script = document.createElement("script");
    script.src = url1;
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
    setTimeout(function () {
        if (test()) {
            _load(url2, null, function() {return false}, callback)
        } else {
            callback()
        }
    }, 3000)
};

var _scripts = [
    ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
    , "//code.jquery.com/jquery-1.11.1.min.js", function () {
        return !window.jQuery
    },
    _jquery],
    ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
        "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () {
        return (typeof $().emulateTransitionEnd == 'function') == false
    },
    _bootstrap]
];

_scripts.forEach(function (v) {
    _load(v[0], v[1], v[2], v[3]);
});
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
          <div id="jq"></div>
    </div>
  </div>
</div>
  </body>

Thanks but this example seems a little too complicated for such a simple task. I've decided to abandon the cdn loading entirely and load everything locally. It's much simpler and doesn't really make any noticable difference in the tests I have run so far.

javascript - Run custom code after jQuery has been loaded via Moderniz...

javascript jquery modernizr
Rectangle 27 0

Ok so I think there is a couple of step missing here. Your Jsfiddle doesn't work at all so it is hard to really understand what your problem is. So I'll address every concern I can think you are missing.

First, ar you using angular-strap? It defines most directives for Bootstrap components and integrates better with "Angular Way".

Then, instead of using href (wich, in angular, can be manage with the $routeProvider), you can use your scope to, for example, select the right item to show by passing it the id of the element

<a href="#myModal" class="btn" openmodal>Open modal</a>

can become something like

<a ng-click="show(item.id)">Show this item</a>

Where show is a function define in your controller that triggers the modal and selects the right item to display.

Then if you want to use it as a directive, you can inject this element in your directive and display it. You might need

return {
    scope: true, // Isolated scope -> not shared between all components
    link: function(scope, element, attrs){ 
       // ...
    },
};

Try something like and don't hesitate if you have any questions!

jquery - Angular: Load bootstrap modal loaded with data of the element...

jquery twitter-bootstrap angularjs scope bootstrap-modal
Rectangle 27 0

$(document).ready won't work in a partial. It is only executed when the page is loaded initially.

So you need to shift those scripts, inside the partial, to the callback function of your ajax call.

Thanks for the response. That's what I gathered, but nothing I tried had worked. The answer turned out to be a combination of that AND this: stackoverflow.com/questions/12978254/ For reasons I don't really understand I had to add .datepicker{z-index:1151;} to my css.

Hmm strange. The z-index fix looks like the datepicker was hiding behind the modal. Bootstrap modal has a z-index of 1050 hence datepicker is given a higher z-index value.

asp.net mvc 4 - Getting jquery event to fire for element in ajax loade...

jquery asp.net-mvc-4 twitter-bootstrap asp.net-ajax
Rectangle 27 0

carousel-inner
item
<div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

Bootstrap 3 Carousel won't work. (Yes, I have jQuery loaded before Boo...

jquery twitter-bootstrap carousel twitter-bootstrap-3
Rectangle 27 0

I have the same problem, in my case, the default style change and can't use angular ng-model inside any radio or checkbox button. So i read some articles and found that sometimes if you load JQuery after Bootstrap it overwrites something and it prevent default styles and components to be loaded as bootstrap components, this also happens if you load angularJS after jQuery or viceversa.

PS.- My answer: Check your load script stack, play with it and find which order works for you. (first jquery, then angularJs, finally bootstrap).

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation.

javascript - AngularJS: Radio buttons do not work with Bootstrap 3 - S...

javascript twitter-bootstrap angularjs angularjs-scope
Rectangle 27 0

You should insert jquery on top of bootstrap and you must only use one of the bootstrap js. You loaded the 2 versions and they can create conflit.

also you are closing the head tag before including the scripts. This is wrong

First add before closing the body tag the following:

<script>
    $('document').ready(function() {$('#myModal').modal('show');});
</script>

Next, i believe you are missing some tags for the modal to work such as:

(you are missing the divs with modal-dialog and modal-content)

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

now this is the order, but it still don't show me the form: <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/; <script src="js/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css">

I updated my post. You are cloaing the head before inserting the acripts and links

See the source code (ctrl + u) and click on the jquery and bootstrap and see if they open correctly. Ifnot, they are not where you say they are. Please check

javascript - Create Modal Form with bootstrap (HTML) - Stack Overflow

javascript html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

I changed ALL my z-index values across all the css files and now its FIXED, as per previous questions a single line did not fix my problem. Also - as for the duplicate questions, I was not even aware they were loading in the background, my text box did not even show up so I had no clue it was a possible z-index thing.

jquery - TokenInput stops working when loaded in bootstrap modal - Sta...

jquery bootstrap-modal jquery-tokeninput
Rectangle 27 0

After putting a placeholder div into my html markup and using that to load the modal html it works fine.

$(".popup-dialog-link").click(function (e) {
        e.preventDefault();

        $('popup-dialog-modal').load(this.href, function () {
            $(this).find('#myModal').modal();
        });
    });

MVC, Twitter bootstrap modal dynamically loaded from partial via jquer...

jquery twitter-bootstrap modal-dialog partial
Rectangle 27 0

Oh holy cow. The problem was (obviously) never with the code. It is with the version of either JQuery or Bootstrap that I have loaded. When I replaced my local copies with links to the source, the problem went away. I'm glad I found this problem, or it would pervade my entire site as I developed it. Thanks everyone for the help. I guess you have to learn the dumb stuff before you become expert.

javascript - Bootstrap 3 Example Code for Modal Window Not working - S...

javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal