We Keep Coding

javascript code only work once, when page is loaded

Hi I have this HTML code:
<ul class="nav navbar-nav navbar-right">
<li>
<%= link_to "Articulos", articulos_path, id: "ajax_articulos" %>
</li>
</ul>
and whenever someone click on #ajax_articulos I want to trigger:
$(document).ready(function(){
$( "#ajax_articulos" ).click(function() {
alert( "Handler for .click() called." );
});
});
My problem is that it only works at first when the page is loaded. Once the page is loaded if I click again it will not work.
How could I make that action work again even when used without having to refresh the page ?

Which version of Ruby On Rails are you using?
If you're using RoR 5 or above with turbolinks you need do something like this:
$(document).on('turbolinks:load', function() {
$('.some_parent_class').on('click', '#ajax_articulos', function() {
//Handler...
}
})

You can try this event using the jquery .on():
$(function() {
$('.some_parent_class').on('click', '#ajax_articulos', function() {
//Handler...
}
})
Jquery .on() function

How do I get click event of model form button?

On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?

Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})

It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}

Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.

Bootstrap dropdown not working after initial ajax form submission

I have a dropdown on my page, manager.php, here. Sorry for the formatting - bootstrap.:
<!-- Bootstrap -->
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../css/bootstrapstyle.css">
<!-- Bootstrap Dropdown Enhancements-->
<script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script>
<link rel="stylesheet" href="../../css/dropdowns-enhancement.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button>
<ul id="searchBy" class="dropdown-menu" role="menu">
<li class="disabled">Search By...</li>
<li>cost</li>
<li>name</li>
</ul>
</div>
</div>
</div>
</div>
<div id="everything">
</div>
This code works fine when I load manager.php directly and the dropdown initializes, but this is not how I need the code to work.
The user begins on return.php; this page collects a bunch of data from the user and returns it to manager.php.
Once the user selects to do so on return.php, this code is run:
$.ajax({
type: 'POST',
url: 'manager.php',
data: {number:number, location:location, project:project, comments:comments},
success:function(data){
$('#everything').html(data);
}
});
The ajax call works correctly, and it loads the data returned from manager.php into the everything div. It passes along the data as expected. The only thing that DOESN'T work upon loading manager.php into the DIV is the drop-down. I need to understand what I'm doing wrong to cause this functionality so I can prevent doing it in the future.

you can't initialize the bootstrap component after page load by adding bootstrap clasaes. To do this you have to initialize it by your self
To initialize a dropdown write this code
$('.dropdown-toggle').dropdown();
after
$('#everything').html(data);
for more details: http://getbootstrap.com/javascript/#dropdowns

You need to manually reset the dropdown after you've loaded the data into the everything div. I've modified your AJAX call to show you where to put the call.
$.ajax({
type: 'POST',
url: 'manager.php',
data: {number:number, location:location, project:project, comments:comments},
success:function(data){
$('#everything').html(data);
$('#searchBy').dropdown();
}
});
The dynamic loading you're doing doesn't cause the DOM to reload forcing the drop down to be reinitialized. After you're AJAX call has completed, you can then reset the bootstrap drop down manually by calling .dropdown();.
EDIT
Generally functions in bootstrap for features are setup using a $( document ).ready() call. This function executes once, after the DOM has been loaded and only after the DOM has has been fully loaded. Since your manipulating the DOM, you are not causing the function to be triggered again, and you need to manually trigger the feature you need.
You also want to load your includes only once on each page. They need to on manager.php in order for the function be available when you go into your success method. I'd suggest using a template for your project so you manage all your includes in one place. Also, if your using manager.php as a page to be included in another page, it's okay if you don't have the reference to the JavaScript pieces won't work since you don't want users accessing that component on it's own.
The reload you are doing appears to be forcing the content to be re-added to the page, thus forcing the $( document ).ready() call in the included file to be re-executed. You can do this, but it's very inefficient.

So I'm not sure why this works, but it has so far:
I've modified my ajax call to reload bootstrap's .js file prior to executing the return.
function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}
$.ajax({
...
success:function(data){
reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js');
$('#everything').html(data);
}
});
For the bounty, can someone explain to me:
a.) Why do I need to force the reload of bootstrap.min.js?
b.) Why is this even necessary if I have a link to this file in BOTH files' <head> sections?
<!-- Bootstrap -->
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../css/bootstrapstyle.css">
I've also tried loading it in one, but not the other (so I don't load it twice,) and that doesn't do anything.
c.) Why does this work? What is it doing?

page will load DOM 1st time. ajax just update a part of page, so new elements you add wont have prop you defined. you need to reinit as you did or make something like this
http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/

I want to share my experience: I am doing dynamical multi layer dropdown menu, meaning that user can customize how many parents and children this menu has. So, after ajax submission, I empty the navbar where the menu is
$(document).find('.navbar-nav').empty();
And fill it with the new html like:
html.push("<li class="nav-item dropdown"> <a class="nav-link" href="#">" + val.PageName + ""); // It is OnTop
and append it to my navbar:
$(".navbar-nav").append(html.join(''));
and the dropdown item is there but it was not working. The reason is that you have to load all the js and css for that new html items again.
Here is the good example os static multilayer menu: https://github.com/kmlpandey77/bootnavbar
So, the main point is after you append new html to the DOM item, you need to reload the page so it to work, or load resources that is that new html items are using;
Here how to load after ajax and append process :
jQuery.ajaxSetup({ async: false });
$.get("wwwroot/bootnavbar/bootnavbar.css")
.done(function () {
// exists code
jQuery.ajaxSetup({
async: true
});
}).fail(function () {
// not exists code
jQuery.ajaxSetup({ async: true });
});

how to dynamically add jquery mobile popup effect to links

In jquery mobile, I dynamically add a tags that is supposed to open a popup like in this example below. But since it is dynamically added, the jquery mobile effects don't affect it. How can I get it to work like this?
Thanks
Actions...
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li>View details</li>
<li>Edit</li>
<li>Disable</li>
<li>Delete</li>
</ul>
</div>

When you append any html into a page after the page's initial load, you need to reapply any of the jquery functions in order for them to work when the event occurs
Example...
if you currently have something like this:
<script type="text/javascript">
$(document).ready(function () {
$('a').on('click', function () {
//something
return false;
});
});
</script>
This will do //something whenever the user clicks on any < a > link.
Now that you are loading the new < a > links in after the document is ready, the code above will not apply to the new code as it was not on the page when the javascript applied the above code.
To fix this, you need to run the function that does the //something again after the new < a > has been loaded.
<script type="text/javascript">
$(document).ready(function () {
somethingFunction();
});
});
//this is where we put the code to apply an event, it is now recallable later on.
function somethingFunction(){
$('a').on('click', function () {
//something
return false;
});
}
</script>
Assuming that you are pulling in the new < a > html via an ajax query, you would need to call the somethingFunction() after the ajax query is successful
EG
$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
$('.popups').html(data);
somethingFunction(); // THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});

If I understood correctly, you want to add buttons dinamically, resulting in the style proposed in your example:
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"
To apply jQuery Mobile enhancements after appending some HTML you have to call the widget creation method: .button(); in this case (can be .checkboxradio();, .listview();, etc).
I put toghether a JSFiddle which demonstrates dynamically creating a button calling .button() and also applying hardcoded classes (which I think it's not a good thing to do).

There is a demo available in jquery mobile documents Dynamically create popup
Following i write a simple html tags in javascript then append in to jquery mobile pages.
html:
<div data-role="page">
<div data-role="content" id="forpopup">
</div>
<div>
Here is the Fiddle Demo.
i hope this will be helpful.

No pagechange event firing

In jQuery mobile, I am trying to detect a successful page change to a specific page. I have the following code, inline on the page I want to load.
<script>
$(document).bind( "pagebeforechange", function( e, data ) {
alert("pagebeforechange");
});
$(document).bind( "pagechange", function( e, data ) {
alert("pagechange");
});
$(document).bind( "pagechangefailed", function( e, data ) {
alert("pagechangefailed");
});
$(document).live( "pagebeforechange", function( e, data ) {
alert("pagebeforechange live");
});
$(document).live( "pagechange", function( e, data ) {
alert("pagechange live");
});
$(document).live( "pagechangefailed", function( e, data ) {
alert("pagechangefailed live");
});
</script>
I get the the appropriate alerts when loading the page directly, or refreshing, but not when navigating from another area in the Jquery Mobile app.
Page is called by the the "Your Car" Tab in the footer
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Features</li>
<li>Your Car</li>
<li>Contact</li>
</ul>
</div>
</div>

Would it work to place your code in the pageshow event? It may if you are trying to detect the page or location. Something like this maybe:
<script type="text/javascript">
$('[data-role=page]').live('pageshow', function (event, ui) {
hash = location.hash;
page = hash.susbtr(1);
if (page.indexOf('about.html') >= 0) {
alert('you made it!');
}
});
</script>
UPDATE
After testing this scenario a bit more and rereading your question, I think I was able to reproduce the results.
This works as you described and only fires alerts when loading the page directly or refreshing the page:
<body>
<div data-role="page">
<!-- page stuff -->
</div>
<script type="text/javascript"> ..bind events... </script>
</body>
However, when I move the javascript directly inside the page, it works as expected and fires all of the bound events, no matter how the page was reached:
<body>
<div data-role="page">
<script type="text/javascript"> ..bind events... </script>
<!-- page stuff -->
</div>
</body>

Where are you binding to this events?
Have you read following in the Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html:
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Luke's thinking is in the right direction: clearly the problem you had has to do with where in the code the binding is occurring. This is proved by shanabus.
However, in your case, you should be doing the binding when jQuery mobile's mobileinit event is fired, not pageInit, as Luke is suggesting.
Example (fires on all page change events):
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$(document).on('pagechange', function () {
window.alert('page changed!');
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
As illustrated in the code above, be mindful that handlers triggered by mobileinit must be included before the jQuery mobile <script> tag.