javascript in jquery not working until refresh [duplicate] - ajax

This question already has answers here:
JavaScript in jQuery mobile not working unless I refresh
(4 answers)
Closed 9 years ago.
I'm having a jquery mobile page with JavaScript inside. the problem is the JavaScript doesn't work unless the page is refreshed. here is my code:
<script language="javascript" type="text/javascript">
var url = window.location.search.substring(1);
jQuery(function($){
$('#mydiv').load('real_news.asp?'+url);
});
</script>

Put the URL inside jQuery:
jQuery(function($){
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?'+url);
});

Related

jQuery & Ajax: ReferenceError: ajax is not defined [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I get a
ReferenceError: ajax is not defined
error in browser console when I try to make an ajax call.
I'm pretty sure I properly loaded the jQuery library, therefore I don't understand how can the $.ajax function not be defined.
Here is the HTML (without irrelevent css and markup):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<a class="getUsersA">Get users</a>
<div id="gridD"></div>
</div>
</body>
</html>
Here is the script.js file:
$(document).ready(function() {
$(".getUsersA").click(function() {
$.ajax({
url:ajax/getUsers.php,
type:POST,
data:({
id:0
}),
success:function(results) {
$("#gridD").html(results);
}
});
});
});
Thank you for any help!
You need to wrap ajax/getUsers.php, in quotes. or else it would look for a local variable ajax rather than treating it as a string.
url: "ajax/getUsers.php",
Something like this:
$.ajax({
url: 'ajax/getUsers.php',
type: 'POST',
data:({
id: 0
}),
success:function(results) {
$("#gridD").html(results);
}
});
You have a syntax error on this line:
url:ajax/getUsers.php,
Change this to:
url:"ajax/getUsers.php",
You're supposed to be passing a string (or a variable containing a string) as the url option, but you're instead doing:
url:ajax/getUsers.php,
Change it to:
url:'ajax/getUsers.php',
What you have right now is looking for the variable ajax (which doesn't exist) then trying to divide it by the php property of the object referenced by getUsers (which also doesn't exist), and then set the result as the value for the url option.

Jquery In rails won't load for masonry

How can i load the jquery with rails. I have try in the following
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item'
});
});
});
</script>
But i am getting an error. This is included in my html code. Not in the header. Now I come to realize when clicking on it i get the error route not set up. How can i load it the proper way.
See application.js.
By default, jquery is part of rails starting from rails 3. You dont need to include it separately.

Getting Google Plus button to show after inserting markup with ajax

I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});

Page Jumps After Ajax content is loaded

I am trying load content via ajax when an <a> is clicked. The code I am using:
<script type="text/javascript">
jQuery(document).ready(function(){
// ajax pagination
jQuery('.znn_paginate a').live('click', function(){
var link = jQuery(this).attr('href');
jQuery('.lay1').html('<div class="zn_ajaxwrap"><div class="zn_ajax"></div></div>');
jQuery('.lay1').fadeOut("slow").load(link+' .post').fadeIn('slow');
});
}); // end ready function
</script>
The problem is When the content is loaded the page jumps to the top. I treid to prevent it with: e.preventDefault(); But then the the ajax loading stopped. I guess it stopped prevented the ajax loading too..
Is there any fix for this?
Thanks
P.S: I am using it on wordpress. Here is the tutorial I followed: http://seonix.org/wordpress-seo/easy-ajax-pagination/
EDIT
There was something wrong with the code. I am now using this without any problem: http://pastebin.com/vbXqmTHq
two things:
your function() should return false.
also the link itself should have href="javascript:void(0);

Using Jquery in Controller Page-ASP.NET MVC-3

Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});

Resources