WebBrowserでChosenを更新する

今日は友達から聞かれました、何でselectで値にセットしても反映されないですが？そしてソースを送ってきました。

webBrowser1.Document.GetElementById("product_id").SetAttribute("selectedIndex", "2")

彼は別にプログラマーではないです。ただ自分の商売を便利するためにツールを自分で作ってます。僕は前端開発知識は詳しくないけど、でも調べることができます。そして早速調べてみました。以下のソースを見つかって、彼に送りました。

webBrowser1.Document.GetElementById("product_id").Children[2].SetAttribute("selected", "selected")

すごし時間経ったら、だめって言われました。おかしいと思いながら自分で試してみました。確かにだめでした。選択項目は確か２番目になってますが、ホームページの表示が更新されない。

ホームページのソース調べるところ、以下のソースの見つかりました。

$("#product_id").chosen();

これは何だろ？一応これはjqueryのソースが分かりますが、でもこの関数何やってるのは全くわからない。

そしてキーワード”jquery chosen”で検索して見ました。以下の結果が出てきました。

https://plugins.jquery.com/chosen/

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

なるほど、pluginだ。

そうすると次の二つ問題点が出てきました。

jqueryのchosenは如何やって更新する？
WebBrowserは如何やってjqueryをコールする？

まず一番目の問題点を調べてことろで、以下のコードを見つかりました。

stackoverflow.com

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

NOTE: versions prior to 1.0 used the following:

$('select').trigger("liszt:updated");

次二番目の問題点：

stackoverflow.com

string[] codeString = { String.Format(" {0}('{1}') ", @"$.city.venue.onVenueSelected", result.ToString()) };
this.myBrowser.Document.InvokeScript("eval", codeString);

解決道全て見つかったそうです、早速試してみます。

var item = this.webBrowser1.Document.Body.Document.GetElementById("product_id");
if (item != null)
{
item.Children[2].SetAttribute("selected", "selected");

string codestring = { @"$('product_id').trigger('chosen:updated')" };

var obj = this.webBrowser1.Document.InvokeScript("eval", codestring);
}

だめでした、jqueryのバージョンが古いかもん。古いバージョン更新方式やってまる。

var item = this.webBrowser1.Document.Body.Document.GetElementById("product_id");
if (item != null)
{
item.Children[2].SetAttribute("selected", "selected");

string codestring = { @"$('product_id').trigger('liszt:updated')" };

var obj = this.webBrowser1.Document.InvokeScript("eval", codestring);
}

だめでした。

如何しよう、その後調べても、全く新たな情報が出なかった。やめようと思ったところで、もう一回ホームぺーじのソースを見ました。そして、chosen初期化を注目しました。もしかしたら＃がな？

$("#product_id").chosen();

そしてproduct_idの前に＃を付けて、試しました。

var item = this.webBrowser1.Document.Body.Document.GetElementById("product_id");
if (item != null)
{
item.Children[2].SetAttribute("selected", "selected");

string[] codestring = { @"$('#product_id').trigger('chosen:updated')" };

var obj = this.webBrowser1.Document.InvokeScript("eval", codestring);
}

成功！！！

jqueryとhtmlとも詳しくないですが、今回の機会でいろいろ勉強しました。

※初めての日本語ブログです、日本語も変だと思いましが、ご許してくださいませ。

以上。