I am having a problem figuring out the correct way to do the following: Add a new form to my div when a button, 'add_skill', is clicked, disable the button to add a new form to my div,. Then when the person clicks the new button within the new form, 'button123', the form would submit the data through AJAX, and then remove the form, and re-enable the button, 'add_skill' so that another form could be added.
So far, I've been able to add the form to the bottom of the div. But when I click the 'button123' button in the new form, jQuery doesn't seem to recognize it, and no jQuery actions are done.
Am I even going about this the right way? I'm essentially trying to make something so you can keep adding new data to a bottom of a div, one after another, by clicking a '+' button. Think of adding items to a resume, one after another. That's is what I have in mind.
Here's my JS.
//dynamic add new skill form
var i = 0;
$(".add_skill").click(function(){
//inputs for Skill and Percentage
var skill = "<div class='new_skill_input' id='num" + i + "'> \
<label class='control-label'>Skill:</label> \
<input type='text' placeholder='SFML' class='ctrl-textbox'> \
<input type='hidden' class='hiddenObligatoire' value='false'> \
</div> \
<div class='new_skill_input'> \
<label class='control-label'>Percentage:</label> \
<input type='text' placeholder='85' class='ctrl-textbox'> \
<input type='hidden' class='hiddenObligatoire' value='false'> \
</div>\
<div class='new_skill_input'>\
<input class='button123' type='submit' value='Add'>\
</div>";
$(skill).appendTo(".skills"); //add form items to end of div
i++; //increment for identity
$(".add_skill").prop("disabled", true); //disable (add form), only 1 at a time
});
$(function() {
$("button123").click( function()
{
$(".add_skill").prop("disabled", false); //re-enable (add form)
}
);
});
And here is my HTML:
<div class="timeline-panel skills">
<h1>Skills</h1>
<div class="hr-left"></div>
<!--Add new skill start-->
<div class="new_skill">
<input class="btn add_skill" style="font-family:Helvetica" style="float:left;" type="submit" value="+">
</div>
<!--add new skill end-->
</div>
Any tips would be greatly appreciated. Thank you in advance.
This is a great use-case for event delegation:
Change:
$("button123").click(<handler>)
...to:
$(document).on('click', '.button123', <handler>);
Also, note that the selector should be .button123 with the '.' in front.
extending #jmar777's answer instead of $(document).on('click', '.button123', <handler>); one can use $(parent).on('click', '.button123', <handler>); where parent is button123's parent element which is present in DOM, as event doesn't need to bubble till document. event bubbling explained here
Related
So I've got this menu where you can choose the class in my game.
<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>
How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?
I've tried .replaceWith() but jquery won't work on the new buttons.
It will take the css.
function classChange() {
var Class = $(this).val();
$('#statsImg').text("class: " + Class);
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
$('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
$('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
$('.menu').show();
};
$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);
Button elf won't do anything with the next part:
$('.elf').on('click', '.elf',function () {
$('#statsImg').text('test');
});
Works with button knight/mage/archer.
So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?
Sorry if I forgot to add something that you need to know. I'll add it if you need it.
You have to bind the events to the buttons after adding them. Try with -
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
$('#statsImg').text('test');
});
I want to give user options to edit title of navigation bar. So, when user would click edit, I want to give them a text field and a submit button.
Here is the code(within PHP block)
$n1="<div id='nava' class='nav' >
<a href=#>$nava</a>
<input type='submit' id='nav1' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n2="<div id='navb' class='nav' >
<a href=#>$navb</a>
<input type='submit' id='nav2' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n3="<div id='navc' class='nav' >
<a href=#>$navc</a>
<input type='submit' id='nav3' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
if I do edit(this.id,nava),it gives me object DivElement message,when I do alert.
But I need the id of div as string.Passing the id of submit button works perfectly, but I cannot figure out how to pass the id of corresponding div to edit function. How would I do that?
parentNode is definitely the right way to go about getting the parent Div's id (without using a framework like JQuery). You can read more about it here: https://developer.mozilla.org/en/docs/Web/API/Node.parentNode
Back to your example, you could simply write a JavaScript edit() function like so:
function edit(id) {
var divId = document.getElementById(id).parentNode.id;
console.log(divId);
}
Using your HTML, I have put together a quick fiddle for you to show how this can work
http://jsfiddle.net/wj7bch3m/
Hope that helps!
You could do something like this to change the different navs
html
<div id="nav">
Link
<input type="text" for="link1" id="newLink" class="changeNav"/>
</div>
jquery
$(".changeNav").on("change", function(){
var newLink = $(this).val();
var whichNav = $(this).attr("for");
$("#" + whichNav).empty().append(newLink);
});
here is a JSFIDDLE
Hope this helps
I have a single page with a div that gets new content when a user click on a radio button, when the page is loaded it display the main content, when user click on X radio button, that content gets "re-new" or "different" information, there is a DIV id that doesn't change... so...
When user loads the page, I check fro some values, is X value is lower than then replace the div content, on the first load it works fine, but if the user changes options then the first script wont do nothing... so here is the basic html
<div id="options">
<input type="radio" onclick="javascript:checkOut(this.name,'shipr');" value="1" name="shipping" id="s1">
<input type="radio" onclick="javascript:checkOut(this.name,'shipr');" value="2" name="shipping" id="s2">
<input type="text" id="qty" class="hidden" value="1.2" style="display: none;">
</div>
<div id="information">
<div id="prices>$120.00</div>
<div id="products">Multiple[...] and tabs long list</div>
<div id="checkoutbtn">Buy Now</div>
</div>
Basically when user click on any of the radio buttons the content of the div "information" gets replace by ajax information, I'd like to know how do I get the new content and "replace" some values...
Now, the input with the ID qty that is hidden has the value I need is that value is less or grater than I replace the button inside the div with the id checkoutbtn from "buy now" to "Only inside US and UK, please Request a quote"... so, my JS is:
(function($) {
var pkg = $("#qty").val();
var cot = '<a rel="{handler: \'iframe\', size: {x: 570, y: 550}}" ' +
'class="modal" href="qut.php">' +
'<input type="button" value="Quotation" class="btn btn-small">' +
'</a>';
window.onload = function() {
if (pkg < 4 ) {
// do something
// alert('Checked');
$('#checkoutbtn').html(cot);
}
};
$('input:radio[name="shipping"]').change(
function(){
if ($(this).is(':checked') && $(this).attr("id") == 's1') {
// alert(pkg);
$('#checkoutbtn').html(cot);
} else if ($(this).is(':checked') && $(this).attr("id") == 's2') {
$('#checkoutbtn').html(cot);
}
});
})(jQuery);
When the page is load for the first time it works fine, and if it wasn't for the ajax that change the content of the div with the id information it would be flawless, but is not...
As you can see I have this piece of code: $('input:radio[name="shipping"]').change() ... so now I need something that would give some time to load the new content or to check when the new content is ready and then execute this other code $('#checkoutbtn').html(cot); ... the question is, how do I do that... if I put a timeout of 2 seconds it might work, but sometimes it takes 3 or 5 seconds for the new information to be ready and available to the user and that would be a problem...
So, I need to check when the new content is ready after the user has click on the radio button, how do I do that?
Thank you.
I've a problem and I hope that it's possible to explain.
I have a lot of short texts which come from a mysql-DB.
while ($foo = mysql_fetch_object($query)) {
$text = $foo -> column_text_db;
echo '<div class="atextdiv">' . $text . '</div>';
}
now i want to add an onclik-Event-Handler to the "atextdiv"-Container(s) who takes the content and put it on an input-field:
<form>
<input type="text" id="clickcontent" />
</form>
My problem: Each page has a different number of records in database. The final HTML-Code (after parsing the PHP-Code) could be:
<div id="wrapper">
<div class="atextdiv">Papa was a rolling stone</div>
<div class="atextdiv">Oh my god! They killed Kenny</div>
<div class="atextdiv">Foo Bar</div>
<!-- more content -->
</div>
<form>
<input type="text" id="clickcontent" />
</form>
So, how can I get the content of each "atextdiv"-Container after click on it?
Just like:
$(".atextdiv").click(function() {
console.log($(this).text());
});
Use a combination of this and the .text method inside the click handler.
You can bind click event on '.atextdiv' and in event fetch its value using .text()
$('#wrapper').on('click', '.atextdiv', funnction(){
$("#clickcontent").val($(this).text())
})
Just grab the innerHTML of the item that the click event is occurring on:
$('.atextdiv').click(function(e){
alert(e.currentTarget.innerHTML);
})
http://jsfiddle.net/9VE6A/8/
I want to make a list of group inputs allow user to dynamically let user add/remove group row:
<div id="div-form-denominations" class="form-denominations">
<div id="row-0" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[0].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[0].id.reference" value="87-070329-034COP-4444">
<input id="_denominations[0].denomination" class="removableHiddenDenom" type="hidden" name="denominations[0].denomination" value="10000">
<a id="deleteBtn-[0]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-1" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[1].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[1].id.reference" value="87-070329-034COP-4444">
<input id="_denominations[1].denomination" class="removableHiddenDenom" type="hidden" name="denominations[1].denomination" value="">
<a id="deleteBtn-[1]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-2" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[2].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[2].id.reference" value="">
<input id="_denominations[2].denomination" class="removableHiddenDenom" type="hidden" name="denominations[2].denomination" value="">
<a id="deleteBtn-[2]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-3" class="form-denomination">
.......
</div>
So each row include a group of form-field which include an input or select component(not show in above code) and some hidden fields and a delete link to remove current row from view.
Also I create a link to dynamic add a new row into the section
var rowTemplate = null;
j(document).ready(function() {
// Save the row template
rowTemplate = j('.form-denomination:first-child').clone();
j("#add_link").click(function() {
add_denomination();
});
});
and here is the content of add_denomination function that clone the first row and replace any cloned id with new index, and append the cloned row after last row of the list.
function add_denomination() {
var index = j('.form-denomination').length;
// set the new row id
var newRowId = 'row-' + index;
var newRow = rowTemplate.clone().attr('id', newRowId);
// Replace the id/name attribute of each input control
newRow.find('div, input, select, a').each(function() {
replaceAttribute(j(this), 'id', index);
replaceAttribute(j(this), 'name', index);
j(this).val('');
});
// add new element to the DOM
newRow.appendTo('.form-denominations');
alert("new list size = " + j(".delete-denomination").length);
console.log("DONE!");
}
each time click on the add-link the pop up alert show the new list size (j(".delete-denomination").length increment by 1), which in my understanding, new row appended successfully.
The problem is the following method
// delete denomination row
j('.delete-denomination').click(function () {
j(this).parent().remove();
}
ONLY WORKS FOR THE NON-CLONED ROW !!! Using firebug I can clearly see the appended row is successfully appended with same structure and same element as original rows but only difference is the id.
However, each time when I click on deleteBtn-[i], in which i is the cloned/appended row's index, the code even not going into the j('.delete-denomination').click() function, which in my understanding, Dom or jquery didn't recognize the new rows hence the failure of identifying the link by jQuery. It's kind of contradictory to the previous alert message that telling the size of list has grown.
But when I click on deleteBtn-[i] where i is the non-cloned row, everything works fine...
So the question is: how to append/add new doms and make them identified by jQuery or Dom? What is wrong in above processing? Is there any way to refresh the list so that Dom/jQuery understand the appended rows from all perspective?
jQuery 1.7+
j(".form-denomination").on("click", ".delete-denomination", function(){
j(this).parent().remove();
});
jQuery 1.3+
j(".delete-denomination").live("click", function(){
j(this).parent().remove();
});
jQuery 1.4.3+
j(".form-denomination").delegate(".delete-denomination", "click", function(){
j(this).parent().remove();
});
The problem is a matter of order and when expressions are evaluated. When you call jQuery with a selector, the selector is evaluated at that time to select the matching elements which exist at that time. The click handler is then registered to only those elements. Elements which are created later are, naturally, not affected.
One solution, demonstrated in another example, uses jQuery's "live events" to apply the selector at the time each event is fired to determine what elements, if any, it would match. There is a performance implication to this approach.
Another solution is to register the desired event handler on the newly created elements when you create them.
Add 'true' to the clone method in order to copy the data as well as the events attached to the original element.
rowTemplate = j('.form-denomination:first-child').clone(true);
This is disabled by default. Here is the clone documentation:
https://api.jquery.com/clone/
P.s. You don't need the click function within the document.ready and it won't bind until after the click.