I have handlebar.js integration and I am populating a number of dropdowns using the template. Now I need to have a button which needs to add the same elements below. The code is like this
<div class='row'>
//my HTML goes here
<button>Add One more</button>
</div>
When I click on the Add One more button it needs to clone the div with class name row and needs to add it to the next line. How can I do this using Handlebars? Or I need to use jQuery here?
Don't know handlebars.js, but with jQuery it'll be preety simple:
$(document).on('click', '.row button', function() {
var cloned = $(this).closest('.row').clone();
$(this).closest('.row').parent().append(cloned);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="row">
other stuff
<button>add one</button>
</div>
</div>
Related
I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.
Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});
Im creating a simple JS game, which will run in the browser and will pull the files directly from the pc. Because of this needed to make a workaround the "Cross-origin" error, which went smoothly, I put all the HTML within a JS and loaded the JS from the tag in the index.html. Everything was going smoothly so far.
You click "press any key to continue" -> but then next you click "New Game" and you get event listener error "can't set property of null". Which i don't understand how it happens, because the element is already in the "DOM" , the css could pick it up, but the event listener could not? So i tried moving all scripts on top, rearranging stuff, nothing worked. Pre-loading all HTML into the index.html, without executing it will definitely work, but how can i achieve this exactly? My Configuration atm is:
index.html (root folder)
/components/main_menu.js
/components/character_creation.js
function MainMenu()
{/*
<div id="mm_wrapper_grid">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game"><p id="mm_new_game_p" class="grow">New Game<p></div>
<div id="mm_load_game"><p id="mm_load_game_p" class="grow">Load Game</p></div>
<div id="mm_options"><p id="mm_options_p" class="grow">Options</p></div>
<div id="mm_credits"><p id="mm_credits_p" class="grow">Credits</p></div>
</div>
</div>
*/}
function CharacterCreation()
{/*
<div> Character Creation test
</div>
*/}
<div id ="game">
<div id="loading_screen">Press Any Key To Continue</div>
</div>
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
function callback(arg1, func)
{
var html = func.toString();
var htmlstart = html.indexOf('/*');
var htmlend = html.lastIndexOf('*/');
var html = html.substr(htmlstart+2, htmlend-htmlstart-2);
document.getElementById(arg1).innerHTML = html;
}
</script>
You have the problem because you are trying to add the second listener for getElementById("mm_new_game_p") when this element doesn't exist on the page. I suggest you to add the follwing line of code to make sure, that it's true:
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
console.log('#mm_new_game_p', document.getElementById("mm_new_game_p"));
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
...
You have to add this listener after this element will be created (after calling of MainMenu() function).
To tell the truth, I can see such storing of html templates in js functions for the first time. It's hard to support your code and I've modified it a little bit below. This is not the best way to implement it, but my goal is show you a solution based on your code. What you can see here:
all the templates for pages are in html (not in JS);
you can add listeners from html code using HTML attribute onclick - and in this case you can be sure, that element exists on the page.
If you want to add listeners from JS, than you have to create own functions for each pages which you have and after HTML template of a page will be added to #game container you will need to create event listeners for the buttons which are on the created page.
openPage("game", "loading_screen");
function openPage(parentDOMElementId, name) {
console.log('openPage:', name);
var pageHtml = document.getElementById("page_" + name).outerHTML;
document.getElementById(parentDOMElementId).innerHTML = pageHtml;
}
<div id="game"></div>
<div class="templates" style="visibility: hidden;">
<div id="page_loading_screen" onclick="openPage('game', 'main_menu')">
Press Any Key To Continue
</div>
<div id="page_main_menu">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game">
<p id="mm_new_game_p" class="grow" onclick="openPage('game', 'character_creation')">New Game
<p>
</div>
<div id="mm_load_game">
<p id="mm_load_game_p" class="grow">Load Game</p>
</div>
<div id="mm_options">
<p id="mm_options_p" class="grow">Options</p>
</div>
<div id="mm_credits">
<p id="mm_credits_p" class="grow">Credits</p>
</div>
</div>
</div>
<div id="page_character_creation">
Character Creation test
</div>
</div>
I am bulk deleting all div elements with the id that starts with leg-:
$('div[id^="leg-"]').remove();
I also want to delete <hr> element that comes after each div:
<div id="leg-1">
...
</div>
<hr>
There is no event fired that's why, I am unable to select the element like this:
$(this).next();
How can I do this?
You can cache the selection made by jQuery in an intermediate variable like following:
var selection = $('div[id^="leg-"]');
selection.next().remove();
selection.remove();
Like in the $(this) methodology you wanted to use, the variable selection now contains a reference to all the divs you want to remove. Calling next() on that selection returns the immediate sibling, thus the hr you want to delete, for each of those div.
In general: Wherever you need the same selection in jQuery twice, consider saving it to a variable to speed up your scripts and reduce DOM querying to a minimum.
You can select next hr of div using .next() and use .addBack() to adding div to jquery selector.
$("div[id^=leg-]").next().addBack().remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">leg-1 text</div>
<hr>
<div>text</div>
<div id="leg-2">leg-2 text</div>
<hr>
<div>text2</div>
Try this First remove next <hr> element the remove selection element
$(document).ready(function(){
var selection = $('div[id^="leg-"]');
selection.next('hr').remove();
selection.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">
1
</div>
<hr>
<div id="leg-2">
2
</div>
<hr>
<div id="">
3 not leg
</div>
<hr>
You could remove the hr by combining the jQuery next and remove functions in this way:
$(function() {
$('div[id^="leg-"]').each(function(i, v) {
$(v).next("hr").remove();
$(v).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">#leg-1</div>
<hr>
<div id="not-leg-1">#not-leg</div>
<hr>
<div id="leg-2">#leg-2</div>
<hr>
You are not removing the next element only selecting it.
Please to also add: $(this).next().remove(); before removing the div element.
You can use jQuery.each(): https://jsfiddle.net/cdzswdrk/1/
// when document ready
$('div[id^="leg-"]').each(function(){
var $this= $(this);
$this.next().remove();
$this.remove();
});
I am trying to add a click event to an element that is added dynamically to the page after document load, but it isn't working, though this seems to be a well-known problem with a clear answer. This is my code:
$('body').on('click', "#clickme", function() {
alert('clicked!', $('#cartodb_id').text());
});
The complicating factor may be that the element is inside a Mustache template that itself gets rendered dynamically into the page, by CartoDB.js:
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
x
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h4>cartodb_id: </h4>
<p id="cartodb_id">{{content.data.cartodb_id}}</p>
<input type="submit" id="clickme" value="clickme" />
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
Should this affect my ability to add an event dynamically?
Link to a JSFiddle showing the problem in full: http://jsfiddle.net/8o12v2xs/9/
Not too familiar with Carto myself, but it seems to work fine once you wait for the element to exist. http://jsfiddle.net/8o12v2xs/10/
// register events once it's available
sublayer.on('featureClick', function(e, latlng, pos, data) {
$('#clickme').on('click', function() {
alert('clicked!', $('#cartodb_id').text());
})
});
Put that underneath the initialization like in the above Fiddle.
I am searching for much time now, for a very simple and effective way to aasign function on the click of a button in javascript (not jQuery).
The problems that I have are : 1.sometimes the dom is not yet created and the javascript function has undefined vars in it. 2.I can't pass in the right way attributes to this function.
So baically i have these:
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> some data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> other data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> usefull data</div>
</div>
</div>
for (){ assign in each button the onclick function}
function onclick(){
here i want to change the opacity of the image by the class "myimage",
take the innerHTML of the div by the class "data" and do something to it(maybe i ll send an ajax request in this function also)
}
So I need a for loop or something (inside the javascript file maybe), that will asign to all buttons this function. I need every time I click the button, the function to know which button is and what the div by the class "data" has inside.
I tried many ways, each one had problems. Can anyone help with a simple working solution?
Thank you
Since you mention you do not have the skills to do this simple in plain JavaScript, then it is time to get jQuery added to your toolbox.
Here is about all the code you would need
$function() { // when the page is ready
$(".click").on("click", function(e) { // assign a function to ALL class="click"
var id = this.id; // or $(this).attr("id"); - if you need the button's ID
var divContent = $(this).parents().find(".data").html()
$.get("someserver.php",{"id":id,"parm":divContent},function(data) {
alert(data);// from server
});
});
});
try using jquery library :) with that yoy can do codes like
<script>
$(".data").click(function(){
var class_value = $(this).html();
})
</script>
as you can see, the function will be applied to all element having tha class "data"