Some content is displayed by ajax to be rendered in a div as a lightbox that is closed when user clicks outside (this content is deleted at this point):
Every time user clicks on the target div, some content goes to this controller:
controller:
def ajax_load
// some code
end
And finally this js function is called from controller:
ajax_load.js.erb
<% if #variable %> // embedded variable
$(target_div).html("<%= j render 'path' %>");
$('.some_div').on('click', '#target_element', function(e) {
e.preventDefault();
$("input#element_0").mask("00/00"); // works only once
$("#element_1").prop('checked','checked'); // works
$("#element_2").show(); // works
});
<% end %>
Inside this lightbox I have some inputs and this jquery mask function is called and it indeed works when I open this element once on the page, but if a close the lightbox and call it again it doesn't anymore, and the other lines of this click function keep working, like "jumping" the mask function.
If I try to make this mask to work directly from browser console after it had stop to work it don't change.
Obs: I also made some tests on the browser console:
After that lines of code above had already being loaded from the js file, the only way to get this to work on the browser console is changing a little from the jquery path:
$(".previous_div input#element_0").mask("00/00");
and to make it work again we need to change a little more:
$("body .previous_div input#element_0").mask("00/00");
I solved this problem in a way that I think is not the most recommendable.
Because of the behavior being like that I have duplicated id (and inspecting the source code it doesn't has it), I changed the id of the element and mask it again, and after that, works to me. Now I can close this lightbox and open again many times and have the input with the mask right there.
$("input#element_0").mask("00/00");
$("input#element_0").attr("id","element_0_masked");
$("input#element_0").mask("00/00");
I have the same problem, but from retrivied ajax added this script and it's worked for me
<script>
$('input[name="txt-tel"]').mask('(000)-000-0000');
$('input[name="txt-dni"]').mask('#');
</script>
You could use the unmask() function before mask(), like this:
$("input#element_0").unmask();
$("input#element_0").mask("00/00");
It works for me.
Related
I've checked many other answers on StackOverflow but none of them work for some reason.
I'm trying to use something simple like
window.onload = function() {
sleep(5000)
clickButton()
}
But as far as I can tell the button on a page I want clicked loads AFTER page load. So window.onload doesn't work at all. That's why I tried to use a custom sleep function to force the code to run after-after page load but nope. Code "sleeps" by preventing page from fully loading, then runs clickButton(), then the page loads. Useless.
I know my actual button clicking code works in practice because I just fed into the browser console line by line and it worked fine. But the button I'm targeting loads after my code is executed!
I have also tried these which also do not work:
window.addEventListener('load', function () {
clickButton()
})
setTimeout(clickButton(), 5000)
setInterval(clickButton(), 5000)
...
Also I'm using:
document.querySelector("[data-a-target='button-name']");
instead of:
document.getElementById("button-name");
since this button does not have an id.
...
Also I have never used jquery before if that is the answer.
...
How on earth do I get js to click a button immediately as soon as it loads?
The order in which you write your code plays an important role here.
Firstly, put the script tag at the very bottom of the body element of your html page. That forces the browser to have already read through the entire html page before getting to the script tag with your Javascript.
Secondly, I assume you have an event listener for a click on the button. Write the event listener before you let the button be clicked.
For example, I wrote this little code to test my assumption out:
button.addEventListener('click', function () {
console.log('Clicked');
});
button.click();
This should hopefully work for you too. Good luck
jQuery Core 3.1.0
Chrome, Firefox
Below is a model of jquery.ajax() success behaviour.
Shortly: I managed to fetch data via AJAX. In this model example the data is represented by "Just something" placeholder. Now I want to add the data to the document.
<script>
var add_date = $("#add_date");
function add_date_ajax(){
$('.frame_date').append("Just something");
debugger; // 1
}
debugger; // 2
add_date.click(add_date_ajax);
</script>
A problem: the data appear and then disappear in half a second.
I placed breakpoints.
When the page is loading, it stops at breakpoint 2. That is correct.
When I click #add_date element, the script stops at breakpoint 1. That is also correct.
But when I click "resume script execution", the script again goes to breakpoint 2. This seem strange to me. As if the page is reloaded. Maybe that is why the added text disappears.
Could you help me cope with the problem?
Added later:
https://jsfiddle.net/mv1yu3zw/1/
It disappears because you are reloading the page. The html
Add date
should be
Add date
To bind all your events, you should use the ready on document.
To avoid the reloading of your page (because of the href of the a tag), you have to call preventDefault or use a button.
You should write your code like this:
$(document).ready(function() {
$("#add_date").on("click", add_date_ajax);
});
function add_date_ajax(event) {
event.preventDefault();
$('.frame_date').append("Just something");
}
I have a rails4 app. I'd like to trigger some js events on page load, but only if user comes from a given page.
By default all the comment replies are hidden on the post#index page. If user clicks on a div then the corresponding replies become visible.
Now I want to have a given post_comment_reply div visible by default on page load, if a user comes to the page via clicking on the notification belonging to the post_comment_reply.
What is the preferred way in rails to do that?
js
$(document).on('click', '.open-post-comment-reply', function (event) {
var post_comment_id = $(this).data('pcid');
$('#post-comment-replies-' + post_comment_id).toggle();
});
Setting a cookie would work, as suggested by another user. You could also check the request.referrer in rails to see where they came from.
Couple of ways to handle triggering the js from there. You could pass the referrer value to the js with something like:
<div class="some-class" data-referrer="<%= request.referrer %>">
Then in your js, if you're using jQuery:
if ($('.some-class').data('referrer') == 'whatever_url'){
// run your code
}
You could also put a conditional directly in the view. Probably not as clean but something like:
<% if request.referrer == 'whatever_url' %>
<script>
// code to run
</script>
<% end %>
you can attach a cookie on the given page , in link onclick event, then delete it after showing the comments box.
Greetings I'm working on a gallery script and would like to have it so when the page is loaded it is automatically positioned to the top of an anchor I have set. I've tried this code:
<script>location.href = "#trendnav";</script>
<a name="trendnav"></a>
And it doesn't seem to do anything. The more instantaneous this seems to the user, the better.
Try
window.location.hash = "#VALUE";
Fiddle Demo 1
Fiddle Demo 2
or
window.scrollTo
Or, using your original approach:
$('span#godown').click(function(){location='#anchor';});
See here http://jsfiddle.net/dxNKG/1/
. I assigned a clickable span with the task of being the button that triggers it.
Actually, your original syntax location.href='#anchor' is correct, but you should fire it only after the DOM has loaded completely. So, either put the <script> section at the end of your page or do something like
window.onload=function(){window.location.href='#anchor';};
see here http://jsfiddle.net/bUaTT/ (without jQuery)
or, since you are using jQuery:
$(function(){window.location.href='#anchor';})
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.