Ajax: link in ajax response is not working - javascript

I have tried all possible solutions suggested, but it is still not working for me.
I am using ajax call to a php page, say livesearch.php, from index page to get live search result.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$("#livesearch").on("click", "a.alert", function() {
alert("here");
});
</script>
<script>
function showResult(str) {
if (str.length == 0) {
$("#livesearch").empty();
$("#livesearch").css('display', 'none');
return;
}
$.ajax({
type: "GET",
url: "livesearch.php?q=" + str,
success: function(responseText) {
$("#livesearch").html(responseText);
$("#livesearch").css('display', 'block');
$("#livesearch").css('background', '#fff');
}
});
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" placeholder="search here">
<div id="livesearch" style="height:500px;width:900px;overflow-y:scroll;display:none;z-index:99999;"></div>
</form>
<div id="gentext" style="position:fixed;top:40px;z-index:-1;">This is just a dummy text to check if result div overshadow this line or not.</div>
</body>
</html>
It works fine and list possible search.
Now from search results, a user can click on a page to browse it - simple. As soon as one click's on the link, I want to catch that and do some processing. See below section in above code:
$("#livesearch").on("click", "a.alert", function() {
alert("here");
});
To begin with, I am testing, if I am able to capture click on this link returned from ajax search or not - so alert("here"), but it is not working.
Please hep

Define the click method after appending the links:
success: function(responseText)
{
$("#livesearch").html(responseText);
$("#livesearch").css('display', 'block');
$("#livesearch").css('background', '#fff');
$("#livesearch").on("click", "a.alert", function()
{
alert("here");
});
}

Try this, and let us know what the console returns:
$.ajax({
type: "GET",
url: "livesearch.php?q=" + str,
success: function(responseText) {
console.log(responseText); //CHECK YOUR CONSOLE
$("#livesearch").append(responseText);
$("#livesearch").css('display', 'block');
$("#livesearch").css('background', '#fff');
$("#livesearch").find(".alert").click(function(e) {
e.preventDefault();
alert("here");
});
}
});
Another way to accomplish this is to build your anchor tag like this , then create the JS function:
myFunction(){
alert("here")
return false;
}

Related

Add javascript function to wordpress page

I have a page that locates a link inside it and when that link is clicked it should save some data in database.
Besides, I have a file named "add.php" that communicates with the DB and operates well.
In my wordpress page I have added below codes for accessing the add.php file and send some parameters to it.
<a href="javascript:add(true);" >Click Me</a>
<script type="text/javascript">
function add(b){
$(document).ready(function(){
var result = $.ajax({
type: "POST",
url: "add.php",
data: { add: b }
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert( "No such data exists: " + textStatus );
});
});
}
</script>
I had this exact code in an html file and it worked smoothly. but it doesn't work on wordpress page like that.
Plus, the problem is that when I click the link -Click Me- it doesn't do anything.
please tell me where the problem is and how to solve it ?
I would recommend you to use this:
<a href="#" data-add="true" class='hitClick'>Click Me</a>
<!--use data* attributes to pass specific data -->
now in your function:
function add() {
event.preventDefault(); //<------make sure to add it.
var result = jQuery.ajax({
type: "POST",
url: "add.php",
data: {
add: jQuery(this).data('add')
}
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert("No such data exists: " + textStatus);
});
}
jQuery(document).ready(function(){
jQuery('.hitClick').on('click', add); // bind the click and use as callback
});

Images does not show immediately after ajax load

I'm using an Ajax for partial loading my website. Content of GET data has images but these images appear after few seconds on page. Image size is about 20kB, so this is not a bottleneck.
I'm using php page which returns some content. This page loads in a while with images immediately but with ajax it loads text, but images after few seconds. How can I achieve quick load?
I'm using this function:
function loadMainEvents(resultDiv, cat, limit){
var spinner = new Spinner().spin(mainPageEvents);
$.ajax({
url: "/getMainPageEvents.php?category=" + cat + "&limit=" + limit,
type: "GET",
success: function(data){
resultDiv.innerHTML = data;
spinner.stop();
}
});
};
EDIT:
I created a test.php which is doing same thing
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type="text/javascript"></script>
</head>
<body>
<div id="div" style="float:left;">wait</div>
<div id="div2">wait</div>
<script>
$(function () {
$.ajax({
url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
type: "GET",
success: function (data) {
$("#div").html(data).on('load', function () {
$(this).fadeIn(250);
});
}
});
$.ajax({
url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
type: "GET",
success: function (data) {
$("#div2").html(data).on('load', function () {
$(this).fadeIn(250);
});
}
});
});
</script>
</body>
getMainPageEvents.php returns only web content.
Network from developer tools:
You may want to try something like this in the success function. Hide the result div first and foremost, then after the data is loaded, show the div.
$(resultDiv).html(data).promise().done(function(){
spinner.stop();
$(this).fadeIn(250);
});
Possible second solution
$(resultDiv).html(data).on('load', function(){
spinner.stop();
$(this).fadeIn(250);
});

PHP and Ajax posting

I'm using jQuery form plugin to send ajax requests. Which you can find on below url
http://malsup.com/jquery/form/
This is my jQuery code
$(document).ready(function()
{
$('#SubmitForm').on('submit', function(e)
{
e.preventDefault();
$('#submitButton').attr('disabled', '');
$(this).ajaxSubmit({
target: '#output',
success: afterSuccess //call function after success
});
});
});
function afterSuccess()
{
$('#submitButton').removeAttr('disabled'); //enable submit button
}
This code is displaying out put on the div id output and each time i submitted code will remove the old out put and display the new one. What i want to do is, keep the old out and display the new out put on top of the old output. Can someone tell me how to do this.
What you could do, is alter your afterSuccess method a little bit. What I did was:
function afterSuccess(text)
{
$('#output').prepend(text)
$('#submitButton').prop('disabled', false);
}
The whole fiddle is available here
The whole code of javascript:
function afterSuccess(text)
{
$('#output').prepend(text)
$('#submitButton').prop('disabled', false);
}
$(document).ready(function()
{
$('#submitButton').click(function(e)
{
$('#submitButton').prop('disabled', true);
$('#SubmitForm').ajaxSubmit({
data: {
html: "<p>Text echoed back to request</p>",
delay: 1
},
success: afterSuccess,
url: '/echo/html/'
});
});
});
and of course assuming following html structure
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<body>
<form id="SubmitForm" method="POST">
<input type="button" id="submitButton" value="submit"/>
</form>
<div id="output">
test
</div>
</body>

live(), delegate(), and on() stop working after few ajax requests using jQuery

I have html elements with class "ajaxem" that are ment to be used in my jquery below. I also have the same for any form elements. For the first few ajax requests the jquery is attached and triggered and work properly. However, after a user logs in or registers, the returned links (which also have class="ajaxem") are not caught by jquery and not triggered.
I have tried all three implementations. and also tried to reapply them AFTER each ajax request. but none have worked.
<script type="text/javascript">
function updateajaxem() {
$(document).on("click", "a.ajaxem", function (e) {
e.preventDefault();
var action = $(this).attr('href');
//alert(action);
if (action.indexOf('register') > 0) {
$("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn();
} else if (action.indexOf('password') > 0) {
$("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn();
}
}); //end
}
</script>
<script type="text/javascript">
updateajaxem();
//$("a.ajaxem").live("click", function(e){
$(document).on("click", "input:submit", function (e) {
e.preventDefault();
var formaction = $(this).closest('form').attr('action');
var dataString = $(this).closest('form').serialize();
alert(dataString);
//$("div#logininfo").load(formaction,data);
$.ajax({
type: "POST",
url: formaction,
data: dataString,
// dataType: "json",
success: function (data) {
alert(data);
$("div#logininfo").html(data);
updateajaxem();
} // end of success
});
});
</script>
the outputted html at which the scripts stop working is below:
<div id="container">
<h1>Welcome to CodeIgniter!</h1>
Logout Home
<div id="body">
<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>
<p>If you would like to edit this page you'll find it located at:</p>
<code>application/views/welcome_message.php</code>
<p>The corresponding controller for this page is found at:</p>
<code>application/controllers/welcome.php</code>
<p>If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.</p>
</div>
<p class="footer">Page rendered in <strong>1.0343</strong> seconds</p>
<div id="logininfo">You have successfully registered. Login</div>
</div>
which makes no sense since it includes the class "ajaxem" which should be caught by jquery but is not.
Since the returned link's href does not contain the words 'register' or 'password' neither of the following conditions are met:
if (action.indexOf('register') > 0) {
$("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn();
} else if (action.indexOf('password') > 0) {
$("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn();
}
so no ajax request happens.
You will probably need to account for the 'login' scenario, e.g.:
} else if (action.indexOf('login') > 0) {
$("div#logininfo").load("http://localhost/testrun/auth/login/").fadeIn();
}
...and why hard-code the URLs when they can be extracted from the clicked anchor?
if (action.indexOf('register') > 0) {
$("div#logininfo").load(this.href).fadeIn();
} else if (action.indexOf('password') > 0) {
$("div#logininfo").load(this.href).fadeIn();
} else if (action.indexOf('login') > 0) {
$("div#logininfo").load(this.href).fadeIn();
}

Help submitting a form to a JQuery script using a javascript submit() function

I attempted to ask this question last week without a resolution. I am still unable to get this to work. What I would like to do is submit data entered through a WYSIWYG javascript editor to a JQuery script I have that will first tell the user if they are trying to submit an empty textbox The last thing I need it to do is tell the user if their data was entered successfully or not.
I am having a problem inside the JQuery script as nothing is being executed when I click the save button.
This editor uses javascript submit() that is tied to a small save icon on the editor. When the user presses the button on the editor, it fires the function I have in the form tag. That's about as far as I was able to get.
I think there is an issue with the form tag attributes because when I click anywhere on the editor, the editor jumps down off the bottom of the screen. I believe it has something to do with the onclick event I have in the form tag.
The first part of the JQuery script is supposed to handle form validation for the textarea. If that's going to be really difficult to get working, I'd be willing to let it go and just handle everything server side but I just need to get the data POSTed to the JQuery script so that I can send it to my php script.
Thanks for the help guys.
<form name="rpt" class="rpt" id="rpt" action="" onclick="doSave(); return false;">
function doSave()
{
$(function()
{
$('.error').hide();
$(".rpt").click(function()
{
$('.error').hide();
var textArea = $('#report');
if (textArea.val() == "")
{
textArea.show();
textArea.focus();
return false;
}
else
{
return true;
}
var dataString = '&report='+ report;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "body.php?action=customer",
data: dataString,
dataType: 'json',
success: function(data){
$('#cust input[type=text]').val('');
var div = $('<div>').attr('id', 'message').html(data.message);
if(data.success == 0) {
$('#cust input[type=text]').val('');
$(div).addClass('ajax-error');
} else {
$('#cust input[type=text]').val('');
$(div).addClass('ajax-success');
}
$('body').append(div);
}
});
return false;
});
});
}
There are a few things you need to change. Firstly this:
<form name="rpt" class="rpt" id="rpt" action="" onclick="doSave(); return false;">
isn't the jQuery way. Plus its not the click() event you want. Do this:
<form name="rpt" class="rpt" id="rpt" action="">
<script type="text/javascript">
$(function() {
$("#rpt").submit(do_save);
});
</script>
The construction:
$(function() {
..
});
means "when the document is ready, execute this code". It is shorthand for and exactly equivalent to the slightly longer:
$(document).ready(function() {
..
});
This code:
$("#rpt").submit(doSave);
means "find the element with id 'rpt' and attach an event handler to it such that when the 'submit' event is executed on it, call the do_save() function".
And change doSave() to:
function doSave() {
$('.error').hide();
$(".rpt").click(function() {
$('.error').hide();
var textArea = $('#report');
if (textArea.val() == "") {
textArea.show();
textArea.focus();
return false;
} else {
return true;
}
var dataString = '&report='+ report;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "body.php?action=customer",
data: dataString,
dataType: 'json',
success: function(data){
$('#cust input[type=text]').val('');
var div = $('<div>').attr('id', 'message').html(data.message);
if (data.success == 0) {
$('#cust input[type=text]').val('');
$(div).addClass('ajax-error');
} else {
$('#cust input[type=text]').val('');
$(div).addClass('ajax-success');
}
$('body').append(div);
}
});
});
return false;
}
Note: return false is in the correct place now so it actually prevents the form submitting back to the server. action="" just means the form will submit back to its current location so you have to prevent that.
function X() {
$(function() {
//... things you want to do at startup
});
};
Doesn't do what you want. Nothing is ever executed, because you never tell it to be executed.
You might want to try something like:
<script type="text/javascript">
jQuery(function($) {
//... things you want to do at startup
});
</script>
Also, you want the onsubmit event of the form. You can use
$('#theform').submit(function() {
//... perform the ajax save
});
In addition, you may want to look into the Form plugin.

Categories