jquery mobile by default handles all clicks on links and form submits via ajax call. How can i achieve the same with Zepto libary?
Thanks!
haven't tested it yet but it should work like this
$(function() {
$("a").click(function(){
var link = $(this).attr("href")
$.get(link, function(response){
$("#myContainer").append(response)
})
return false
})
})
Related
I have an AJAX chat. AJAX reloads session every 750ms so it deselect text which I selected in chat. How can I solve it?
My code:
document.getElementById('content-frame').onload = msg_loading();
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#content-frame').load('<? echo('init/conversation.php?uid='.$id.'&cid='.$u['id']); ?>');
}, 750);
});
Personally I would be reloading the data via ajax on the page that contains the chat. Like so:
Right now you have your chat box reloading from the "Main page" which I think is the problematic part. I would use ajax to call a REST API instead. This will solve your problem with the page reloading and deselecting the text because the page is not reloading, the data is being updated via ajax.
setInterval(function(){
$.ajax({
url: '/conversation-rest-api.php?uid=' + uid
})
.done(function(data){
// Use templating tool to generate html from `data`
// var content = getContentFromData(data);
$('#content-output').html(content);
});
}, 750);
I am developing hybrid mobile app using Framework7. I have a registration form which needs to be submitted using ajax on click of submit button. I am using below given code for the same. But it's not working.
$$(document).on('pageInit', function() {
$$('#myFrom').on('submit',function(){
....
alert('hello world');
});
});
Try submitting your form on the click of the button instead of the submit of the form
Assuming your button has the ID btnSubmit
$$(document).on('pageInit', function() {
$$("#btnSubmit").on('click', function(){
//run Ajax script here
});
});
$$(document).on('click','#btnSubmit',function(){
alert('hello world');
});
Try above. In Framework7 $$('.class/ID') will not work.
When I load a Partial View with some unobtrusive AJAX I also need the URL to change accordingly.
It would be okay if I had to do the work in the jQuery's done() callback.
But it's not possible right, wihtout loading something new. So the only choise I have is to load a View?
$.ajax({
//some jquery ajax call properties
success: function(){
location.hash = 'your_unique_value';
}
})
or use history api window.history.pushState('page2', 'Title', '/page2.php');
Docs
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.
I am trying to use AJAX polling with jQuery to update a span element on a razor MasterPage in ASP.NET MVC3. The page uses the jQuery Mobile 1.0 framework that adorns simple view changes (like navigating from /home to /about) with some sort of "transition" animation.
This is the Javascript code that does the polling, while the "unreadBubble" span is located in the body - both are defined in the MasterPage!
<script type="text/javascript">
$(document).bind("pageinit", function poll() {
setTimeout(function () {
$.ajax({ url: "/Notification/GetUnreadNotificationsCount",
dataType: "json",
success: function (data) {
$('#unreadBubble').text(data.UnreadCount);
poll();
}
});
}, 1000);
});
So, imagine I have a HomeController and a NotificationController that both use the MasterPage and provide an Index view. The AJAX polling works on both views and updates the span every second as expected. As soon as I navigate from one view to another though, the span gets re-initialized with its default value from the MasterPage (empty) and doesn't update anymore. Interestingly the async GetUnreadNotificationsCount method is still called on the NotificationsController repeatedly - the span just doesn't update. I also tried to alert the span tag in JS and it wasn't null or something.
According to the documentation, jQuery Mobile also loads new pages with AJAX to insert this fancy "SWOOSH" transition animation. This seems to somehow disturb the JS/DOM initialization.
Do you have any idea how to resolve this? Should I bind to another event or can I somehow force the span tag to update?
Solution: It was a caching problem! The following did the trick:
Add class="command-no-cache" to your page div add the following JavaScript to the MasterPage:
$(":jqmData(role=page)").live('pagehide', function (event, ui) {
if ($(this).children("div[data-role*='content']").is(".command-no-cache"))
$(this).remove();
});
I would use the pagebeforeshow to actually bind the event, and pagehide to remove the event.
Did you try that instead of initializing only once in the pageinit event?
UPDATE: some code for example,
<script type="text/javascript">
var timer = null;
$(":jqmData(role=page)").bind("pagebeforeshow", function() {
timer = setTimeout(function() {
$.ajax({ url: "/Notification/GetUnreadNotificationsCount",
dataType: "json",
success: function (data) {
$('#unreadBubble').text(data.UnreadCount);
}
});
}, 1000);
});
$(":jqmData(role=page)").bind("pagehide", function() {
if (timer != null){
clearTimeout(timer);
timer = null;
}
});
</script>
Also corrected some other ""mistypes" along the way, have a look and compare to your code!
Hope this helps