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.

using jquery dialog multiple times with slightly different parameters

I have a site in which there are alot of confirm pages and need for a dialog window. Im am wondering if there is a better way to write my code so that i dont have to spell out all of the dialog parameters every single time. Each dialog may have 1 thing different. usually the complete button is different function.
for example:
$('#dialogA').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR A(possible print results of something)
}
}
});
and another
$('#dialogB').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR B (possibly some ajax call)
}
}
});
so the only thing that changes is what the Complete button does. in laymen's terms i guess is I want to set a variable the contains all the dialog parameters....

Extend jQuery:
(function ($) {
$.fn.extend({
confirmDialog: function (options) {
var defaults = {
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
};
var options = $.extend(defaults, options);
$(this).dialog(options);
}
}
})(jQuery);
and call it like this:
$('#dialogB').dialog({Complete: function() { … }; });
You can also override the defaults when call the dialog...

How to reload the src of an iframe contained jquery dialog each time the dialog is opend?

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

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.