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.
Related
I have been struggling with this for a few days now. I would like to append a div with class id and an image to my container I have been able to render the cards, but upon inspecting the HTML in dev tools I came across this
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</div>
what surprises me is the empty = <= and empty div. These should obviously not be here.
I render the divs like so
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id=card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
Would anyone be able to properly format this ? it has been giving me a headache for the last couple of days.
1.You missed " around id
2.You missed to close <img> tag as well
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"></div>');
});
forget to close img-tag
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</img>
</div>
and the marks by id="card-id-'
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
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
I am trying to send value from one function to another. But it says undefined when I try to show them in console.
Here I am trying to show large-image2 id while someone click on Big()function. With same image that was in large-image id. Which one occur while someone clicked on lgBox() function.
Anyone please help
function lgBox(url){
var u = url;
big(u);
document.getElementById("large-image").innerHTML="<img src='" + u + "' />";
}
Here is my another function. I am sending data here from above function.
function big(u) {
var ul=u;
alert(ul);
document.getElementById("large-image2").innerHTML="<img src='" + ul + "' />";}
Here big function says undefined while I am trying to show value of ul.
Thanks in advance.
Here is my HTML code.
<div id="large-image" onclick="big()">
</div>
<div id="large-image2" onclick="lgBoxcross()">
</div>
<div id="thumb-image" >
<button onclick="lgBox('../images/<?php echo $singleProductImage['name']; ?>')">
<img src="../images/<?php echo $singleProductImage['name']; ?>" alt="" class="img">
</button>
</div>
I am not giving my php code here.
Click on the button, and it works perfectly fine. But if you click on large-image, it would show undefined as you haven't passed anything in big():
function lgBox(url) {
document.getElementById("large-image").innerHTML = '<img src="' + url + '"/>';
}
function big(elem) {
var myimg = elem.getElementsByTagName('img')[0];
var mysrc = myimg.src;
document.getElementById("large-image2").innerHTML = '<img src="' + mysrc + '"/>';
}
<div id="large-image" onclick="big(this)">
</div>
<div id="large-image2">
</div>
<div id="thumb-image">
<button onclick="lgBox('http://via.placeholder.com/350x150')">
button
</button>
</div>
A simple way to share a value between functions is to place functions and variables in an event handler. After reading the update, it has become more confusing...I don't see lgBoxcross(). Instead of making all of these one off functions, make one function.
In this demo:
There's only one callback function for all clicks.
It is bound to a button and when the button is clicked, it will extract the src value of the img (the url of img) that resides within this button.
It then calls another function lgBox() and passes the url through it.
lgBox() takes this url and creates an image in each div.
Each div has on on event handler when clicked will trigger the main thumbnail button and the same results occur (both divs get the img).
Demo
var btn = document.getElementById('btn');
btn.onclick = function() {
var url = this.querySelector('.img').src;
lgBox.call(this, url);
};
function lgBox(u) {
var img = "<img src='" + u + "' width='200'style='object-fit:contain'>";
document.getElementById("large-image1").innerHTML = img;
document.getElementById("large-image2").innerHTML = img;
}
.frame {
width: 30vw;
height: 30vh;
border: 1px solid red;
display: inline-block;
}
<div id="large-image1" class='frame' onclick="btn.click()">
</div>
<div id="large-image2" class='frame' onclick="btn.click()">
</div>
<div id="thumb-image">
<button id='btn'>
<img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width='50' class="img">
</button>
</div>
In my webpage, I have an input method and a button which opens a popup with smiles. When a user taps a smile once, the input value is changed to 'current value' + ':smile1:', for example. However, I have about 28 smile icons and this way to send emojis is a little bit difficult. How can I make this process easier? Because after this, I'll need to parse all 28 smiles and check if the input value equals one of them.
My popup:
<div class="smile-popuptext" id="smPopup">
<div class="smile1"></div>
<div class="smile2"></div>
<div class="smile3"></div>
//.....and other 25 divs
</div>
My function that sends the smile:
$('.smile1').on('click', function () {
var message = $('#message').val() + ' :smile1:';
$('#message').val(message);
});
I'd recommend giving all the buttons a single class and giving them unique id's.
So something like this:
<div class="smile-popuptext" id="smPopup">
<div class="smile" id="smile1"></div>
<div class="smile" id="smile2"></div>
<div class="smile" id="smile3"></div>
//.....and other 25 divs
</div>
Then:
$('.smile').on('click', function () {
var message = $('#message').val() + ' :' + this.id + ':';
$('#message').val(message);
});
JSFiddle
You could bind an EventListener on the container and defining the value as a data attribute:
var container = document.querySelector('.smile-popuptext');
container.addEventListener('click', function(event) {
var target = event.target;
var emoji = target.getAttribute('data-emoji');
if(emoji) {
console.log('clicked', [':', emoji, ':'].join(''));
}
});
<div class="smile-popuptext" id="smPopup">
<div class="sm1" data-emoji="smile1">1</div>
<div class="sm2" data-emoji="smile2">2</div>
<div class="sm3" data-emoji="smile3">3</div>
</div>
With no changes in your markup:
$('#smPopup div[class^="smile"]').on('click', function () {
var message = $('#message').val() + ' :' + this.className + ':';
$('#message').val(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smile-popuptext" id="smPopup">
<div class="smile1">smile 1</div>
<div class="smile2">smile 2</div>
<div class="smile3">smile 3</div>
</div>
<textarea id="message"></textarea>
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.