So i have these divs created from wordpress post and they have data attribute which is taken from php <?php echo $rengdata->format('Y-m'); ?>
<div class="renginiai-box">
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-10"></div>
</div>
What I need right now is to create one single button with unique date. Result should be like this.
<div class="laikotarpis">
<button value="2017-09" class="laiko-btn">2017 09</button>
<button value="2017-10" class="laiko-btn">2017 10</button>
</div>
I have no idea what function could fit this. Should I make array or there is a jQuery function for this
You can use jQuery to iterate through all elements with the data attribute data-renginiolaikas and append a button:
$('[data-renginiolaikas]').each(function(s, e) {
var val = $(this).attr('data-renginiolaikas');
if(!$('.laikotarpis button[value=' + val + ']').length) {
$('.laikotarpis').append('<button value="' + val + '" class="laiko-btn">' + val.replace('-',' ') + '</button>');
}
});
Example: https://codepen.io/anon/pen/KZQgBw
I think that this is much closer :
$('[data-renginiolaikas]').each(function(s, e) {
if($('.laikotarpis button').val() != $(this).attr('data-renginiolaikas')){
$('.laikotarpis').append('<button value="' + $(this).attr('data-renginiolaikas') + '" class="laiko-btn">' + $(this).attr('data-renginiolaikas').replace('-',' ') + '</button>');
}
});
Fork of delinear's answer
https://codepen.io/boian-ivanov/pen/MrQjPy
Related
As per below, I am calling an endpoint when the page is loaded to get some data and append it to a div. On localhost it works perfectly, but on the server it only works intermittently... When I look in dev tools, the network tab suggests the $.post works and returns the data... but the append doesn't.
I wondered if it was to do with the $.post completing before the html was rendered, so there was no div to append to... but not sure how to verify or fix this. I've tried moving the script in the html page to just before the close-body tag to ensure the html is rendered first. I've also made sure i define the functions in the JS before the $(Document).ready is called.
To see it not working LIVE... www.everythingproduct.com - If you try clicking on the blogs page multiple times, you'll see sometimes it hangs...
$(document).ready(function() {
var page = 'blog-articles';
$('#main-body-content').load('site/pages/' + page + '.php');
loadArticlesData();
$.post('endpoint/sendEvent.php', {
userID: '<?php echo $uid; ?>',
eventType: "pageView",
currentURL: window.location.href,
referer: '<?php echo $referer; ?>'
});
});
function loadArticlesData() {
$('#cover').show();
$.post('endpoint/getArticles.php', {
type: "All"
}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#articles').append(
'<a target="_blank" href="' + l.link + '">' +
'<div value="' + l.id + '" class="article">' +
'<div class="img">' +
'<img src="img/' + l.img + '" height="50px">' +
'</div>' +
'<div class="article-content">' +
'<h2>' + l.title + '</h2>' +
'<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' +
'</div>' +
'</div>' +
'</a>'
);
});
$('#cover').fadeOut("slow");
});
$.post('endpoint/getTags.php', {}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#tags').append(
'<span value="' + l + '" class="tag-word">' + l + '</span> '
);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover"></div>
<div class="body">
<div class="body-container">
<div class="body-left">
<div style="text-align: left; padding-left: 20px;">
<h1 style="font-weight: normal;">Blog Article Database</h1>
</div>
<div id="articles" class="articles"></div>
</div>
<div class="body-right">
<div class="filter-panel">
<h3>Browse (A-Z)</h3>
<div id="tags" class="tags">
<span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span>
</div>
</div>
</div>
</div>
</div>
You are interfering with the asynchronous requests. Only do one at a time and continue in the success
Try this:
$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData);
to wait until the first request is done - then move
$.post('endpoint/getTags.php', {}...
into the end of the success of the second request
I am trying to make a post edit using jquery. But i have a problem with image think.
I have created this DEMO from codepen.io .
In this demo you can see there are two edit button. If you click the edit1 then the image delete (x) button will be come on the right top bar but that will come just one time. It need to be come two delete button because there are two image. What is the problem on there and how can i fix that problems. Anyone can help me in this regard ?
JS
$(document).ready(function() {
$("body").on("click", ".editBtn", function(event) {
event.target.disabled = true;
var ID = $(this).attr("id");
var selected = $("#messageB" + ID + " .postInfo img").parent().html();
var currentMessage = $("#messageB" + ID + " .ptx").html();
var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
$("#messageB" + ID + " .postInfo").html(editMarkUp);
var data = $('#txtmessage_' + ID).val();
$('#txtmessage_' + ID).focus();
$('#txtmessage_' + ID).val(data + ' ');
});
$("body").on("click", ".cNeD", function(event) {
$(".editBtn").prop('disabled', false);
var ID = $(this).attr("id");
var currentMessageText = $("#txtmessage_" + ID).html();
$("#messageB" + ID + " .ptx").html(currentMessageText);
});
});
HTML
<div class="container">
<div class="postAr" id="messageB1">
<div class="postInfo">
<img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1">
<img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1">
</div>
<div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
<div class="editBtn" name="edit" id="1">Edit1</div>
</div>
</div>
<div class="container">
<div class="postAr" id="messageB2">
<div class="postInfo">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg
</div>
<div class="editBtn" name="edit" id="2">Edit2</div>
</div>
</div>
I found that there are 2 main issues there.
you use html() function which get the HTML contents of the first element in the set of matched elements. take a look document
-> you will get html instead of src of img. But later when you try to set src attribute during creating an 'edit area' so that is the mainly reason why image doesn't
display (.attr() function is better to get src attribute)
same wrong logic with message ( .text() function could be the better
solution in this case)
don't forget to check if you have create an edit area or not. At the moment every time it will create a new "edit area". Duplicate !
Hope it will help you a bit.
thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.
How to hide div where id with jquery and mvc?
<div class="List-Display">
#for(int i=1;i<=10;i++)
{
<div id="#i">
<span>content</span>
</div>
<button onclick="display(#i)" type="button">
}
</div>
I've tried the following but not worked!
<script>
function display(parameters) {
$('.List-Display').find('div[id!=' + parameters + ']').hide();
//or
$('.List-Display').filter('div[id!=' + parameters + ']').hide();
}
</script>
I need to hide div tag where id!=parameters. But I have no idea!!
You can do this:
$('.List-Display').find('div:not("#'+ parameters + '")').hide();
i use :
$('.List-Display').children('div:not("#' + parameters + '")').hide();
. its worked;
I have a table defined:
<div id="display">
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
<div class="displayElement">1</div>
<div class="displayElement">Standard</div>
<div class="displayElement">This is more information</div>
</div>
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
<div class="displayElement">2</div>
<div class="displayElement">Special</div>
<div class="displayElement">This is more information</div>
</div>
</div>
When expandArrow is clicked, I want to display a table of additional data under that particular row. Can anyone help? Thanks!
I have tried this to no success:
$(".expandArrow").on("click", function (event) {
var info = '';
details += '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
$(this).parent().append(details);
});
You have var info = '', where you should have var details = ...
Here's the fix:
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
Also, make sure you wrap it in a ready function so the DOM loads before the javascript runs. Otherwise it binds the click before the DOM is loaded. http://api.jquery.com/ready/
That code snippit does not look too bad, but what is json.Id and json.Info. Are you sure they exist in that scope?
Have you tried running that script with firefox/firebug or chrome? They might indicate errors.
Changed json.Id and json.Info with 11, 22
<div id="display">
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
<div class="displayElement">1</div>
<div class="displayElement">Standard</div>
<div class="displayElement">This is more information</div>
</div>
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
<div class="displayElement">2</div>
<div class="displayElement">Special</div>
<div class="displayElement">This is more information</div>
</div>
</div>
$('.expandArrow').on("click", function (event) {
var info = '';
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + 11 + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + 22 + '</td></tr>';
details += '</table></div>';
$(this).parent().append(details);
});
$(".expandArrow").on("click", function(event) {
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
$(details).appendTo($(this).parent());
});