Javascript not working with Ajax

Question

1.00/5 (1 vote)

See more:

I am loading shortcodes using ajax in my webpage. I am able to load shortcodes ( which essentially consists of a slider wherein when we hover over a slider, a different image comes) but the "on-hover" functionality is not working on the new sliders loaded. When i move my mouse over the new slider, new image doesn't come up. I found out after some research that this is due to JavaScript not loading after ajax call. I read somewhere that I will have to re-listen to the on-mouse-hover events again after ajax call. Is there some way I can make on mouse hover work on new sliders?

This is my php code that returns new sliders:

PHP

require_once( 'wp-load.php' );  
echo do_shortcode('[column_third][virtual_slide_box id="842"][/column_third][column_third][virtual_slide_box id="843"][/column_third][column_third_last][virtual_slide_box id="844"][/column_third_last][column_third][virtual_slide_box id="845"][/column_third][column_third][virtual_slide_box id="846"][/column_third][column_third_last][virtual_slide_box id="847"][/column_third_last]');

I am using xmlhttprequest in order to create an ajax request and then creating a element to include the ajax response and appending it as a child in original html document.

Is there any why it can be done? Or is there any way I can run all the scripts loaded at time of initial page-load onto all the new elements loaded after ajax call? Please keep it simple, because I am new to this technology.

Posted 23-Oct-14 16:09pm

Member 11176062

Add a Solution

Comments

Sergey Alexandrovich Kryukov 23-Oct-14 23:41pm

JavasScript? Ajax? Where? I can see only PHP and some weird long string...
—SA

Member 11176062 27-Oct-14 0:21am

This is the javascript code i am using to load the sliders returned by above aj.php code one by one. As you can see, i have to manually load two "price_updater_clothings" script everytime i want to update prices on the sliders returned by ajax, otherwise previously defined scripts won't work on it.Kindly help.

<div id="myDiv"></div>
<input type="button" >

<script>
var i=1;
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
var scrpt = document.createElement('script');
scrpt.src='http://www.abc.com/price_updater_clothings.js';
document.head.appendChild(scrpt);
var scrpt1 = document.createElement('script');
scrpt1.src='http://www.abc.com/price_updater_clothings_2.js';
document.head.appendChild(scrpt1);
var y1=document.createElement("div");
var y2=xmlhttp.responseText;
y1.innerHTML=y2;
document.getElementById("myDiv").appendChild(y1);
}
}
xmlhttp.open("GET","http://www.abc.com/aj.php?id="+(i++),true);
xmlhttp.send();
}
</script>

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sinisa Hajnal · Answer 1 · 2014-10-23T20:42:00

Solution 1

You can use jQuery .on[^] function to make the javascript react to newly added/loaded elements.

If this helps, please take time to accept the solution. Thank you.

JavaScript

$(document).ready(function() {
    $( "your-slider-container" ).on( "hover", "your-slider-selector", function() {
        // your function body
    });
});

Ready is needed so that your container is loaded before function call. your-slider-container is common parent element to all your slides...like would be parent for all elements. your-slider-selector can be class, attribute, id or any other identifier which you could use CSS on...most commonly class in this case.

Posted 23-Oct-14 20:42pm

Sinisa Hajnal

Updated 2-Nov-14 20:14pm

v4

Comments

Member 11176062 27-Oct-14 0:22am

But i am making use of wordpress shortcodes which makes use of many events by themselves which i am unaware of. Isn't there any way where i can just load all the page-loadtime-scripts automatically just after ajax call?

Sinisa Hajnal 28-Oct-14 6:20am

Using other events or even same events does not affect on function unless they set preventDefault / cancelBubble...you can still make the application via on function.

Member 11176062 31-Oct-14 10:39am

I am a newbie in javascript. Can you please describe in detail what all steps i need to follow?

Sinisa Hajnal 3-Nov-14 2:09am

In your page add <script> tag, in it write ready function that will call on...see updated solution for an example.

Member 14071009 28-Nov-18 23:32pm

I know this thread is old but last week I got the same issue with my ajax code & for that I search a lot then this thread help me to figure out the issue that "when we load a php script using ajax then document state is not ready or load state." we just need to set it to


$(document).change(function() {
    
    // your functions
    
});

thats all
Thanks (this thread is actually help me)