i'm using JQuery ajax to load new content into the page, on the server side I load a new div:
<div id="newFuncDiv" onmousedown="javascript:newFunc("VAR");">Click me</div>
In previous cases i used a function as follows:
function newFunc(){$("#newFuncDiv").click(function(){alert("something");});}
But in this case onclick of this div I need to pass a variable, which I extract from the db on server side, how can i achieve this, as even when I add the newFunc(); with the ajax response it doesn't work,
EDIT:
by the way, forgot to say that i'm looping the response from server so the variable i need to pass is gonna be unique for each div.
since you are using jquery, i'd built the click handler jquery style and attach a data object to the html element:
<div id="newFuncDiv" data-foo="bar">Click me</div>
$("#newFuncDiv").on('click',function(){
alert("something" + $(this).data('foo'));
});
You can use this to reference that div.
function newFunc(myVar) {
$(this).click(function(){
alert(myVar);
});
}
You can save your variable into some attribute to each div and assign a same class a to each div like this
<div class="clickme" id="youvar1"></div>
<div class="clickme" id="youvar3"></div>
<div class="clickme" id="youvar3"></div>
then in jquery
$(document).ready(function(){
$(".clickme").click(function(){
var uniquevar = $(this).attr('id');
/*your ajax code here*/
});
});
Hope this help
Related
I have external file which generate the checkbox list. And this file was load through jquery load. I want the checkbox click and update its parent div with something.
html
<div id="testiContent"></div>
checkbox.php
<div class="alert alert-info"><input type='checkbox' class='groupid' value='1'>1</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='2'>2</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='3'>3</div>
jquery
$('#testiContent').load('checkbox.php');//load file via ajax
$("#testiContent input.groupid").change(function(){
if($(this).is(":checked")){
$(this).parents().addClass("alert alert-success");
}else{
$(this).parent().removeClass("alert alert-success");
}
});
Ideally, when the checkbox click, then the alert div will change into green. I can make it working on the normal scrip but not a chance with ajax.
Fiddle here : http://jsfiddle.net/o6Lk17db/1/
My hunch is that you are simply attaching the change listener before the content is loaded in the DOM, so it doesn't actually target anything. You could pass a callback function to load only attempt to attach the change listener after the content is in the DOM, but it might be easier to just use the on method on the document-- that way it is evergreen and doesn't need to rely on callbacks:
$('#testiContent').load('checkbox.php');//load file via ajax
$(document).on('change', 'input.groupid', function(e){
var target = e.target;
if($(target).is(":checked")){
$(target).parents().addClass("alert alert-success");
}else{
$(target).parent().removeClass("alert alert-success");
}
});
That may not be exactly right but I think it will at least trigger.
You can't bind to an element that isn't there yet, so your dynamically added ones aren't subject to the $"#testiContent input.groupid" selector. The way around this is to bind to something that is already present. For example, the parent container where your elements are dynamically being added.
Try something like this:
$("#testiContent").on('change', 'input', function(){ ... });
will attach a listener to the parent, specifically for events on the appropriate (input) targets within that parent.
When html controls are loaded dynamically, events for these controls needs to be bind manually. So you need to bind check/click events once element adding is done. You can write code as
$(document).on("change","input.groupid").change(function(){
// your code here
});
use this
$("input.groupid").change(function() {
if ($(this).is(":checked")) {
alert($("input.groupid").val());
$(this).closest('div').removeClass("alert-info");
$(this).closest('div').addClass("alert-success");
} else {
$(this).closest('div').removeClass("alert-success");
$(this).closest('div').addClass("alert-info");
}
});
You need to use change event on document because the content is loaded via ajax. and you can use toggleclass function for change the parent div.
$('#testiContent').load('checkbox.php');//load file via ajax
$(document).on('change', '.groupid', function(e) {
$(this).closest("div").toggleClass("alert-success alert-info");
});
Is it possible to use Jquery / Ajax to refresh a div but don't load a php file in the Jquery script?
Every jquery script I found requires a file to load but that's not possible because then my variables are not set.
<div id="reloadDIV">
<?php // PHP in here.. ?>
</div>
if you are loading data dynamically from any php file like file.php than do this.
$(document).ready(function(){
var container = $("#reloadDIV");
container.load("file.php");
var refreshId = setInterval(function()
{
container.load('file.php');
}, 9000);
});
<div id="reloadDIV">
<?php // PHP in here.. ?>
</div>
If you're looking to update data in the div that is being pulled from a database, Ajax could be a good approach.See here: jQuery Ajax simple call
Then in your ajax file you just need to return the data and it will update the div. You could then use a timer function to call the ajax request periodically
I have a form inside a DIV (normally the div is hidden using "display:none;")
The user open the DIV with: onclick='$("#Details").show("slow");
Fills out the form and save the data.
I don't want the entire page to be reloaded, and I need only this DIV to be reloaded
I tried:
function(data) {
$('#Detalils').load(location.href + ' #Detalils');
});
and:
$("#Detalils").load(location.href + " #Detalils, script");
and:
$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})
where in #script I put my script
In this div I have some script, and because of the jQuery on load script execution, the script is not executed.
I cannot put the script in an external file, it must be in the page body.
Is there a way to execute the script a well?
Thanks
Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :
Instead of something like :
<form>
<input type="button" onclick="alert('hello');"> Click me ! </input>
</form>
Do something like :
<form>
<input id="myButton" type="button"> Click me ! </input>
</form>
<script type="text/javascript">
$("#myButton").click(function()
{
alert('hello');
});
</script>
You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.
The works within my local environment. Give it a shot in yours.
The HTML:
<div id="wrapper">
Remove
Reload
<div id="Details">my details box</div>
</div>
The jQuery:
<script type="text/javascript">
function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
mtarget = $('#Details'); //the element on your page, that houses your external content
mscript = 'external.js'; //the js script required for your plugin to work
mtarget.load("external.html", function(){
$.getScript(mscript, function() {
//run the plug-in options code for your external script here
});
});
//*/
}
function madjustments() {
/*ADJUST THE LOADING PROCESS*/
//remove the load request on click from your remove button
$('#mremovebtn').on("click",function(e) {
e.preventDefault();
$('#Details').children().remove();
});
//reload the request on click from your reload button
$('#mreloadbtn').on("click", function(e) {
e.preventDefault();
mload();
});
//*/
}
(function($){
mload();
madjustments();
})(jQuery);
</script>
You will obviously need 2 additional files. One called external.html and another called external.js, for my demo code to work. But you can change the naming process to whatever works for you.
Extra:
Set a class in your external html file (on the parent element), for example #external. And by default, set the CSS to display:none in the style sheet. Then when the page loads in, simply show() it in the jQuery code.
I have created a menu which is simply a series of DIVs and am using the following code
$(".menu_item").click(function(){
window.location = $(this).attr("data-href");
return false;
});
to make the entire DIV for each item clickable. I have a "container" DIV setup with content initially loaded via php-include, but want different content to load when a different menu item is clicked.
I know I can use JQuery.load to target the loading of an external file into a sepcific DIV but it looks that would mean coding separate instances of jquery for each link? I would also rather stick to using php includes if possible. Can I use jquery.load to load via php include?
Any help on how to achieve this would be appreciated.
Here's the rest of the code:
/* Menu Item */
<div class="menu_item" data-href="link1.html">
Link 1
</div>
/* Container to load link into */
<div id="myContentDiv"></div>
You can use the jQuery AJAX shorthand method load() which makes the ajax request and on completion populates the element with response
$(".menu_item").click(function(e){
var url= $(this).data('href')
$('#myContentDiv').load( url);
return false;/* edit to prevent browser following link*/
});
API Reference: http://api.jquery.com/load/
$(".menu_item").click(function(e){
e.preventDefault();
$.ajax({
url: $(this).attr("data-href"),
context: $('#div-to-replace-content')
}).done(function(data){
$(this).append(data);
});
});
when I click on "Click Here" then a page must open inside
<script....>
$('yahoo').html('<a href=desc.php>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
Thanks
Dave
I think you're looking for AJAX to fetch the page for you. Something like this might work:
<script type="text/javascript">
$(function() {
$('#clickhere').click(function() {
$('#yahoo').load('desc.php');
});
});
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
First you need to wrap the script inside $(function() { ... }) to execute your code on page load. This is equivalent to $(document).ready(function() { ... }).
Next you have to bind a click event to the #clickhere element so you can actually do something when the user clicks on it.
When the user clicks on the #clickhere div, load() will fetch the contents of the given url inside the element you call it from. So, this snippet means that when the #clickhere div is clicked, desc.php is loaded inside #yahoo div.
ID selector is #ID, not just ID
Use jQuery AJAX load method to load desc.php page
You should execute your jQuery code after DOMContentLoaded event
Wrap your code in $(document).ready(function() { });, which will insure that the code executes after the DOM is available to your code. Otherwise, $('yahoo') will likely return no matched elements.
Why not try target_self ? I also fixed some code
<script....>
$('yahoo').html('<a href=desc.php target='>self'>Click here</a>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>