Develop Reference

I have a html page that loaded in div tag in another page using ajax call I want to trigger javascript functions on loaded page?

The main problem is the loaded html page contain loop of cards each card has checkbox I need trigger javascript function that check if checkbox selected then change text value in card to from select to selected, But the function I wrote to trigger this checkboxes not work?
My checkbox tag from the appended html page:
<div class="body-action-button u-flex-center">
<div><input type="checkbox" style="float: left;" name="companies[]" value="<?php echo $company->id; ?>" id="cbtest<?php echo $company->id; ?>" />
Request an offer</div>
</div>
javascript function I used to trigger checkbox :
$('.body-action-button').click(function(){
alert('selected');//This alert for testing
});

You can try to give a class to your checkboxes like
<input type="checkbox" class="cbxTest" style="float: left;" name="companies[]" value="<?php echo $company->id; ?>" id="cbtest<?php echo $company->id; ?>" />
and add your event to JQuery like that:
$(document).ready(function () {
$(".cbxTest").click(function () {
if (this.checked) {
alert("Selected");
}
});
});
Also if you want to not trigger it on click but only when checked you can also use .check instead of .click like that
$(document).ready(function () {
$(".cbxTest").change(function () {
if (this.checked) {
alert("Selected");
}
});
});
Both works well. It's just about the scenerio...

Try this (fiddle):
JS
$('input:checkbox[name=example]').each(function() {
if (this.checked) {
alert("selected");
}
// else {}
});
HTML
<input type="checkbox" name="example" /> label one
<input type="checkbox" name="example" checked/> label two

hide div with javascript

Why doesn't this work. What should i do with the js to hide me the s_login div? pls help
<?php
define("INSTALLING", true);
$hide = true;
if(INSTALLING == true): ?>
<script type="text/JavaScript">
<?php if (isset($hide)){if($hide == true){echo "
document.getElementById('s_login').style.visibility = 'hidden';
";}} ?>
</script>
<div id="s_login">
<form action="index.php" method="GET">
<input type="text" name="s_host" placeholder="MySQL Host" />
<input type="text" name="s_user" placeholder="MySQL Username" />
<input type="password" name="s_password" placeholder="MySQL Password" />
<input type="submit" name="submit" value="Log In" />
</form>
</div>
<?php else: ?>
<?php endif; ?>

The best way is to wrap the function within
$(document).ready(function() {
// script here
}
using jQuery, or
document.addEventListener("DOMContentLoaded", function(event) {
// script here
});
without jQuery.
This ensures the DOM is loaded before the script is fired.

Put the hiding element script code inside dom ready or window onload method. Your script is executed first and at that time the dom i.e you s_login element isn't available inside the DOM.
With the current code check this and you'll get null. I.e you don't have an element at hand which you hide.
var element = document.getElementById('s_login');
console.log(element);
if you are using jquery you can do this:
$(document).on("ready",function(){
document.getElementById('s_login').visibility = "hidden"
});
else natively
window.onload = function(){
document.getElementById('s_login').visibility = "hidden"
}
Didn't use DOMContentLoaded Listener as that can have some cross browser concerns.

how to Display javascript variables in HTML code

this my javascript
<script type="text/javascript">
var save_method; //for save method string
var table, ket;
function edit_user(id)
{
save_method = 'update';
ket = "disabledInput";
}
</script>
my html
<div class="col-md-9">
<input id="ket" placeholder="NPP" class="form-control" type="text">
<span class="help-block" id="method"></span>
</div>
No error appears but my variable is not shown. Can anybody suggest how to solve it?

html code
<div class="col-md-9">
<input name="id" placeholder="NPP"
class="form-control" type="text" id="test">
<span class="help-block"></span>
</div>
<script type="text/javascript">
var save_method; //for save method string
var table;
var ket;
function edit_user(id)
{
save_method = 'update';
ket = "disabledInput";
document.getElementById("test").value ="disabledInput";//to assign textbox value
}
</script>

You cannot simply execute js within id tag. What you can done instead is to attach onload event to body html element
<body onload="setInputId()">
setInputId function should perform manipulation with id of your input.
function setInputId(){ getElementsByName['id'][0].setAttribute("id", ket);}

Input text to a link within an <iframe>

I have a list of links not in an iframe which refresh the iframe with different info.eg
href="http://www.myfav.co.uk/nf_req_grid.php?g=top_72&e=joebloggs#mail.com<? echo $email; ?>" target="iframe_c"
This works well, but I also need the user to input text for the g=xxxx bit that are not on the general list, which also resides outside the iframe. I have tried various methods including hidden in an input statement but only sucessfully done by re-loading the whole page which I wish to avoid.
I am sure the answer is simple but is eluding me. Thanks

I think it will be easiest to just rig this up with some javascript like this:
<input name="g" type="text" />
<button name="b" value="Refresh" />
<script>
$(document).ready( function(){
$('button[name="b"]').click( function() {
var g = $('input[name="g"]').val();
var e = '<?= $email ?>';
var url = 'http://www.myfav.co.uk/nf_req_grid.php?g='+g+'&e='+email;
$('#iframeId').attr('src', url);
});
});
</script>

Try this:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="ginpt"><br/>
a<br/>
b<br/>
c<br/>
<iframe src="" name="iframe_c"></iframe>
The Javascript:
<script>
$(document).ready( function(){
$('.dlink').on('click',function(e){
e.preventDefault();
window.open(
$(this).attr('href').replace('{g}',$('.ginpt').val()),
$(this).attr('target')
);
})
});
</script>
In this example, I'm just replacing your g querystring value with a macro that'll be replaced by javascript function when they click on the anchor.
jsFiddle: http://jsfiddle.net/0dzassds/1/

How can I add Masked Input Plugin on yet to be added contents? [duplicate]

So I have a joomla! page that is partly generated by functions based on the user. So parts of the forms that I need to use the 'masked input plug-in' on are loaded via functions on page load. The issue I have is, on the fields that are standard HTML on the page, the plugin works fine but on the fields that are generated by my php functions, the fields lock up and don't allow any input. My guess is that it's an issue with the php functions pulling in the forms after the jquery plugin has fired but I tried placing the .mask call in a $(document).ready and no luck.
here's a snippet...
jQuery(function($){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});
THIS WORKS -->
<form name = "subAct" id = "subAct" method="post">
<div class="col1"><input class="subaccountname" name="subName" type="text" id="subName"/></div>
<div class="col2"><input class="subaccountnumber" name="subNumber" type="text" id = "subNumber"/></div>
<div class="col3">Add a New Account</div>
</form>
THIS ONE DOESN'T -->
this function -->
<?php dashboardFunction::displaySubAccount($uid) ?>
loads in this form -->
<form name = "add_reg_num_<?php echo $pin ?>" id = "add_reg_num_<?php echo $pin ?>" method="post">
<div class="regisnumberadd"><input name="regNum" type="text" class = "numFix" />
<input name="regNumPin" type="hidden" value = "<?php echo $pin ?>"/>
</div>
<div class="clear"></div>
<div class="addregisnum">Add Number</div>
</form>

All you need to do is attach an event binding using jQuery .on method and any dynamically created item will be wired to that event.
I answered a similar question here https://stackoverflow.com/a/10203361/12442

I think since the content loads dynamicly you need to use .live
I don't know how to use .live with .mask.
There is also an alternative. You can put .mask code in callback function of dynamic loading.
$("#dynamicContent").load("loadFromMe.php",function(){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});

Dynamic Jquery Input mask Solution (swicth masking programatically)
$(document).ready(function () {
$("[data-mask]").inputmask();
// Do something exciting
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
// re-bind your jQuery events here
$("[data-mask]").inputmask();
});
});
if (is_loose == "True") {
$("#it_qty").removeAttr("data-inputmask","'mask': '9{0,20}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("[data-mask]").inputmask();
} else {
$("#it_qty").removeAttr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}'");
$("[data-mask]").inputmask();
}