Need to solve CakePHP and Script problem
I am using three buttons(let b1,b2 & b3). Three buttons have its own separate div (let d1,d2 & d3)respectively. when I click the b1 ,then d1 should display but other d2 & d3 should hide. When I click the b2 then d2 should display and d3 and d1 should hide. How Should make this work using CakePHP and script in that?
Here is the code that I have tried
<button id="b1"> btn1 </button>
<button id="b2"> btn1 </button>
<button id="b3"> btn1 </button>
<div id="d1" style="display:none"> this is div1 </div>
<div id="d2" style="display:none"> this is div2 </div>
<div id="d3" style="display:none"> this is div2 </div>
// this is script
<?php $this->Html->scriptStart(['block' => 'scriptBottom']); ?>
(function($) {
$(document).ready(function(){
});
$('#b1').click(function () {
$('#d1').show();
$('#d2').hide();
$('#d3).hide();
});
$('#b2').click(function () {
$('#d1').hide();
$('#d2').show();
$('#d3').hide();
});
$('#b3').click(function () {
$('#d1').hide();
$('#d2').hide();
$('#d3').show();
});
}
)( jQuery );
<?php $this->Html->scriptEnd(); ?>
you can try the following:
$('button').click(function(){
var index = $(this).index();//get the position of the current button
$('div').eq(index-1).show();// display the div corresponding to that position ,note: eq start counting from 0
$('div').not(':eq('+(index-1)+')').hide();//hide the other usin not
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> btn1 </button>
<button> btn1 </button>
<button> btn1 </button>
<div style="display:none"> this is div1 </div>
<div style="display:none"> this is div2 </div>
<div style="display:none"> this is div3 </div>
using ids:
$('button').click(function(){
var id = '#d_'+this.id.split('_')[1];
console.log(id);
$(id).show();
$('div').not(id).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b_1"> btn1 </button>
<button id="b_2"> btn1 </button>
<button id="b_3"> btn1 </button>
<div id="d_1" style="display:none"> this is div1 </div>
<div id="d_2" style="display:none"> this is div2 </div>
<div id="d_3" style="display:none"> this is div3 </div>
Related
Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.
You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");
I've tried several things for days... so i whittled this down to save time...
I want to click the CopyQQ button, and have the url... ex https://www.TestURL.com/pt/595564 copied into a var. see code below...
I realize that I need to somehow use the e.target, but beyond that, (as a newby to js), I'm just now quite sure how to grab the url field that i need...
<!doctype html>
<head>
This is head<br>
</head>
<body>
This is body<br>
<form>
<div class=thelist>
<ul>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/595564
</div>
<br>
</l>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/222222
</div>
<br>
</l>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/333333
</div>
<br>
</l>
</ul>
</div>
</form>
<script type="text/javascript">
function copyURL(e) {
event.preventDefault();
var aa = event.target.innerText
console.log(aa)
}
</script>
</body>
</html>
to get the URL, you need to read the content of the parent of event.target, this is done with parentElement, then remove the text of the button from it, using string.substring
function copyURL(e) {
event.preventDefault();
// get ALL the parent text, even button content
const parentText = event.target.parentElement.innerText
const buttonText = event.target.innerText
// remove the text of the button from the parent text
const url = parentText.substring(buttonText.length + 1)
console.log(url)
}
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/595564
</div>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/222222
</div>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/333333
</div>
I have the html as follows
<div id="parent_div">
<div class="child_div">
<p>clicked button 1</p>
<button id="button1">button1</button>
</div>
<div class="child_div">
<p>clicked button 2</p>
<button id="button2">button2</button>
</div>
</div>
<button id="remover">remove</button>
<script type="text/javascript">
$('#button1').click(function(event) {
$(this).prev().css('color','red');
});
$('#button2').click(function(event) {
$(this).prev().css('color','yellow');
});
var new_html = '<div class="child_div">\
<p>new button 1</p>\
<button id="button1">button1</button>\
</div>\
<div class="child_div">\
<p>new button 2</p>\
<button id="button2">button2</button>\
</div>\
<div class="child_div">\
<p>new button 3</p>\
<button id="button3">button3</button>\
</div>'
$('#remover').click(function(event) {
$('#parent_div').children().detach();
$('#parent_div').append(new_html);
});
</script>
In the above code, when remover button is clicked I want the parent_div to go empty but I need to retain the event handlers put on them. Because later, I add different html but having the same ids on which I put events before. When I try to do this with the above code, my events are buried regardless of detach() or remove() or emtpy() methods. On the new elements, my click event is not working. Please help me out to solve this
Check this working code.
$().ready(function(){
$('#parent_div').on('click', '#button1', function (event) {
$(this).prev().css('color', 'red');
});
$('#parent_div').on('click', '#button2', function (event) {
$(this).prev().css('color', 'yellow');
});
$('#parent_div').on('click', '#button3', function (event) {
$(this).prev().css('color', 'green');
});
var new_html = '<div class="child_div">\
<p>new button 1</p>\
<button id="button1">button1</button>\
</div>\
<div class="child_div">\
<p>new button 2</p>\
<button id="button2">button2</button>\
</div>\
<div class="child_div">\
<p>new button 3</p>\
<button id="button3">button3</button>\
</div>'
$('#remover').click(function (event) {
$('#parent_div').children().detach();
$('#parent_div').append(new_html);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="parent_div">
<div class="child_div">
<p>clicked button 1</p>
<button id="button1">button1</button>
</div>
<div class="child_div">
<p>clicked button 2</p>
<button id="button2">button2</button>
</div>
</div>
<button id="remover">remove</button>
Firsly here's the fiddle
I have an image with class "Full", and there is a div with class "group-of-buttons", I want to remove this img and add it after the div "group-of-buttons" with js, here's the HTML Code:
<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL"/>
<br><br>
<div class="group-of-buttons">
<button class="one">One </button>
<button class="two">Two </button>
</div>
Any help would be appreciated.
You may use insertAfter:
$('.FULL').insertAfter('.group-of-buttons');
Should do what you want. It was just a matter of using the .insertAfter() jQuery method.
$(document).ready(function() {
var img = $('img.FULL');
img.insertAfter($('div.group-of-buttons'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" />
<br>
<br>
<div class="group-of-buttons">
<button class="one">One</button>
<button class="two">Two</button>
</div>
$('.one').on('click', function() {
var img = $('img.FULL');
img.remove();
img.insertBefore('.group-of-buttons');
});
$('.two').on('click', function() {
var img = $('img.FULL');
img.remove();
img.insertAfter('.group-of-buttons');
});
I hope this was what you were looking to achieve example here: http://jsfiddle.net/atrifan/1ejmzkhp/
I added some extra id and div to your code. can you try this : buttons moves img from one div to another.
<script>
function moveImage(movefrom,moveto,img_id) {
imgtxt = document.getElementById(movefrom).innerHTML;
imgobj = document.getElementById(img_id);
document.getElementById(movefrom).removeChild(imgobj);
document.getElementById(moveto).innerHTML = imgtxt;
}
</script>
<div id="div1"><img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" id="img"/></div>
<br><br>
<div class="group-of-buttons">
<button class="one" onclick="moveImage('div2','div1','img');">One </button>
<button class="two" onclick="moveImage('div1','div2','img');">Two </button>
</div>
<br>
<div class="secondary-div" id="div2">
Secondary Div
</div>
I hope it helps.
I am trying to add some code to a page that keeps adding <div> sections to a page when a link is clicked. Here's my code:
<script type="text/javascript">
function ShowDiv() {
document.getElementById("show").style.display = "";
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
This works great for one <div> but I need it to keep adding down the page when the link is clicked. I t is going to be used to hold a form with an array of ids for posting to PHP.
You can clone original div (which will be as template) and append cloned one to the page:
Fiddle.
HTML:
<p>
<a id="add" href="#" class="control">Add New</a>
</p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
JS:
$(document).ready(function()
{
var i = 0;
$('#add').click(function()
{
var newEl = $('#show').clone();
newEl.attr('id', "show" + i);
i++;
newEl.show().appendTo("body");
});
});
<script type="text/javascript">
function ShowDiv() {
var a = $("#show").clone(true); // clones element
$(".test").append(a); // appends to parent
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div class="test"> <!-- defines parent for simple selection -->
<div id="show"> <!-- element to clone -->
<p>This is the div!</p>
</div>
</div>