Develop Reference

How to trigger an aJax call on page load

This is the function which runs on click by default in somefile of wordpress
jQuery( function($) {
var $container = $('.grid');
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
var filterCategory = $( this ).attr('data-filter-category');
var getQuery = env.AJAX+'?action=get_events&tribe_event_category='+filterValue
$.ajax({
cache : false,
url: getQuery,
success: function(data){
$container.html( data.results )
}
});
});
}(jQuery))
This is the script i am trying to hit in another file of wordpress
jQuery( function($) {
$('.filters-button-group .autoTrigger').trigger('click');
}(jQuery))
Button is triggered but it dosn't perform the functionality which runs after clicking the button.

How do I display a popover next to a jquery's autocomplete dropdown?

I have a page with an input field that has a jquery autocomplete dropdown. Currently, when one of the autocomplete options is hovered over, a div is displayed elsewhere on the page.
$("#MyInputField").autocomplete({
focus: function (e, ui) {
$.ajax({
type: "GET"
url: "/Json/GetMoreAutoCompleteDetails" + ui.item.id,
success: function (result){
$('#SomeDiv').show();
},
}
}
});
I'm trying to replace 'SomeDiv' with a popover window. I've modified the above code like so:
$("#MyInputField").autocomplete({
focus: function (e, ui) {
$.ajax({
type: "GET"
url: "/Json/GetMoreAutoCompleteDetails" + ui.item.id,
success: function (result){
$(ui.item).popover({
'content': function(){
return $('#SomeDiv');
},
'html': true,
'trigger': 'hover'
}
});
},
}
}
});
The HTML for the popover contents is:
<div id="SomeDiv" class="hide">
<div id="somePopoverField"></div>
</div>
This is intended to display a popover next to the autocomplete menu item that's currently being hovered over. However, I know that "ui.item" is incorrect, because it doesn't work. What do I need to target in order to have the popover displayed next to the autocomplete's menu item?

You need to use the open method of jQuery autocomplete as follows
open: function(event, ui) {
var term = $(this).val();
$(this).autocomplete("widget").find(".ui-menu-item")
.popover({
container: 'body',
content: function() {
return $('#SomeDiv').removeClass("hide");
},
html: true,
trigger: 'hover'
});
}
Demo : https://jsfiddle.net/tn2433tu/2/

Close jquery dialog from iFrame with external html

I am trying to close a jQuery ui dialog from an iframe with an external html inside.
My code looks like the following:
JS code in my main html to create the dialog when I click on a button:
function createDialog() {
return $("<div id='personal-popup' class='dialog' title='Copia de archivos'></div>")
.html('<iframe style="border: 0px; " src="copy.html" width="100%" height="100%"></iframe>')
.dialog({
resizable: true,
height: 447.59999990463257,
width: 993.5999999046326,
modal: true
});
}
JS code inside the other html (copy.html)
function copiarArchivos() {
$.mobile.loading('show',{
text: "Copiando",
textVisible: true,
theme: "a",
html: ""
});
var result = [];
var allOptions = $("#select-custom-19");
$("#select-custom-19 option:selected").each(function () {
var $this = $(this);
var selText = $this.text();
$this.prop("selected", false);
result.push(selText);
});
allOptions.selectmenu('refresh', true);
$.ajax ({
url: "php/copia.php",
type: "post",
data: {"params": result},
success: function(response) {
$.mobile.loading('hide');
//I want to close the dialog here when the ajax function success
$(window.parent.document).find("#personal-popup").dialog('close');
}
});
}
I have followed the answer to this question: Close jQuery UI Dialog from Iframe, but it didn´t work for me.
--- EDIT ---
The JS function which is going to be called from the iFrame, allocated in the mane html (index.html)
function closeDialog(){
console.log("Im working!!");
document.getElementById("personal-popup").dialog("close");
}
The JS call from the iframe (copy.html)
$.ajax ({
url: "php/copia.php",
type: "post",
data: {"params": result},
success: function(response) {
$.mobile.loading('hide');
window.parent.closeDialog();
}
});

from inside the iframe you can access window.parent.
This means that in your main frame you could have:
window.closeDialog = function(){//Do stuff}
Anf then in your iframe have:
window.parent.closeDialog();

jQuery - cannot call methods on dialog prior to initialization

This one is really bugging me. I'm getting an error in my console of Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
$( function() {
$('#search_all_notes_input').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
/* Make the Search div a button and open dialog on click */
$( "#search_all_button" ).button().click(function() {
$( "#search_all_notes_input" ).dialog( "open" );
});
});
$('#submit_search_all_button').click( function () {
var searchText = $('#search_all_text').val();
var query = location.search.split('=');
var urlMrn = query[1];
formData = { mnr: urlMRN, search_text: searchText };
console.log(formData);
//$.post('note_search.php', formData, getMatchedNotes(data));
$(this).dialog('close');
});
Any ideas? I'm using a button element inside my dialog div instead of a custom dialog button. Also, the script is loaded at the very end of my HTML page

The problem is you're calling the dialog('close') on the #submit_search_all_button button, not the #search_all_notes_input element that you originally created a dialog on.
Instead of $(this).dialog('close');, use this:
$('#search_all_notes_input').dialog('close');

how to create a pop up in mvc 4?

So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.

Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.

first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.