Develop Reference

Jquery .load() works locally but not on the server

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>

Not able to show tags using /xoxco/jQuery-Tags-Input.*

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.

jQuery .attr() not work on jQuery.dialog

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');
});

Open jQuery Dialog from dynamically added element

I add content to my page dynamically (adding rows to a table).
I want that a modal dialog with content from a foreign URL will be opened by clicking on the table row.
That is what I have. The dialog will open, but without content...
newRow.onclick = function() {
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
};

If I understand your question correctly, your problem is not that your click event is failing (as the answers above have addressed) but simply the fact that nothing loads into the dialog that is displayed?
I just tried your code example and I think it's a security issue with jQuery not wanting to load the www.google.com, since it's from a different domain. It works fine when I use a url that points to some content from the same domain. Did you try that yet?

If the element that's triggering the action has been dynamically added to the DOM, you'll need to use the "live" event of jQuery: http://api.jquery.com/live/
For instance:
$("newRowSelector").live("click", function(){
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
});

If it is a newly added element then you need to delegate the event to the parent element so that the click event shall be attached to the newly added row,,
$('table').on('tr' , 'click', function() {
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
});

HTML:
<input type="button" id="add-row" value="Add row" /><br />
<table id="my-table">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
<div id="detail-popup">
<iframe>temp</iframe>
</div>​
jQuery:
$('#detail-popup').dialog({
modal: true,
open: function (event, ui)
{
$(this).find('iframe').attr('src', 'http://www.microsoft.com');
},
autoOpen: false,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false
});
$('#add-row').click(function() {
$('#my-table').append('<tr><td>New Row</td></tr>');
});
$('#my-table').on('click', 'tr', function() {
$('#detail-popup').dialog('open');
});​
Few notes:
You'll want to use .on as .live is deprecated as of jQuery 1.7.
You'll need to load an external site into an iframe, or load it server side, then into your modal dialog div.
The Google homepage has some scripts to not allow you to load www.google.com into an iframe. I know people talk about it on SO a lot, but I'm not sure if there is a workaround. As a result, I'm loading www.microsoft.com in my example.
I added an id to the table, just to make things more explicit when using the .on function.
Fiddle: http://jsfiddle.net/gromer/YEs9R/1/

Jquery Dialog..What am I doing wrong?

I am not sure what I am doing wrong. The dialog box comes but it does not follow any of the settings I specified.
function voteToday(id,userid){
$(".pleaseLogin").dialog({
autoOpen:false,
bgiframe: true,
resizable: false,
width:200,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$(".pleaseLogin").dialog('open');
}

You generate two different dialogs, one doesn't open but has options, one does open but has no options.
If you give more information where you got this dialog from, I could answer how to fix it.
EDIT
I was wrong, but found out that this code works fine. The only option that doesn't seem to work is autoOpen: false, but you open the box after you give that option.
function voteToday(id,userid){
$(".pleaseLogin").dialog('open');
}
$(document).ready(function(){
$(".pleaseLogin").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
width:500,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$('.something').click(voteToday);
});

why not use the autoOpen: true setting? seems like the problem stems from calling .dialog() twice. You'll want to create the dialog when the DOM is ready, and then simply call the open method on it within your voteToday function.