Is it possible to include div tags within a for loop in an asp.net page and assign its id dynamically so that I can refer a particular div tag with the assigned id in a jquery script.
I want to do something like below.
#for(var i = 0; i < projectCountGlobal; i++)
{
<div id="i" > // id should be assigned dynamically
<div id="ProjectImage">
</div>
<div id="ProjectName">
</div>
<div id="Experts">
<div id="ExpertImage">
</div>
<div id="ExpertName">
</div>
</div>
</div>
}
From the snippet it seems like you are doing razor view so you can simply do like this,
<div id="#i" >
that shall do the trick.
i you can do this using following code snippet:
$('.topopup').hover(function () {
for (var i = 0; i < 5; i++) {
$('body').append('<div id=' + i + '>a</div>');
}
})
// HTML code on page
<body>
Click Here
<div id="toPopup" style="display:none;">
<div id="popup_content">Rahul Deshmukh</div>
<div id="backgroundPopup"></div>
<div id="containerDiv"></div>
</div>
</body>
here i am appending div inside body tag for this you need to add min.js also in your peoject folder
here "topopup" is a anchor tag and on the mouse over of this anchor tag, i am adding div inside body tag.
Related
I have 2 for loops in Razor syntax , I want to implement each one in a block , I added style block to second for loop but it appears inline with the first line of contents to the first loop
<div style="display:block;">
#foreach (var Item in Model)
{
<div class="col-sm-3">
<div class="content">
<p>#Item.Name</p>
</div>
</div>
}
<br>
</div>
// the page buttons appear next to #Item.Name (at the first line of the loop items) not after it
<div style="display:block;">
#for (int i = 1; i <= ViewBag.TotalPages; i++)
{
<button class="btn btn-info" type="button" id="addressSearch" onclick="location.href='#Url.Action("myaction","mycontroller", new { page = i } )'">#i</button>
}
</div>
this should work if it is not !important in external stylesheet
JQM AJAX navigation doesn't work well when navigating to a page with an in-page dialog?
page1.aspx:
<div data-role="page">
<div data-role="header">Page 1</div>
<div data-role="content">
<a href='page2.aspx'>Click here</a>
</div>
</div>
page2.aspx:
<div data-role="page">
<div data-role="header">Page 2</div>
<div data-role="content">
Popup
</div>
</div>
<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation -->
<div data-role="header">Page 2 Popup</div>
<div data-role="content">
Popup content
</div>
</div>
When you click the link from Page 1, it doesn't load the <div data-role='dialog'> of Page 2.
How do you get around this issue?
There is a workaround here. I modified it a little:
$(document).bind('pagecontainerload', function (event, ui) {
// Find all dialogs in the DOM
var response = ui.xhr.responseText;
var data = $(response).find("div[data-role='dialog'],div[data-role='popup']");
for (var i = 0; i < data.length; i++) {
var node = data.eq(i);
if (node.attr('id') && document.getElementById(node.attr('id')))
$('#' + node.attr('id')).remove(); // Delete existing one
node.addClass('cache').appendTo('#form1'); // or appendTo('body')
}
});
I added the class cache for cleanup purpose.
I am using asp.net MVC 4 for my project, and I have a Model.
and I am using Bootstrap Carousel to show products for my Index Page (see the image below)
Now my question is: I want to show 3 Products in each slide item.
should I write a ViewModel for this?
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
Your inner foreach is iterating over the entire Model collection - you'll need to restrict it to just the relevant three items.
I'm guessing you want something like:
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model.Skip(i*3).Take(3))
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
One way to think about this problem is to split the original collection into groups for each 3 sequential elements. Fortunately, you can use the GroupBy LINQ method using the "element index divided by 3" as key. IMO, the advantage of this solution is that it expresses more clearly your intent and has better performance than reiterating the collection with Skip(x * 3).Take(3) in the inner loop.
<div class="carousel slide>
#foreach (var group in Model.Select((x, index) => new { element = x, index }).GroupBy(x => x.index / 3, x => x.element))
{
<div class="item #if( group.Key == 0) {<text>active</text>}">
#foreach(var well in group)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
I would even change the model type to ILookup<int, TElement> and perform the grouping in the controller.
Hi i'm developping a simple listView that lists the column "firstname" of my table : i want to get the selected value (name) , i found this link but it shows he how to get the index and not the value of the selected item http://jsfiddle.net/w2JZU/
here's my code :
HTML:
<div id="popup-bg">
</div>
<div id="popup-box">
<div data-role="page" id="home">
<div data-role="header">
<h1>Players</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="artiste" >
</ul>
</div>
</div>
</div>
</section>
js :
function successCB()
{
db.transaction(queryDB, errorCB);
}
function queryDB(tx)
{
tx.executeSql('SELECT * FROM Players ', [], querySuccess, errorCB);
}
function querySuccess(tx, results)
{
var len = results.rows.length;
var dataset= results.rows;
$("#artiste").empty();
for (var i = 0; i < len; i++)
{ item = dataset.item(i);
$("#artiste").append( "<li data-theme='c'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
}
There isn't a "value" for an item in a list using the li tag. However, you can get the text of what's in that list element using the jQuery .text() method. I've modified the jsfiddle you referenced to do exactly that: http://jsfiddle.net/Cht2e/
You might want to consider adding another attribute to the li tag, such as data-name (you can make up the attribute) and then you can get that via the jQuery .attr() method. For example, you might change you append code to do:
$("#artiste").append( "<li data-theme='c' data-name='"+item['firstName']+"'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
And then attach your click handler like this:
$('#artiste').children('li').on('click', function () {
alert('Selected Name=' + $(this).attr('data-name'));
});
I don't think this is necessarily the best structure or approach to take, but it will accomplish what you're asking.
I have a text
I want to append multiple divs but the id should be changed dynamically.
e.g:
<div id=first>text</div>
<div id=first0>text</div>
<div id=first1>text</div>
<div id=first2>text</div>
<div id=first3>text</div>
<div id=first4>text</div>
<div id=first5>text</div>
Any help? thanks..
Your title and question content seem to disagree with each other. I am assuming you are wanting to create div's where each id sequentially increments each time one is created?
$(function(){
var count = 0;
$('#append').click(function(){
$('#parent').append('<div id="first'+count+'">text</div>');
count++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a>
<div id="parent"></div>
You can change it with .attr():
$('#first').attr('id', 'first6')
try to change the code to :
<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>
dont forget the id inside " " (id="first" not id=first)
now you can simply use jquery : $("#first").attr('id','first6');
If you were interested in how styling works.`
$(function(){
for (let i = 0 ;i < 10; i ++){
$('#foo').append('<div id="first'+i+'">text</div>');
}
});
#first4 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>
Create a div with id=Container and the create 5 divs dynamically using following code
//using JavaScript
for(var i=0;i<5;i++){
var obj = document.getElementById("container");
obj.innerHTML += '<div id="first'+i+'"></div>';
}