Log in

View Full Version : anchor link not working in jquery mobile and ajax


mutago
06-26-2014, 12:16 PM
i created an ajax form page in jquery mobile but when a click on a link that will take me to the ajax page, it does not link well. it seems that jquery mobile uses the "#" sign to name pages.

example, when a click on link
<a href="http://localhost/data/insert_ajax.html">form page</a>

i will end up having this links in my browser
http://localhost/data/#/data/insert_ajax.html

and as such, the page will not load.

i have used data-ajax="false" or rel="external" it works by reloading the page and that is not what i want.

I want the page to be linked normally and so i tried to eliminate "#" sign as in the code below but i cannot get it work.



<script>
$('body').on('click', '.homeSet', function(ev) {
// $.mobile.changePage('http://localhost/data/#/data/insert_ajax.html', {
$.mobile.changePage('http://localhost/data/insert_ajax.html', {
transition : "slide"
});
return false;

});

</script>


in the body of form i have this


<a href="#" class='homeSet'>ajax_form</a>


any help please.
Deadweight
06-26-2014, 02:55 PM
I could be wrong but add this to the beginning of your code


ev.preventDefault();
mutago
06-26-2014, 08:17 PM
i have added it but not working
Deadweight
06-28-2014, 12:23 AM
Not sure what you did but here is an example.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.preventDefault demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented" )
.appendTo( "#log" );
});
</script>

</body>
</html>
kred
06-28-2014, 05:22 PM
There is a discussion about such a problem on forum.jquery.com/topic/jquery-mobile-anchor-linking and it is claimed that the following code should do the trick:

$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
mutago
06-28-2014, 09:18 PM
i have tried implementing what you said but i cannot get it to work.
below is my ajax code so far

display.html


<script type="text/javascript">
$(document).ready(function() {


var id = getUrlVars()["id"];

$.ajax({ type: "POST",
url:'http://localhost/services/pass_count101.php',
data:"id="+id+"&message="+message,
success:function(data){
$('#result_count').html(data);
} })




});


</script>




insert.html



<script type="text/javascript">



$(document).ready(function() {


$("#msg").hide();
$("#btn").click(function(){



$("#response").slideUp("slow");
//alert("hi");
var jsonData = {};
var formData = $("#myform").serializeArray();
$.each(formData, function() {
if (jsonData[this.name]) {
if (!jsonData[this.name].push) {
jsonData[this.name] = [jsonData[this.name]];
}
jsonData[this.name].push(this.value || '');
} else {
jsonData[this.name] = this.value || '';
}


});



console.log(jsonData);
$.ajax(
{
url : "http://localhost/services/insert.php",
type: "POST",
data : jsonData,
success:function(data, textStatus, jqXHR)
{
$("#response").text("");
$("#response").append(data);
$("#response").slideDown("slow");
}
});
$("#msg").show("slow");
});
});



</script>




helps will be appreciated. thanks