How to put a button active by default? - javascript

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.

Related

html Dynamic table edit button on click event does not load the modal

my end objective is to edit the json data and post back to the server if there is any update on the row
I am using the following code to get the json data to the table and add an edit button at the end column dynamically.
$.getJSON("echo_int_ip.php", function get_mem_update(json) {
my_json = json;
var tr;
var n=5;
for (var i = 0; i < n; i++) {
tr = $('<tr/>');
var mem_date = "<td style=\"min-width:90px\"><label id='mem_date'>" + my_json[i].id + "</label></td>";
tr.append(mem_date);
var mem_name = "<td class=\"contact_name\" style=\"min-width:150px\"><label id='mem_name'>" + my_json[i].fi_name + "</label></td>";
tr.append(mem_name);
var mem_reason = "<td><label id='mem_reason'>" + my_json[i].agent_ + "</label></td>";
tr.append(mem_reason);
var mem_comment = "<td style=\"max-width:150px\"><label id='mem_comment'>" + my_json[i].date + "</label></td>";
tr.append(mem_comment);
var mem_butn = "<td><input type=\"button\" id=\"btnedt\" value=\"Edit\" /></td>";
tr.append(mem_butn);
$('#table_member').append(tr);
}
});
according to the solution provided here, i have used the the following script to create an onclick event and get row data.
<script>
$(document).ready(function () {
$(document).on('click', '#btnedt', function() {
// alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
});
});
</script>
this is a sample modal i am currently trying to load but it does not work. i have spent hours trying figure out a way, but ended up asking from you experts. Thank you in advance
<div class="modal fade" id="newModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
First of all you can't have many id's with the same value in a one html page. Cause it will result an error in the future while your doing a lot of code to it. Please change your btnedt to a class not an id. then change your script like this.
<script>
$(document).ready(function () {
$(document).on('click', '.btnedt', function() {
// alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
});
});
</script>
if modal is already the issue. Then here some reason's why its not appearing
Remove the fade class in your modal.
The versions of your Javascript and Bootstrap does not match.
You forgot to include bootstrap.js library in the document
please check this out enter link description here
Use class instead of multiple IDs
Share your modal code
var mem_butn = "<td><input type=\"button\" class=\"btnedt\" value=\"Edit\" /></td>";
<script>
$(document).ready(function () {
$('body').on('click', '.btnedt', function() {
$("#newModal").modal("show");
});
});
</script>

Sending parameter from one function to another

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>

How to dynamically update what is being appended using javascript

I am trying to append a box to a list. This box should have a heading which identifies it, but I am having trouble figuring out how to increment each heading by 1.
Currently, the boxes are being generated by this code when a button is clicked.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question 1</div>';
$("#yesColumn").append(box);
}
However, I am trying to increment the Question number based on the input, i. It should equal i + 1. My first thought was to put an id on the div, but if I used findElementById("question"), then it would select all of the boxes, and I want to simply have each box generated to remain unchanged.
Thanks for the help!
This may help you.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question' + (i + 1) +'</div>';
$("#yesColumn").append(box);
}
Just put i+1 in there.
I hope this ll helps you:
var questions = 1;
function createBoxYes() {
var box = '<div class="panel-heading">Question ' + ++questions + '</div>';
$("#yesColumn").append(box);
}
$('#addBox').bind('click', createBoxYes);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="yesColumn" class="panel panel-default">
<div class="panel-heading">Question 1</div>
</div>
<button id="addBox" class="btn btn-info">Add</button>

jquery edit post with image missing something

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.

Append div tag dynamically inside an existing html structure

I need to append a div tag inside an existing html structure. The problem is I am not able to target the div after which I need to append the new div. I need to append my div inside the "auto-scroll" div. And the div that is appended is getting dynamically generated.
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
Here is the html structure:
<div class="wrapper" id="cases">
<div class="row">
<div class="col-md-12 case-view-header">Header text</div>
</div>
<div class="auto-scroll">
</div>
</div>
My code:
$.each(caseRecords, function(index, value) {
var tb = $('#cases');
var autoscroll = $('.auto-scroll');
var html = "<div class='row data animate-row'>";
html = html + " <div class='col-xs-12 col-sm-2 col-md-2 col-lg-2 case-view-other height-fix'>" + this.c.CaseNumber + "</div>";
html = html + " <div class='col-xs-12 col-sm-4 col-md-4 col-lg-4 case-view-other height-fix'>" + this.c.Account.Name + "</div>";
html = html + " <div class='col-md-3 case-view-other height-fix'>" + this.cm.MilestoneType.Name + "</div>";
html = html + " <div class='col-xs-12 col-sm-3 col-md-3 col-lg-3 case-view-other height-fix align-center timer-case'> ";
html = html + " <div id='CountDownTimer" + index + "' data-timer='" + this.seconds + "'></div>";
html = html + " <div id='CountDownTimerText" + index + "' style='display: inline-block; position:absolute;'></div>";
html = html + " </div>";
html = html + "</div>";
tb.append(html);
setupCounter('CountDownTimer' + index, 'CountDownTimerText' + index, this.targetSeconds);
});
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
That is because tb is object of #cases div and you are appending contents to it. you need to target the inner div with class auto-scroll:
var tb = $('#cases .auto-scroll');
var tb = $('.auto-scroll').append(html);
instead of
tb.append(html);
use
autoscroll.append(html);
because tb is #cases whereas autoscroll is the element which you required

Categories

Resources