Here is my MVC View section:
#section popups{
<div class="popup-class" id="popup">
<div class='btn-group' id='actions'>
<div class='collapse navbar-collapse'>
<ul class='actions'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a>
<ul class='dropdown-menu'>
<li><a href='#'>Product</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'>
</div>
</div>
}
I want to call it from JavaScript file (only this section).How can i do that?
There is no way to get a asp.net mvc section in javascript. What you can do is define an html element around the section on the layout page, a <div> for sample, and get this element, for sample, in your layout page:
<div id="popups">
#RenderSection("popups", false)
</div>
In your javascript code, just call this element, for sample:
$(function(){
// call the element, call a method
$("#popups").show();
});
You do not specify what you want to do with this.
Related
I have some divs on a page in this order as below. When someone clicks a link inside the UL .list-links I want to capture the value of
<span class="asa_portlet_title">Title here</span>
in a variable. I've tried using siblings and closest but it always returns empty.
--
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
--
$('[ul.list-links a').click(function() {
var _portletTitle = $(this).siblings('.my_portlet').text();
});
Open to pure javascript method as well. Basically I have a number of divs on the page containing links, and those divs have another div above it where the title exists
Would anyone be able to put together a small working sample?
You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.
$('ul.list-links a').click(function(event) {
event.preventDefault();
var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
console.log(_portletTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here 2</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name 2
Link name 2
Link name 2
Link name 2
</li>
</ul>
</div>
</div>
I'm building a, SPA with Vue JS, and I'm having some problems with my Sidebar component. The default functionality of my Dropdown - to open the submenu - is being overridden by Vue. When I click the anchor, the url is being updated as though I was clicking in a route.
I tried to add #click.stop, but it doesn't work.
Sidebar.vue
<template>
<div class="sidebar">
<div class="main-menu">
<div class="scroll">
<ul class="list-unstyled">
<li>
<a href="#start" data-target="#start" #click.stop>
<i class="iconsminds-shop-4"></i>
<span>Dore</span>
</a>
</li>
</ul>
</div>
</div>
<div class="sub-menu">
<div class="scroll">
<ul class="list-unstyled" data-link="start">
<li>
<a href="Dore.Start.html">
<i class="simple-icon-briefcase"></i> Start
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script >
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>
The question is a little ambiguous but if I understood you correctly, you're trying to prevent navigation from happening when you click on the a element?
If this is the case, try the prevent modifier (#click.prevent) instead of #click.stop as the latter will stop the event from propagating to parents, rather than preventing the default behaviour.
Docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});
Can I do something like
var friendss="<div id='two' data-theme='a' class='ui-content'>
<ul id='tust'
data-role='listview'>
<li><a href='#'><img data-bind='attr:{src: friend.img}' alt='Friend'><p data-bind='text:
friend.name'></p>
</a>
</li>
</ul>
</div>";
And then
$("#tust").attr("data-bind","foreach:{data:friends(), as:'friend'}");
Basically what I'm trying to achieve here is, appending html to body via js and then inserting data-bind attribute also via js( after dom with above html has been populated)
If not, how can I achieve the above i.e. inserting data-bind via javascript.
Thanks
You could use the template-binding. E.g. define the template:
<script type="text/html" id="myTemplate">
<div id="two" data-theme="a" class="ui-content">
<ul id="tust" data-bind="foreach: {data: friends, as: 'friend'}" data-role="listview">
<li>
<a href="#">
<img data-bind="attr: {src: friend.img}" alt="Friend">
<p data-bind="text: friend.name"></p>
</a>
</li>
</ul>
</div>
</script>
Then the actual binding:
<div id="random123" data-bind="template: {name: 'myTemplate', data: {friends: friends()}}"></div>
if you need to dynamically add that, just bind the DOM-element.
ko.applyBindings(theMVVM, $("#random123")[0]);
I am trying to use bootstrap to create a dropdown toggle that allows the user to hide/unhide certain div sections. The code is seen below:
<div class="tabbable">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#">
Select an Area by:
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li>
<li><a data-toggle="tab" href="#Area">MLS Area</a></li>
<li><a data-toggle="tab" href="#City">City</a></li>
<li><a data-toggle="tab" href="#Zip">Zip</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /btn-toolbar -->
<div class="tab-content">
<div class="tab-pane active" id="Parish">
Parish
</div>
<div class="tab-pane" id="Area">
Area
</div>
<div class="tab-pane" id="City">
City
</div>
<div class="tab-pane" id="Zip">
Zip
</div>
</div>
It works (kind of), except for the fact that after selecting an option the first time, it never toggles off after selecting a new item. It also does not allow me to go back to an item that has already been selected. I have searched everywhere and used the web console in Firefox to debug, but do not see what the problem is. This happens in Chrome and IE too.
I have created a Bootstrap snippet that demonstrates the behavior here: http://bootply.com/102355
I would appreciate any help. Am I trying to do something with bootstrap that just can't be done yet?
I don't know if you've solved this, but here it is how I would do it using jQuery (I don't know bootstrap):
$('.dropdown-menu li a').click(function(){
DeselectCurrent();
});
var DeselectCurrent = function() {
jQuery('.dropdown-menu li').each(function(){
var attr = jQuery(this).attr('class');
if (typeof attr !== 'undefined' && attr !== false) {
jQuery(this).removeClass("active");
}
});
};
Here it's a working example: http://bootply.com/102465
By the way, in my example I named my function DeselectCurrent... It would make more sense if you named it DeselectPrevious.
Just a side note, I don't see in your markup an id with a value of myTab (like you are referencing it here $('#myTab a').click(function (e)) but I am assuming that's how you target your tabs in twitter-bootstrap...
Hope this helps.