I have succeeded in opening a html page in a jQuery dialogbox. I have also passed a data called 'vendorid' to it, but do not know how to retrieve it in the html page that opens.
$('#btnShowSupplierStats').click(function () {
showUrlInDialog('../supplierstats.htm?vendorId=' + $(this).attr('vendorId')); return false;
//showUrlInDialog('../Default2.aspx'); return false;
});
function showUrlInDialog(url) {
var vid = $(this).attr('vendorId')
var tag = $("<div id='statsDiv' vid ='"+ vid +"'></div>");
$.ajax({
url: url,
success: function (data) {
tag.html(data).dialog({ show: "fadein", hide: "fadeout",
modal: true, minHeight: 550, minWidth: 800, autoOpen: false,
close: function (event, ui) { $(this).remove(); }, buttons: [{
text: "Close", click: function () { $(this).dialog('close');
return false; } }] }).data("vendorid", vid).dialog('open');
return false;
}
});
}
UPDATE: The answer from Farrukh would do this job ( i.e. second option he mentioned, since I am using a 100% client-side approach). But I did not store the data to be passed in a hiddent field. Instead I used the following approach which also works always:
When you are about to open the dialog through jQuery, just before this, set the attribute for the button which is the opener of dialog. In my case, I set an attribute called 'vendorid' on this button. Let's say the id of the opener button is 'btnOpenVendorDialog'. So need to use the following code.
$('#btnOpenVendorDialog').attr('vendorid', 'Vendor1234');
//open your dialog here ....
2.Then, in the html page that opens in dialog window, I can easily retrieve this attribute without any problems.
var vid = $('#btnOpenVendorDialog').attr('vendorid');
THAT's IT. YOU ARE ALL READY TO do whatever you want with this passed data.
There are two ways to do this:
Use server side and get the passed data in post or get(in your case vendor ID is get) and use it to populate a hidden element or data-vendorID attribute of any available element.
If you are using javascript then data vendorID that you have passed as vid is available after success function so place it in as a hidden input field or place it as a data-vendor-id on one of the other DOM elements and access it from there.
Related
I have a AJAX select2 drop-down menu set up to do infinite paging. What'd I'd like to do is go ahead and load the first page of results in the background so that as soon as the user clicks the drop-down, they have a set of options immediately, instead of waiting on the initial AJAX call.
When I search Google for how to do this, I only see results about trying to set an initial selection, which isn't what I want to do. I just want to pre-load the first page of results from my endpoint so the user sees data immediately instead on waiting for the AJAX call to return. Is this even possible?
My select2 setup code is below:
$(".my-class-identifier").select2({
ajax: {
cache: true,
dataType: "json",
delay: 500,
data: function(params, page) {
return {
name: params,
otherParams: $(this).data("other-params")
page: page
};
},
results: function(data, page) {
return {
/* The server returns no data after all the pages have been returned. */
more: data && data.length > 0,
results: data
};
},
type: "GET",
url: function() {
if ($(this).data("url")) {
return $(this).data("url");
} else {
return DEFAULT_ENDPOINT;
}
}
},
allowClear: true,
minimumInputLength: 0,
placeholder: "Search for some data..."
});
So what you are looking for is to initialize your select2. Select2 has an initialize option to load your values, it would look something like this:
initSelection: function(element, callback){
callback([
{id:1,text:'one'},
{id:2,text:'two'},
]);
}
Be sure to add this outside your ajax call, but inside your select2.
An example here in JSFiddle
How about in your backend, you check your search string. If the size is zero or the search string is empty, then send back your first-page result. Otherwise, do the search and return the result.
I'm trying to use the jquery ui spinner on forms dynamically inserted through ajax calls.
To handle ajax calls I'm relying on ajaxy.
On success I call this function like so:
response: function(){
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
var State = this.State;
var Action = this;
Action.documentReady($content);
updater(); // THE FUNCTION TO BIND NEW ELEMENTS
return true;
},
Here's the function
function updater(){
$('.spin').spinner();
}
And this works without any problem. But then When I call that same function on "normal" jquery requests (not ajaxy ones), it doesn't work anymore:
$.ajax({
type: "GET",
url: url,
cache: false,
dataType:"json",
success: function(res) {
updateTarget(res,target,animation);
updater();
}
}
});
I really don't see why in one case it is working, while in the other it isn't...
I've figured it out... My error was that I was running updater() after updateTarget(res,target,animation);, which is the function that analyses the json response and attach html elements to the page, while I must run updater() inside updateTarget(res,target,animation); right after the attachment to the page through .html().
anyone know how to open a tooltipDialog from extlib using parameters.
in csjs I find all links in a webapage and bind them to mouseover. using a key in the link I know which link is clicked, I want to send this key to the toolTipDialog so that I can use that to find the document and display document data in the tooltipDialog.
Currently the only way I have found to open a tooltip dialog is by using XSP.openTooltipDialog("tooltipid",'linkid') which does not seem to allow parameters.
any ideas how to resolve this
Hows this?
require(["dijit/TooltipDialog", "dijit/popup",
"dojo/on", "dojo/dom", "dojo/_base/lang"],
function(ready, TooltipDialog, popup, on, dom, lang){
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
contentTemplate: "<p>Key is: {key}</p>",
content: 'empty',
onMouseLeave: function(){
popup.close(myTooltipDialog);
},
onOpen: function(pos) {
this.set("content", lang.replace(this.contentTemplate, this.replaceObject));
}
});
/
query('a.hasSelectorClass').on('mouseover', function(){ //
myTooltipDialog.replaceObject = { //
key : this.innerHTML // (inner text in anchor node)
}
popup.open({
popup: myTooltipDialog,
around: this // anchor
});
});
});
Try it and tell if any errors (untested code) :)
The below code having a selectbox with id='theservice' and a text field with id ='servicename'.This code autocompletes the servicename text field by checking which service is active in the service selectbox.But unfortunately the source string remains the same eventhought the selectbox is changed.
$( "#servicename" ).autocomplete({
source: "index.php?key="+($('#theservice').find('option:selected').val()),
minLength: 2,
});
Thanks a Lot
Probably a delegation issue.
Autocomplete propagation example added
//build the autocomplete function, sans source
$('#servicename').autocomplete({
minLength: 2
});
var theArray = [];
$('body').on('change', 'select', function(){
$.ajax({
url: 'index.php?key='+$(this).val(),
dataType: 'json/jsonp',
success: function(data){
//i don't know what the array you return looks like, but autocomplete expets a key:value relationship
$.each(data, function(key, value){
theArray.push({label: value, value: key});
});
//a custom function to pass the array into
startAutoComplete(theArray);
}
});
});
function startAutoComplete(array){
$('#servicename').autocomplete('option', 'source', array);
}
Using the above code, we instantiate the autocomplete instance, we only identify the parameters we need excluding the source.
We then define an empty array that we can push the data returned from our ajax request into.
In our select function, we pass the value over to the server to be parsed. I don't know if you are expecting JSON/JSONP formatting, so you'll have to change that yourself.
In the success:function(data) we're getting back the request from the server, it would be best if the response was json_encode'ed. Also, when we push the values into the array, it's best to use a key -> value relationship. Autocomplete allows for a label and a value to be accessed like function(event, ui){ //do stuff with ui.item.label / ui.item.value}'
We declare an uninitialized function outside of the scope of document.ready, and pass the array into the function. Within this function, we change the source of the autocomplete.
Hope this all makes sense.
Solved the issue by using the .autocomplete( "option" , optionName , [value] ) method
$( "#servicename" ).autocomplete({
source: "index.php?key="+($('#theservice').find('option:selected').val()),
minLength: 2,
search: function( event, ui ) {
$( "#servicename" ).autocomplete( "option" ,'source' ,'index.php?key="+($('#theservice').find('option:selected').val()));}
});
seems to me that I didn't fully understand the concept behind jquerymobile, because I have no idea how to solve this issue.
What I want to do is load some HTML Content via AJAX, according to location.hash, put it into a new page and load this page.
But if I create a page myself by using the pagebeforechange event, jquerymobile just ignores it, creates its own div and my content won't be displayed.
How do I have to do it?
Edit:
This is how I am currently doing it, but it wont't work.
$(function() {
getPageContent(top.location.href, false);
$(document).bind( "pagebeforechange", function( e, data ) {
getPageContent(data.toPage, true);
});
});
function getPageContent(pageUrl, changedPage) {
var re = /.*\/#(.*)/;
var result;
result = re.exec(pageUrl);
window.page = result[1].substr(0,3);
window.id = result[1].substr(3);
window.ajaxUrl = "request.php?page="+window.page+"&id="+window.id;
$.ajax({
url: window.ajaxUrl,
success: function(data) {
if(data.error) {
alert(data.error);
}
else if(data.data) {
if(changedPage) {
changePage(data.data));
}
else {
$('#content[role="main"]').html(atob(data.data));
setupPage();
}
}
else {
alert("UNKNOWN ERROR: "+data);
}
}
});
}
function changePage(html) {
var div = "<div></div>";
var newPage = $(div).attr("data-role", "page").attr("data-url", window.page+window.id);
var header = $(div).attr("data-role", "header");
var content = $(div).attr("data-role", "content");
var footer = $(div).attr("data-role", "footer");
$("body").append(newPage);
newPage.append(header, content, footer);
content.html(html);
newPage.page();
}
Complete edit of the whole answer:
First. Set your body id to id=body. Then when you want to load the new page and change to it, use an ajax call like this:
$.get(window.ajaxUrl, function(data){
$('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
$('#newPage').html(data); //Loads the html content into the new page.
$.mobile.changePage('#newPage'); //Navigates to the new page.
}
This sends an ajax call with the method GET to the url found in your window.ajaxUrl. If the call is successful, it creates a new page named "newPage", and fills it with the data received from the ajax call. Then redirects to the newly created page.
This jsFiddle shows the basics of how it works. However, it doesn't use any ajax call.
You have to refresh the page with jQueryMobile :
$("#your-page").trigger("create");
--Edit
<script>
$("#thepage").live("pageshow", function(){
$("#thepage).trigger("create");
});
</script>
Change the content of #thepage before 'pageshow' event
It does this for you automatically - just make a regular link to the page and jquery mobile will shwo the loading spinner, load it in the background via ajax, then transition to the new page.
Make sure all your pages are decide with unique IDs and data-role='page'. Check out the start guide here:
http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html