I've HTML tag like this:
<div id="user-detail"></div>
That's for jQuery.dialog container. And the dialog script...
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
When I call a function to show it, I adding .attr() to give the tag new attribute title.
function user_detail(id){
var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html(output)
.dialog('open');
}
and blah.... the .attr() not work. What is the problem??
You can hack it like that:
$("span.ui-dialog-title").text('User Detail');
If User Detail string is common for all,Do not mess up.
use
<div id="user-detail" title="User Details"></div>
Your script is working fine here http://jsfiddle.net/yeyene/GnpQ8/3/
Make sure your variable output has data.
$(document).ready(function(){
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html('HI, I am a dialog.')
.dialog('open');
});
Related
I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.
Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
I am trying the tagsinput plugin to work in a textarea which is inside a div that is loaded by the jquery dialog plugin call.
Plugin used is the /xoxco/jQuery-Tags-Input.
I did an initial check if the textarea element is ready. It is while before being called.
The textarea doesn't get displayed as tags by the tagsinput plugin. However when I try the same from firebug in the browser:
$('#textarea').importTags('guava','cherry'); // this works
Code below:
jsp file:
<div id="mydialog">
<textarea name="tags" id="textareaId">
</div>
javascript file:
$(document).ready(function(){
$("#mydialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"YES": function() {
$(this).dialog("close");
}
}
});
$('#textarea').tagsInput({
'autocomplete_url': '',
'autocomplete': {
source: ['apple','banana'],
autofill:true
},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
});
$('#textarea').importTags('guava','cherry');
});
Any help why?
$('#textarea') was not yet ready in the document before the tagsinput was called. I delayed my invocation for tagsinput and it worked Ok.
I have a dialogbox that shows the contents of an HTML file.
In this file there is a href link at the bottom.
Now everytime the dialog is shown, it automatically scrolls to that link and sets focus to it.
How can I set the scroll position back to the top after the dialog shows?
Here is the jquery code:
<script type="text/javascript">
$(function()
{
$('#faq1_pnM').dialog(
{
title: 'Frequently asked questions',
autoOpen: false,
modal: true,
show: 'puff',
hide: 'puff',
open: function() {
var e1 = $(this);
var scrollY = this.scrollHeight;
e1.scrollTop(scrollY);
e1.parent().queue(function(next) {
e1.scrollTop(scrollY);
next();
});
},
resizable: false,
closeOnEscape: true,
width: '650',
height: '500',
minWidth: '500',
minHeight: '500'
}).dialog('open');
});
</script>
As you can see, I tried with the open: function... stuff, but that doesn't do the trick.
Did I miss something?
Found the solution:
I removed the scrollY variable and replaced it for 0 (zero).
I have the flowing jquery code for a dialog
$(function () {
$("#WebcamPopup").dialog({
autoOpen: false,
height: 500,
width: '80%',
resizable: false,
position: "center",
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 500
}
});
$(".ui-dialog-titlebar").hide();
$("#OpenWebcamPopup").click(function () {
$("#WebcamPopup").dialog("open");
});
});
and the flowing code for html
<input id="OpenWebcamPopup" value="webcam" type="button" />
<div id="WebcamPopup" title="webcam">
....
</div>
I test this in an empty page and its work, but when I include a jquery file to the page the dialog not work correctly, which mean that there are some conflicts between the jquery file and the above jquery code. I try to edit the jquery file, but the codes in this file is very complex to understand
How can I solve this problem ?
I have a dialog like this
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="opener1">Open Dialog</button>
<button id="opener2">Open Dialog</button>
My script is as follows
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener1").click(function () {
$('#myIframe').src = 'http://www.w3schools.com';
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').src = 'http://www.google.com';
$("#dialog").dialog("open");
return false;
});
});
I want to set the url of the iframe dynamically before the dialog is displayed.
I tried the above code, but not working
You can Try this
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels',
close: function( event, ui ) {
$('#myIframe').attr('src', '');
}
});
$("#opener1").click(function () {
$('#myIframe').attr('src', 'http://www.w3schools.com');
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').attr('src', 'http://www.example.com/');
$("#dialog").dialog("open");
return false;
});
});
While closing the dialog box just simply set the iframe src as empty
Demo : http://jsfiddle.net/94KUB/3/
Try this,
$('#myIframe')[0].src = 'http://www.w3schools.com';
or use attr() like,
$('#myIframe').attr('src','http://www.google.com');
Demo
You can't set the source directly. You have to change the iframe's src attribute like this:
$('#myIframe').attr('src','http://www.w3schools.com');