im tryin to make a onclick event for my image, but its not workin..the alert is not showing up..
$(document).ready(function(){
$('img.closeAttrIcon').click(function(){
alert("ww");
});
});
even if i try like this with ..bind.. no hope...
$(document).ready(function(){
$('img.closeAttrIcon').bind('click',function(){
alert("ww");
});
});
the html will be created during this event:
$('a#btnAddStdntAttr').click(function(){
var newAttr = '<div class="attrParent"><br class="clear"><label></label><input type="text" id="stdntAttributeKey1" maxlength="250" style="width: 13%;" name="stdntAttributeKey1"/>';
newAttr+= '<input type="text" id="stdntAttributeValue1" maxlength="250" style="width: 13%;" name="stdntAttributeValue1"/>';
newAttr+= '<img src="<c:url value="/static/images/closeIcon.png"/>" onclick="removeStdntAttr();" class="closeAttrIcon" alt="Close" title="Close" /></div>';
$(this).after(newAttr);
});
what am i doing wrong here..please help..
it does not work because you are injecting it after the DOM is created for the first time, for that you need to use the live (if using til jQuery 1.7) or on if using (1.7+) binding method
change your call to:
$(function(){
$('img.closeAttrIcon').live('click', function() {
alert("ww");
});
});
if you're using jQuery 1.7+ then you can also do this:
$(document).on('click', 'img.closeAttrIcon', function() {
alert("ww");
});
Related
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
I Wanna access the hidden values in ajex posted in a div
<input type="button" value="button 1" class="btn">
<div id="div"><div>
<script>
$.ajax({
url:"btn2.php", success:function(data){
$('#div').html(data);}
});
$( "#table" ).on( "click", ".upd", function() {
alert("button is wrking");
});
</script>
PHP
echo"<input type='button' value='button 2' class='btn'>
<input type='hidden' value='dishonest' id='hdn'>";
can any one help me on this.. i have no idea what to do ...
basically i want value of hidden
var h=$('#hid').val();
but that doesn't work bcoz its posted later in div ...
You will get value from ajax success
success:function(data){
$('#div').html(data);
var h=$('#hid').val();
alert(h);
}
i am a newbie programmer.I am stuck for two days with a simple code.I try to use jquery form plugin for submitting a form to another page and get a feedback from that page.The problem is the plugin is not working.the form is submitted as normaly without feedback.Here is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='submit' id='sub'>
</form>
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Here is my ajaxcall.php page code
if(!empty($_FILES['picture']['size']))
{
echo "<img src='images/197.jpg'>";
}
Expectation was the echoed image would feddback but the page is simply redirected to ajaxcall.php page.ajaxForm() function is not working.But why?please help.Thanks in advance.
Just replace your submit button for a normal one, because you are already submiting the form programatically from your click handler, so replace your following html:
<input type='submit' id='sub'>
for this one:
<input type='button' id='sub'>
use these codes instead of your script codes. sorry for the late answer
$(document).ready(function(){
$("#sub").click(function(){
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
I want to achieve something like this. Here the page automatically loads new content when I scroll down. I want to fetch the new set of data by clicking on a hyperlink at the bottom of my page.
Being a newbie to AJAX, I was checking out this question which is similar to mine, but it isn't working. All I get is an empty Object when I run the code.
Here's the code in my files:
index.php
About Me <br>
Contact Me
<div class="wrap"></div>
<script>
(function(){
var wrap = $('div.wrap');
$('a').on('click', function(e){
var href = $(this).attr('href');
$.get(href, function(data){
console.log($(data).find('div.container'));
$(data).find("div.container").appendTo(wrap);
});
e.preventDefault();
});
})();
</script>
about.php
</div>
<div class="container">
<h2>About Me</h2>
<p>I suck at AJAX ! :-(</p>
</div>
contact.php
<div class="container"><h1>Contact!</h1>
<form action="#">
<textarea name="content" id="content" cols="30" rows="10"></textarea>
<input type="url" name="url" id="url">
<p><button type="submit">Save</button></p>
</form>
</div>
Screenshot:
Am I missing something? Does .get() work inside the callback function of click() event? But it works fine when I .load() it... Sorry for the big post but I'm totally at a loss here! :/ Please help me out?
(function(){
var wrap = $('div.wrap');
$('a').on('click', function(e){
var href = $(this).attr('href');
$.get(href, function(data){
console.log($(data).filter('div.container'));
wrap.append($(data).filter(".container"));
});
e.preventDefault();
});
})();
As for why $.get() isn't working, you need to get the returned data ready for use by the DOM traversal techniques:
(function(){
var wrap = $('div.wrap');
$('a').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$.get(href, function(data){
var $content = $('<div />').html(data);
console.log( $content.find('div.container') );
$content.find("div.container").appendTo(wrap);
});
});
})();
jsFiddle Demo Note that jsFiddle's testing resources required $.post instead of $.get, but the principle is the same.
Similar thing, accomplished using .load() (jsFiddle demo):
(function(){
var wrap = $('div.wrap');
$('a').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$('<div />')
.load(href +' div.container')
.appendTo(wrap)
.children(':first-child')
.unwrap();
});
})();
I am having trouble when submitting a dynamically created form.
This is how I create the form after a radio button is checked:
$(document).ready(function(){
$('input[name$="rad-tweet"]').click(function(){
var radio_value = $(this).val();
if(radio_value==='hash') {
$('#mainform2').empty();
$('#mainform2').remove();
$('#radio-buttons').after('<form action="" id="mainform" method="POST" ></form>');
$('#mainform').append('<label class="label" for="Location" > Location</label>'+
'<input class ="text-box" type="text" name="Location" id="Location"/>'+
'<label class="label" for="Since" >Since</label>'+
'<input class ="text-box" type="text" name="Since" id="Since" />'+
'<select name="Time" id="Time" style="width:80px;">'+
'<option value="MINUTE">Minute(s)</option>'+
'<option value="HOUR">Hour(s)</option>'+
'<option value="DAY">Day(s)</option>'+
'<option value="WEEK">Week</option>'+
'</select>'+
'<label class="label" for="Time" >Ago </label>'+
'<label class="label" for="Limit" >Up to</label>'+
'<input class ="text-box" type="text" name="Limit" id="Limit" />'+
'<label class="label" for="Limit" >Results </label>'+
'<input class ="submit-button" type="submit" id="submitButton" value="Get Hashtags" style="width:95px;" />');
}
else if(radio_value==='trends') {
$('#mainform').empty();
$('#mainform').remove();
$('#radio-buttons').after('<form action="" id="mainform2" method="POST" ></div>');
$('#mainform2').append('<label class="label" for="Location" > Location </label>'+
'<input class ="text-box" type="text" name="Location" id="Location"/> '+
'<input class ="submit-button" type="submit" id="submitButton" value="Get Trends" style="width:95px;" />');
}
});
This code follows the code above, and I try to make an XHR request to a php script when the from #mainform is submitted.
$('#mainform').submit(function(){
if(runProgram()){
//Loading div. To be hidden upon sucessful ajax. Disable submit button
document.getElementById("Loading").style.visibility="visible";
document.getElementById("submitButton").disabled=true;
$.ajax({
url: "indexProgram.php",
type: 'POST',
data: $(this).serialize(),
success:function(data, textStatus, jqXHR){
//take away loading div and reenable submit.
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("submitButton").disabled=false;
var arr = data.split(",-,");
BeginTime = arr[3];
if(!(/^\s*$/).test(arr[0])) {
var lookAt = ge.createLookAt('');
data_array = arr[4].split("|");
alert(data);
// Set the position values.
lookAt.setLatitude(parseFloat(arr[0]));
lookAt.setLongitude(parseFloat(arr[1]));
//lookAt.setLatitude(43.653226);
//lookAt.setLongitude(-79.3831843);
lookAt.setTilt(50.0);
lookAt.setRange(9000.0); //default is 0.0
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
}
else{
alert("Location does not exist. Please try again with an existing Location")
}
},
complete : function(){
modDom(data_array);
}
});
}
//doesn't refresh pag
return false;
});
});
Before, when the form was static, the ajax xhr call completed successfully, now it doesn't.
I have been reading about what the issue might be, and about how the form is not in the DOM, and to use .live, and I have tried, but it still does not work.
Could somebody please help me out?
Your problem is that in the first place your document loads then jquery code is loaded. Then you create a dynamically created form which jquery does not get to post. Instead remove $('document').ready() and put a function let suppose submit_form(). call this form on the click event of you form and your form will be submitted. Another approach is that when dynamically you are creating form element assign them all an class. Before submitting the form loop through with this class to get all values and append the with the serialize form to submit.
Your answer lies in the depths of the Live event handler for jquery.
http://docs.jquery.com/Events/live
I don't really remember all that well, but i think its got to do something with the click event handler not binding dynamic elements, but the Live event handler does it, so try using that.
UPDATE
Sorry, its seem that the Live() event handler has been deprecated in the latest jQuery.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
The alternative is to use the jquery On() event handler.
http://api.jquery.com/on/
EXAMPLE USAGE
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});