Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
If we click the "Add" link, a new input should be added to the form.
Also, there should be link "Delete" near each added input. If we click on it, this input should be removed.
How do I do this?
I'm struggling whether to vote to close this as a duplicate, even though it's not exact. But what you're looking for appears to be answered here. The main difference is that where they are binding to the change event for a select element:
$("#selectBox").change(function() {
you would instead bind to the click event of an anchor element (your "Add" link):
$("#addLink").click(function() {
The "Delete" link would work in a similar manner. As the HTML is created for the new input, you'd also create the "Delete" link to go next to it before adding it to the DOM (the call to the .html() function in the referenced code). You'll want to make sure that you give the added HTML a unique id (wrapped in a div with a unique id for example), as well as to the added "Delete" link.
Then, after it's added to the DOM, you'd add an event handler to the "Delete" link:
$("#deleteLink123").click(function() {
In this handler you'd reference the unique id of the container of what was added to the DOM and remove it. I'm sure there's a more elegant way to handle this by using the .live() function here and some more clever selectors. It would be interesting to re-factor something like this while trying to not be too clever so as to hurt ongoing support.
There are some additional considerations you'll want to keep in mind as you develop this:
The anchor tags are by default links, but it looks like you don't want them to link to anything. You can link them to "#" but that's not really elegant. You could remove the href attribute from them entirely, but then you'll also need to style them to visually behave like links. Not difficult, but not intuitive either. Why not buttons?
How the actual form behaves when handled by the server is up to you. You can dynamically add elements to the DOM to your heart's content, but that may not help you on the server-side. That's another question entirely, though.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
For a while now, i want to create an autoclicker for in the browser to click on specific buttons on a website. Since i am pretty familiar with javascript i want to use javascript to write the script. To clarify what i want, imagine a website with a list of items. Each of these items has a button with the content "add" and contains the css class "add-btn". What i want is a script that scans the code of the wanted website and searches for all buttons with the "add-btn" class attached to it. Then i want to trigger the click event for each of these buttons one by one. (If it is possible i want the browser minified and not opened while running the script).
I already did a lot of research on the internet and still haven't found a clear javascript tutorial to achieve my goal. Does anyone maybe have a link to a tutorial that matches my wishes? Or maybe a push in the right direction?
What you want is a headless browser, like PhantomJS or Zombie. PhantomJS is no longer maintained. Then you can navigate to the page and find buttons using css selectors, which you can then trigger click events on.
https://phantomjs.org/
http://zombie.js.org/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am using the typeahead.js plugin which can be used to add autocomplete features to HTML input box.
So if you load the script and do
<input class="typeahead" type="text" id="partNumberInput" aria-describedby="enter Part Number" placeholder="Part Number">
The script will look for all the DOM elements with the class typeahead and add bunch of parent elements and does some other things which helps to give the autocomplete feature.
Now, I wanted to add input boxes dynamically using javascript append with the class of typeahead. Since the typeahead only runs once when the page loads at the beginning it does not get to do all the stuff I mentioned before.
Is this a scenario where I reload the script every time a user clicks a button to add another input box with typeahead class?
The very first example in the examples shows how to call typeahead on any element in the page.
Rather than relying on putting a specific class on your elements so that typeahead detects them, you can call typeahead on your target element(s) using any class you want.
For example, if you have a brand new element that you dynamically placed into the DOM, and it has the class whatever, then you can load typeahead on that element by doing:
$('.whatever').typeahead({
// your options here
}, {
// more options here, see examples
})
You would want to reload the script tag itself; that could have unintended (potentially detrimental) effects on your app.
In general, the form $('.whatever').typeahead(...) is how you generally call any jQuery plugin, in order to do operations with that plugin on the elements specified by the selector.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've found a couple other threads containing the same questions, but none of them had an understandable answer. I am supposed to make client side changes, but that is only possible in the .ascx file and if for instance i want to call a function to calculate something and then display it with no page refresh that is not possible :( any easy solutions?
With jquery, you can replace the contents of any existing HTML element using the .html() function. For example,
$("#MyDiv").html("Here is the new text.");
Since the function takes HTML as an input, you can even set the style if you want:
$("#MyDiv").html("Here is some text. <DIV class='foo'>Here is some more text in a different style.</DIV>");
You can also add new elements using .append(), like this:
$("#MyDiv").append("<p>Even more text</p>");
To do this upon a button click, you would use the .click() function. So your code would look something like this:
$("#MyButton").click(function() {
$("#MyDiv").html("You just clicked a button!");
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm creating text fields each time a button is clicked, with each new div I create I also want to give it a button to delete this field. As can be seen in this JSFiddle.
However the button associated with each newly created div doesn't delete it's associated field. How can this delete that text fields?
You have to use delegation.
This works for the elements new to the DOM, after it was already loaded.
$(document).on('click','.deleteButton',function(){
$(this).closest('.form-group').hide();//remove
});
JSFiddle
Note: I added deleteButton class to the dynamically inserted buttons.
You can set in your button an onclick function and handle delete there like following:
window.deleteRow = function(obj){
$(obj).parent().remove();
}
fiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have just started using JQueryMobile and built a little app.
This app has one page with a table that i build dynamically using javascript.
This table is being built at the app load and each 10 seconds.
After the table is build with all the rows and other stuff , i add it to a div (data-role=page).
On the first time i use $.mobile.changePage("#WantedPage") , it works fine and has the css design.
But, if i stay one this page and the method of the dynamic build of the table is called it looses all of its design it had before.
I tried already to reload the page also after building this table but it still has the same problem.
Can anyone give me a direction with this issue?
I will be glad to give more info if needed.
Edit:
Each td in the table has a button inside it and i noticed recently that before the re-build of the table with new button , it creates a div that has a span and button in it.
and after the re-build , i have only a button in it.
Just trigger this line after you add dynamic content:
$( ".selector" ).table( "rebuild" );
First time it works because you are adding it to other page. Secone page is not enhanced because it was never active before. As soon as you transit to it jQuery will enhance full page markup, including dynamically added table.
But, when page becomes active, if you add dynamic content, you will need to enhance it manually.
There's another function that can help you, but in this case trigger it on whole page:
$('#pageId').triggerWithin();
On there other hand, if you want to find more about this topic read another related answer.
Working example: http://jsfiddle.net/Gajotres/vds2U/85/