I am trying to do something with out a page refresh (but I think the way I am going about it, will require a page refresh. The ultimate goal is to not have one.
I have two things wrong, one is basic html, the other is not understanding Ajax.
HTML Issue
When I click the link beside this element:
<label class="checkbox">
<input type="checkbox" name="aisis_options[package_Aisis-Related-Posts-Package-master]"
value="package_Aisis-Related-Posts-Package-master" checked="">
Aisis-Related-Posts-Package-master <a href="#">(Disable)</a>
</label>
It then executes this piece of JS:
(function($){
$(document).ready(function(){
$('a').click(function(){
var el = $(this).prev('input[type="checkbox"]');
if(el.is(':checked')){
el.prop('checked',false);
}
});
});
})(jQuery);
Unchecks it, BUT the page refreshes and scrolls to the top. I am assuming there is a js way to stop this or maybe its my stupidity of having "#" in the <a href=""> part?
Ajax issue
I don't understand ajax at all, aside from passing information from the client to the server, so I added the following to the above JS:
(function($){
$(document).ready(function(){
$('a').click(function(){
var el = $(this).prev('input[type="checkbox"]');
if(el.is(':checked')){
el.prop('checked',false);
}
$.ajax({
url : <?php CORETHEME_ADMIN_TEMPLATE_HELPER . 'UncheckPackageThemeHelper.php';?>,
type : 'GET',
data : { 'element_name' : el.prop('name') }
});
});
});
})(jQuery);
Then wrote the following class:
class CoreTheme_AdminPanel_Template_Helper_UncheckPackageThemeHelper{
private $_element_name = null;
public function __construct(){
if(isset($_GET['element_name'])){
$this->_element_name = $_GET['element_name'];
echo $this->_element_name;
}
}
}
Essentially I would like to see the element_name echoes when I click the disable link next to the checkbox of the checked object - WITH OUT A PAGE REFRESH if possible.
My issue is, I am not understanding if anything I have done is right, aside from the java script to uncheck the element which I got from the answer to this question.
please help, The idea is: click the disable, disable the checkbox, echo the element name by passing it to PHP - with out a page refresh if possible.
Update
This class is never instantiated. ever. any where. The idea is to do this all with a click, I want to click disable, have it pass the element name to the class and then that class echo the variable all with out a page refresh...
HTML Issue: As Arun said use e.preventDefault() to prevent default click action.
AJAX Issue: What i noticed is that you haven't echoed your url. Change
<?php CORETHEME_ADMIN_TEMPLATE_HELPER . 'UncheckPackageThemeHelper.php';?>
to
<?php echo CORETHEME_ADMIN_TEMPLATE_HELPER . 'UncheckPackageThemeHelper.php';?>
HTML issue. I think the problem is you have not prevented the default action of a
(function($){
$(document).ready(function(){
$('a').click(function(e){
var el = $(this).prev('input[type="checkbox"]');
if(el.is(':checked')){
el.prop('checked',false);
}
e.preventDefault();//prevent the default action
});
});
})(jQuery);
While you can certainly use Arun's answer, you can just remove the href attribute and it will not go to the top of the page and/or refresh.