I'm using jQuery UI plugin for drag'n drop my object, But I have a problem.
My html Source is like this:
<html>
<body>
<div id="firstDiv">some thing is here</div>
</body>
</html>
Now, I want to draggable the above div, using helper. My code is this:
<script type="text/javascript">
$(document).ready(function(){
$("#firsstDiv").draggable({helper:anImage});
});
function anImage() {
return '<img src="~/myImage.png" alt="" />';
}
</script>
Ok, this code is work as well, but I want to set image address, But when i change my function to have a parameter, that doesnt work, O_o
My new code is this:
<script type="text/javascript">
$(document).ready(function(){
$("#firsstDiv").draggable({helper:anImage($(this).text())});
});
function anImage(address) {
return '<img src="'+address+'" alt="" />';
}
</script>
but not working.
Thanks for your helps.
OK - you can't pass a parameter into your helper function. I'm pretty sure that's the problem.
The way around this would be to create a setup function and then call your anImage function from there:
$(function(){
$("#firsstDiv").draggable({
helper: setup
});
});
// function to setup draggable DOM elements
function setup() {
anImage("~/myImage.png");
// ... do other setup things here too
}
function anImage(imageAddress) {
return '<img src="'+imageAddress+'" alt="" />';
}
Unless of course you are trying to call anImage with a different image address for each draggable element, in which case the above will not work. But you shouldn't be using the helper function to do this anyway as I'm pretty sure it's just meant to contain code to setup all of the draggable elements you are creating.
Hope this helps,
James
Related
I am using a loading div in my MVC application. so i am getting json result value and showing a kendo grid. Because of more data it is taking time so for that purpose i used this but unfortunately it's not working.
Below is my code
This is my script used in the view
<script type="text/javascript">
$(document).ready(function () {
var action = "#Url.Content("~/Dashboard/ChartInitialDataBinding/")";
$('#spinner').show()
$.getJSON(action, null, function(something)
{
$('#spinner').hide()
});
});
</script>
This is my loading div
<div id="spinner" style="display:none">
Loading...
</div>
Thanks
You should know from documentation, that getJSON() is just wrap above ajax jquery function.
So don't you want to put your spinner not only in this function, but with all ajax requests? I think it's better, becouse you can define this in onle place and don't thik anymoreabout this problem.
In your Layout View just add this script, after your jquery library loaded:
$(document).ready(function () {
$.ajaxSetup({
beforeSend: function () {
$('#spinner').show()
},
complete: function () {
$('#spinner').hide()
},
error: function () {
$('#spinner').hide()
}
});
});
You can read more about $.ajaxSetup here.
Here is a list of things to check/fix:
-add semicolons after $('#spinner').show() and $('#spinner').hide()
-make sure you have included jQuery
-check if spinner is in view when removing "display:none"
I am using Boostrap in MVC application.
I am trying to add the data to display in popover run time.
but its not working...
I have this code...
<html>
<body>
hover for popover
</body>
</html>
<script>
$(function () {
$("#example").popover("Adding data run time here...");
});
</script>
Use the .attr() function:
$("#example").attr("data-content", "Adding data run time here...");
I found the answer...
<html>
<body>
hover for popover
</body>
</html>
<script>
$(function () {
$("#example").attr("data-content", getData()).popover();
});
function getData()
{
return "Here is the runtime data";
}
</script>
hover for popover
$("#example").popover({
placement: 'top',
content: 'Add data here',
});
I'm writing a simple mobile web site using JQuery Mobile.
I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function and call the function from within the section in the . Here is the code:
function initPage() {
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
}
Here is my HTML fragment calling the code:
<html>
<head>
...
<script type="text/javascript">
initPage();
</script>
...
My code works fine, but I have a doubt, so here comes my question: should I wrap my code with $(document).on('pageinit')? Like this:
function initPage() {
$(document).on('pageinit', function(){
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
});
}
I am not sure whether do I need to do that for stuff that register an event, like vclick on specific elements.
Thanks for support.
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
been searching without finding a solution for me,
I need to be able to send and recive current tab URL when the Chrome extension is shown:
this is My popup.html:
<html>
<head>
<style>
div, td, th { color: black; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
return tab.url;
});
}
</script>
<script src="http://keepyourlinks.com/API/public/chrome.js"></script>
</head>
<body style="width: 650px;height:600px;margin:0px;paddin:0px;width:100%;">
<span class="keeper">keep</span>
</body>
</html>
An then, in my webiste, on a chrome.js file i try:
$("body").ready(function(){
var url = getURL_please();
$(".keeper").click(function(event) {
event.preventDefault();
window.open("http://keepyourlinks.com/API/public/compartir_link.php?url="+url,'about to keep', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=650,height=600');
});
});
But URL is allways: Undefined
Any idea what i'm doing wrong?
Thanks a lot!
HI Toni,
Google Chrome Extensions use an Asynchronous API,
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
return tab.url;
});
}
The above will always return null. If you want to make it work correctly.
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
var url = tab.url;
// Do what you want here.
});
}
You would need to the windows open after you you fetch the url. One question though, what do you mean "in your website"? You cannot run Chrome Extension JavaScript directly on your website, so I assume via "Content Script" (most likely, just making sure)?
If your using a Content Script, why would you need to use the Extension API? You can just use window.location.href