I'm trying to use pushstate. But it doesn't work.
Actually, my "loadContent()" function doesn't work. It doesn't make any difference. I'll show u my codes.
Javascript:
$(function() {
$('a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent();
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent();
};
});
function loadContent(){
// USES JQUERY TO LOAD THE CONTENT
$.ajax({
url: "tema/project/content.php",
success: function(e){
$(".main-div").empty();
$(".main-div").append(e);
}
});
}
Content.php:
echo "this is my example to show me it does work.";
and there's some simple html codes that doesn't necessary.
OK i don't understand that, while the turn is on loadContent, there's nothing happen. It doesn't empty the 'main-div' it doesn't put any content it and there ne issue in chrome.
But why? why doesn't it work?
Any help?
Related
i face a problem of jquery click function when i scroll down in list.
in list, data is loaded by ajax request and when i scroll down then click function (trigger) is not working.
when i not scroll down, ajax data is not loaded then click function is working.
i'm confuse why this happened. i used following triggers below but not success.
on()
click()
bind()
load()
delegate()
i'm sending you code. this is code below. Please help me to sort out.
$(window).ready(function(){
$(".like").on("click", function(){
var id = $(this).attr('data');
// alert(id);
$.ajax({
url: "/stores/addLike",
type: 'GET',
data: {
id: id
},
error: function (data) {
console.log(data);
},
success: function (data) {
console.log(data);
if(data == "liked"){
alert('Sorry, you have already liked this beat.');
}else if(data == "notlogin"){
alert('Please login first to like a beat.');
window.location = "https://demo.amplifihub.com/login";
}else{
$(".likes"+id).text(data);
}
}
});
});
});
instead of $(".like").on("click", function(){ }); use $(document).on("click", ".like", function(){}); or use any static parent dom element to preserve the DOM event. I believe you are generating .like class element on scroll ajax call.
I already asked some questions about ajax, but I still don't get it.
I took a script that I found on the internet and made some modifications, but it didn't work!
HTML:
<a data-toggle="team" id="times">TEAM</a>
ORIGINAL SCRIPT:
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
</script>
MODIFIED SCRIPT:
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('#times').click(function(e) {
$("#loading").show();
var href = $(this).attr("data-toggle");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
$.ajax({
url: 'ajaxcontdent/ajax'+url,
type: 'GET',
error: function(){
// always good to have an error handler with AJAX
},
success: function(data){
$('#content').html(data);
}
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
};
</script>
What is wrong with my script? Nothing happens. I click in my <a> link and nothing. I already tried to put the file location on a hrefattribute, but then e.preventDefault(); doesn't work and my website runs like there is no AJAX.
In the original code, the author use some content.php file. But I don't know JSON, so I have no idea what did he put in that file.
There are no errors in the console.
My ajaxcontent/ajaxteam.php file content:
<p style="color:#fafafa;">Team</p>
It's just one line indeed. Just a test.
I think that may be a cause syntax error, I have regenerate one of your function so please use below code.
function loadContent(url){
$.ajax({
url: 'ajaxcontdent/ajax'+url,
type: 'GET',
error: function(){
// always good to have an error handler with AJAX
},
success: function(data){
$('#content').html(data);
}
});
};
Then use your operation, whatever you want, in your success block of above function.
I hope thin will help you.
Thansk
In your code if I am not wrong
url: 'ajaxcontdent/ajax'+url,
this is the main culprit.
Try this one:
url: 'ajaxcontent/ajax'+url,
I'm using PHP,Smarty, jQuery, Colorbox jQuery plugin, etc. for my website. All the necessary files required have been included in index.tpl file, so I've not mentioned those files here. They are getting included and working fine.
From one smarty template file I'm calling the Colorbox popup. The code for it is as follows:
edit
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".inline_edit_transaction_details").colorbox({href:$(this).attr('href'),width:999, height:999});
});
</script>
{/literal}
The lightbox is also getting displayed properly. For your reference I'm attaching the screenshot here.
Now I want to call a jQuery AJAX function upon clicking on Update link as shown in the attached image. For testing purpose I put an alert message at the beginning of AJAX function but not able to call it. For your reference I'm putting the code from smarty template below.
The code from the Colorbox popup(Smarty template) is as follows:
<td><a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a></td>
The jQuery AJAX function is as below:
$(document).ready(function() {
//This function is use for edit transaction status
$(".edit_user_transaction_status").click(function() { alert("Hello");
$(".edit_user_transaction_status").bind('click', function(){
$.colorbox.close();
});
e.preventDefault();
//for confirmation that status change
var ans=confirm("Are you sure to change status?");
if(!ans) {
return false;
}
var post_url = $(this).attr('href');
var transaction_status_update = $('#transaction_status_update').val();
$.ajax({
type: "POST",
url: post_url+"&transaction_status_update="+transaction_status_update,
data:$('#transaction_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.login_error;
$(".ui-widget-content").dialog("close");
//This variables use for display title and success massage of transaction update
var dialog_title = data.title;
var dialog_message = data.success_massage;
//This get link where want to rerdirect
var redirect_link = data.href;
var $dialog = $("<div class='ui-state-success'></div>")
.html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 500,
height: 80,
close: function(){
document.location.href =redirect_link;
}
});
$dialog.dialog('open');
}
});
});
});
I tried a lot to make a call to this function but couldn't give a call. It's also not giving any errors when I checked in console of firebug. So I think no syntactic errors are there. Can anyone help me in calling this function? Thanks in advance.
$(".edit_user_transaction_status").click(function(e) {
e.preventDefault(); // apply in click event not outside
alert("Hello");
});
or
$(".edit_user_transaction_status").bind('click', function(e){
e.preventDefault(); // apply in click event not outside
$.colorbox.close();
});
reference e.preventDefault
Something in my script is breaking IE.
I'm looking on a collection of links with a class, and hijacking the URL's.
Clicking a link will animate the height and reveal a message. It also
does an ajax request to mark the message as read.
However, in IE it simply goes to the URL instead of staying on the page and processing the http request.
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
return false;
});
function toggle_message(m) {
var link = m.target;
var parent = $(link).parent().parent();
console.log(link.href);
$.ajaxSetup({
url: link.href,
dataType: 'json',
timeout: 63000,
type: 'GET',
cache: false
});
if($(parent).hasClass('unread')) {
$(parent).addClass('read').removeClass('unread');
$.ajax({
complete: function(r, textStatus) {
console.log(r.responseText)
}
});
}
if($(parent).find('.body_wrapper').hasClass('collapsed')) {
$(parent).find('.body_wrapper').addClass('expanded').removeClass('collapsed');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
} else {
$(parent).find('.body_wrapper').addClass('collapsed').removeClass('expanded');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
}
}
any ideas what's causing this issue?
http://support.cooper.krd-design.net/
tester: 12345 if you want to review the page
Thanks
Rich
Adding
e.preventDefault();
before toggle_message in the first function should work, although return false should as well.
I don't have access to IE right now but I think you could try preventing the default click event to fire in your click()-function like so:
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
e.preventDefault();
});
More on .preventDefault() here: http://api.jquery.com/event.preventDefault/
Why does the return false stop the alert() from working and how do I get around this? If I remove it, the alert will show up, and then it will load the page that the <a> tag pointed to.
<script type="text/javascript">
$("document").ready(function(){
$("a").click(function(){
if(!$(this).is('static')){
var href = $(this).attr('href');
$.getJSON(href, function(data) {
alert('hi');
});
}
return false;
});
});
</script>
My guess is that badly formed JSON is being sent to the client, which will prevent the callback from firing. The manual says:
If there is a syntax error in the JSON
file, the request will usually fail
silently. Avoid frequent hand-editing
of JSON data for this reason.
Can you show us a snapshot of the JSON that the server is generating?
Answer Update!
I have tested this thoroughly using the $.ajax functions, which is what actually gets called by $.getJSON.
$("document").ready(function(){
$("a").click(function(event){
if(!$(this).is('static')){
var href = $(this).attr('href');
$.ajax({
url: href,
dataType: 'text',
success: function(data) {
alert("hi");
}
});
}
return false;
});
});
With a correctly formatted JSON object, this works as expected. Here is the contents of my json.html test file:
{ "firstName" : "John",
"lastName" : "Doe",
"age" : 23 }
However, if the file contains HTML, or a badly formatted JSON object, the alert never gets called - in fact, by adding an error handler to the above example, you'll spot that it errors:
$("document").ready(function(){
$("a").click(function(event){
if(!$(this).is('static')){
var href = $(this).attr('href');
$.ajax({
url: href,
dataType: 'text',
success: function(data) {
alert("hi");
},
error: function() {
alert("NO!!!!");
}
});
}
return false;
});
});
As you are replacing hyperlinks in your code with this request, I'm guessing that you maybe want to use a $.get, rather than a $.getJSON. So to return to your original example:
<script type="text/javascript">
$("document").ready(function(){
$("a").click(function(){
if(!$(this).is('static')){
var href = $(this).attr('href');
$.get(href, function(data) {
alert('hi');
});
}
return false;
});
});
</script>
This seems to work in Firefox 3 and in Chrome, with both get and getJSON.
IE8 is another story (I presume the same goes for IE7). There, only get works; getJSON fails. Is the JSON being returned by the server not IE-friendly?