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.

Code:

<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

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.

HTML Code:

<!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:

Code:

$('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

Code:

<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

Code:

<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