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.

Can we look at your shortcode.. the code you are displaying shows nothing?

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" onclick="loadXMLDoc()" value="click me">

<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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.